fix: refs #8197 staticParams and redirect

src/components/NavBar.vue

@@ -59,6 +59,7 @@ const pinnedModulesRef = ref();
                     'no-visible': !stateQuery.isLoading().value,
                 }"
                 size="xs"
+                data-cy="loading-spinner"
             />
             <QSpace />
             <div id="searchbar" class="searchbar"></div>

src/components/common/VnSection.vue

@@ -34,15 +34,20 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
+    redirect: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const sectionValue = computed(() => $props.section ?? $props.dataKey);
-
+let arrayData;
 onBeforeMount(() => {
     if ($props.dataKey)
-        useArrayData($props.dataKey, {
+        arrayData = useArrayData($props.dataKey, {
             searchUrl: 'table',
             ...$props.arrayDataProps,
+            navigate: $props.redirect,
         });
 });
 </script>
@@ -63,12 +68,12 @@ onBeforeMount(() => {
                 <VnTableFilter
                     v-if="rightFilter && columns"
                     :data-key="dataKey"
+                    :array-data="arrayData"
                     :columns="columns"
                 />
             </slot>
         </template>
     </RightMenu>
-
     <slot name="body" v-if="sectionValue == $route.name" />
     <RouterView v-else />
 </template>

src/components/ui/VnPaginate.vue

@@ -112,7 +112,6 @@ onMounted(async () => {
 
 onBeforeUnmount(() => {
     arrayData.resetPagination();
-    arrayData.reset(['currentFilter', 'userParams', 'userFilter']);
 });
 
 watch(
@@ -142,7 +141,7 @@ const addFilter = async (filter, params) => {
 async function fetch(params) {
     useArrayData(props.dataKey, params);
     arrayData.resetPagination();
-    await arrayData.fetch({ append: false, updateRouter: mounted.value });
+    await arrayData.fetch({ append: false });
     return emitStoreData();
 }
 
@@ -217,7 +216,7 @@ defineExpose({
 <template>
     <div class="full-width">
         <div
-            v-if="!props.autoLoad && !store.data && !isLoading"
+            v-if="!store.data && !store.data?.length && !isLoading"
             class="info-row q-pa-md text-center"
         >
             <h5>

src/components/ui/VnSearchbar.vue

@@ -100,7 +100,9 @@ onMounted(() => {
 });
 
 async function search() {
-    const staticParams = Object.entries(store.userParams);
+    const staticParams = Object.keys(store.userParams ?? {}).length
+        ? store.userParams
+        : store.defaultParams;
     arrayData.resetPagination();
 
     const filter = {
@@ -112,7 +114,7 @@ async function search() {
 
     if (!props.searchRemoveParams || !searchText.value) {
         filter.params = {
-            ...Object.fromEntries(staticParams),
+            ...staticParams,
             search: searchText.value,
         };
     }

src/composables/useArrayData.js

@@ -64,6 +64,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
                     store[option] = userOptions.keepOpts?.includes(option)
                         ? Object.assign(defaultOpts, store[option])
                         : defaultOpts;
+                    if (option === 'userParams') store.defaultParams = store[option];
                 }
             }
         }

src/pages/Account/AccountList.vue

@@ -1,10 +1,11 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 import AccountSummary from './Card/AccountSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import VnSection from 'src/components/common/VnSection.vue';
+import FetchData from 'src/components/FetchData.vue';
 
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
@@ -12,6 +13,7 @@ const filter = {
     include: { relation: 'role', scope: { fields: ['id', 'name'] } },
 };
 const dataKey = 'AccountList';
+const roles = ref([]);
 const columns = computed(() => [
     {
         align: 'left',
@@ -29,7 +31,7 @@ const columns = computed(() => [
             component: 'select',
             name: 'roleFk',
             attrs: {
-                url: 'VnRoles',
+                options: roles,
                 optionValue: 'id',
                 optionLabel: 'name',
             },
@@ -103,6 +105,7 @@ function exprBuilder(param, value) {
 </script>
 
 <template>
+    <FetchData url="VnRoles" @on-fetch="(data) => (roles = data)" auto-load />
     <VnSection
         :data-key="dataKey"
         :columns="columns"

src/pages/Customer/CustomerList.vue

@@ -419,7 +419,6 @@ function handleLocation(data, location) {
         :columns="columns"
         redirect="customer"
         :right-search="false"
-        auto-load
     >
         <template #more-create-dialog="{ data }">
             <VnSelect

test/cypress/integration/vnComponent/VnSearchBar.spec.js

@@ -7,10 +7,10 @@ describe('VnSearchBar', () => {
     beforeEach(() => {
         cy.viewport(1280, 720);
         cy.login('developer');
-        cy.visit('#/customer/list');
+        cy.visit('#/account/list');
     });
 
-    it('should redirect to customer summary page', () => {
+    it('should redirect to account summary page', () => {
         searchAndCheck('1', employeeId);
         searchAndCheck('salesPerson', salesPersonId);
     });
@@ -20,7 +20,6 @@ describe('VnSearchBar', () => {
         checkTableLength(2);
 
         cy.clearSearchbar();
-
         cy.writeSearchbar('0{enter}');
         checkTableLength(0);
     });