From b945624404c1d8f340e112e606d9d23f700536c2 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 18 Jun 2024 13:29:45 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=84=E0=B9=89=E0=B8=99=E0=B8=AB=E0=B8=B2?=
 =?UTF-8?q?=20=E0=B9=83=E0=B8=AB=E0=B9=89=E0=B8=A5=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=87=E0=B8=84=E0=B9=88=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/03_customer-management/MainPage.vue | 94 ++++++++++++-------
 1 file changed, 62 insertions(+), 32 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index afa01594..989c9a55 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -29,6 +29,8 @@ import FormBusiness from 'src/components/03_customer-management/FormBusiness.vue
 import DrawerInfo from 'src/components/DrawerInfo.vue';
 import InfoForm from 'src/components/02_personnel-management/InfoForm.vue';
 import CustomerInfoComponent from 'src/components/03_customer-management/CustomerInfoComponent.vue';
+import NoData from 'components/NoData.vue';
+
 import {
   CustomerCreate,
   CustomerStats,
@@ -111,7 +113,7 @@ const formData = ref<CustomerCreate>({
   image: null,
 });
 
-const inputSearch = ref<string>('');
+const inputSearch = ref<string>();
 const fieldSelectedCustomer = ref<{ label: string; value: string }>({
   label: t('all'),
   value: 'all',
@@ -250,6 +252,8 @@ const currentCustomerName = ref<string>('');
 const currentCustomerUrlImage = ref<string | null>(null);
 const genderselector = ref<string>('');
 
+const totalCustomer = ref<number>(0);
+
 const currentStatus = ref<Status | 'All'>('All');
 
 const inputFile = (() => {
@@ -1024,7 +1028,11 @@ onMounted(async () => {
     pageSize: pageSizeCustomer.value,
   });
 
-  if (resultStats) statsCustomerType.value = resultStats;
+  if (resultStats) {
+    totalCustomer.value = resultStats.CORP + resultStats.PERS;
+
+    statsCustomerType.value = resultStats;
+  }
 
   if (resultList) listCustomer.value = resultList.result;
 
@@ -1075,13 +1083,6 @@ watch(locale, () => {
   };
 });
 
-watch(locale, () => {
-  fieldSelectedCustomer.value = {
-    label: `${fieldSelectedCustomer.value.label}`,
-    value: fieldSelectedCustomer.value?.value,
-  };
-});
-
 watch(currentPageCustomer, async () => {
   await fetchListCustomer();
 });
@@ -1163,6 +1164,14 @@ watch(currentStatus, async () => {
     });
   }
 });
+
+watch(selectorLabel, async () => {
+  if (inputSearch.value) {
+    inputSearch.value = undefined;
+    resultSearch.value = undefined;
+    resultSearchEmployee.value = undefined;
+  }
+});
 </script>
 
 <template>
@@ -1345,7 +1354,7 @@ watch(currentStatus, async () => {
             class="q-mr-lg"
             :bg-color="$q.dark.isActive ? 'dark' : 'white'"
             v-model="inputSearch"
-            debounce="500"
+            debounce="200"
             @update:model-value="
               selectorLabel === 'EMPLOYEE' ? searchEmployee() : searchCustomer()
             "
@@ -1393,18 +1402,30 @@ watch(currentStatus, async () => {
 
         <template
           v-if="
-            listCustomer &&
-            listCustomer.length > 0 &&
-            selectorLabel === 'EMPLOYER'
+            listCustomer && totalCustomer > 0 && selectorLabel === 'EMPLOYER'
           "
         >
           <div
+            v-if="
+              listCustomer.length === 0 ||
+              (resultSearch?.length === 0 && inputSearch !== undefined)
+            "
+            class="row full-width items-center justify-center"
+            style="min-height: 250px"
+          >
+            <NoData />
+          </div>
+
+          <div
+            v-if="listCustomer.length !== 0 && resultSearch?.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 ? resultSearch : listCustomer"
+              v-for="i in inputSearch !== undefined
+                ? resultSearch ?? []
+                : listCustomer"
               :key="i.id"
               class="hover-card"
               :color="i.customerType === 'CORP' ? 'purple' : 'green'"
@@ -1469,7 +1490,8 @@ watch(currentStatus, async () => {
               @delete-card="deleteCustomerById(i.id)"
             />
           </div>
-          <div class="row flex-center q-pt-md">
+
+          <div v-if="listCustomer.length !== 0" class="row flex-center q-pt-md">
             <q-pagination
               claess="pagination"
               v-model="currentPageCustomer"
@@ -1483,15 +1505,23 @@ watch(currentStatus, async () => {
 
         <template
           v-if="
-            listEmployee &&
-            listEmployee.length > 0 &&
-            selectorLabel === 'EMPLOYEE'
+            listEmployee && statsEmployee > 0 && selectorLabel === 'EMPLOYEE'
           "
         >
-          <div>
+          <div
+            v-if="
+              listEmployee.length === 0 || resultSearchEmployee?.length === 0
+            "
+            class="row full-width items-center justify-center"
+            style="min-height: 250px"
+          >
+            <NoData />
+          </div>
+
+          <div v-if="listEmployee.length !== 0">
             <PersonCard
               :list="
-                (!!inputSearch ? resultSearchEmployee : listEmployee).map(
+                (!!inputSearch ? resultSearchEmployee ?? [] : listEmployee).map(
                   (v: Employee) => ({
                     img: v.profileImageUrl,
                     id: v.id,
@@ -1519,24 +1549,24 @@ watch(currentStatus, async () => {
               @enter-card="openDialogInputForm"
               @delete-card="onDelete"
             />
-          </div>
 
-          <div class="row flex-center q-pt-md">
-            <q-pagination
-              claess="pagination"
-              v-model="currentPageEmployee"
-              :max="maxPageEmployee"
-              direction-links
-              active-color="primary"
-              gutter="sm"
-            />
+            <div class="row flex-center q-pt-md">
+              <q-pagination
+                claess="pagination"
+                v-model="currentPageEmployee"
+                :max="maxPageEmployee"
+                direction-links
+                active-color="primary"
+                gutter="sm"
+              />
+            </div>
           </div>
         </template>
 
         <template
           v-if="
-            (listCustomer?.length === 0 && selectorLabel === 'EMPLOYER') ||
-            (listEmployee?.length === 0 && selectorLabel === 'EMPLOYEE')
+            (totalCustomer === 0 && selectorLabel === 'EMPLOYER') ||
+            (statsEmployee === 0 && selectorLabel === 'EMPLOYEE')
           "
         >
           <TooltipComponent