diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue index fd3c29fa3..b17fd4407 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,11 @@ 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; 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 52cd3ed47..10b55f9f5 100644 --- a/src/components/VnTable/VnTable.vue +++ b/src/components/VnTable/VnTable.vue @@ -98,6 +98,10 @@ const $props = defineProps({ type: String, default: '90vh', }, + chipLocale: { + type: String, + default: null, + }, footer: { type: Boolean, default: false, @@ -122,6 +126,7 @@ const showForm = ref(false); const splittedColumns = ref({ columns: [] }); const columnsVisibilitySkipped = ref(); const createForm = ref(); +const tableFilterRef = ref([]); const tableModes = [ { @@ -224,7 +229,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 @@ -326,6 +331,13 @@ function handleOnDataSaved(_) { :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; }); @@ -203,6 +203,11 @@ function sanitizer(params) { } return params; } + +function aliasField(field) { + const split = field.split('.'); + return split[1] ?? split[0]; +}