From de4aa8c5854a8d2316c7708bb3560688b267d951 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 26 Jun 2024 11:26:29 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=20Page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/04_product-service/MainPage.vue | 40 ++++++++++++++++++-----
 src/stores/product-service/index.ts       | 19 +++++------
 2 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 27dcbbf0..655a627a 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -202,6 +202,10 @@ const totalProduct = ref<number>(0);
 const totalService = ref<number>(0);
 const totalProductAndService = ref<number>(0);
 
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
+const pageSize = ref<number>(30);
+
 const currentId = ref<string>('');
 const currentIdType = ref<string>('');
 const currentIdService = ref<string>('');
@@ -238,7 +242,7 @@ async function searchGroup() {
   });
 
   if (resultList) {
-    resultSearchGroup.value = resultList;
+    resultSearchGroup.value = resultList.result;
   }
 }
 
@@ -314,7 +318,7 @@ async function fetchListType() {
   });
 
   if (res) {
-    productType.value = res;
+    productType.value = res.result;
   }
 }
 
@@ -329,7 +333,7 @@ async function fetchListGroups() {
   });
 
   if (res) {
-    productGroup.value = res;
+    productGroup.value = res.result;
   }
 }
 
@@ -382,7 +386,7 @@ async function searchType() {
   });
 
   if (res) {
-    resultSearchType.value = res;
+    resultSearchType.value = res.result;
   }
 }
 
@@ -1247,6 +1251,17 @@ watch(currentStatus, async () => {
         >
           <NoData />
         </div>
+
+        <!-- <div class="flex justify-center">
+          <q-pagination
+            claess="pagination"
+            v-model="currentPage"
+            :max="maxPage"
+            direction-links
+            active-color="primary"
+            gutter="sm"
+          />
+        </div> -->
       </AppBox>
       <AppBox bordered v-else-if="productMode === 'service'" no-padding>
         <div class="row justify-between q-px-md">
@@ -1255,6 +1270,7 @@ watch(currentStatus, async () => {
               name="all"
               @click="
                 async () => {
+                  inputSearchProductAndService = '';
                   currentStatus = 'All';
                   await fetchListOfProductAndService();
                 }
@@ -1285,6 +1301,7 @@ watch(currentStatus, async () => {
               name="product"
               @click="
                 async () => {
+                  inputSearchProductAndService = '';
                   currentStatus = 'All';
                   await fetchListOfProduct(currentIdType);
                 }
@@ -1298,7 +1315,8 @@ watch(currentStatus, async () => {
                     : 'app-text-muted'
                 "
               >
-                {{ $t('service') }}
+                {{ $t('product') }}
+
                 <q-badge
                   class="rounded q-ml-sm"
                   :class="
@@ -1314,6 +1332,7 @@ watch(currentStatus, async () => {
               name="service"
               @click="
                 async () => {
+                  inputSearchProductAndService = '';
                   currentStatus = 'All';
                   await fetchListOfService();
                 }
@@ -1327,7 +1346,7 @@ watch(currentStatus, async () => {
                     : 'app-text-muted'
                 "
               >
-                {{ $t('product') }}
+                {{ $t('service') }}
                 <q-badge
                   class="rounded q-ml-sm"
                   :class="
@@ -1351,7 +1370,7 @@ watch(currentStatus, async () => {
               class="q-mr-md"
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="inputSearchProductAndService"
-              debounce="500"
+              debounce="250"
               @update:model-value="
                 async () => {
                   await fetchSearch();
@@ -1416,7 +1435,12 @@ watch(currentStatus, async () => {
         </div>
 
         <div
-          v-if="productAndService && productAndService.length === 0"
+          v-if="
+            (productAndServiceTab === 'all' &&
+              productAndService?.length === 0) ||
+            (productAndServiceTab === 'product' && product?.length === 0) ||
+            (productAndServiceTab === 'service' && service?.length === 0)
+          "
           class="flex justify-center items-center"
           style="min-height: 70vh; background-color: var(--surface-2)"
         >
diff --git a/src/stores/product-service/index.ts b/src/stores/product-service/index.ts
index bcc571e4..8c4ae56c 100644
--- a/src/stores/product-service/index.ts
+++ b/src/stores/product-service/index.ts
@@ -73,16 +73,15 @@ const useProductServiceStore = defineStore('api-product-service', () => {
 
     const query = params.toString();
 
-    const res = await api.get<(ProductGroup & { productGroupId: string })[]>(
-      `/product-type${(params && '?'.concat(query)) || ''}`,
-      {
-        headers: {
-          'X-Session-Id': flow?.sessionId,
-          'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-          'X-Tid': flow?.transactionId,
-        },
+    const res = await api.get<
+      Pagination<(ProductGroup & { productGroupId: string })[]>
+    >(`/product-type${(params && '?'.concat(query)) || ''}`, {
+      headers: {
+        'X-Session-Id': flow?.sessionId,
+        'X-Rtid': flow?.refTransactionId || flowStore.rtid,
+        'X-Tid': flow?.transactionId,
       },
-    );
+    });
 
     if (!res) return false;
     if (res.status === 200) {
@@ -187,7 +186,7 @@ const useProductServiceStore = defineStore('api-product-service', () => {
 
     const query = params.toString();
 
-    const res = await api.get<ProductGroup[]>(
+    const res = await api.get<Pagination<ProductGroup[]>>(
       `/product-group${(params && '?'.concat(query)) || ''}`,
       {
         headers: {