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

---
 .../02_personnel-management/MainPage.vue      | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index d069f544..a3d58b2d 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -30,6 +30,7 @@ import DrawerInfo from 'components/DrawerInfo.vue';
 import InfoForm from 'components/02_personnel-management/InfoForm.vue';
 import NoData from 'components/NoData.vue';
 import ProfileUpload from 'components/ProfileUpload.vue';
+import PaginationComponent from 'src/components/PaginationComponent.vue';
 
 const { locale } = useI18n();
 
@@ -712,13 +713,19 @@ watch(inputSearch, async () => await fetchUserList());
       >
         <NoData :not-found="!!inputSearch" />
       </div>
-      <div class="row flex-center q-pt-md" v-if="currentMaxPage > 0">
-        <q-pagination
-          v-model="currentPage"
-          :max="currentMaxPage"
-          direction-links
-          active-color="primary"
-          gutter="sm"
+      <div class="row justify-between q-pt-md" v-if="currentMaxPage > 0">
+        <div class="app-text-muted">
+          {{
+            $t('recordsPage', {
+              resultcurrentPage: userData?.result.length,
+              total: userData?.total,
+            })
+          }}
+        </div>
+        <PaginationComponent
+          v-model:current-page="currentPage"
+          v-model:max-page="currentMaxPage"
+          :fetch-data="async () => await fetchUserList()"
         />
       </div>
     </AppBox>