From 00e8782ca5a0ab87acca1262b4a6b679a1556d04 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 4 Feb 2025 09:53:07 +0700
Subject: [PATCH] refactor: 10 => enhance infinite scroll functionality and
 improve TableInvoice component structure

---
 src/pages/10_invoice/MainPage.vue     | 164 +++++++++++++++-----------
 src/pages/10_invoice/TableInvoice.vue |   8 +-
 2 files changed, 98 insertions(+), 74 deletions(-)

diff --git a/src/pages/10_invoice/MainPage.vue b/src/pages/10_invoice/MainPage.vue
index 165bf911..5b0274cc 100644
--- a/src/pages/10_invoice/MainPage.vue
+++ b/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,80 +329,101 @@ watch(
           <NoData :not-found="!!pageState.inputSearch" />
         </article>
         <article v-else class="col surface-2 full-width scroll q-pa-md">
-          <TableInvoice
-            :columns="columns"
-            :rows="data"
-            :grid="pageState.gridView"
-            @view="(quotationId) => triggerView({ quotationId })"
-            @preview="(quotationId) => viewDocExample(quotationId)"
+          <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),
+                );
+              }
+            "
           >
-            <template #grid="{ item }">
-              <div class="col-md-4 col-sm-6 col-12">
-                <QuotationCard
-                  hide-action
-                  :code="item.row.code"
-                  :title="item.row.quotation.workName"
-                  :status="
-                    $t(`invoice.status.${item.row.payment.paymentStatus}`)
-                  "
-                  :badge-color="
-                    hslaColors[item.row.payment.paymentStatus] || ''
-                  "
-                  :custom-data="[
-                    {
-                      label: $t('general.customer'),
-                      value:
-                        item.row.quotation.customerBranch.registerName ||
-                        `${item.row.quotation.customerBranch?.firstName || '-'} ${item.row.quotation.customerBranch?.lastName || ''}`,
-                    },
-                    {
-                      label: $t('taskOrder.issueDate'),
-                      value: new Date(item.row.createdAt).toLocaleString(
-                        'th-TH',
-                        {
-                          hour12: false,
-                        },
-                      ),
-                    },
-                    {
-                      label: $t('invoice.paymentDueDate'),
-                      value: new Date(
-                        item.row.quotation.dueDate,
-                      ).toLocaleDateString('th-TH', {
-                        year: 'numeric',
-                        month: '2-digit',
-                        day: 'numeric',
-                      }),
-                    },
-                    {
-                      label: $t('quotation.payType'),
-                      value: $t(
-                        `quotation.type.${item.row.quotation.payCondition}`,
-                      ),
-                    },
-                    {
-                      label: $t('preview.netValue'),
-                      value: item.row.amount,
-                    },
-                  ]"
-                  @view="
-                    () => triggerView({ quotationId: item.row.quotation.id })
-                  "
-                  @preview="
-                    () => {
-                      viewDocExample(item.row.quotation.id);
-                    }
-                  "
-                />
+            <TableInvoice
+              :columns="columns"
+              :rows="data"
+              :grid="pageState.gridView"
+              @view="(quotationId) => triggerView({ quotationId })"
+              @preview="(quotationId) => viewDocExample(quotationId)"
+            >
+              <template #grid="{ item }">
+                <div class="col-md-4 col-sm-6 col-12">
+                  <QuotationCard
+                    hide-action
+                    :code="item.row.code"
+                    :title="item.row.quotation.workName"
+                    :status="
+                      $t(`invoice.status.${item.row.payment.paymentStatus}`)
+                    "
+                    :badge-color="
+                      hslaColors[item.row.payment.paymentStatus] || ''
+                    "
+                    :custom-data="[
+                      {
+                        label: $t('general.customer'),
+                        value:
+                          item.row.quotation.customerBranch.registerName ||
+                          `${item.row.quotation.customerBranch?.firstName || '-'} ${item.row.quotation.customerBranch?.lastName || ''}`,
+                      },
+                      {
+                        label: $t('taskOrder.issueDate'),
+                        value: new Date(item.row.createdAt).toLocaleString(
+                          'th-TH',
+                          {
+                            hour12: false,
+                          },
+                        ),
+                      },
+                      {
+                        label: $t('invoice.paymentDueDate'),
+                        value: new Date(
+                          item.row.quotation.dueDate,
+                        ).toLocaleDateString('th-TH', {
+                          year: 'numeric',
+                          month: '2-digit',
+                          day: 'numeric',
+                        }),
+                      },
+                      {
+                        label: $t('quotation.payType'),
+                        value: $t(
+                          `quotation.type.${item.row.quotation.payCondition}`,
+                        ),
+                      },
+                      {
+                        label: $t('preview.netValue'),
+                        value: item.row.amount,
+                      },
+                    ]"
+                    @view="
+                      () => triggerView({ quotationId: item.row.quotation.id })
+                    "
+                    @preview="
+                      () => {
+                        viewDocExample(item.row.quotation.id);
+                      }
+                    "
+                  />
+                </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>
-          </TableInvoice>
+          </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">
diff --git a/src/pages/10_invoice/TableInvoice.vue b/src/pages/10_invoice/TableInvoice.vue
index 640e2aed..5ae938c2 100644
--- a/src/pages/10_invoice/TableInvoice.vue
+++ b/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,8 +92,10 @@ defineEmits<{
           </template>
           <template v-if="col.name === '#order'">
             {{
-              col.field(props.row) +
-              (invoiceStore.page - 1) * invoiceStore.pageSize
+              $q.screen.xs
+                ? props.rowIndex + 1
+                : col.field(props.row) +
+                  (invoiceStore.page - 1) * invoiceStore.pageSize
             }}
           </template>
           <template v-if="col.name === '#status'">