refactor: filter functions as composable

This commit is contained in:
Fabio Di Stasio 2022-08-03 11:10:16 +02:00
parent 35c54aee84
commit aaff4cf4fe
11 changed files with 72 additions and 60 deletions

View File

@ -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>

View File

@ -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;
});

View File

@ -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(() => {

View File

@ -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(() => {

View File

@ -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');

View File

@ -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">

View File

@ -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);

View File

@ -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;

View File

@ -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 &&

View File

@ -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
};
}