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>

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(
+const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGroup, sync, saveOrUpdateDebounced } =
-  activeView,
+  useViewFilters(
-  parentId,
+    activeView,
-  computed(() => autoSave),
+    parentId,
-  () => reloadDataHook.trigger(showLoading),
+    computed(() => autoSave),
-  modelValue || nestedFilters.value,
+    () => reloadDataHook.trigger(showLoading),
-  !modelValue,
+    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>

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 }
 }