From 979abe0bbb3b6f6f4d0664d0e4ef4d0e54fdb617 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:46:10 +0700
Subject: [PATCH] =?UTF-8?q?refactor:=20=E0=B8=9B=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9A=20ui=20=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

---
 src/pages/03_customer-management/MainPage.vue | 59 +++++++++++++++----
 1 file changed, 46 insertions(+), 13 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index d56376aa..5dd3695d 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1601,7 +1601,9 @@ watch([inputSearch, currentStatus], async () => {
           >
             <div class="col-4">
               <div class="row items-center">
-                <div style="width: 80px">{{ $t('showing') }}</div>
+                <div class="app-text-muted" style="width: 80px">
+                  {{ $t('showing') }}
+                </div>
                 <div>
                   <q-btn-dropdown dense unelevated :label="pageSize">
                     <q-list>
@@ -1696,8 +1698,37 @@ watch([inputSearch, currentStatus], async () => {
               @toggle-status="(id, status) => toggleStatusEmployee(id, status)"
             />
 
-            <div class="row justify-between q-pt-md">
-              <div class="app-text-muted">
+            <div class="col-4 row justify-center">
+              <div class="col-4">
+                <div class="row items-center">
+                  <div class="app-text-muted" 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 fetchListEmployee();
+                            }
+                          "
+                        >
+                          <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: listEmployee.length,
@@ -1705,16 +1736,18 @@ watch([inputSearch, currentStatus], async () => {
                   })
                 }}
               </div>
-              <PaginationComponent
-                v-model:current-page="currentPageEmployee"
-                v-model:max-page="maxPageEmployee"
-                :fetch-data="
-                  async () => {
-                    await fetchListEmployee();
-                    flowStore.rotate();
-                  }
-                "
-              />
+              <div class="col-4 row justify-end">
+                <PaginationComponent
+                  v-model:current-page="currentPageEmployee"
+                  v-model:max-page="maxPageEmployee"
+                  :fetch-data="
+                    async () => {
+                      await fetchListEmployee();
+                      flowStore.rotate();
+                    }
+                  "
+                />
+              </div>
             </div>
           </div>
         </template>