From 4bba6398fa2aa9fcfe0ceac3c3f7d8e4329cf029 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 21 Sep 2022 22:03:46 +0530
Subject: [PATCH] feat: filter improvement

- avoid unnecessary data reload and meta reload
- add debounce to input field to apply filter only after a delay rather thatn on each key press

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/ColumnFilter.vue       | 19 ++++++++++---------
 packages/nc-gui/composables/useViewFilters.ts | 10 ++++------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
index db3fb430ed..eb76546c0e 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
@@ -44,14 +44,15 @@ const reloadDataHook = inject(ReloadViewDataHookInj)!
 const { $e } = useNuxtApp()
 
 const { nestedFilters } = useSmartsheetStoreOrThrow()
-const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGroup, sync } = useViewFilters(
-  activeView,
-  parentId,
-  computed(() => autoSave),
-  () => reloadDataHook.trigger(showLoading),
-  modelValue || nestedFilters.value,
-  !modelValue,
-)
+const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGroup, sync, saveOrUpdateDebounced } =
+  useViewFilters(
+    activeView,
+    parentId,
+    computed(() => autoSave),
+    () => reloadDataHook.trigger(showLoading),
+    modelValue || nestedFilters.value,
+    !modelValue,
+  )
 
 const localNestedFilters = ref()
 
@@ -265,7 +266,7 @@ defineExpose({
               class="nc-filter-value-select"
               :disabled="filter.readOnly"
               @click.stop
-              @input="saveOrUpdate(filter, i)"
+              @input="saveOrUpdateDebounced(filter, i)"
             />
           </template>
         </template>
diff --git a/packages/nc-gui/composables/useViewFilters.ts b/packages/nc-gui/composables/useViewFilters.ts
index 331162e4c2..95d11f4706 100644
--- a/packages/nc-gui/composables/useViewFilters.ts
+++ b/packages/nc-gui/composables/useViewFilters.ts
@@ -3,11 +3,11 @@ import type { ComputedRef, Ref } from 'vue'
 import { message } from 'ant-design-vue'
 import {
   IsPublicInj,
-  ReloadViewDataHookInj,
   computed,
   extractSdkResponseErrorMsg,
   inject,
   ref,
+  useDebounceFn,
   useMetas,
   useNuxtApp,
   useUIPermission,
@@ -23,8 +23,6 @@ export function useViewFilters(
   currentFilters?: Filter[],
   isNestedRoot?: boolean,
 ) {
-  const reloadHook = inject(ReloadViewDataHookInj)
-
   const { nestedFilters } = useSmartsheetStoreOrThrow()
 
   const isPublic = inject(IsPublicInj, ref(false))
@@ -173,8 +171,6 @@ export function useViewFilters(
           fk_parent_id: parentId,
         })
       }
-
-      reloadHook?.trigger()
     } catch (e: any) {
       console.log(e)
       message.error(await extractSdkResponseErrorMsg(e))
@@ -183,6 +179,8 @@ export function useViewFilters(
     reloadData?.()
   }
 
+  const saveOrUpdateDebounced = useDebounceFn(saveOrUpdate, 500)
+
   const addFilter = () => {
     filters.value.push({ ...placeholderFilter })
     $e('a:filter:add', { length: filters.value.length })
@@ -221,5 +219,5 @@ export function useViewFilters(
     },
   )
 
-  return { filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup }
+  return { filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup, saveOrUpdateDebounced }
 }