From d4f021d0e62a5f2876dcc14c5e23bf48f1dbc3a6 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Fri, 11 Jul 2025 11:09:39 +0700
Subject: [PATCH] refactor: add page size

---
 src/components/PaginationPageSize.vue         | 14 ++++++++++++-
 src/pages/04_product-service/MainPage.vue     | 20 +++++++++++++++++--
 src/pages/07_agencies-management/MainPage.vue |  5 ++++-
 .../16_ิbusiness-type-management/MainPage.vue  |  5 ++++-
 4 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/components/PaginationPageSize.vue b/src/components/PaginationPageSize.vue
index 4eb86e0c..e8ece111 100644
--- a/src/components/PaginationPageSize.vue
+++ b/src/components/PaginationPageSize.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
 const pageSize = defineModel<number>({ required: true });
+
+withDefaults(
+  defineProps<{
+    fetchData?: (...args: unknown[]) => void;
+  }>(),
+  {},
+);
 </script>
 
 <template>
@@ -10,7 +17,12 @@ const pageSize = defineModel<number>({ required: true });
         :key="v"
         clickable
         v-close-popup
-        @click="pageSize = v"
+        @click="
+          () => {
+            pageSize = v;
+            fetchData();
+          }
+        "
       >
         <q-item-section>
           <q-item-label>{{ v }}</q-item-label>
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 152495b0..442401f1 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -2660,7 +2660,15 @@ watch(
                         {{ $t('general.recordPerPage') }}
                       </div>
                       <div>
-                        <PaginationPageSize v-model="pageSizeGroup" />
+                        <PaginationPageSize
+                          v-model="pageSizeGroup"
+                          :fetch-data="
+                            async () => {
+                              await fetchListGroups();
+                              flowStore.rotate();
+                            }
+                          "
+                        />
                       </div>
                     </div>
                   </div>
@@ -3419,7 +3427,15 @@ watch(
                       {{ $t('general.recordPerPage') }}
                     </div>
                     <div>
-                      <PaginationPageSize v-model="pageSizeServiceAndProduct" />
+                      <PaginationPageSize
+                        v-model="pageSizeServiceAndProduct"
+                        :fetch-data="
+                          async () => {
+                            await alternativeFetch();
+                            flowStore.rotate();
+                          }
+                        "
+                      />
                     </div>
                   </div>
                 </div>
diff --git a/src/pages/07_agencies-management/MainPage.vue b/src/pages/07_agencies-management/MainPage.vue
index 64fbc82a..b1315437 100644
--- a/src/pages/07_agencies-management/MainPage.vue
+++ b/src/pages/07_agencies-management/MainPage.vue
@@ -923,7 +923,10 @@ watch(
                 {{ $t('general.recordPerPage') }}
               </div>
               <div>
-                <PaginationPageSize v-model="pageSize" />
+                <PaginationPageSize
+                  v-model="pageSize"
+                  :fetch-data="() => fetchData()"
+                />
               </div>
             </div>
           </div>
diff --git a/src/pages/16_ิbusiness-type-management/MainPage.vue b/src/pages/16_ิbusiness-type-management/MainPage.vue
index 486164c8..301af704 100644
--- a/src/pages/16_ิbusiness-type-management/MainPage.vue
+++ b/src/pages/16_ิbusiness-type-management/MainPage.vue
@@ -647,7 +647,10 @@ watch(
                 {{ $t('general.recordPerPage') }}
               </div>
               <div>
-                <PaginationPageSize v-model="pageSize" />
+                <PaginationPageSize
+                  v-model="pageSize"
+                  :fetch-data="() => fetchData()"
+                />
               </div>
             </div>
           </div>