refactor: 05 => xs scroll & adjust TableQuotation row index calculation

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')">

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[
-            ? quotationStats.issued
+            pageState.currentTab === 'Invoice'
-            : pageState.currentTab === 'Accepted'
+              ? 'paymentInProcess'
-              ? quotationStats.accepted
+              : (pageState.currentTab.toLowerCase() as keyof typeof quotationStats)
-              : pageState.currentTab === 'Expired'
+          ]
-                ? quotationStats.expired
-                : pageState.currentTab === 'Invoice'
-                  ? quotationStats.paymentInProcess
-                  : pageState.currentTab === 'PaymentSuccess'
-                    ? quotationStats.paymentSuccess
-                    : pageState.currentTab === 'ProcessComplete'
-                      ? quotationStats.processComplete
-                      : 0
         }}
       </q-badge>
       <q-btn
@@ -625,7 +624,23 @@ async function storeDataLocal(id: string) {
         </article>
         <article v-else class="col surface-2 full-width scroll">
           <div class="q-pa-md">
+            <q-infinite-scroll
+              :key="pageState.currentTab"
+              :offset="100"
+              @load="
+                (_, done) => {
+                  if ($q.screen.gt.xs) return;
+                  quotationPage = quotationPage + 1;
+
+                  fetchQuotationList().then(() => {
+                    done(quotationPage >= quotationPageMax);
+                  });
+                }
+              "
+            >
               <TableQuotation
+                :page="quotationPage"
+                :page-size="quotationPageSize"
                 :columns="columnQuotation"
                 :rows="quotationData"
                 :visible-columns="pageState.fieldSelected"
@@ -674,7 +689,9 @@ async function storeDataLocal(id: string) {
                           });
                         })()
                       "
-                    :status="$t(`quotation.status.${item.row.quotationStatus}`)"
+                      :status="
+                        $t(`quotation.status.${item.row.quotationStatus}`)
+                      "
                       :worker-count="item.row._count.worker"
                       :worker-max="item.row.workerMax || item.row._count.worker"
                       :customer-name="
@@ -699,7 +716,8 @@ async function storeDataLocal(id: string) {
                             statusDialog: 'info',
                             quotationId: item.row.id,
                             branchId:
-                            item.row.customerBranch.customer.registeredBranchId,
+                              item.row.customerBranch.customer
+                                .registeredBranchId,
                           });
                         }
                       "
@@ -718,13 +736,22 @@ async function storeDataLocal(id: string) {
                   </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>
+            </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>