From 53bb20a8c131ef9d7d817c71c2b044ee8b9258b6 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 1 Jul 2024 13:48:48 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=20=20layout?=
 =?UTF-8?q?=20=20=E0=B9=81=E0=B8=9A=E0=B9=88=E0=B8=87=E0=B8=AB=E0=B8=99?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=20=20=E0=B8=81=E0=B8=A5=E0=B8=B8=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20=E0=B9=81=E0=B8=A5=E0=B8=B0=20=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=A0=E0=B8=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/04_product-service/MainPage.vue | 68 ++++++++++++++---------
 1 file changed, 42 insertions(+), 26 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index fa768248..310dffd3 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -24,6 +24,7 @@ import useOptionStore from 'src/stores/options';
 import FormServiceProperties from 'components/04_product-service/FormServiceProperties.vue';
 import InfoForm from 'components/02_personnel-management/InfoForm.vue';
 import NoData from 'components/NoData.vue';
+import PaginationComponent from 'src/components/PaginationComponent.vue';
 
 import useFlowStore from 'src/stores/flow';
 import { Status } from 'src/stores/types';
@@ -210,6 +211,8 @@ const pageSizeProduct = ref<number>(30);
 const currentPageService = ref<number>(1);
 const maxPageService = ref<number>(1);
 const pageSizeService = ref<number>(30);
+const totalType = ref<number>(0);
+const totalGroup = ref<number>(0);
 
 // เก็บ id ที่เข้ามา
 const currentId = ref<string>('');
@@ -293,6 +296,7 @@ async function fetchListType() {
 
   if (res) {
     currentPageType.value = res.page;
+    totalType.value = res.total;
     maxPageType.value = Math.ceil(res.total / pageSizeType.value);
     productType.value = res.result;
   }
@@ -313,6 +317,7 @@ async function fetchListGroups() {
 
   if (res) {
     currentPageGroup.value = res.page;
+    totalGroup.value = res.total;
     maxPageGroup.value = Math.ceil(res.total / pageSizeGroup.value);
     productGroup.value = res.result;
   }
@@ -959,16 +964,6 @@ watch(currentStatus, async () => {
   flowStore.rotate();
 });
 
-watch(currentPageGroup, async () => {
-  await fetchListGroups();
-  flowStore.rotate();
-});
-
-watch(currentPageType, async () => {
-  await fetchListType();
-  flowStore.rotate();
-});
-
 watch(currentPageServiceAndProduct, async () => {
   await fetchListOfProductAndService();
   flowStore.rotate();
@@ -1292,6 +1287,7 @@ watch(inputSearchProductAndService, async () => {
               "
               @on-click="
                 async () => {
+                  inputSearch = undefined;
                   pathTypeName = v.name;
                   currentIdType = v.id;
                   productMode = 'service';
@@ -1367,29 +1363,49 @@ watch(inputSearchProductAndService, async () => {
         <template v-else>
           <div
             v-if="productMode === 'group'"
-            class="flex justify-center q-pt-xl"
+            class="flex justify-between q-pt-xl"
           >
-            <q-pagination
-              claess="pagination"
-              v-model="currentPageGroup"
-              :max="maxPageGroup"
-              direction-links
-              active-color="primary"
-              gutter="sm"
+            <div class="app-text-muted">
+              {{
+                $t('recordsPage', {
+                  resultcurrentPage: productGroup?.length,
+                  total: totalGroup,
+                })
+              }}
+            </div>
+            <PaginationComponent
+              v-model:current-page="currentPageGroup"
+              v-model:max-page="maxPageGroup"
+              :fetch-data="
+                async () => {
+                  await fetchListGroups();
+                  flowStore.rotate();
+                }
+              "
             />
           </div>
 
           <div
             v-if="productMode === 'type'"
-            class="flex justify-center q-pt-xl"
+            class="flex justify-between q-pt-xl"
           >
-            <q-pagination
-              claess="pagination"
-              v-model="currentPageType"
-              :max="maxPageType"
-              direction-links
-              active-color="primary"
-              gutter="sm"
+            <div class="app-text-muted">
+              {{
+                $t('recordsPage', {
+                  resultcurrentPage: productType?.length,
+                  total: totalType,
+                })
+              }}
+            </div>
+            <PaginationComponent
+              v-model:current-page="currentPageType"
+              v-model:max-page="maxPageType"
+              :fetch-data="
+                async () => {
+                  await fetchListTypes();
+                  flowStore.rotate();
+                }
+              "
             />
           </div>
         </template>