feat(VnPaginate): refs #8197 hold data when change to Card

src/components/common/VnSelect.vue

@@ -201,7 +201,7 @@ async function fetchFilter(val) {
     const fetchOptions = { where, include, limit };
     if (fields) fetchOptions.fields = fields;
     if (sortBy) fetchOptions.order = sortBy;
-    arrayData.reset(['skip', 'filter.skip', 'page']);
+    arrayData.resetPagination();
 
     const { data } = await arrayData.applyFilter({ filter: fetchOptions });
     setOptions(data);

src/components/ui/VnFilterPanel.vue

@@ -138,7 +138,7 @@ async function clearFilters() {
     try {
         isLoading.value = true;
         store.userParamsChanged = true;
-        arrayData.reset(['skip', 'filter.skip', 'page']);
+        arrayData.resetPagination();
         // Filtrar los params no removibles
         const removableFilters = Object.keys(userParams.value).filter((param) =>
             $props.unremovableParams.includes(param)

src/components/ui/VnPaginate.vue

@@ -104,7 +104,9 @@ onMounted(async () => {
     mounted.value = true;
 });
 
-onBeforeUnmount(() => arrayData.reset());
+onBeforeUnmount(() => {
+    arrayData.resetPagination();
+});
 
 watch(
     () => props.data,
@@ -132,7 +134,7 @@ const addFilter = async (filter, params) => {
 
 async function fetch(params) {
     useArrayData(props.dataKey, params);
-    arrayData.reset(['filter.skip', 'skip', 'page']);
+    arrayData.resetPagination();
     await arrayData.fetch({ append: false, updateRouter: mounted.value });
     return emitStoreData();
 }

src/components/ui/VnSearchbar.vue

@@ -101,7 +101,7 @@ onMounted(() => {
 
 async function search() {
     const staticParams = Object.entries(store.userParams);
-    arrayData.reset(['skip', 'page']);
+    arrayData.resetPagination();
 
     const filter = {
         params: {

src/composables/useArrayData.js

@@ -142,6 +142,10 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         if (arrayDataStore.get(key)) arrayDataStore.reset(key, opts);
     }
 
+    function resetPagination() {
+        if (arrayDataStore.get(key)) arrayDataStore.resetPagination(key);
+    }
+
     function cancelRequest() {
         if (canceller) {
             canceller.abort();
@@ -165,7 +169,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         userParams = sanitizerParams(userParams, store?.exprBuilder);
 
         store.userParams = userParams;
-        reset(['skip', 'filter.skip', 'page']);
+        resetPagination();
 
         await fetch({});
         return { filter, params };
@@ -192,7 +196,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         }
 
         store.order = order;
-        reset(['skip', 'filter.skip', 'page']);
+        resetPagination();
         fetch({});
         index++;
 
@@ -275,7 +279,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
                 const pushUrl = { path: to };
                 if (to.endsWith('/list') || to.endsWith('/'))
                     pushUrl.query = newUrl.query;
-                else destroy();
                 return router.push(pushUrl);
             }
         }
@@ -302,5 +305,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         isLoading,
         deleteOption,
         reset,
+        resetPagination,
     };
 }

src/pages/Account/AccountList.vue

@@ -6,6 +6,7 @@ import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import AccountSummary from './Card/AccountSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import VnCardMain from 'src/components/common/VnCardMain.vue';
+
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const tableRef = ref();
@@ -117,7 +118,6 @@ const exprBuilder = (param, value) => {
         </template>
         <template #body>
             <VnTable
-                :style="{ display: !!$route.name.endsWith('List') ? '' : 'none' }"
                 ref="tableRef"
                 :data-key="dataKey"
                 :url="url"

src/pages/Account/Card/AccountCard.vue

@@ -4,5 +4,5 @@ import AccountDescriptor from './AccountDescriptor.vue';
 </script>
 
 <template>
-    <VnCard data-key="Account" :descriptor="AccountDescriptor" />
+    <VnCard data-key="AccountId" :descriptor="AccountDescriptor" />
 </template>

src/pages/Account/Card/AccountDescriptor.vue

@@ -41,7 +41,7 @@ const hasAccount = ref(false);
     />
     <CardDescriptor
         ref="descriptor"
-        :url="`VnUsers/preview`"
+        url="VnUsers/preview"
         :filter="filter"
         module="Account"
         @on-fetch="setData"

src/stores/useArrayDataStore.js

@@ -49,10 +49,16 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
         });
     }
 
+    function resetPagination(key) {
+        reset(key, ['skip', 'filter.skip', 'page']);
+    }
+
     return {
+        state,
         get,
         set,
         clear,
         reset,
+        resetPagination,
     };
 });