From ac046a24a941c975ec36aa303fe0624d9a1021ab Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 7 Aug 2022 14:29:03 +0530
Subject: [PATCH] filter(gui-v2): correction in filter delete

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |  1 -
 .../smartsheet-toolbar/ColumnFilter.vue       |  2 +-
 .../nc-gui-v2/composables/useViewFilters.ts   | 27 +++++++++++--------
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 1b71a9a17f..0e5864cd54 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -7,7 +7,6 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    '(fix(gui-v2)': block user from editing pk and ai values)
     AAlert: typeof import('ant-design-vue/es')['Alert']
     AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
     AButton: typeof import('ant-design-vue/es')['Button']
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 87d4bb03c8..8cc8d66b30 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -124,7 +124,7 @@ defineExpose({
               v-if="!filter.readOnly"
               :key="i"
               small
-              class="nc-filter-item-remove-btn text-grey"
+              class="nc-filter-item-remove-btn cursor-pointer text-grey"
               @click.stop="deleteFilter(filter, i)"
             />
             <span v-else :key="`${i}dummy`" />
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index 11b633fd7e..1007b3ba92 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -43,19 +43,24 @@ export function useViewFilters(
   }
 
   const deleteFilter = async (filter: FilterType & { status: string }, i: number) => {
+    // if shared or sync permission not allowed simply remove it from array
     if (shared || !isUIAllowed('filterSync')) {
-      const _filters = unref(filters.value)
-      _filters.splice(i, 1)
-      filters.value = _filters
-    } else if (filter.id) {
-      if (!autoApply?.value) {
-        filter.status = 'delete'
+      filters.value.splice(i, 1)
+      reloadData?.()
+    } else {
+      if (filter.id) {
+        // if auto-apply disabled mark it as disabled
+        if (!autoApply?.value) {
+          filter.status = 'delete'
+          // if auto-apply enabled invoke delete api and remove from array
+        } else {
+          await $api.dbTableFilter.delete(filter.id)
+          reloadData?.()
+          filters.value.splice(i, 1)
+        }
+        // if not synced yet remove it from array
       } else {
-        await $api.dbTableFilter.delete(filter.id)
-        const _filters = unref(filters.value)
-        _filters.splice(i, 1)
-        filters.value = _filters
-        reloadData?.()
+        filters.value.splice(i, 1)
       }
     }
   }