perf: refs #8197 fix and imrpove filters

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

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 };
+    const filterOptions = { where, include, limit };
-    if (fields) fetchOptions.fields = fields;
+    if (fields) filterOptions.fields = fields;
-    if (sortBy) fetchOptions.order = sortBy;
+    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;
 }

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 = {
+    let filter = { params: { search: searchText.value } };
-        params: {
-            search: searchText.value,
-        },
-        filter: props.filter,
-    };
 
     if (!props.searchRemoveParams || !searchText.value) {
-        filter.params = {
+        filter = {
-            ...staticParams,
+            params: {
-            search: searchText.value,
+                ...store.userParams,
+                search: searchText.value,
+            },
+            filter: store.filter,
         };
+    } else {
+        arrayData.reset(['currentFilter', 'userParams']);
     }
 
     if (props.whereFilter) {

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();
+        const { params, limit } = setCurrentFilter();
-
-        store.currentFilter = JSON.parse(JSON.stringify(params));
-        delete store.currentFilter.filter.include;
-        store.currentFilter.filter = JSON.stringify(store.currentFilter.filter);
 
         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,

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')

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) => {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelect
+                    <VnSelectWorker
-                        :label="t('Salesperson')"
+                        :label="t('globals.salesPerson')"
                         v-model="params.salesPersonFk"
-                        url="Workers/activeWithInheritedRole"
+                        :params="{
-                        :where="{ role: 'salesPerson' }"
+                            departmentCodes: ['VT'],
-                        option-value="id"
+                        }"
-                        option-label="firstName"
-                        :use-like="false"
-                        sort-by="firstName ASC"
                         dense
                         outlined
                         rounded