refactor: 07 => enhance fetchData for mobile handling and improve data fetching logic

src/pages/07_agencies-management/MainPage.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { QTableProps } from 'quasar';
 import { dialog } from 'src/stores/utils';
-import { onMounted, reactive, ref } from 'vue';
+import { onMounted, reactive, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { Icon } from '@iconify/vue/dist/iconify.js';
 import { useI18n } from 'vue-i18n';
@@ -21,7 +21,6 @@ import FloatingActionButton from 'src/components/FloatingActionButton.vue';
 import CreateButton from 'src/components/AddButton.vue';
 import NoData from 'src/components/NoData.vue';
 import AgenciesDialog from './AgenciesDialog.vue';
-import { watch } from 'vue';
 
 const { t } = useI18n();
 const $q = useQuasar();
@@ -192,7 +191,7 @@ async function submit(opt?: { selectedImage: string }) {
       pageState.isDrawerEdit = false;
       currAgenciesData.value = ret;
       formData.value.selectedImage = ret.selectedImage;
-      await fetchData();
+      await fetchData($q.screen.xs);
 
       if (refAgenciesDialog.value && opt?.selectedImage) {
         refAgenciesDialog.value.clearImageState();
@@ -208,14 +207,12 @@ async function submit(opt?: { selectedImage: string }) {
       onCreateImageList.value,
     );
 
-    await fetchData();
+    await fetchData($q.screen.xs);
     pageState.addModal = false;
     return;
   }
 }
 
-async function triggerChangeStatus(data?: Institution) {}
-
 async function triggerDelete(id?: string) {
   if (!id) return;
   dialog({
@@ -228,21 +225,26 @@ async function triggerDelete(id?: string) {
     action: async () => {
       await institutionStore.deleteInstitution(id);
       resetForm();
-      await fetchData();
+      await fetchData($q.screen.xs);
     },
     cancel: () => {},
   });
 }
 
-async function fetchData() {
+async function fetchData(mobileFetch?: boolean) {
   const ret = await institutionStore.getInstitutionList({
-    page: page.value,
-    pageSize: pageSize.value,
+    page: mobileFetch ? 1 : page.value,
+    pageSize: mobileFetch
+      ? data.value.length + (pageState.total === data.value.length ? 1 : 0)
+      : pageSize.value,
     query: pageState.inputSearch,
   });
 
   if (ret) {
-    $q.screen.xs ? data.value.push(...ret.result) : (data.value = ret.result);
+    data.value =
+      $q.screen.xs && !mobileFetch
+        ? [...data.value, ...ret.result]
+        : ret.result;
     pageMax.value = Math.ceil(ret.total / pageSize.value);
     pageState.total = ret.total;
   }
@@ -258,7 +260,11 @@ onMounted(async () => {
 
 watch(
   () => pageState.inputSearch,
-  () => fetchData(),
+  () => {
+    page.value = 1;
+    data.value = [];
+    fetchData();
+  },
 );
 </script>
 <template>
@@ -436,12 +442,12 @@ watch(
           class="col surface-2 flex items-center justify-center"
         >
           <NoData
-            v-if="pageState.total !== 0"
+            v-if="pageState.inputSearch"
             :not-found="!!pageState.inputSearch"
           />
 
           <CreateButton
-            v-if="pageState.total === 0"
+            v-if="!pageState.inputSearch && pageState.total === 0"
             @click="triggerDialog('add')"
             label="general.add"
             :i18n-args="{ text: $t('agencies.title') }"
@@ -454,6 +460,7 @@ watch(
             @load="
               (_, done) => {
                 if ($q.screen.gt.xs || page === pageMax) return;
+                console.log('load');
                 page = page + 1;
                 fetchData().then(() => done(page >= pageMax));
               }
@@ -508,8 +515,11 @@ watch(
                     class="text-center"
                     v-if="fieldSelected.includes('orderNumber')"
                   >
-                    {{ props.rowIndex + 1 }}
-                    <!-- {{ (currentPage - 1) * pageSize + props.rowIndex + 1 }} -->
+                    {{
+                      $q.screen.xs
+                        ? props.rowIndex + 1
+                        : (page - 1) * pageSize + props.rowIndex + 1
+                    }}
                   </q-td>
                   <q-td v-if="fieldSelected.includes('name')">
                     <section class="row items-center no-wrap">
@@ -613,7 +623,6 @@ watch(
                         }
                       "
                       @delete="() => triggerDelete(props.row.id)"
-                      @change-status="() => triggerChangeStatus(props.row)"
                     />
                   </q-td>
                 </q-tr>
@@ -685,7 +694,6 @@ watch(
                             }
                           "
                           @delete="() => triggerDelete(props.row.id)"
-                          @change-status="() => triggerChangeStatus(props.row)"
                         />
                       </nav>
                     </header>
@@ -782,7 +790,7 @@ watch(
             <PaginationComponent
               v-model:current-page="page"
               v-model:max-page="pageMax"
-              :fetch-data="fetchData"
+              :fetch-data="() => fetchData()"
             />
           </nav>
         </footer>
@@ -793,7 +801,6 @@ watch(
   <AgenciesDialog
     ref="refAgenciesDialog"
     :data-id="currAgenciesData && currAgenciesData.id"
-    @change-status="triggerChangeStatus"
     @drawer-delete="
       () => {
         if (currAgenciesData) triggerDelete(currAgenciesData.id);