From 4bba6398fa2aa9fcfe0ceac3c3f7d8e4329cf029 Mon Sep 17 00:00:00 2001 From: Pranav C Date: Wed, 21 Sep 2022 22:03:46 +0530 Subject: [PATCH 1/2] 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 --- .../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)" /> 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 } } From e87c0fdbd51ecf7d19b6019f5f65b164b4fc18b4 Mon Sep 17 00:00:00 2001 From: Wing-Kam Wong Date: Mon, 30 Jan 2023 14:02:44 +0800 Subject: [PATCH 2/2] chore(nc-gui): lint --- .../smartsheet/toolbar/ColumnFilter.vue | 12 +++++++++++- packages/nc-gui/composables/useViewFilters.ts | 12 +++++++++++- packages/nc-gui/package-lock.json | 19 +++++++++++++++++++ packages/nc-gui/package.json | 1 + 4 files changed, 42 insertions(+), 2 deletions(-) diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue index 6298f91907..31241cecb1 100644 --- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue +++ b/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, saveOrUpdateDebounced } = useViewFilters( +const { + filters, + nonDeletedFilters, + deleteFilter, + saveOrUpdate, + loadFilters, + addFilter, + addFilterGroup, + sync, + saveOrUpdateDebounced, +} = useViewFilters( activeView, parentId, computed(() => autoSave), diff --git a/packages/nc-gui/composables/useViewFilters.ts b/packages/nc-gui/composables/useViewFilters.ts index b372dca902..98f03f6631 100644 --- a/packages/nc-gui/composables/useViewFilters.ts +++ b/packages/nc-gui/composables/useViewFilters.ts @@ -239,5 +239,15 @@ export function useViewFilters( }, ) - return { filters, nonDeletedFilters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup, saveOrUpdateDebounced } + return { + filters, + nonDeletedFilters, + loadFilters, + sync, + deleteFilter, + saveOrUpdate, + addFilter, + addFilterGroup, + saveOrUpdateDebounced, + } } diff --git a/packages/nc-gui/package-lock.json b/packages/nc-gui/package-lock.json index 09a4b55412..bb6950233c 100644 --- a/packages/nc-gui/package-lock.json +++ b/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", diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json index b7a3e9e7db..b37773df3f 100644 --- a/packages/nc-gui/package.json +++ b/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",