refactor: 07 => screen.xs fetch scroll

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

@@ -241,7 +241,7 @@ async function fetchData() {
   });
 
   if (ret) {
-    data.value = ret.result;
+    $q.screen.xs ? data.value.push(...ret.result) : (data.value = ret.result);
     pageMax.value = Math.ceil(ret.total / pageSize.value);
     pageState.total = ret.total;
   }
@@ -316,7 +316,7 @@ watch(
 
     <!-- SEC: header content -->
     <section class="col surface-1 rounded bordered overflow-hidden">
-      <div class="column full-height">
+      <div class="column full-height no-wrap">
         <header
           class="row surface-3 justify-between full-width items-center bordered-b"
           style="z-index: 1"
@@ -448,6 +448,16 @@ watch(
         </article>
 
         <article v-else class="col q-pa-md surface-2 scroll full-width">
+          <q-infinite-scroll
+            :offset="100"
+            @load="
+              (_, done) => {
+                if ($q.screen.gt.xs || page === pageMax) return;
+                page = page + 1;
+                fetchData().then(() => done(page >= pageMax));
+              }
+            "
+          >
             <q-table
               flat
               bordered
@@ -466,7 +476,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 />
@@ -637,7 +651,9 @@ watch(
                           {{ props.row.code }}
                         </span>
                       </span>
-                    <nav class="row q-ml-auto items-center justify-end no-wrap">
+                      <nav
+                        class="row q-ml-auto items-center justify-end no-wrap"
+                      >
                         <q-btn
                           icon="mdi-eye-outline"
                           size="sm"
@@ -718,12 +734,21 @@ watch(
                 </section>
               </template>
             </q-table>
+            <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">