src/components/common/VnSelect.vue

@@ -66,6 +66,10 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
+    useLike: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const { t } = useI18n();
@@ -177,7 +181,7 @@ async function filterHandler(val, update) {
         newOptions = filter(val, myOptions.value);
         myOptions.value = [];
     } else {
-        newOptions = filter(val, myOptionsOriginal.value);
+        newOptions = filter(val, isFiltered ? myOptions.value : myOptionsOriginal.value);
     }
     if (useURL.value && isFiltered && arrayData.store.hasMoreData) {
         arrayData.store.skip = 0;

src/composables/useArrayData.js

@@ -1,4 +1,4 @@
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, computed } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import axios from 'axios';
 import { useArrayDataStore } from 'stores/useArrayDataStore';
@@ -18,7 +18,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
 
     onMounted(() => {
         setOptions();
-        store.skip = 0;
+        arrayDataStore.reset(['skip']);
 
         const query = route.query;
         const searchUrl = store.searchUrl;
@@ -27,7 +27,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
             const filter = params?.filter;
             delete params.filter;
             store.userParams = { ...params, ...store.userParams };
-            store.userFilter = { ...JSON.parse(filter), ...store.userFilter };
+            store.userFilter = { ...JSON.parse(filter ?? '{}'), ...store.userFilter };
         }
     });
 
@@ -85,13 +85,17 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         }
 
         Object.assign(filter, store.userFilter, exprFilter);
-        Object.assign(store.filter, { ...filter, skip: store.skip });
+        let where;
-        const params = {
+        if (filter?.where || store.filter?.where)
-            filter: JSON.stringify(store.filter),
+            where = Object.assign(filter?.where ?? {}, store.filter?.where ?? {});
-        };
+        Object.assign(filter, store.filter);
+        filter.where = where;
+        const params = { filter };
 
         Object.assign(params, userParams);
+        params.filter.skip = store.skip;
 
+        params.filter = JSON.stringify(params.filter);
         store.currentFilter = params;
         store.isLoading = true;
         const response = await axios.get(store.url, {
@@ -127,6 +131,10 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         delete store[option];
     }
 
+    function reset(opts = []) {
+        if (arrayDataStore.get(key)) arrayDataStore.reset(key, opts);
+    }
+
     function cancelRequest() {
         if (canceller) {
             canceller.abort();
@@ -144,22 +152,20 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
     }
 
     async function addFilter({ filter, params }) {
-        if (filter) store.userFilter = Object.assign(store.userFilter, filter);
+        if (filter) store.filter = filter;
 
         let userParams = { ...store.userParams, ...params };
         userParams = sanitizerParams(userParams, store?.exprBuilder);
 
         store.userParams = userParams;
-        store.skip = 0;
+        arrayDataStore.reset(['skip', 'filter.skip', 'page']);
-        store.filter.skip = 0;
-        store.page = 1;
 
         await fetch({ append: false });
         return { filter, params };
     }
 
     async function addFilterWhere(where) {
-        const storedFilter = { ...store.userFilter };
+        const storedFilter = { ...store.filter };
         if (!storedFilter?.where) storedFilter.where = {};
         where = { ...storedFilter.where, ...where };
         await addFilter({ filter: { where } });
@@ -242,5 +248,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         updateStateParams,
         isLoading,
         deleteOption,
+        reset,
     };
 }

src/stores/useArrayDataStore.js

@@ -3,37 +3,56 @@ import { defineStore } from 'pinia';
 
 export const useArrayDataStore = defineStore('arrayDataStore', () => {
     const state = ref({});
+    const defaultOpts = {
+        filter: {},
+        userFilter: {},
+        userParams: {},
+        url: '',
+        limit: 10,
+        skip: 0,
+        order: '',
+        isLoading: false,
+        userParamsChanged: false,
+        exprBuilder: null,
+        searchUrl: 'params',
+        navigate: null,
+        page: 1,
+    };
 
     function get(key) {
         return state.value[key];
     }
 
     function set(key) {
-        state.value[key] = {
+        state.value[key] = getDefaultState();
-            filter: {},
-            userFilter: {},
-            userParams: {},
-            url: '',
-            limit: 10,
-            skip: 0,
-            order: '',
-            data: ref(),
-            page: ref(1),
-            isLoading: false,
-            userParamsChanged: false,
-            exprBuilder: null,
-            searchUrl: 'params',
-            navigate: null,
-        };
     }
 
     function clear(key) {
         delete state.value[key];
     }
 
+    function reset(key, opts = []) {
+        if (!opts.length) state.value[key] = getDefaultState();
+        else
+            opts.forEach((opt) => {
+                if (opt.includes('.')) {
+                    const [parent, child] = opt.split('.');
+                    state.value[key][parent][child] = defaultOpts[child];
+                } else if (Object.hasOwn(state.value[key], opt))
+                    state.value[key][opt] = defaultOpts[opt];
+            });
+    }
+
+    function getDefaultState() {
+        return Object.assign(JSON.parse(JSON.stringify(defaultOpts)), {
+            data: ref(),
+        });
+    }
+
     return {
         get,
         set,
         clear,
+        reset,
     };
 });