From edb6e9ce61f80f59af84c99a4ba75cb6c366d4ea Mon Sep 17 00:00:00 2001 From: alexm Date: Tue, 24 Sep 2024 09:57:05 +0200 Subject: [PATCH 1/9] feat(TravelList): add daysOnward --- src/components/VnTable/VnFilter.vue | 10 ++++++---- src/components/VnTable/VnTable.vue | 22 ++++++++++++++++++++-- src/components/ui/VnFilterPanel.vue | 11 ++++++++--- src/composables/useArrayData.js | 3 ++- src/i18n/locale/en.yml | 1 + src/i18n/locale/es.yml | 1 + src/pages/Travel/TravelList.vue | 18 +++++++++++++++++- 7 files changed, 55 insertions(+), 11 deletions(-) diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue index fd3c29fa3..c796b8827 100644 --- a/src/components/VnTable/VnFilter.vue +++ b/src/components/VnTable/VnFilter.vue @@ -10,8 +10,6 @@ import VnInputDate from 'components/common/VnInputDate.vue'; import VnInputTime from 'components/common/VnInputTime.vue'; import VnTableColumn from 'components/VnTable/VnColumn.vue'; -defineExpose({ addFilter }); - const $props = defineProps({ column: { type: Object, @@ -30,6 +28,9 @@ const $props = defineProps({ default: 'params', }, }); + +defineExpose({ addFilter, props: $props }); + const model = defineModel(undefined, { required: true }); const arrayData = useArrayData($props.dataKey, { searchUrl: $props.searchUrl }); const columnFilter = computed(() => $props.column?.columnFilter); @@ -115,11 +116,12 @@ const components = { rawSelect: selectComponent, }; -async function addFilter(value) { +async function addFilter(value, name) { value ??= undefined; if (value && typeof value === 'object') value = model.value; value = value === '' ? undefined : value; - let field = columnFilter.value?.name ?? $props.column.name; + let field = columnFilter.value?.name ?? $props.column.name ?? name; + console.log('field: ', field); if (columnFilter.value?.inWhere) { if (columnFilter.value.alias) field = columnFilter.value.alias + '.' + field; diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue index 2c9526ec0..ca6246137 100644 --- a/src/components/VnTable/VnTable.vue +++ b/src/components/VnTable/VnTable.vue @@ -97,6 +97,10 @@ const $props = defineProps({ type: String, default: '90vh', }, + translationPrefix: { + type: String, + default: null, + }, }); const { t } = useI18n(); const stateStore = useStateStore(); @@ -117,6 +121,7 @@ const showForm = ref(false); const splittedColumns = ref({ columns: [] }); const columnsVisibilitySkipped = ref(); const createForm = ref(); +const tableFilterRef = ref([]); const tableModes = [ { @@ -219,7 +224,7 @@ function splitColumns(columns) { if (col.cardVisible) splittedColumns.value.cardVisible.push(col); if ($props.isEditable && col.disable == null) col.disable = false; if ($props.useModel && col.columnFilter != false) - col.columnFilter = { ...col.columnFilter, inWhere: true }; + col.columnFilter = { inWhere: true, ...col.columnFilter }; splittedColumns.value.columns.push(col); } // Status column @@ -320,6 +325,13 @@ function handleOnDataSaved(_, res) { :search-url="searchUrl" :redirect="!!redirect" @set-user-params="setUserParams" + :disable-submit-event="true" + @remove=" + (key) => + tableFilterRef + .find((f) => f.props?.column.name == key) + ?.addFilter() + " > + - { for (const key of Object.keys(userParams.value)) { const value = userParams.value[key]; if (value == null || ($props.hiddenTags || []).includes(key)) continue; - tagList.push({ label: key, value }); + tagList.push({ label: aliasField(key), value }); } return tagList; }); @@ -200,6 +200,11 @@ function sanitizer(params) { } return params; } + +function aliasField(field) { + const split = field.split('.'); + return split[1] ?? split[0]; +}