diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue index 155782497e..05d9fc3e62 100644 --- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue +++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue @@ -12,6 +12,7 @@ interface Props { webHook?: boolean draftFilter?: Partial } + const props = withDefaults(defineProps(), { nestedLevel: 0, autoSave: true, @@ -21,13 +22,14 @@ const props = withDefaults(defineProps(), { webHook: false, }) -const emit = defineEmits(['update:filtersLength', 'update:draftFilter']) +const emit = defineEmits(['update:filtersLength', 'update:draftFilter', 'update:modelValue']) const excludedFilterColUidt = [UITypes.QrCode, UITypes.Barcode] const draftFilter = useVModel(props, 'draftFilter', emit) +const modelValue = useVModel(props, 'modelValue', emit) -const { nestedLevel, parentId, autoSave, hookId, modelValue, showLoading, webHook } = toRefs(props) +const { nestedLevel, parentId, autoSave, hookId, showLoading, webHook } = toRefs(props) const nested = computed(() => nestedLevel.value > 0) @@ -66,7 +68,7 @@ const { types, } = useViewFilters( activeView, - parentId?.value, + parentId, computed(() => autoSave.value), () => reloadDataHook.trigger({ shouldShowLoading: showLoading.value, offset: 0 }), modelValue.value || nestedFilters.value, @@ -204,8 +206,10 @@ const applyChanges = async (hookId?: string, nested = false, isConditionSupporte if (!localNestedFilters.value?.length) return + await nextTick() + for (const nestedFilter of localNestedFilters.value) { - if (nestedFilter.parentId) { + if (nestedFilter.parentId?.value) { await nestedFilter.applyChanges(hookId, true) } } @@ -250,7 +254,7 @@ const updateFilterValue = (value: string, filter: Filter, index: number) => { defineExpose({ applyChanges, - parentId: parentId?.value, + parentId, }) const scrollToBottom = () => { @@ -373,6 +377,17 @@ const onLogicalOpUpdate = async (filter: Filter, index: number) => { } await saveOrUpdate(filter, index) } + +// watch for changes in filters and update the modelValue +watch( + filters, + () => { + if (modelValue.value !== filters.value) modelValue.value = filters.value + }, + { + immediate: true, + }, +)