mirror of https://github.com/Fabio286/antares.git
refactor: filter functions as composable
This commit is contained in:
parent
35c54aee84
commit
aaff4cf4fe
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
});
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -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');
|
||||
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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 &&
|
||||
|
|
|
@ -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
|
||||
};
|
||||
}
|
Loading…
Reference in New Issue