From fa7e87d5374f43810be80755cfe5382f010ab0e2 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:25:24 +0700
Subject: [PATCH] =?UTF-8?q?refactor:=20=20=E0=B8=9B=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9A=20=20ui=20=E0=B9=80=E0=B8=9B=E0=B8=A5=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A2=E0=B8=99=E0=B8=AB=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      | 52 +++++++++++++++----
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index bfd49313..fd993012 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -501,15 +501,15 @@ watch(
 );
 
 const currentPage = ref(1);
+const pageSize = ref(30);
 const currentMaxPage = computed(() =>
-  userData.value
-    ? Math.ceil(userData.value?.total / userData.value?.pageSize)
-    : 1,
+  userData.value ? Math.ceil(userData.value?.total / pageSize.value) : 1,
 );
 
 async function fetchUserList() {
   await userStore.fetchList({
     includeBranch: true,
+    pageSize: pageSize.value,
     page: currentPage.value,
     query: !!inputSearch.value ? inputSearch.value : undefined,
     userType: selectorLabel.value ?? undefined,
@@ -682,8 +682,38 @@ watch(inputSearch, async () => await fetchUserList());
       </div>
     </div>
 
-    <div class="row justify-between q-pt-md" v-if="currentMaxPage > 0">
-      <div class="app-text-muted">
+    <div
+      class="row justify-between items-center q-pt-md"
+      v-if="currentMaxPage > 0"
+    >
+      <div class="col-4">
+        <div class="row items-center">
+          <div style="width: 80px">{{ $t('showing') }}</div>
+          <div>
+            <q-btn-dropdown dense unelevated :label="pageSize">
+              <q-list>
+                <q-item
+                  v-for="v in [10, 30, 50, 100, 500, 1000]"
+                  clickable
+                  v-close-popup
+                  @click="
+                    async () => {
+                      pageSize = v;
+                      await fetchUserList();
+                    }
+                  "
+                >
+                  <q-item-section>
+                    <q-item-label>{{ v }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-4 row justify-center app-text-muted">
         {{
           $t('recordsPage', {
             resultcurrentPage: userData?.result.length,
@@ -691,11 +721,13 @@ watch(inputSearch, async () => await fetchUserList());
           })
         }}
       </div>
-      <PaginationComponent
-        v-model:current-page="currentPage"
-        v-model:max-page="currentMaxPage"
-        :fetch-data="async () => await fetchUserList()"
-      />
+      <div class="col-4 row justify-end">
+        <PaginationComponent
+          v-model:current-page="currentPage"
+          v-model:max-page="currentMaxPage"
+          :fetch-data="async () => await fetchUserList()"
+        />
+      </div>
     </div>
   </div>