diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue index 364ba74d20..8d13d78556 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, @@ -250,7 +252,7 @@ const updateFilterValue = (value: string, filter: Filter, index: number) => { defineExpose({ applyChanges, - parentId: parentId?.value, + parentId, }) const scrollToBottom = () => { @@ -355,22 +357,35 @@ watch( }, ) +const visibleFilters = computed(() => filters.value.filter((filter) => filter.status !== 'delete')) + const isLogicalOpChangeAllowed = computed(() => { - return new Set(filters.value.slice(1).map((filter) => filter.logical_op)).size > 1 + return new Set(visibleFilters.value.slice(1).map((filter) => filter.logical_op)).size > 1 }) // when logical operation is updated, update all the siblings with the same logical operation only if it's in locked state const onLogicalOpUpdate = async (filter: Filter, index: number) => { - if (index === 1 && filters.value.slice(2).every((siblingFilter) => siblingFilter.logical_op !== filter.logical_op)) { + if (index === 1 && visibleFilters.value.slice(2).every((siblingFilter) => siblingFilter.logical_op !== filter.logical_op)) { await Promise.all( - filters.value.slice(2).map(async (siblingFilter, i) => { + visibleFilters.value.slice(2).map(async (siblingFilter, i) => { siblingFilter.logical_op = filter.logical_op await saveOrUpdate(siblingFilter, i + 2, false, false, true) }), ) } - await filterUpdateCondition(filter, index) + 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, + }, +)