refactor: 07, 13 => remove console logs, improve infinite scroll handling, and enhance TableReceipt component

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

@@ -460,7 +460,6 @@ watch(
             @load="
               (_, done) => {
                 if ($q.screen.gt.xs || page === pageMax) return;
-                console.log('load');
                 page = page + 1;
                 fetchData().then(() => done(page >= pageMax));
               }

src/pages/13_receipt/MainPage.vue

@@ -15,10 +15,8 @@ import QuotationCard from 'src/components/05_quotation/QuotationCard.vue';
 import { useNavigator } from 'src/stores/navigator';
 import { columns, hslaColors } from './constants';
 import useFlowStore from 'src/stores/flow';
-import { useRequestList } from 'src/stores/request-list';
 import { usePayment, useReceipt } from 'src/stores/payment';
-import { Receipt, PaymentDataStatus } from 'src/stores/payment/types';
+import { PaymentDataStatus } from 'src/stores/payment/types';
-import { Quotation } from 'src/stores/quotations';
 import { QSelect, useQuasar } from 'quasar';
 
 const $q = useQuasar();
@@ -53,7 +51,7 @@ async function fetchList(opts?: { rotateFlowId?: boolean }) {
     query: pageState.inputSearch,
   });
   if (ret) {
-    data.value = ret.result;
+    data.value = $q.screen.xs ? [...data.value, ...ret.result] : ret.result;
     pageState.total = ret.total;
     pageMax.value = Math.ceil(ret.total / pageSize.value);
   }
@@ -89,7 +87,6 @@ onMounted(async () => {
 
   navigatorStore.current.title = 'receipt.title';
   navigatorStore.current.path = [{ text: 'receipt.caption', i18n: true }];
-
   await fetchList({ rotateFlowId: true });
 });
 
@@ -98,9 +95,12 @@ watch(
     () => pageState.inputSearch,
     () => pageState.statusFilter,
     () => pageSize.value,
-    () => page.value,
   ],
-  () => fetchList({ rotateFlowId: true }),
+  () => {
+    page.value = 1;
+    data.value = [];
+    fetchList({ rotateFlowId: true });
+  },
 );
 </script>
 <template>
@@ -289,12 +289,23 @@ watch(
           <NoData :not-found="!!pageState.inputSearch" />
         </article>
         <article v-else class="col surface-2 full-width scroll q-pa-md">
+          <q-infinite-scroll
+            :offset="10"
+            @load="
+              (_, done) => {
+                if ($q.screen.gt.xs || page === pageMax) return;
+                page = page + 1;
+                fetchList().then(() => done(page >= pageMax));
+              }
+            "
+          >
             <TableReceipt
               :columns="columns"
               :rows="data"
               :grid="pageState.gridView"
               @view="
-              (data) => triggerView({ quotationId: data.invoice.quotation.id })
+                (data) =>
+                  triggerView({ quotationId: data.invoice.quotation.id })
               "
               @preview="(data) => viewDocExample(data.id)"
             >
@@ -358,12 +369,21 @@ watch(
                 </div>
               </template>
             </TableReceipt>
+            <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">
@@ -394,7 +414,11 @@ watch(
             <PaginationComponent
               v-model:current-page="page"
               v-model:max-page="pageMax"
-              :fetch-data="() => fetchList({ rotateFlowId: true })"
+              :fetch-data="
+                () => {
+                  fetchList({ rotateFlowId: true });
+                }
+              "
             />
           </nav>
         </footer>

src/pages/13_receipt/TableReceipt.vue

@@ -75,7 +75,7 @@ defineEmits<{
       } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
     >
       <q-tr :class="{ dark: $q.dark.isActive }" class="text-center">
-        <q-td v-for="col in columns" :align="col.align">
+        <q-td v-for="col in columns" :align="col.align" :key="col.name">
           <!-- NOTE: custom column will starts with # -->
           <template v-if="!col.name.startsWith('#')">
             <span>
@@ -88,7 +88,9 @@ defineEmits<{
           </template>
           <template v-if="col.name === '#order'">
             {{
-              col.field(props.row) +
+              $q.screen.xs
+                ? props.rowIndex + 1
+                : col.field(props.row) +
                   (receiptStore.page - 1) * receiptStore.pageSize
             }}
           </template>