From 1fc6b39e37c0a1fb9b2405c6af9dde420f11f51e Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 3 Feb 2025 11:22:33 +0700
Subject: [PATCH] refactor: 05 => xs scroll & adjust TableQuotation row index
 calculation

---
 .../05_quotation/TableQuotation.vue           |  10 +-
 src/pages/05_quotation/MainPage.vue           | 229 ++++++++++--------
 2 files changed, 137 insertions(+), 102 deletions(-)

diff --git a/src/components/05_quotation/TableQuotation.vue b/src/components/05_quotation/TableQuotation.vue
index d24b0448..e51b9979 100644
--- a/src/components/05_quotation/TableQuotation.vue
+++ b/src/components/05_quotation/TableQuotation.vue
@@ -16,12 +16,16 @@ const props = withDefaults(
     grid?: boolean;
     visibleColumns?: string[];
     hideEdit?: boolean;
+    page?: number;
+    pageSize?: number;
   }>(),
   {
     row: () => [],
     column: () => [],
     grid: false,
     visibleColumns: () => [],
+    page: 1,
+    pageSize: 30,
   },
 );
 
@@ -64,7 +68,11 @@ defineEmits<{
     <template v-slot:body="props">
       <q-tr :class="{ urgent: props.row.urgent }">
         <q-td v-if="visibleColumns.includes('order')">
-          {{ props.rowIndex + 1 }}
+          {{
+            $q.screen.xs
+              ? props.rowIndex + 1
+              : (page - 1) * pageSize + props.rowIndex + 1
+          }}
         </q-td>
 
         <q-td v-if="visibleColumns.includes('workName')">
diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index 82a07861..12fae417 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -278,10 +278,10 @@ onMounted(async () => {
   flowStore.rotate();
 });
 
-async function fetchQuotationList() {
+async function fetchQuotationList(mobileFetch?: boolean) {
   {
     const ret = await quotationStore.getQuotationList({
-      page: quotationPage.value,
+      page: mobileFetch ? 1 : quotationPage.value,
       pageSize: quotationPageSize.value,
       status:
         pageState.currentTab !== 'Issued'
@@ -301,7 +301,10 @@ async function fetchQuotationList() {
     });
 
     if (ret) {
-      quotationData.value = ret.result;
+      quotationData.value =
+        $q.screen.xs && !mobileFetch
+          ? [...quotationData.value, ...ret.result]
+          : ret.result;
       quotationPageMax.value = Math.ceil(ret.total / quotationPageSize.value);
       pageState.total = ret.total;
     }
@@ -319,7 +322,11 @@ async function fetchQuotationList() {
 
 watch(
   [() => pageState.currentTab, () => pageState.inputSearch, quotationPageSize],
-  fetchQuotationList,
+  () => {
+    quotationPage.value = 1;
+    quotationData.value = [];
+    fetchQuotationList();
+  },
 );
 
 async function storeDataLocal(id: string) {
@@ -383,19 +390,11 @@ async function storeDataLocal(id: string) {
         "
       >
         {{
-          pageState.currentTab === 'Issued'
-            ? quotationStats.issued
-            : pageState.currentTab === 'Accepted'
-              ? quotationStats.accepted
-              : pageState.currentTab === 'Expired'
-                ? quotationStats.expired
-                : pageState.currentTab === 'Invoice'
-                  ? quotationStats.paymentInProcess
-                  : pageState.currentTab === 'PaymentSuccess'
-                    ? quotationStats.paymentSuccess
-                    : pageState.currentTab === 'ProcessComplete'
-                      ? quotationStats.processComplete
-                      : 0
+          quotationStats[
+            pageState.currentTab === 'Invoice'
+              ? 'paymentInProcess'
+              : (pageState.currentTab.toLowerCase() as keyof typeof quotationStats)
+          ]
         }}
       </q-badge>
       <q-btn
@@ -625,106 +624,134 @@ async function storeDataLocal(id: string) {
         </article>
         <article v-else class="col surface-2 full-width scroll">
           <div class="q-pa-md">
-            <TableQuotation
-              :columns="columnQuotation"
-              :rows="quotationData"
-              :visible-columns="pageState.fieldSelected"
-              :grid="pageState.gridView"
-              :hide-edit="pageState.currentTab !== 'Issued'"
-              @preview="(id: any) => storeDataLocal(id)"
-              @view="
-                (item) => {
-                  triggerQuotationDialog({
-                    statusDialog: 'info',
-                    quotationId: item.id,
-                    branchId: item.customerBranch.customer.registeredBranchId,
+            <q-infinite-scroll
+              :key="pageState.currentTab"
+              :offset="100"
+              @load="
+                (_, done) => {
+                  if ($q.screen.gt.xs) return;
+                  quotationPage = quotationPage + 1;
+
+                  fetchQuotationList().then(() => {
+                    done(quotationPage >= quotationPageMax);
                   });
                 }
               "
-              @edit="
-                (item) =>
-                  triggerQuotationDialog({
-                    statusDialog: 'edit',
-                    quotationId: item.id,
-                    branchId: item.customerBranch.customer.registeredBranchId,
-                  })
-              "
-              @delete="(id) => triggerDialogDeleteQuottaion(id)"
             >
-              <template #grid="{ item }">
-                <div class="col-md-4 col-sm-6 col-12 column">
-                  <QuotationCard
-                    class="col"
-                    hide-kebab-delete
-                    :hide-kebab-edit="!(pageState.currentTab === 'Issued')"
-                    :urgent="item.row.urgent"
-                    :code="item.row.code"
-                    :title="item.row.workName"
-                    :created-at="
-                      new Date(item.row.createdAt).toLocaleString('th-TH', {
-                        hour12: false,
-                      })
-                    "
-                    :valid-until="
-                      (() => {
-                        const date = new Date(item.row.dueDate);
-                        date.setHours(23, 59, 59, 0);
-                        return date.toLocaleString('th-TH', {
+              <TableQuotation
+                :page="quotationPage"
+                :page-size="quotationPageSize"
+                :columns="columnQuotation"
+                :rows="quotationData"
+                :visible-columns="pageState.fieldSelected"
+                :grid="pageState.gridView"
+                :hide-edit="pageState.currentTab !== 'Issued'"
+                @preview="(id: any) => storeDataLocal(id)"
+                @view="
+                  (item) => {
+                    triggerQuotationDialog({
+                      statusDialog: 'info',
+                      quotationId: item.id,
+                      branchId: item.customerBranch.customer.registeredBranchId,
+                    });
+                  }
+                "
+                @edit="
+                  (item) =>
+                    triggerQuotationDialog({
+                      statusDialog: 'edit',
+                      quotationId: item.id,
+                      branchId: item.customerBranch.customer.registeredBranchId,
+                    })
+                "
+                @delete="(id) => triggerDialogDeleteQuottaion(id)"
+              >
+                <template #grid="{ item }">
+                  <div class="col-md-4 col-sm-6 col-12 column">
+                    <QuotationCard
+                      class="col"
+                      hide-kebab-delete
+                      :hide-kebab-edit="!(pageState.currentTab === 'Issued')"
+                      :urgent="item.row.urgent"
+                      :code="item.row.code"
+                      :title="item.row.workName"
+                      :created-at="
+                        new Date(item.row.createdAt).toLocaleString('th-TH', {
                           hour12: false,
-                        });
-                      })()
-                    "
-                    :status="$t(`quotation.status.${item.row.quotationStatus}`)"
-                    :worker-count="item.row._count.worker"
-                    :worker-max="item.row.workerMax || item.row._count.worker"
-                    :customer-name="
-                      item.row.customerBranch.registerName ||
-                      `${item.row.customerBranch.firstName || '-'} ${item.row.customerBranch.lastName || ''}`
-                    "
-                    :reporter="
-                      $i18n.locale === 'eng'
-                        ? item.row.createdBy.firstNameEN +
-                          ' ' +
-                          item.row.createdBy.lastNameEN
-                        : item.row.createdBy.firstName +
-                          ' ' +
-                          item.row.createdBy.lastName
-                    "
-                    :total-price="item.row.finalPrice"
-                    :badge-color="hslaColors[item.row.quotationStatus] || ''"
-                    @preview="storeDataLocal(item.row.id)"
-                    @view="
-                      () => {
+                        })
+                      "
+                      :valid-until="
+                        (() => {
+                          const date = new Date(item.row.dueDate);
+                          date.setHours(23, 59, 59, 0);
+                          return date.toLocaleString('th-TH', {
+                            hour12: false,
+                          });
+                        })()
+                      "
+                      :status="
+                        $t(`quotation.status.${item.row.quotationStatus}`)
+                      "
+                      :worker-count="item.row._count.worker"
+                      :worker-max="item.row.workerMax || item.row._count.worker"
+                      :customer-name="
+                        item.row.customerBranch.registerName ||
+                        `${item.row.customerBranch.firstName || '-'} ${item.row.customerBranch.lastName || ''}`
+                      "
+                      :reporter="
+                        $i18n.locale === 'eng'
+                          ? item.row.createdBy.firstNameEN +
+                            ' ' +
+                            item.row.createdBy.lastNameEN
+                          : item.row.createdBy.firstName +
+                            ' ' +
+                            item.row.createdBy.lastName
+                      "
+                      :total-price="item.row.finalPrice"
+                      :badge-color="hslaColors[item.row.quotationStatus] || ''"
+                      @preview="storeDataLocal(item.row.id)"
+                      @view="
+                        () => {
+                          triggerQuotationDialog({
+                            statusDialog: 'info',
+                            quotationId: item.row.id,
+                            branchId:
+                              item.row.customerBranch.customer
+                                .registeredBranchId,
+                          });
+                        }
+                      "
+                      @edit="
                         triggerQuotationDialog({
-                          statusDialog: 'info',
+                          statusDialog: 'edit',
                           quotationId: item.row.id,
                           branchId:
                             item.row.customerBranch.customer.registeredBranchId,
-                        });
-                      }
-                    "
-                    @edit="
-                      triggerQuotationDialog({
-                        statusDialog: 'edit',
-                        quotationId: item.row.id,
-                        branchId:
-                          item.row.customerBranch.customer.registeredBranchId,
-                      })
-                    "
-                    @link="triggerReceiptDialog(item.row)"
-                    @upload="console.log('upload')"
-                    @delete="triggerDialogDeleteQuottaion(item.row.id)"
-                  />
+                        })
+                      "
+                      @link="triggerReceiptDialog(item.row)"
+                      @upload="console.log('upload')"
+                      @delete="triggerDialogDeleteQuottaion(item.row.id)"
+                    />
+                  </div>
+                </template>
+              </TableQuotation>
+              <template v-slot:loading>
+                <div
+                  v-if="$q.screen.lt.sm && quotationPage !== quotationPageMax"
+                  class="row justify-center"
+                >
+                  <q-spinner-dots color="primary" size="40px" />
                 </div>
               </template>
-            </TableQuotation>
+            </q-infinite-scroll>
           </div>
         </article>
 
         <!-- SEC: footer content -->
         <footer
           class="row justify-between items-center q-px-md q-py-sm surface-2"
-          v-if="quotationPageMax > 0"
+          v-if="quotationPageMax > 0 && $q.screen.gt.xs"
         >
           <div class="col-4">
             <div class="row items-center no-wrap">
@@ -755,7 +782,7 @@ async function storeDataLocal(id: string) {
             <PaginationComponent
               v-model:current-page="quotationPage"
               v-model:max-page="quotationPageMax"
-              :fetch-data="fetchQuotationList"
+              :fetch-data="() => fetchQuotationList()"
             />
           </nav>
         </footer>