Merge pull request #3774 from nocodb/refactor/ui-improvements

Refactor: Filter improvements

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

@@ -42,7 +42,17 @@ const reloadDataHook = inject(ReloadViewDataHookInj)!
 const { $e } = useNuxtApp()
 
 const { nestedFilters } = useSmartsheetStoreOrThrow()
-const { filters, nonDeletedFilters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGroup, sync } = useViewFilters(
+const {
+  filters,
+  nonDeletedFilters,
+  deleteFilter,
+  saveOrUpdate,
+  loadFilters,
+  addFilter,
+  addFilterGroup,
+  sync,
+  saveOrUpdateDebounced,
+} = useViewFilters(
   activeView,
   parentId,
   computed(() => autoSave),
@@ -259,7 +269,7 @@ defineExpose({
               @update-filter-value="
                 (value) => {
                   filter.value = value
-                  saveOrUpdate(filter, i)
+                  saveOrUpdateDebounced(filter, i)
                 }
               "
               @click.stop

packages/nc-gui/composables/useViewFilters.ts

@@ -2,12 +2,12 @@ import type { FilterType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import {
   IsPublicInj,
-  ReloadViewDataHookInj,
   computed,
   extractSdkResponseErrorMsg,
   inject,
   message,
   ref,
+  useDebounceFn,
   useMetas,
   useNuxtApp,
   useUIPermission,
@@ -191,8 +191,6 @@ export function useViewFilters(
           fk_parent_id: parentId,
         })
       }
-
-      reloadHook?.trigger()
     } catch (e: any) {
       console.log(e)
       message.error(await extractSdkResponseErrorMsg(e))
@@ -201,6 +199,8 @@ export function useViewFilters(
     reloadData?.()
   }
 
+  const saveOrUpdateDebounced = useDebounceFn(saveOrUpdate, 500)
+
   const addFilter = () => {
     filters.value.push({ ...placeholderFilter })
     $e('a:filter:add', { length: filters.value.length })
@@ -239,5 +239,15 @@ export function useViewFilters(
     },
   )
 
-  return { filters, nonDeletedFilters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup }
+  return {
+    filters,
+    nonDeletedFilters,
+    loadFilters,
+    sync,
+    deleteFilter,
+    saveOrUpdate,
+    addFilter,
+    addFilterGroup,
+    saveOrUpdateDebounced,
+  }
 }

packages/nc-gui/package-lock.json

@@ -54,6 +54,7 @@
         "@iconify-json/clarity": "^1.1.4",
         "@iconify-json/eva": "^1.1.2",
         "@iconify-json/ic": "^1.1.7",
+        "@iconify-json/la": "^1.1.2",
         "@iconify-json/logos": "^1.1.14",
         "@iconify-json/lucide": "^1.1.36",
         "@iconify-json/material-symbols": "^1.1.8",
@@ -1119,6 +1120,15 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/la": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@iconify-json/la/-/la-1.1.2.tgz",
+      "integrity": "sha512-Cv93a5X5n9gYeUeQ7h9z5tmoZzChvwvbCorBQwMQgwCnMQynH6dCKdtbtYsZyT5wH4QYwywv7xgvpBIkqvZgqg==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/logos": {
       "version": "1.1.18",
       "resolved": "https://registry.npmjs.org/@iconify-json/logos/-/logos-1.1.18.tgz",
@@ -18589,6 +18599,15 @@
         "@iconify/types": "*"
       }
     },
+    "@iconify-json/la": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@iconify-json/la/-/la-1.1.2.tgz",
+      "integrity": "sha512-Cv93a5X5n9gYeUeQ7h9z5tmoZzChvwvbCorBQwMQgwCnMQynH6dCKdtbtYsZyT5wH4QYwywv7xgvpBIkqvZgqg==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify-json/logos": {
       "version": "1.1.18",
       "resolved": "https://registry.npmjs.org/@iconify-json/logos/-/logos-1.1.18.tgz",

packages/nc-gui/package.json

@@ -77,6 +77,7 @@
     "@iconify-json/clarity": "^1.1.4",
     "@iconify-json/eva": "^1.1.2",
     "@iconify-json/ic": "^1.1.7",
+    "@iconify-json/la": "^1.1.2",
     "@iconify-json/logos": "^1.1.14",
     "@iconify-json/lucide": "^1.1.36",
     "@iconify-json/material-symbols": "^1.1.8",