refactor: 02 => optimize screen.xs fetch scroll logic

src/pages/02_personnel-management/MainPage.vue

@@ -74,6 +74,7 @@ const imageDialog = ref(false);
 const infoDrawerEdit = ref(false);
 const refreshImageState = ref(false);
 const refFilter = ref<InstanceType<typeof QSelect>>();
+const firstScroll = ref(false);
 
 const inputSearch = ref('');
 const currentTab = ref<string>('ALL');
@@ -434,7 +435,7 @@ async function onSubmit(excludeDialog?: boolean) {
       }
     }
 
-    await fetchUserList();
+    $q.screen.xs ? await fetchUserEditXs() : await fetchUserList();
     typeStats.value = await userStore.typeStats();
     const res = await branchStore.userStats(formData.value.userType);
     if (res) {
@@ -466,9 +467,14 @@ async function onSubmit(excludeDialog?: boolean) {
       }
     }
 
-    currentTab.value = formData.value.userType;
+    if (
+      currentTab.value === formData.value.userType &&
+      currentTab.value !== 'ALL'
+    ) {
+      $q.screen.gt.xs ? await fetchUserEditXs() : await fetchUserList();
+    }
 
-    await fetchUserList();
+    currentTab.value = formData.value.userType;
 
     typeStats.value = await userStore.typeStats();
     const res = await branchStore.userStats(formData.value.userType);
@@ -658,6 +664,9 @@ async function fetchUserList() {
       if (!userData.value) {
         userData.value = ret;
       } else {
+        userData.value.page = ret.page;
+        userData.value.pageSize = ret.pageSize;
+        userData.value.total = ret.total;
         userData.value?.result.push(...ret.result);
       }
     } else {
@@ -666,6 +675,26 @@ async function fetchUserList() {
   }
 }
 
+async function fetchUserEditXs() {
+  const ret = await userStore.fetchList({
+    includeBranch: true,
+    pageSize: userData.value?.result.length || 0,
+    page: 1,
+    query: !!inputSearch.value ? inputSearch.value : undefined,
+    userType: currentTab.value === 'ALL' ? undefined : currentTab.value,
+    status:
+      statusFilter.value === 'all'
+        ? undefined
+        : statusFilter.value === 'statusACTIVE'
+          ? 'ACTIVE'
+          : 'INACTIVE',
+  });
+
+  if (ret) {
+    userData.value = ret;
+  }
+}
+
 function noPersonnel() {
   const number =
     typeStats.value &&
@@ -700,8 +729,11 @@ onMounted(async () => {
 watch(
   () => currentTab.value,
   async (label) => {
+    firstScroll.value = true;
     mapUserType(label);
-    await fetchUserList();
+    if (userData.value) userData.value.result = [];
+    currentPage.value = 1;
+    if ($q.screen.gt.xs) await fetchUserList();
     const res = await branchStore.userStats(label);
     if (res) {
       userStats.value = res;
@@ -734,7 +766,12 @@ watch(
   },
 );
 
-watch([inputSearch, statusFilter, pageSize], async () => await fetchUserList());
+watch([inputSearch, statusFilter, pageSize], async () => {
+  if (userData.value) userData.value.result = [];
+  currentPage.value = 1;
+
+  await fetchUserList();
+});
 
 watch(
   () => $q.screen.lt.md,
@@ -1083,17 +1120,22 @@ watch(
         class="flex full-width full-height q-pa-md surface-2 column col scroll"
       >
         <q-infinite-scroll
+          :key="currentTab"
+          :offset="100"
           @load="
             (_, done) => {
-              if ($q.screen.gt.xs || currentPage === currentMaxPage) return;
+              if ($q.screen.gt.xs) return;
-              currentPage = currentPage + 1;
+              currentPage = firstScroll ? 1 : currentPage + 1;
 
-              fetchUserList().then(() => done(currentPage >= currentMaxPage));
+              fetchUserList().then(() => {
+                firstScroll = false;
+                done(currentPage >= currentMaxPage);
+              });
             }
           "
         >
-          <template v-if="userData && userData.total > 0">
           <q-table
+            v-if="userData && userData.total > 0"
             flat
             bordered
             :grid="modeView"
@@ -1111,11 +1153,7 @@ watch(
                 style="background-color: hsla(var(--info-bg) / 0.07)"
                 :props="props"
               >
-                  <q-th
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                    v-for="col in props.cols"
-                    :key="col.name"
-                    :props="props"
-                  >
                   {{ $t(col.label) }}
                 </q-th>
                 <q-th auto-width />
@@ -1142,7 +1180,11 @@ watch(
                   class="text-center"
                   v-if="fieldSelected.includes('orderNumber')"
                 >
-                    {{ (currentPage - 1) * pageSize + props.rowIndex + 1 }}
+                  {{
+                    $q.screen.xs
+                      ? props.rowIndex + 1
+                      : (currentPage - 1) * pageSize + props.rowIndex + 1
+                  }}
                 </q-td>
 
                 <q-td v-if="fieldSelected.includes('name')">
@@ -1233,8 +1275,7 @@ watch(
                           class="q-pl-xs"
                           :class="{
                             'symbol-gender': props.row.gender,
-                              'symbol-gender__male':
+                            'symbol-gender__male': props.row.gender === 'male',
-                                props.row.gender === 'male',
                             'symbol-gender__female':
                               props.row.gender === 'female',
                           }"
@@ -1403,6 +1444,13 @@ watch(
               </div>
             </template>
           </q-table>
+          <template v-slot:loading>
+            <div
+              v-if="$q.screen.lt.sm && currentPage !== currentMaxPage"
+              class="row justify-center"
+            >
+              <q-spinner-dots color="primary" size="40px" />
+            </div>
           </template>
         </q-infinite-scroll>