From 1d79d9e911353d88e896c96199b13f802569e100 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:35:19 +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=E0=B9=80=E0=B8=9B=E0=B8=A5=E0=B8=B5=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=20?=
 =?UTF-8?q?=E0=B8=82=E0=B8=AD=E0=B8=87=20=E0=B8=99=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/03_customer-management/MainPage.vue | 51 +++++++++++++++----
 1 file changed, 40 insertions(+), 11 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 40d7f367..d56376aa 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1599,7 +1599,34 @@ watch([inputSearch, currentStatus], async () => {
             v-if="listCustomer.length !== 0"
             class="row justify-between q-pt-md"
           >
-            <div class="app-text-muted">
+            <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 fetchListCustomer();
+                          }
+                        "
+                      >
+                        <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: listCustomer.length,
@@ -1607,16 +1634,18 @@ watch([inputSearch, currentStatus], async () => {
                 })
               }}
             </div>
-            <PaginationComponent
-              v-model:current-page="currentPageCustomer"
-              v-model:max-page="maxPageCustomer"
-              :fetch-data="
-                async () => {
-                  await fetchListCustomer();
-                  flowStore.rotate();
-                }
-              "
-            />
+            <div class="col-4 row justify-end">
+              <PaginationComponent
+                v-model:current-page="currentPageCustomer"
+                v-model:max-page="maxPageCustomer"
+                :fetch-data="
+                  async () => {
+                    await fetchListCustomer();
+                    flowStore.rotate();
+                  }
+                "
+              />
+            </div>
           </div>
         </template>