From 65cc35bc337bc002c05006e56e8a6cac0f5e4ac8 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 28 Jun 2024 13:27:38 +0700
Subject: [PATCH] refactor: paging search

---
 src/pages/03_customer-management/MainPage.vue | 178 +++++++-----------
 1 file changed, 68 insertions(+), 110 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 6b1efea8..29651d50 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch, toRaw } from 'vue';
-import { storeToRefs } from 'pinia';
 
-import { Pagination } from 'src/stores/types';
 import useCustomerStore from 'src/stores/customer';
 import useEmployeeStore from 'src/stores/employee';
 import useOptionStore from 'src/stores/options';
@@ -39,7 +37,6 @@ import {
   Customer,
   CustomerUpdate,
   CustomerBranch,
-  CustomerBranchCreate,
   CustomerType,
 } from 'stores/customer/types';
 import {
@@ -47,7 +44,6 @@ import {
   Employee,
   EmployeeWork,
   EmployeeCheckup,
-  EmployeeOther,
 } from 'stores/employee/types';
 import { onMounted } from 'vue';
 
@@ -57,7 +53,6 @@ import FormEmployeeWorkHistory from 'src/components/03_customer-management/FormE
 import FormEmployeeOther from 'src/components/03_customer-management/FormEmployeeOther.vue';
 import FormEmployeePassport from 'src/components/03_customer-management/FormEmployeePassport.vue';
 import FormEmployeeVisa from 'src/components/03_customer-management/FormEmployeeVisa.vue';
-import { Icon } from '@iconify/vue';
 import { dialog, calculateAge } from 'src/stores/utils';
 import { useI18n } from 'vue-i18n';
 import useFlowStore from 'src/stores/flow';
@@ -72,7 +67,6 @@ const {
   editById,
   fetchListById,
   createBranch,
-  deleteBranchById,
   editBranchById,
   fetchListBranch,
   fetchListBranchById,
@@ -234,7 +228,10 @@ const profileUrl = ref<string | null>('');
 const infoDrawer = ref(false);
 const infoDrawerEdit = ref(false);
 const isMainPage = ref<boolean>(true);
-const statsCustomerType = ref<CustomerStats>();
+const statsCustomerType = ref<CustomerStats>({
+  CORP: 0,
+  PERS: 0,
+});
 const currentCustomerId = ref<string>('');
 const dialogInputCustomerBranchForm = ref<boolean>(false);
 const currentCustomer = ref<Customer>();
@@ -257,7 +254,7 @@ const pageSizeEmployee = ref<number>(30);
 const currentBranchId = ref<string>('');
 const currentCustomerName = ref<string>('');
 const currentCustomerUrlImage = ref<string | null>(null);
-const genderselector = ref<string>('');
+const genderSelector = ref<string>('');
 
 const totalCustomer = ref<number>(0);
 
@@ -600,6 +597,7 @@ function deleteCustomerById(id: string) {
 
       if (resultList) listCustomer.value = resultList.result;
       infoDrawer.value = false;
+      flowStore.rotate();
     },
     cancel: () => {},
   });
@@ -678,32 +676,6 @@ async function onSubmitCustomerBranch() {
   flowStore.rotate();
 }
 
-const resultSearch = ref<(Customer & { branch: CustomerBranch[] })[]>();
-const resultSearchEmployee = ref();
-
-async function searchCustomer() {
-  const resultList = await fetchList({
-    query: inputSearch.value,
-    includeBranch: true,
-  });
-
-  if (resultList) {
-    resultSearch.value = resultList.result;
-  }
-  flowStore.rotate();
-}
-
-async function searchEmployee() {
-  const resultList = await employeeStore.fetchList({
-    query: inputSearch.value,
-  });
-
-  if (resultList) {
-    resultSearchEmployee.value = resultList.result;
-  }
-  flowStore.rotate();
-}
-
 async function fetchListCustomer() {
   const resultList = await fetchList({
     includeBranch: true,
@@ -715,6 +687,7 @@ async function fetchListCustomer() {
         : currentStatus.value === 'ACTIVE'
           ? 'ACTIVE'
           : 'INACTIVE',
+    query: inputSearch.value,
   });
 
   if (resultList) {
@@ -727,13 +700,20 @@ async function fetchListCustomer() {
   }
 }
 
-async function fetchListEmployee(param?: {
-  gender?: string;
-  status?: 'CREATED' | 'ACTIVE' | 'INACTIVE' | undefined;
-}) {
-  const resultListEmployee = await employeeStore.fetchList(param);
+async function fetchListEmployee() {
+  const resultListEmployee = await employeeStore.fetchList({
+    page: currentPageCustomer.value,
+    pageSize: pageSizeCustomer.value,
+    status:
+      currentStatus.value === 'All'
+        ? undefined
+        : currentStatus.value === 'ACTIVE'
+          ? 'ACTIVE'
+          : 'INACTIVE',
+    query: inputSearch.value,
+    gender: genderSelector.value,
+  });
   if (resultListEmployee) {
-    currentPageEmployee.value = resultListEmployee.page;
     maxPageEmployee.value = Math.ceil(
       resultListEmployee.total / pageSizeEmployee.value,
     );
@@ -1106,8 +1086,6 @@ onMounted(async () => {
   });
 
   if (resultStats) {
-    totalCustomer.value = resultStats.CORP + resultStats.PERS;
-
     statsCustomerType.value = resultStats;
   }
 
@@ -1222,33 +1200,24 @@ watch(
   },
 );
 
-watch(genderselector, async (gender) => {
-  await fetchListEmployee({ gender: gender });
-  flowStore.rotate();
-});
-
-watch(currentStatus, async () => {
-  if (selectorLabel.value === 'EMPLOYER') {
-    await fetchListCustomer();
-  } else {
-    await fetchListEmployee({
-      status:
-        currentStatus.value === 'All'
-          ? undefined
-          : currentStatus.value === 'ACTIVE'
-            ? 'ACTIVE'
-            : 'INACTIVE',
-    });
-  }
+watch(genderSelector, async () => {
+  await fetchListEmployee();
   flowStore.rotate();
 });
 
 watch(selectorLabel, async () => {
-  if (inputSearch.value) {
-    inputSearch.value = undefined;
-    resultSearch.value = undefined;
-    resultSearchEmployee.value = undefined;
+  if (inputSearch.value) inputSearch.value = undefined;
+});
+
+watch([inputSearch, currentStatus], async () => {
+  if (selectorLabel.value === 'EMPLOYEE') {
+    currentPageEmployee.value = 1;
+    await fetchListEmployee();
+  } else {
+    currentPageCustomer.value = 1;
+    await fetchListCustomer();
   }
+  flowStore.rotate();
 });
 </script>
 
@@ -1368,7 +1337,7 @@ watch(selectorLabel, async () => {
             />
             <q-btn-toggle
               v-else
-              v-model="genderselector"
+              v-model="genderSelector"
               id="btn-mode"
               class="no-shadow"
               padding="0px"
@@ -1384,9 +1353,9 @@ watch(selectorLabel, async () => {
                   class="bordered-t bordered-l bordered-b q-px-md q-py-sm app-text-female text-weight-medium text-body2 row items-center"
                   @click="
                     async () => {
-                      if (genderselector === 'female') {
+                      if (genderSelector === 'female') {
                         await fetchListEmployee();
-                        genderselector = '';
+                        genderSelector = '';
                       }
                     }
                   "
@@ -1407,9 +1376,9 @@ watch(selectorLabel, async () => {
                   class="bordered q-px-md q-py-sm app-text-male text-weight-medium text-body2 row items-center"
                   @click="
                     async () => {
-                      if (genderselector === 'male') {
+                      if (genderSelector === 'male') {
                         await fetchListEmployee();
-                        genderselector = '';
+                        genderSelector = '';
                       }
                     }
                   "
@@ -1433,9 +1402,6 @@ watch(selectorLabel, async () => {
             :bg-color="$q.dark.isActive ? 'dark' : 'white'"
             v-model="inputSearch"
             debounce="200"
-            @update:model-value="
-              selectorLabel === 'EMPLOYEE' ? searchEmployee() : searchCustomer()
-            "
           />
 
           <q-btn
@@ -1484,26 +1450,21 @@ watch(selectorLabel, async () => {
           "
         >
           <div
-            v-if="
-              listCustomer.length === 0 ||
-              (resultSearch?.length === 0 && inputSearch !== undefined)
-            "
+            v-if="listCustomer.length === 0"
             class="row full-width items-center justify-center"
             style="min-height: 250px"
           >
-            <NoData />
+            <NoData :not-found="!!inputSearch" />
           </div>
 
           <div
-            v-if="listCustomer.length !== 0 && resultSearch?.length !== 0"
+            v-if="listCustomer.length !== 0"
             class="row full-width customer-row"
             :style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '2' : $q.screen.lt.md ? '3' : $q.screen.lt.lg ? '5' : '6'}, 1fr)`"
             style="min-height: 250px"
           >
             <UsersDetailCardComponent
-              v-for="i in inputSearch !== undefined
-                ? resultSearch ?? []
-                : listCustomer"
+              v-for="i in listCustomer"
               :key="i.id"
               class="hover-card"
               :color="i.customerType === 'CORP' ? 'purple' : 'green'"
@@ -1599,43 +1560,39 @@ watch(selectorLabel, async () => {
           "
         >
           <div
-            v-if="
-              listEmployee.length === 0 || resultSearchEmployee?.length === 0
-            "
+            v-if="listEmployee.length === 0"
             class="row full-width items-center justify-center"
             style="min-height: 250px"
           >
-            <NoData />
+            <NoData :not-found="!!inputSearch" />
           </div>
 
           <div v-if="listEmployee.length !== 0">
             <PersonCard
               history
               :list="
-                (!!inputSearch ? resultSearchEmployee ?? [] : listEmployee).map(
-                  (v: Employee) => ({
-                    disabled: v.status === 'INACTIVE',
-                    img: v.profileImageUrl,
-                    id: v.id,
-                    name:
-                      $i18n.locale === 'en-US'
-                        ? `${v.firstNameEN} ${v.lastNameEN}`
-                        : `${v.firstName} ${v.lastName}`,
-                    male: v.gender === 'male',
-                    female: v.gender === 'female',
-                    badge: v.code,
-                    detail: [
-                      {
-                        label: $t('personnelCardNationality'),
-                        value: v.nationality,
-                      },
-                      {
-                        label: $t('personnelCardAge'),
-                        value: calculateAge(v.dateOfBirth),
-                      },
-                    ],
-                  }),
-                ) || []
+                listEmployee.map((v: Employee) => ({
+                  disabled: v.status === 'INACTIVE',
+                  img: v.profileImageUrl,
+                  id: v.id,
+                  name:
+                    $i18n.locale === 'en-US'
+                      ? `${v.firstNameEN} ${v.lastNameEN}`
+                      : `${v.firstName} ${v.lastName}`,
+                  male: v.gender === 'male',
+                  female: v.gender === 'female',
+                  badge: v.code,
+                  detail: [
+                    {
+                      label: $t('personnelCardNationality'),
+                      value: v.nationality,
+                    },
+                    {
+                      label: $t('personnelCardAge'),
+                      value: calculateAge(v.dateOfBirth),
+                    },
+                  ],
+                }))
               "
               @history="openHistory"
               @update-card="openDialogInputForm"
@@ -1659,7 +1616,8 @@ watch(selectorLabel, async () => {
 
         <template
           v-if="
-            (totalCustomer === 0 && selectorLabel === 'EMPLOYER') ||
+            (statsCustomerType.CORP + statsCustomerType.PERS &&
+              selectorLabel === 'EMPLOYER') ||
             (statsEmployee === 0 && selectorLabel === 'EMPLOYEE')
           "
         >