From a2ca765eb0d1fad90f00ff3cbbc2471c86b41b3d Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 25 Jun 2024 14:51:58 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20=E0=B8=84=E0=B9=89=E0=B8=99=E0=B8=AB=E0=B8=B2=20?=
 =?UTF-8?q?=E0=B8=82=E0=B8=AD=E0=B8=87=20=20productAndService?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/04_product-service/MainPage.vue | 73 +++++++++++++++++++----
 1 file changed, 63 insertions(+), 10 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index b123b1e5..7758706b 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -105,7 +105,7 @@ import { storeToRefs } from 'pinia';
 const { t } = useI18n();
 
 const inputSearch = ref<string>('');
-const searchTotalProduct = ref<string>('');
+const inputSearchProductAndService = ref<string>('');
 
 const currentStatusProduct = ref<boolean>(false);
 const drawerInfo = ref<boolean>(false);
@@ -241,13 +241,49 @@ async function searchGroup() {
   }
 }
 
-async function searchProductAndService() {}
+async function searchProductAndService() {
+  const res = await fetchListProductAndService({
+    query: inputSearchProductAndService.value,
+  });
 
-async function searchProduct() {
-  const result = await fetchListProduct({ query: searchTotalProduct.value });
+  if (res) {
+    productAndService.value = res.result;
+  }
+}
 
-  if (result) {
-    resultSearchProduct.value = result.result;
+async function searchProduct(isAdd: boolean = true) {
+  const res = await fetchListProduct({
+    query: inputSearchProductAndService.value,
+  });
+
+  if (res) {
+    if (isAdd) {
+      resultSearchProduct.value = res.result;
+    }
+
+    if (!isAdd) {
+      product.value = res.result.map((v) => {
+        return {
+          ...v,
+          type: 'product',
+        };
+      });
+    }
+  }
+}
+
+async function searchService() {
+  const res = await fetchListService({
+    query: inputSearchProductAndService.value,
+  });
+
+  if (res) {
+    service.value = res.result.map((v) => {
+      return {
+        ...v,
+        type: 'service',
+      };
+    });
   }
 }
 
@@ -806,6 +842,18 @@ async function fetchStatus() {
   }
 }
 
+async function fetchSearch() {
+  if (productAndServiceTab.value === 'all') {
+    await searchProductAndService();
+  }
+  if (productAndServiceTab.value === 'product') {
+    await searchProduct(false);
+  }
+  if (productAndServiceTab.value === 'service') {
+    await searchService();
+  }
+}
+
 onMounted(async () => {
   calculateStats();
   await fetchListGroups();
@@ -1286,8 +1334,13 @@ watch(currentStatus, async () => {
               :label="$t('search')"
               class="q-mr-md"
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
-              v-model="inputSearch"
+              v-model="inputSearchProductAndService"
               debounce="500"
+              @update:model-value="
+                async () => {
+                  await fetchSearch();
+                }
+              "
             >
               <template v-slot:prepend>
                 <q-icon name="mdi-magnify" />
@@ -1515,7 +1568,7 @@ watch(currentStatus, async () => {
     :close="
       () => {
         dialogTotalProduct = false;
-        searchTotalProduct = '';
+        inputSearchProductAndService = '';
       }
     "
   >
@@ -1527,7 +1580,7 @@ watch(currentStatus, async () => {
           dense
           :label="$t('search')"
           :bg-color="$q.dark.isActive ? 'dark' : 'white'"
-          v-model="searchTotalProduct"
+          v-model="inputSearchProductAndService"
           debounce="500"
           @update:model-value="searchProduct()"
         >
@@ -1548,7 +1601,7 @@ watch(currentStatus, async () => {
           <div
             class="q-pa-xs"
             :class="`${$q.screen.gt.sm ? 'col-3 ' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
-            v-for="i in (!!searchTotalProduct
+            v-for="i in (!!inputSearchProductAndService
               ? resultSearchProduct
               : product
             )?.filter((i) => {