refactor: add page size

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>

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>

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>

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>