refactor: 10 => enhance infinite scroll functionality and improve TableInvoice component structure

src/pages/10_invoice/MainPage.vue

@@ -16,10 +16,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 { useInvoice } from 'src/stores/payment';
 import { Invoice, PaymentDataStatus } from 'src/stores/payment/types';
-import { Quotation } from 'src/stores/quotations';
 
 const $q = useQuasar();
 const navigatorStore = useNavigator();
@@ -60,7 +58,7 @@ async function fetchList(opts?: { rotateFlowId?: boolean }) {
     debitNoteOnly: false,
   });
   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);
   }
@@ -122,9 +120,12 @@ watch(
     () => pageState.inputSearch,
     () => pageState.statusFilter,
     () => pageSize.value,
-    () => page.value,
   ],
-  () => fetchList({ rotateFlowId: true }),
+  () => {
+    page.value = 1;
+    data.value = [];
+    fetchList({ rotateFlowId: true });
+  },
 );
 </script>
 <template>
@@ -328,6 +329,18 @@ watch(
           <NoData :not-found="!!pageState.inputSearch" />
         </article>
         <article v-else class="col surface-2 full-width scroll q-pa-md">
+          <q-infinite-scroll
+            :offset="100"
+            @load="
+              (_, done) => {
+                if ($q.screen.gt.xs || page === pageMax) return;
+                page = page + 1;
+                fetchList({ rotateFlowId: true }).then(() =>
+                  done(page >= pageMax),
+                );
+              }
+            "
+          >
             <TableInvoice
               :columns="columns"
               :rows="data"
@@ -396,12 +409,21 @@ watch(
                 </div>
               </template>
             </TableInvoice>
+            <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/pages/10_invoice/TableInvoice.vue

@@ -79,7 +79,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>
@@ -92,7 +92,9 @@ defineEmits<{
           </template>
           <template v-if="col.name === '#order'">
             {{
-              col.field(props.row) +
+              $q.screen.xs
+                ? props.rowIndex + 1
+                : col.field(props.row) +
                   (invoiceStore.page - 1) * invoiceStore.pageSize
             }}
           </template>