From d95350a8ebfbaa477d908a720cb5bc6ceb5a6554 Mon Sep 17 00:00:00 2001 From: alexm Date: Thu, 16 Jan 2025 13:32:12 +0100 Subject: [PATCH 1/2] perf: refs #8197 fix and imrpove filters --- src/components/common/VnSection.vue | 3 ++- src/components/common/VnSelect.vue | 11 ++++++---- src/components/ui/VnSearchbar.vue | 21 ++++++++---------- src/composables/useArrayData.js | 34 +++++++++++++++++------------ src/composables/useFilterParams.js | 6 ++++- src/pages/Ticket/TicketFilter.vue | 14 +++++------- 6 files changed, 49 insertions(+), 40 deletions(-) diff --git a/src/components/common/VnSection.vue b/src/components/common/VnSection.vue index 510865530..16ea79047 100644 --- a/src/components/common/VnSection.vue +++ b/src/components/common/VnSection.vue @@ -52,7 +52,8 @@ const sectionValue = computed(() => $props.section ?? $props.dataKey); const isMainSection = computed(() => { const isSame = sectionValue.value == route.name; if (!isSame && arrayData) { - arrayData.reset(['userParams', 'userFilter']); + arrayData.reset(['userParams', 'filter']); + arrayData.setCurrentFilter(); } return isSame; }); diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue index ee94a1d81..a1b8f3f1e 100644 --- a/src/components/common/VnSelect.vue +++ b/src/components/common/VnSelect.vue @@ -232,12 +232,15 @@ async function fetchFilter(val) { } else defaultWhere = { [key]: getVal(val) }; const where = { ...(val ? defaultWhere : {}), ...$props.where }; $props.exprBuilder && Object.assign(where, $props.exprBuilder(key, val)); - const fetchOptions = { where, include, limit }; - if (fields) fetchOptions.fields = fields; - if (sortBy) fetchOptions.order = sortBy; + const filterOptions = { where, include, limit }; + if (fields) filterOptions.fields = fields; + if (sortBy) filterOptions.order = sortBy; arrayData.resetPagination(); - const { data } = await arrayData.applyFilter({ filter: fetchOptions }); + const { data } = await arrayData.applyFilter( + { filter: filterOptions }, + { updateRouter: false } + ); setOptions(data); return data; } diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue index bfaa76588..a5ca97b70 100644 --- a/src/components/ui/VnSearchbar.vue +++ b/src/components/ui/VnSearchbar.vue @@ -113,23 +113,20 @@ onMounted(() => { }); async function search() { - const staticParams = Object.keys(store.userParams ?? {}).length - ? store.userParams - : store.defaultParams; arrayData.resetPagination(); - const filter = { - params: { - search: searchText.value, - }, - filter: props.filter, - }; + let filter = { params: { search: searchText.value } }; if (!props.searchRemoveParams || !searchText.value) { - filter.params = { - ...staticParams, - search: searchText.value, + filter = { + params: { + ...store.userParams, + search: searchText.value, + }, + filter: store.filter, }; + } else { + arrayData.reset(['currentFilter', 'userParams']); } if (props.whereFilter) { diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js index c13c4f9a6..047ee8cc2 100644 --- a/src/composables/useArrayData.js +++ b/src/composables/useArrayData.js @@ -31,10 +31,11 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) { : JSON.parse(params?.filter ?? '{}'); delete params.filter; - store.userParams = { ...store.userParams, ...params }; + store.userParams = params; store.filter = { ...filter, ...store.userFilter }; if (filter?.order) store.order = filter.order; } + setCurrentFilter(); }); if (key && userOptions) setOptions(); @@ -76,11 +77,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) { cancelRequest(); canceller = new AbortController(); - const { params, limit } = getCurrentFilter(); - - store.currentFilter = JSON.parse(JSON.stringify(params)); - delete store.currentFilter.filter.include; - store.currentFilter.filter = JSON.stringify(store.currentFilter.filter); + const { params, limit } = setCurrentFilter(); let exprFilter; if (store?.exprBuilder) { @@ -105,7 +102,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) { store.hasMoreData = limit && response.data.length >= limit; if (!append && !isDialogOpened() && updateRouter) { - if (updateStateParams(response.data)?.redirect) return; + if (updateStateParams(response.data)?.redirect && !store.keepData) return; } store.isLoading = false; canceller = null; @@ -140,12 +137,12 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) { } } - async function applyFilter({ filter, params }) { + async function applyFilter({ filter, params }, fetchOptions = {}) { if (filter) store.userFilter = filter; store.filter = {}; if (params) store.userParams = { ...params }; - const response = await fetch({}); + const response = await fetch(fetchOptions); return response; } @@ -274,14 +271,14 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) { } function getCurrentFilter() { + if (!Object.keys(store.userParams).length) + store.userParams = store.defaultParams ?? {}; + const filter = { limit: store.limit, + ...store.userFilter, }; - let userParams = { ...store.userParams }; - - Object.assign(filter, store.userFilter); - let where; if (filter?.where || store.filter?.where) where = Object.assign(filter?.where ?? {}, store.filter?.where ?? {}); @@ -289,7 +286,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) { filter.where = where; const params = { filter }; - Object.assign(params, userParams); + Object.assign(params, store.userParams); if (params.filter) params.filter.skip = store.skip; if (store?.order && typeof store?.order == 'string') store.order = [store.order]; if (store.order?.length) params.filter.order = [...store.order]; @@ -298,6 +295,14 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) { return { filter, params, limit: filter.limit }; } + function setCurrentFilter() { + const { params, limit } = getCurrentFilter(); + store.currentFilter = JSON.parse(JSON.stringify(params)); + delete store.currentFilter.filter.include; + store.currentFilter.filter = JSON.stringify(store.currentFilter.filter); + return { params, limit }; + } + function processData(data, { map = true, append = true }) { if (!append) { store.data = []; @@ -331,6 +336,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) { applyFilter, addFilter, getCurrentFilter, + setCurrentFilter, addFilterWhere, addOrder, deleteOrder, diff --git a/src/composables/useFilterParams.js b/src/composables/useFilterParams.js index 2878e4b76..e3d4c8703 100644 --- a/src/composables/useFilterParams.js +++ b/src/composables/useFilterParams.js @@ -30,7 +30,11 @@ export function useFilterParams(key) { } function setUserParams(watchedParams) { - if (!watchedParams || Object.keys(watchedParams).length == 0) return; + if (!watchedParams || Object.keys(watchedParams).length == 0) { + params.value = {}; + orders.value = {}; + return; + } if (typeof watchedParams == 'string') watchedParams = JSON.parse(watchedParams); if (typeof watchedParams?.filter == 'string') diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue index 7dcb834d2..4b50892b0 100644 --- a/src/pages/Ticket/TicketFilter.vue +++ b/src/pages/Ticket/TicketFilter.vue @@ -7,6 +7,7 @@ import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnInput from 'src/components/common/VnInput.vue'; import VnInputDate from 'components/common/VnInputDate.vue'; import VnSelect from 'src/components/common/VnSelect.vue'; +import VnSelectWorker from 'src/components/common/VnSelectWorker.vue'; const { t } = useI18n(); const props = defineProps({ @@ -81,15 +82,12 @@ const getGroupedStates = (data) => { - Date: Fri, 17 Jan 2025 07:16:24 +0100 Subject: [PATCH 2/2] perf: refs #8197 default is object --- src/composables/useFilterParams.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/composables/useFilterParams.js b/src/composables/useFilterParams.js index e3d4c8703..07dcdf99b 100644 --- a/src/composables/useFilterParams.js +++ b/src/composables/useFilterParams.js @@ -29,8 +29,8 @@ export function useFilterParams(key) { orders.value = orderObject; } - function setUserParams(watchedParams) { - if (!watchedParams || Object.keys(watchedParams).length == 0) { + function setUserParams(watchedParams = {}) { + if (Object.keys(watchedParams).length == 0) { params.value = {}; orders.value = {}; return;