From 15081f899df7321ec7896f74f40a3014dcb8a23d Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 31 Jan 2025 16:05:03 +0700
Subject: [PATCH] refactor: 03 => enhance customer list fetching for mobile
 responsiveness and adjust pagination logic

---
 .../03_customer-management/TableEmpoloyee.vue |  6 +-
 src/pages/03_customer-management/MainPage.vue | 63 ++++++++++++-------
 2 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/src/components/03_customer-management/TableEmpoloyee.vue b/src/components/03_customer-management/TableEmpoloyee.vue
index 58404160..e5e49b51 100644
--- a/src/components/03_customer-management/TableEmpoloyee.vue
+++ b/src/components/03_customer-management/TableEmpoloyee.vue
@@ -116,7 +116,11 @@ defineEmits<{
         "
       >
         <q-td class="text-center" v-if="fieldSelected.includes('orderNumber')">
-          {{ (currentPage - 1) * pageSize + props.rowIndex + 1 }}
+          {{
+            $q.screen.xs
+              ? props.rowIndex + 1
+              : (currentPage - 1) * pageSize + props.rowIndex + 1
+          }}
         </q-td>
 
         <q-td v-if="fieldSelected.includes('firstName')">
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index c8b8b9dc..2893cfed 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -320,7 +320,7 @@ function deleteCustomerById(id: string) {
     action: async () => {
       await customerStore.deleteById(id);
 
-      await fetchListCustomer(true);
+      await fetchListCustomer(true, $q.screen.xs);
       customerFormState.value.dialogModal = false;
       flowStore.rotate();
     },
@@ -369,11 +369,16 @@ async function fetchListOfOptionBranch() {
   // TODO: Assign (first) branch of the user as register branch of the data
 }
 
-async function fetchListCustomer(fetchStats = false) {
+async function fetchListCustomer(fetchStats = false, mobileFetch?: boolean) {
+  const total = statsCustomerType.value.PERS + statsCustomerType.value.CORP;
+
   const resultList = await customerStore.fetchList({
     includeBranch: true,
-    page: currentPageCustomer.value,
-    pageSize: pageSize.value,
+    page: mobileFetch ? 1 : currentPageCustomer.value,
+    pageSize: mobileFetch
+      ? listCustomer.value.length +
+        (total === listCustomer.value.length ? 1 : 0)
+      : pageSize.value,
     status:
       currentStatus.value === 'All'
         ? undefined
@@ -391,9 +396,9 @@ async function fetchListCustomer(fetchStats = false) {
   });
 
   if (resultList) {
-    currentPageCustomer.value = resultList.page;
+    // currentPageCustomer.value = resultList.page;
     maxPageCustomer.value = Math.ceil(resultList.total / pageSize.value);
-    $q.screen.xs
+    $q.screen.xs && !mobileFetch
       ? listCustomer.value.push(...resultList.result)
       : (listCustomer.value = resultList.result);
   }
@@ -410,11 +415,21 @@ async function fetchListEmployee(opt?: {
   page?: number;
   pageSize?: number;
   customerId?: string;
+  mobileFetch?: boolean;
 }) {
   const resultListEmployee = await employeeStore.fetchList({
     customerId: opt?.customerId,
-    page: opt && opt.page ? opt.page : currentPageEmployee.value,
-    pageSize: opt && opt.pageSize ? opt.pageSize : pageSize.value,
+    page: opt
+      ? opt.mobileFetch
+        ? 1
+        : opt.page || currentPageEmployee.value
+      : currentPageEmployee.value,
+    pageSize: opt
+      ? opt.mobileFetch
+        ? listEmployee.value.length +
+          (employeeStats.value === listEmployee.value.length ? 1 : 0)
+        : opt.pageSize || pageSize.value
+      : pageSize.value,
     status:
       currentStatus.value === 'All'
         ? undefined
@@ -429,7 +444,7 @@ async function fetchListEmployee(opt?: {
     maxPageEmployee.value = Math.ceil(
       resultListEmployee.total / pageSize.value,
     );
-    $q.screen.xs
+    $q.screen.xs && !(opt && opt.mobileFetch)
       ? listEmployee.value.push(...resultListEmployee.result)
       : (listEmployee.value = resultListEmployee.result);
   }
@@ -474,7 +489,7 @@ async function toggleStatusEmployee(id: string, status: boolean) {
   if (res && employeeFormState.value.drawerModal)
     currentFromDataEmployee.value.status = res.status;
 
-  await fetchListEmployee();
+  await fetchListEmployee({ mobileFetch: $q.screen.xs });
   flowStore.rotate();
 }
 
@@ -485,7 +500,7 @@ async function toggleStatusCustomer(id: string, status: boolean) {
   if (res && customerFormState.value.drawerModal)
     customerFormData.value.status = res.status;
 
-  await fetchListCustomer();
+  await fetchListCustomer(false, $q.screen.xs);
   flowStore.rotate();
 }
 
@@ -535,7 +550,7 @@ async function deleteEmployeeById(opts: {
                 pageSize: 999,
                 customerId: customerFormState.value.currentCustomerId,
               }
-            : { fetchStats: true },
+            : { fetchStats: true, mobileFetch: $q.screen.xs },
         );
 
         flowStore.rotate();
@@ -839,8 +854,8 @@ const emptyCreateDialog = ref(false);
         >
           {{
             currentTab === 'employer'
-              ? listCustomer?.length
-              : listEmployee.length
+              ? statsCustomerType.PERS + statsCustomerType.CORP
+              : employeeStats
           }}
         </q-badge>
         <q-btn
@@ -1208,7 +1223,7 @@ const emptyCreateDialog = ref(false);
                   class="col q-pa-md scroll full-width"
                 >
                   <q-infinite-scroll
-                    :offset="100"
+                    :offset="10"
                     @load="
                       (_, done) => {
                         if (
@@ -1279,9 +1294,11 @@ const emptyCreateDialog = ref(false);
                             v-if="fieldSelected.includes('orderNumber')"
                           >
                             {{
-                              (currentPageCustomer - 1) * pageSize +
-                              props.rowIndex +
-                              1
+                              $q.screen.xs
+                                ? props.rowIndex + 1
+                                : (currentPageCustomer - 1) * pageSize +
+                                  props.rowIndex +
+                                  1
                             }}
                           </q-td>
 
@@ -1839,7 +1856,7 @@ const emptyCreateDialog = ref(false);
                   class="surface-2 q-pa-md scroll col full-width"
                 >
                   <q-infinite-scroll
-                    :offset="100"
+                    :offset="10"
                     @load="
                       (_, done) => {
                         if (
@@ -2390,7 +2407,7 @@ const emptyCreateDialog = ref(false);
                       customerFormState.editCustomerId,
                     );
 
-                    await fetchListCustomer(true);
+                    await fetchListCustomer(true, $q.screen.xs);
                     customerFormStore.resetForm();
                   }
                 "
@@ -2488,7 +2505,7 @@ const emptyCreateDialog = ref(false);
                   pageSize: 999,
                   customerId: customerFormState.currentCustomerId,
                 }
-              : { fetchStats: true },
+              : { fetchStats: true, mobileFetch: $q.screen.xs },
           );
 
           flowStore.rotate();
@@ -2506,7 +2523,7 @@ const emptyCreateDialog = ref(false);
           employeeConfirmUnsave();
           return true;
         } else {
-          fetchListEmployee();
+          if ($q.screen.gt.xs) fetchListEmployee();
         }
 
         employeeFormState.currentTab = 'personalInfo';
@@ -4449,7 +4466,7 @@ const emptyCreateDialog = ref(false);
                   pageSize: 999,
                   customerId: customerFormState.currentCustomerId,
                 }
-              : undefined,
+              : { mobileFetch: $q.screen.xs },
           );
         }