From 74f0764ae8254c6f6386f451555dfab689b65868 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 3 Feb 2025 17:05:04 +0700
Subject: [PATCH] refactor: 07, 13 => remove console logs, improve infinite
 scroll handling, and enhance TableReceipt component

---
 src/pages/07_agencies-management/MainPage.vue |   1 -
 src/pages/13_receipt/MainPage.vue             | 172 ++++++++++--------
 src/pages/13_receipt/TableReceipt.vue         |   8 +-
 3 files changed, 103 insertions(+), 78 deletions(-)

diff --git a/src/pages/07_agencies-management/MainPage.vue b/src/pages/07_agencies-management/MainPage.vue
index de42c851..748353a8 100644
--- a/src/pages/07_agencies-management/MainPage.vue
+++ b/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));
               }
diff --git a/src/pages/13_receipt/MainPage.vue b/src/pages/13_receipt/MainPage.vue
index 742a1394..8dede01c 100644
--- a/src/pages/13_receipt/MainPage.vue
+++ b/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 { Quotation } from 'src/stores/quotations';
+import { PaymentDataStatus } from 'src/stores/payment/types';
 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,81 +289,101 @@ watch(
           <NoData :not-found="!!pageState.inputSearch" />
         </article>
         <article v-else class="col surface-2 full-width scroll q-pa-md">
-          <TableReceipt
-            :columns="columns"
-            :rows="data"
-            :grid="pageState.gridView"
-            @view="
-              (data) => triggerView({ quotationId: data.invoice.quotation.id })
+          <q-infinite-scroll
+            :offset="10"
+            @load="
+              (_, done) => {
+                if ($q.screen.gt.xs || page === pageMax) return;
+                page = page + 1;
+                fetchList().then(() => done(page >= pageMax));
+              }
             "
-            @preview="(data) => viewDocExample(data.id)"
           >
-            <template #grid="{ item }">
-              <div class="col-md-4 col-sm-6 col-12">
-                <QuotationCard
-                  hide-action
-                  :code="item.row.code"
-                  :title="item.row.invoice.quotation.workName"
-                  :status="$t(`invoice.status.${item.row.paymentStatus}`)"
-                  :badge-color="hslaColors[item.row.paymentStatus] || ''"
-                  :custom-data="[
-                    {
-                      label: $t('general.customer'),
-                      value:
-                        item.row.invoice.quotation.customerBranch
-                          .registerName ||
-                        `${item.row.invoice.quotation.customerBranch?.firstName || '-'} ${item.row.invoice.quotation.customerBranch?.lastName || ''}`,
-                    },
-                    {
-                      label: $t('taskOrder.issueDate'),
-                      value: new Date(
-                        item.row.invoice.quotation.createdAt,
-                      ).toLocaleString('th-TH', {
-                        hour12: false,
-                      }),
-                    },
-                    {
-                      label: $t('invoice.paymentDueDate'),
-                      value: new Date(
-                        item.row.invoice.quotation.dueDate,
-                      ).toLocaleDateString('th-TH', {
-                        year: 'numeric',
-                        month: '2-digit',
-                        day: 'numeric',
-                      }),
-                    },
-                    {
-                      label: $t('quotation.payType'),
-                      value: $t(
-                        `quotation.type.${item.row.invoice.quotation.payCondition}`,
-                      ),
-                    },
-                    {
-                      label: $t('preview.netValue'),
-                      value: item.row.amount,
-                    },
-                  ]"
-                  @view="
-                    () =>
-                      triggerView({
-                        quotationId: item.row.invoice.quotation.id,
-                      })
-                  "
-                  @preview="
-                    () => {
-                      viewDocExample(item.row.invoice.quotation.id);
-                    }
-                  "
-                />
+            <TableReceipt
+              :columns="columns"
+              :rows="data"
+              :grid="pageState.gridView"
+              @view="
+                (data) =>
+                  triggerView({ quotationId: data.invoice.quotation.id })
+              "
+              @preview="(data) => viewDocExample(data.id)"
+            >
+              <template #grid="{ item }">
+                <div class="col-md-4 col-sm-6 col-12">
+                  <QuotationCard
+                    hide-action
+                    :code="item.row.code"
+                    :title="item.row.invoice.quotation.workName"
+                    :status="$t(`invoice.status.${item.row.paymentStatus}`)"
+                    :badge-color="hslaColors[item.row.paymentStatus] || ''"
+                    :custom-data="[
+                      {
+                        label: $t('general.customer'),
+                        value:
+                          item.row.invoice.quotation.customerBranch
+                            .registerName ||
+                          `${item.row.invoice.quotation.customerBranch?.firstName || '-'} ${item.row.invoice.quotation.customerBranch?.lastName || ''}`,
+                      },
+                      {
+                        label: $t('taskOrder.issueDate'),
+                        value: new Date(
+                          item.row.invoice.quotation.createdAt,
+                        ).toLocaleString('th-TH', {
+                          hour12: false,
+                        }),
+                      },
+                      {
+                        label: $t('invoice.paymentDueDate'),
+                        value: new Date(
+                          item.row.invoice.quotation.dueDate,
+                        ).toLocaleDateString('th-TH', {
+                          year: 'numeric',
+                          month: '2-digit',
+                          day: 'numeric',
+                        }),
+                      },
+                      {
+                        label: $t('quotation.payType'),
+                        value: $t(
+                          `quotation.type.${item.row.invoice.quotation.payCondition}`,
+                        ),
+                      },
+                      {
+                        label: $t('preview.netValue'),
+                        value: item.row.amount,
+                      },
+                    ]"
+                    @view="
+                      () =>
+                        triggerView({
+                          quotationId: item.row.invoice.quotation.id,
+                        })
+                    "
+                    @preview="
+                      () => {
+                        viewDocExample(item.row.invoice.quotation.id);
+                      }
+                    "
+                  />
+                </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>
-          </TableReceipt>
+          </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>
diff --git a/src/pages/13_receipt/TableReceipt.vue b/src/pages/13_receipt/TableReceipt.vue
index 09d1c64f..825d3da7 100644
--- a/src/pages/13_receipt/TableReceipt.vue
+++ b/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,8 +88,10 @@ defineEmits<{
           </template>
           <template v-if="col.name === '#order'">
             {{
-              col.field(props.row) +
-              (receiptStore.page - 1) * receiptStore.pageSize
+              $q.screen.xs
+                ? props.rowIndex + 1
+                : col.field(props.row) +
+                  (receiptStore.page - 1) * receiptStore.pageSize
             }}
           </template>
           <template v-if="col.name === '#action'">