refactor: 02, 08 => screen.xs fetch scroll

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

@@ -639,7 +639,7 @@ async function fetchImageList(id: string, selectedName?: string) {
 }
 
 async function fetchUserList() {
-  await userStore.fetchList({
+  const ret = await userStore.fetchList({
     includeBranch: true,
     pageSize: pageSize.value,
     page: currentPage.value,
@@ -652,6 +652,18 @@ async function fetchUserList() {
           ? 'ACTIVE'
           : 'INACTIVE',
   });
+
+  if (ret) {
+    if ($q.screen.xs) {
+      if (!userData.value) {
+        userData.value = ret;
+      } else {
+        userData.value?.result.push(...ret.result);
+      }
+    } else {
+      userData.value = ret;
+    }
+  }
 }
 
 function noPersonnel() {
@@ -1066,8 +1078,19 @@ watch(
         </div>
       </div>
 
-      <div
+      <article
+        v-if="userData"
         class="flex full-width full-height q-pa-md surface-2 column col scroll"
+      >
+        <q-infinite-scroll
+          @load="
+            (_, done) => {
+              if ($q.screen.gt.xs || currentPage === currentMaxPage) return;
+              currentPage = currentPage + 1;
+
+              fetchUserList().then(() => done(currentPage >= currentMaxPage));
+            }
+          "
         >
           <template v-if="userData && userData.total > 0">
             <q-table
@@ -1088,7 +1111,11 @@ watch(
                   style="background-color: hsla(var(--info-bg) / 0.07)"
                   :props="props"
                 >
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
                     {{ $t(col.label) }}
                   </q-th>
                   <q-th auto-width />
@@ -1206,7 +1233,8 @@ watch(
                             class="q-pl-xs"
                             :class="{
                               'symbol-gender': props.row.gender,
-                            'symbol-gender__male': props.row.gender === 'male',
+                              'symbol-gender__male':
+                                props.row.gender === 'male',
                               'symbol-gender__female':
                                 props.row.gender === 'female',
                             }"
@@ -1376,6 +1404,7 @@ watch(
               </template>
             </q-table>
           </template>
+        </q-infinite-scroll>
 
         <div
           v-if="
@@ -1410,11 +1439,11 @@ watch(
         >
           <NoData :not-found="!!inputSearch" />
         </div>
-      </div>
+      </article>
 
-      <div
+      <footer
         class="row justify-between items-center q-px-md q-py-sm"
-        v-if="currentMaxPage > 0"
+        v-if="currentMaxPage > 0 && $q.screen.gt.xs"
       >
         <div class="col-4">
           <div class="row items-center no-wrap">
@@ -1445,7 +1474,7 @@ watch(
             :fetch-data="async () => await fetchUserList()"
           />
         </div>
-      </div>
+      </footer>
     </div>
   </div>
 

src/pages/08_request-list/MainPage.vue

@@ -58,7 +58,8 @@ async function fetchList(opts?: { rotateFlowId?: boolean }) {
   });
 
   if (ret) {
-    data.value = ret.result;
+    $q.screen.xs ? data.value.push(...ret.result) : (data.value = ret.result);
+
     pageState.total = ret.total;
     pageMax.value = Math.ceil(ret.total / pageSize.value);
   }
@@ -332,6 +333,17 @@ watch([() => pageState.inputSearch, () => pageState.statusFilter], () =>
           <NoData :not-found="!!pageState.inputSearch" />
         </article>
         <article v-else class="col surface-2 full-width scroll q-pa-md">
+          <q-infinite-scroll
+            @load="
+              (_, done) => {
+                if ($q.screen.gt.xs) return;
+                page = page + 1;
+                fetchList({ rotateFlowId: true }).then(() =>
+                  done(page >= pageMax),
+                );
+              }
+            "
+          >
             <TableRequestList
               :columns="column"
               :rows="data"
@@ -340,12 +352,21 @@ watch([() => pageState.inputSearch, () => pageState.statusFilter], () =>
               @view="(data) => triggerView({ requestData: data })"
               @delete="(data) => triggerCancel(data.id)"
             />
+            <template v-slot:loading>
+              <div
+                v-if="$q.screen.lt.sm && page !== pageMax"
+                class="row justify-center"
+              >
+                <q-spinner-dots color="primary" size="40px" />
+              </div>
+            </template>
+          </q-infinite-scroll>
         </article>
 
         <!-- SEC: footer content -->
         <footer
           class="row justify-between items-center q-px-md q-py-sm surface-2"
-          v-if="pageMax > 0"
+          v-if="pageMax > 0 && $q.screen.gt.xs"
         >
           <div class="col-4">
             <div class="row items-center no-wrap">

src/stores/user/index.ts

@@ -209,11 +209,10 @@ const useUserStore = defineStore('api-user', () => {
     responsibleDistrictId?: string;
     activeBranchOnly?: boolean;
   }) {
-    const res = await api.get<Pagination<User[]>>(`/user`, { params: opts });
+    const res = await api.get<Pagination<User[]>>('/user', { params: opts });
 
     if (res && res.status === 200) {
-      data.value = res.data;
-      return data.value;
+      return res.data;
     }
     return false;
   }