fix(nc-gui): introduce nonDeletedFilters

packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue

@@ -43,7 +43,7 @@ const reloadDataHook = inject(ReloadViewDataHookInj)!
 const { $e } = useNuxtApp()
 
 const { nestedFilters } = useSmartsheetStoreOrThrow()
-const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGroup, sync } = useViewFilters(
+const { filters, nonDeletedFilters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGroup, sync } = useViewFilters(
   activeView,
   parentId,
   computed(() => autoSave),
@@ -92,7 +92,7 @@ watch(
 )
 
 watch(
-  () => filters.value.length,
+  () => nonDeletedFilters.value.length,
   (length) => {
     emit('update:filtersLength', length ?? 0)
   },

packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue

@@ -29,7 +29,7 @@ const { $e } = useNuxtApp()
 const { nestedFilters } = useSmartsheetStoreOrThrow()
 
 // todo: avoid duplicate api call by keeping a filter store
-const { filters, loadFilters } = useViewFilters(
+const { nonDeletedFilters, loadFilters } = useViewFilters(
   activeView,
   undefined,
   computed(() => true),
@@ -45,7 +45,7 @@ watch(
   async (viewId) => {
     if (viewId) {
       await loadFilters()
-      filtersLength.value = filters.value.length || 0
+      filtersLength.value = nonDeletedFilters.value.length || 0
     }
   },
   { immediate: true },

packages/nc-gui/composables/useViewFilters.ts

@@ -54,6 +54,10 @@ export function useViewFilters(
     },
   })
 
+  // when a filter is deleted with auto apply disabled, the status is marked as 'delete'
+  // nonDeletedFilters are those filters that are not deleted physically & virtually
+  const nonDeletedFilters = computed(() => filters.value.filter((f) => !f?.status || f.status !== 'delete'))
+
   const placeholderFilter: Filter = {
     comparison_op: 'eq',
     value: '',
@@ -129,13 +133,11 @@ export function useViewFilters(
         if (!autoApply?.value) {
           filter.status = 'delete'
           // if auto-apply enabled invoke delete api and remove from array
-          filters.value.splice(i, 1)
+          // no splice is required here
         } else {
           try {
             await $api.dbTableFilter.delete(filter.id)
-
             reloadData?.()
-
             filters.value.splice(i, 1)
           } catch (e: any) {
             console.log(e)
@@ -146,7 +148,7 @@ export function useViewFilters(
       } else {
         filters.value.splice(i, 1)
       }
-      $e('a:filter:delete', { length: filters.value.length })
+      $e('a:filter:delete', { length: nonDeletedFilters.value.length })
     }
   }
 
@@ -223,5 +225,5 @@ export function useViewFilters(
     },
   )
 
-  return { filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup }
+  return { filters, nonDeletedFilters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup }
 }