From 2cf8399f0fd8b6d06e99820c843a5012992f4376 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 12 Oct 2022 16:29:09 +0800
Subject: [PATCH] fix(nc-gui): introduce nonDeletedFilters

---
 .../components/smartsheet/toolbar/ColumnFilter.vue   |  4 ++--
 .../smartsheet/toolbar/ColumnFilterMenu.vue          |  4 ++--
 packages/nc-gui/composables/useViewFilters.ts        | 12 +++++++-----
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
index 7203e5062e..37fddd6e24 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
+++ b/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)
   },
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
index 37bca9be79..df14f1e643 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
+++ b/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 },
diff --git a/packages/nc-gui/composables/useViewFilters.ts b/packages/nc-gui/composables/useViewFilters.ts
index 2c0cf8c7ac..04bf6651db 100644
--- a/packages/nc-gui/composables/useViewFilters.ts
+++ b/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 }
 }