fix: แก้ แบ่งหน้าตอนค้นหาของ กลุ่ม และ ประเภท

src/pages/04_product-service/MainPage.vue

@@ -200,7 +200,7 @@ const maxPageGroup = ref<number>(1);
 const pageSizeGroup = ref<number>(30);
 const currentPageType = ref<number>(1);
 const maxPageType = ref<number>(1);
-const pageSizeType = ref<number>(30);
+const pageSizeType = ref<number>(1);
 const currentPageServiceAndProduct = ref<number>(1);
 const maxPageServiceAndProduct = ref<number>(1);
 const pageSizeServiceAndProduct = ref<number>(30);
@@ -219,9 +219,6 @@ const currentIdProduct = ref<string>('');
 
 const currentStatus = ref<Status | 'All'>('All');
 
-const resultSearchGroup = ref<ProductGroup[]>();
-const resultSearchType = ref<(ProductGroup & { productGroupId: string })[]>();
-
 const inputFile = (() => {
   const element = document.createElement('input');
   element.type = 'file';
@@ -242,17 +239,6 @@ const inputFile = (() => {
   return element;
 })();
 
-async function searchGroup() {
-  const resultList = await fetchListProductService({
-    query: inputSearch.value,
-  });
-
-  if (resultList) {
-    resultSearchGroup.value = resultList.result;
-  }
-  flowStore.rotate();
-}
-
 async function searchProductAndService() {
   const res = await fetchListProductAndService({
     query: inputSearchProductAndService.value,
@@ -322,6 +308,7 @@ async function fetchListType() {
   const res = await fetchListProductServiceType({
     page: currentPageType.value,
     pageSize: pageSizeType.value,
+    query: !!inputSearch.value ? inputSearch.value : undefined,
     productGroupId: currentId.value,
     status:
       currentStatus.value === 'All'
@@ -342,6 +329,7 @@ async function fetchListGroups() {
   const res = await fetchListProductService({
     page: currentPageGroup.value,
     pageSize: pageSizeGroup.value,
+    query: !!inputSearch.value ? inputSearch.value : undefined,
     status:
       currentStatus.value === 'All'
         ? undefined
@@ -382,6 +370,9 @@ async function fetchListOfProduct(productTypeId: string) {
   const res = await fetchListProduct({
     page: currentPageProduct.value,
     pageSize: pageSizeProduct.value,
+    query: !!inputSearchProductAndService.value
+      ? inputSearchProductAndService.value
+      : undefined,
     status:
       currentStatus.value === 'INACTIVE'
         ? 'INACTIVE'
@@ -407,6 +398,9 @@ async function fetchListOfProduct(productTypeId: string) {
 async function fetchListOfService() {
   const res = await fetchListService({
     page: currentPageService.value,
+    query: !!inputSearchProductAndService.value
+      ? inputSearchProductAndService.value
+      : undefined,
     pageSize: pageSizeService.value,
     status:
       currentStatus.value === 'INACTIVE'
@@ -429,17 +423,6 @@ async function fetchListOfService() {
   }
 }
 
-async function searchType() {
-  const res = await fetchListProductServiceType({
-    query: inputSearch.value,
-    productGroupId: currentId.value,
-  });
-
-  if (res) {
-    resultSearchType.value = res.result;
-  }
-}
-
 async function submitType() {
   if (drawerInfo.value) {
     await editProductServiceType(currentIdType.value, {
@@ -1037,6 +1020,16 @@ watch(currentPageService, async () => {
   await fetchListOfService();
   flowStore.rotate();
 });
+
+watch(inputSearch, async () => {
+  if (productMode.value === 'group') {
+    await fetchListGroups();
+  }
+
+  if (productMode.value === 'type') {
+    await fetchListType();
+  }
+});
 </script>
 
 <template>
@@ -1212,13 +1205,6 @@ watch(currentPageService, async () => {
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="inputSearch"
               debounce="500"
-              @update:model-value="
-                productMode === 'group'
-                  ? searchGroup()
-                  : productMode === 'type'
-                    ? searchType()
-                    : ''
-              "
             >
               <template v-slot:prepend>
                 <q-icon name="mdi-magnify" />
@@ -1276,13 +1262,9 @@ watch(currentPageService, async () => {
         <div class="row q-col-gutter-lg">
           <div
             :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
-            v-for="(v, i) in !!inputSearch
+            v-for="(v, i) in productMode === 'type'
-              ? productMode === 'group'
+              ? productType
-                ? resultSearchGroup
+              : productGroup"
-                : resultSearchType
-              : productMode === 'type'
-                ? productType
-                : productGroup"
             :key="i"
           >
             <ProductCardComponent
@@ -1329,8 +1311,6 @@ watch(currentPageService, async () => {
                   pathTypeName = v.name;
                   currentIdType = v.id;
                   productMode = 'service';
-                  // await fetchListOfProduct(currentIdType);
-                  // await fetchListOfService();
 
                   await featchStatsService();
                   await featchStatsProduct();
@@ -1390,18 +1370,16 @@ watch(currentPageService, async () => {
         <div
           v-if="
             (productMode === 'type' && productType?.length === 0) ||
-            (productGroup?.length === 0 && productMode === 'group') ||
+            (productGroup?.length === 0 && productMode === 'group')
-            resultSearchGroup?.length === 0 ||
-            resultSearchType?.length === 0
           "
           class="flex justify-center items-center q-mt-lg"
           style="min-height: 70vh; background-color: var(--surface-2)"
         >
-          <NoData notFound />
+          <NoData :not-found="!!inputSearch" />
         </div>
         <template v-else>
           <div
-            v-if="productMode === 'group' && !inputSearch"
+            v-if="productMode === 'group'"
             class="flex justify-center q-pt-xl"
           >
             <q-pagination
@@ -1415,7 +1393,7 @@ watch(currentPageService, async () => {
           </div>
 
           <div
-            v-if="productMode === 'type' && !inputSearch"
+            v-if="productMode === 'type'"
             class="flex justify-center q-pt-xl"
           >
             <q-pagination