refactor: ปรับ ui เปลี่ยนหน้า

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>