refactor: filter functions as composable

src/renderer/components/BaseUploadInput.vue

@@ -4,7 +4,7 @@
          <i class="mdi mdi-folder-open mr-1" />{{ message }}
       </span>
       <span class="text-ellipsis file-uploader-value">
-         {{ lastPart(modelValue) }}
+         {{ lastPart(modelValue, 19) }}
       </span>
       <i
          v-if="modelValue"
@@ -24,6 +24,9 @@
 
 <script setup lang="ts">
 import { uidGen } from 'common/libs/uidGen';
+import { useFilters } from '@/composables/useFilters';
+
+const { lastPart } = useFilters();
 
 defineProps({
    message: {
@@ -43,15 +46,6 @@ const id = uidGen();
 const clear = () => {
    emit('clear');
 };
-
-const lastPart = (string: string) => {
-   if (!string) return '';
-
-   string = string.split(/[/\\]+/).pop();
-   if (string.length >= 19)
-      string = `...${string.slice(-19)}`;
-   return string;
-};
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/ForeignKeySelect.vue

@@ -21,6 +21,7 @@ import { useWorkspacesStore } from '@/stores/workspaces';
 import { TEXT, LONG_TEXT } from 'common/fieldTypes';
 import BaseSelect from '@/components/BaseSelect.vue';
 import { TableField } from 'common/interfaces/antares';
+import { useFilters } from '@/composables/useFilters';
 
 const props = defineProps({
    modelValue: [String, Number],
@@ -35,6 +36,7 @@ const emit = defineEmits(['update:modelValue', 'blur']);
 
 const { addNotification } = useNotificationsStore();
 const workspacesStore = useWorkspacesStore();
+const { cutText } = useFilters();
 
 const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
 
@@ -53,7 +55,7 @@ const foreigns = computed(() => {
    if (!isValidDefault.value)
       list.push({ value: props.modelValue, label: props.modelValue === null ? 'NULL' : props.modelValue });
    for (const row of foreignList.value)
-      list.push({ value: row.foreign_column, label: `${row.foreign_column} ${cutText('foreign_description' in row ? ` - ${row.foreign_description}` : '')}` });
+      list.push({ value: row.foreign_column, label: `${row.foreign_column} ${cutText('foreign_description' in row ? ` - ${row.foreign_description}` : '', 15)}` });
    return list;
 });
 
@@ -61,11 +63,6 @@ const onChange = (opt: HTMLSelectElement) => {
    emit('update:modelValue', opt.value);
 };
 
-const cutText = (val: string) => {
-   if (typeof val !== 'string') return val;
-   return val.length > 15 ? `${val.substring(0, 15)}...` : val;
-};
-
 watch(() => props.modelValue, () => {
    currentValue.value = props.modelValue;
 });

src/renderer/components/ModalAskParameters.vue

@@ -52,6 +52,9 @@ import { computed, PropType, Ref, ref } from 'vue';
 import { NUMBER, FLOAT } from 'common/fieldTypes';
 import { FunctionInfos, RoutineInfos } from 'common/interfaces/antares';
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import { useFilters } from '@/composables/useFilters';
+
+const { wrapNumber } = useFilters();
 
 const props = defineProps({
    localRoutine: Object as PropType<RoutineInfos | FunctionInfos>,
@@ -106,11 +109,6 @@ const onKey = (e: KeyboardEvent) => {
       closeModal();
 };
 
-const wrapNumber = (num: number) => {
-   if (!num) return '';
-   return `(${num})`;
-};
-
 window.addEventListener('keydown', onKey);
 
 setTimeout(() => {

src/renderer/components/ModalFakerRows.vue

@@ -109,6 +109,9 @@ import { useFocusTrap } from '@/composables/useFocusTrap';
 import Tables from '@/ipc-api/Tables';
 import FakerSelect from '@/components/FakerSelect.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
+import { useFilters } from '@/composables/useFilters';
+
+const { wrapNumber } = useFilters();
 
 const props = defineProps({
    tabUid: [String, Number],
@@ -267,11 +270,6 @@ const onKey = (e: KeyboardEvent) => {
       closeModal();
 };
 
-const wrapNumber = (num: number) => {
-   if (!num) return '';
-   return `(${num})`;
-};
-
 window.addEventListener('keydown', onKey);
 
 onMounted(() => {

src/renderer/components/ModalHistory.vue

@@ -100,14 +100,15 @@
 <script setup lang="ts">
 import { Component, computed, ComputedRef, onBeforeUnmount, onMounted, onUpdated, Prop, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import * as moment from 'moment';
 import { ConnectionParams } from 'common/interfaces/antares';
 import { HistoryRecord, useHistoryStore } from '@/stores/history';
 import { useConnectionsStore } from '@/stores/connections';
 import { useFocusTrap } from '@/composables/useFocusTrap';
+import { useFilters } from '@/composables/useFilters';
 import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue';
 
 const { t } = useI18n();
+const { formatDate } = useFilters();
 
 const { getHistoryByWorkspace, deleteQueryFromHistory } = useHistoryStore();
 const { getConnectionName } = useConnectionsStore();
@@ -164,7 +165,6 @@ const resizeResults = () => {
    }
 };
 
-const formatDate = (date: Date) => moment(date).isValid() ? moment(date).format('HH:mm:ss - YYYY/MM/DD') : date;
 const refreshScroller = () => resizeResults();
 const closeModal = () => emit('close');
 

src/renderer/components/ModalProcessesListRow.vue

@@ -12,7 +12,7 @@
             class="cell-content"
             :class="`${isNull(col)} type-${typeof col === 'number' ? 'int' : 'varchar'}`"
             @dblclick="dblClick(cKey)"
-         >{{ cutText(col) }}</span>
+         >{{ cutText(col, 250) }}</span>
       </div>
       <ConfirmModal
          v-if="isInfoModal"
@@ -48,6 +48,9 @@
 import { Ref, ref } from 'vue';
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
 import TextEditor from '@/components/BaseTextEditor.vue';
+import { useFilters } from '@/composables/useFilters';
+
+const { cutText } = useFilters();
 
 const props = defineProps({
    row: Object
@@ -79,11 +82,6 @@ const dblClick = (col: string) => {
    isInfoModal.value = true;
 };
 
-const cutText = (val: string | number) => {
-   if (typeof val !== 'string') return val;
-   return val.length > 250 ? `${val.substring(0, 250)}[...]` : val;
-};
-
 </script>
 
 <style lang="scss">

src/renderer/components/Workspace.vue

@@ -31,7 +31,7 @@
                   >
                      <i class="mdi mdi-18px mdi-code-tags mr-1" />
                      <span>
-                        <span>{{ cutText(element.content || 'Query') }} #{{ element.index }}</span>
+                        <span>{{ cutText(element.content || 'Query', 20, true) }} #{{ element.index }}</span>
                         <span
                            class="btn btn-clear"
                            :title="$t('word.close')"
@@ -48,7 +48,7 @@
                   >
                      <i class="mdi mdi-18px mr-1" :class="element.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
                      <span :title="`${$t('word.data').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
-                        <span class=" text-italic">{{ cutText(element.elementName) }}</span>
+                        <span class=" text-italic">{{ cutText(element.elementName, 20, true) }}</span>
                         <span
                            class="btn btn-clear"
                            :title="$t('word.close')"
@@ -61,7 +61,7 @@
                   <a v-else-if="element.type === 'data'" class="tab-link">
                      <i class="mdi mdi-18px mr-1" :class="element.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
                      <span :title="`${$t('word.data').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
-                        {{ cutText(element.elementName) }}
+                        {{ cutText(element.elementName, 20, true) }}
                         <span
                            class="btn btn-clear"
                            :title="$t('word.close')"
@@ -95,7 +95,7 @@
                   >
                      <i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" />
                      <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
-                        {{ cutText(element.elementName) }}
+                        {{ cutText(element.elementName, 20, true) }}
                         <span
                            class="btn btn-clear"
                            :title="$t('word.close')"
@@ -112,7 +112,7 @@
                   >
                      <i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" />
                      <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.view`)}`">
-                        {{ cutText(element.elementName) }}
+                        {{ cutText(element.elementName, 20, true) }}
                         <span
                            class="btn btn-clear"
                            :title="$t('word.close')"
@@ -232,7 +232,7 @@
                   >
                      <i class="mdi mdi-18px mdi-tune-vertical-variant mr-1" />
                      <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
-                        <span class=" text-italic">{{ cutText(element.elementName) }}</span>
+                        <span class=" text-italic">{{ cutText(element.elementName, 20, true) }}</span>
                         <span
                            class="btn btn-clear"
                            :title="$t('word.close')"
@@ -249,7 +249,7 @@
                   >
                      <i class="mdi mdi-18px mdi-tune-vertical-variant mr-1" />
                      <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
-                        {{ cutText(element.elementName) }}
+                        {{ cutText(element.elementName, 20, true) }}
                         <span
                            class="btn btn-clear"
                            :title="$t('word.close')"
@@ -485,6 +485,7 @@ import Connection from '@/ipc-api/Connection';
 import { useWorkspacesStore, WorkspaceTab } from '@/stores/workspaces';
 import { useConsoleStore } from '@/stores/console';
 import { ConnectionParams } from 'common/interfaces/antares';
+import { useFilters } from '@/composables/useFilters';
 
 import WorkspaceEmptyState from '@/components/WorkspaceEmptyState.vue';
 import WorkspaceExploreBar from '@/components/WorkspaceExploreBar.vue';
@@ -511,6 +512,7 @@ import WorkspaceTabPropsScheduler from '@/components/WorkspaceTabPropsScheduler.
 import ModalProcessesList from '@/components/ModalProcessesList.vue';
 import ModalDiscardChanges from '@/components/ModalDiscardChanges.vue';
 
+const { cutText } = useFilters();
 const workspacesStore = useWorkspacesStore();
 
 const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
@@ -640,14 +642,6 @@ const addWheelEvent = () => {
    }
 };
 
-const cutText = (string: string) => {
-   const limit = 20;
-   const escapedString = string.replace(/\s{2,}/g, ' ');
-   if (escapedString.length > limit)
-      return `${escapedString.substr(0, limit)}...`;
-   return escapedString;
-};
-
 (async () => {
    await addWorkspace(props.connection.uid);
    const isInitiated = await Connection.checkConnection(props.connection.uid);

src/renderer/components/WorkspaceTabQueryTableRow.vue

@@ -19,7 +19,7 @@
                class="cell-content"
                :class="`${isNull(col)} ${typeClass(fields[cKey].type)}`"
                @dblclick="editON(cKey)"
-            >{{ cutText(typeFormat(col, fields[cKey].type.toLowerCase(), fields[cKey].length) as string) }}</span>
+            >{{ cutText(typeFormat(col, fields[cKey].type.toLowerCase(), fields[cKey].length) as string, 250) }}</span>
             <ForeignKeySelect
                v-else-if="isForeignKey(cKey)"
                v-model="editingContent"
@@ -221,9 +221,11 @@ import TextEditor from '@/components/BaseTextEditor.vue';
 import BaseMap from '@/components/BaseMap.vue';
 import ForeignKeySelect from '@/components/ForeignKeySelect.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
+import { useFilters } from '@/composables/useFilters';
 import { QueryForeign, TableField } from 'common/interfaces/antares';
 
 const { t } = useI18n();
+const { cutText } = useFilters();
 
 const props = defineProps({
    row: Object,
@@ -546,11 +548,6 @@ const onKey = (e: KeyboardEvent) => {
    }
 };
 
-const cutText = (val: string) => {
-   if (typeof val !== 'string') return val;
-   return val.length > 128 ? `${val.substring(0, 128)}[...]` : val;
-};
-
 const typeFormat = (val: string | number | Date | number[], type: string, precision?: number | false) => {
    if (!val) return val;
 

src/renderer/components/WorkspaceTabTable.vue

@@ -189,6 +189,9 @@ import WorkspaceTabTableFilters from '@/components/WorkspaceTabTableFilters.vue'
 import ModalFakerRows from '@/components/ModalFakerRows.vue';
 import { ConnectionParams } from 'common/interfaces/antares';
 import { TableFilterClausole } from 'common/interfaces/tableApis';
+import { useFilters } from '@/composables/useFilters';
+
+const { localeString } = useFilters();
 
 const { t } = useI18n();
 
@@ -398,11 +401,6 @@ const updateFilters = (clausoles: TableFilterClausole[]) => {
    getTableData();
 };
 
-const localeString = (val: number | null) => {
-   if (val !== null)
-      return val.toLocaleString();
-};
-
 const hasApproximately = computed(() => {
    return results.value.length &&
       results.value[0].rows &&

src/renderer/composables/useFilters.ts

@@ -0,0 +1,38 @@
+import * as moment from 'moment';
+
+export function useFilters () {
+   const cutText = (string: string, length: number, escape?: boolean) => {
+      if (typeof string !== 'string') return string;
+      if (escape) string = string.replace(/\s{2,}/g, ' ');
+      return string.length > length ? `${string.substring(0, length)}...` : string;
+   };
+
+   const lastPart = (string: string, length: number) => {
+      if (!string) return '';
+
+      string = string.split(/[/\\]+/).pop();
+      if (string.length >= length)
+         string = `...${string.slice(-length)}`;
+      return string;
+   };
+
+   const formatDate = (date: Date) => moment(date).isValid() ? moment(date).format('HH:mm:ss - YYYY/MM/DD') : date;
+
+   const localeString = (number: number | null) => {
+      if (number !== null)
+         return number.toLocaleString();
+   };
+
+   const wrapNumber = (num: number) => {
+      if (!num) return '';
+      return `(${num})`;
+   };
+
+   return {
+      cutText,
+      formatDate,
+      wrapNumber,
+      lastPart,
+      localeString
+   };
+}