fix: แก้การค้นหา ให้ล้างค่า

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 && totalCustomer > 0 && selectorLabel === 'EMPLOYER'
-            listCustomer.length > 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 && statsEmployee > 0 && selectorLabel === 'EMPLOYEE'
-            listEmployee.length > 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,7 +1549,6 @@ watch(currentStatus, async () => {
               @enter-card="openDialogInputForm"
               @delete-card="onDelete"
             />
-          </div>
 
             <div class="row flex-center q-pt-md">
               <q-pagination
@@ -1531,12 +1560,13 @@ watch(currentStatus, async () => {
                 gutter="sm"
               />
             </div>
+          </div>
         </template>
 
         <template
           v-if="
-            (listCustomer?.length === 0 && selectorLabel === 'EMPLOYER') ||
+            (totalCustomer === 0 && selectorLabel === 'EMPLOYER') ||
-            (listEmployee?.length === 0 && selectorLabel === 'EMPLOYEE')
+            (statsEmployee === 0 && selectorLabel === 'EMPLOYEE')
           "
         >
           <TooltipComponent