refactor: use page size component

src/pages/02_personnel-management/MainPage.vue

@@ -48,6 +48,7 @@ import InfoForm from 'components/02_personnel-management/InfoForm.vue';
 import FormPerson from 'components/02_personnel-management/FormPerson.vue';
 import FormByType from 'components/02_personnel-management/FormByType.vue';
 import FormInformation from 'components/02_personnel-management/FormInformation.vue';
+import PaginationPageSize from 'src/components/PaginationPageSize.vue';
 
 const { locale, t } = useI18n();
 const $q = useQuasar();
@@ -730,7 +731,7 @@ watch(
   },
 );
 
-watch([inputSearch, statusFilter], async () => await fetchUserList());
+watch([inputSearch, statusFilter, pageSize], async () => await fetchUserList());
 
 watch(
   () => $q.screen.lt.md,
@@ -1418,33 +1419,7 @@ watch(
             <div class="app-text-muted q-mr-sm" v-if="$q.screen.gt.sm">
               {{ $t('general.recordPerPage') }}
             </div>
-            <div>
+            <div><PaginationPageSize v-model="pageSize" /></div>
-              <q-btn-dropdown
-                dense
-                unelevated
-                :label="pageSize"
-                class="bordered q-pl-md"
-              >
-                <q-list>
-                  <q-item
-                    v-for="v in [10, 30, 50, 100, 500, 1000]"
-                    :key="v"
-                    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>
 

src/pages/03_customer-management/BranchPage.vue

@@ -39,6 +39,7 @@ import {
   EmployerFormContact,
 } from './components';
 import { formatAddress } from 'src/utils/address';
+import PaginationPageSize from 'src/components/PaginationPageSize.vue';
 
 const flowStore = useFlowStore();
 const customerStore = useCustomerStore();
@@ -232,7 +233,7 @@ onMounted(async () => {
   await fetchList();
 });
 
-watch([customerId, inputSearch, currentStatus], async () => {
+watch([customerId, inputSearch, currentStatus, pageSizeBranch], async () => {
   await fetchList();
 });
 watch(
@@ -638,8 +639,15 @@ watch(
   </div>
 
   <div class="row justify-between items-center q-px-md q-py-sm surface-2">
-    <div class="col"></div>
+    <div class="row col-4 items-center">
-    <div class="app-text-muted col text-center">
+      <div class="app-text-muted" style="width: 80px" v-if="$q.screen.gt.sm">
+        {{ $t('general.recordPerPage') }}
+      </div>
+
+      <div><PaginationPageSize v-model="pageSizeBranch" /></div>
+    </div>
+
+    <div class="col-4 flex justify-center app-text-muted">
       {{
         $t('general.recordsPage', {
           resultcurrentPage: branch?.length,

src/pages/03_customer-management/MainPage.vue

@@ -79,6 +79,7 @@ import KebabAction from 'src/components/shared/KebabAction.vue';
 import { nextTick } from 'vue';
 import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
 import { group } from 'node:console';
+import PaginationPageSize from 'src/components/PaginationPageSize.vue';
 
 const { t, locale } = useI18n();
 const $q = useQuasar();
@@ -210,7 +211,7 @@ const onCreateImageList = ref<{
 
 watch(() => route.name, init);
 watch(
-  [currentTab, currentStatus, inputSearch, customerTypeSelected],
+  [currentTab, currentStatus, inputSearch, customerTypeSelected, pageSize],
   async ([tabName]) => {
     if (tabName === 'employer') {
       currentPageCustomer.value = 1;
@@ -1647,34 +1648,8 @@ const emptyCreateDialog = ref(false);
                     >
                       {{ $t('general.recordPerPage') }}
                     </div>
-                    <div>
+
-                      <q-btn-dropdown
+                    <div><PaginationPageSize v-model="pageSize" /></div>
-                        dense
-                        unelevated
-                        class="bordered q-pl-md rounded"
-                        :label="pageSize"
-                        style="background-color: var(--surface-1)"
-                      >
-                        <q-list>
-                          <q-item
-                            v-for="v in [10, 30, 50, 100, 500, 1000]"
-                            :key="v"
-                            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 class="col-4 flex justify-center app-text-muted">
@@ -1768,34 +1743,8 @@ const emptyCreateDialog = ref(false);
                     >
                       {{ $t('general.recordPerPage') }}
                     </div>
-                    <div>
+
-                      <q-btn-dropdown
+                    <div><PaginationPageSize v-model="pageSize" /></div>
-                        dense
-                        unelevated
-                        :label="pageSize"
-                        class="bordered q-pl-md"
-                        style="background-color: var(--surface-1)"
-                      >
-                        <q-list>
-                          <q-item
-                            v-for="v in [10, 30, 50, 100, 500, 1000]"
-                            :key="v"
-                            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 class="col-4 flex justify-center app-text-muted">

src/pages/04_flow-managment/MainPage.vue

@@ -20,6 +20,7 @@ import PaginationComponent from 'src/components/PaginationComponent.vue';
 import FlowDialog from './FlowDialog.vue';
 import NoData from 'src/components/NoData.vue';
 import KebabAction from 'src/components/shared/KebabAction.vue';
+import PaginationPageSize from 'src/components/PaginationPageSize.vue';
 
 const { t } = useI18n();
 const workflowStore = useWorkflowTemplate();
@@ -286,7 +287,7 @@ onMounted(async () => {
 });
 
 watch(statusFilter, fetchWorkflowList);
-watch(() => pageState.inputSearch, fetchWorkflowList);
+watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
 </script>
 <template>
   <FloatingActionButton
@@ -686,28 +687,7 @@ watch(() => pageState.inputSearch, fetchWorkflowList);
               <div class="app-text-muted q-mr-sm" v-if="$q.screen.gt.sm">
                 {{ $t('general.recordPerPage') }}
               </div>
-              <div>
+              <div><PaginationPageSize v-model="workflowPageSize" /></div>
-                <q-btn-dropdown
-                  dense
-                  unelevated
-                  :label="workflowPageSize"
-                  class="bordered q-pl-md"
-                >
-                  <q-list>
-                    <q-item
-                      v-for="v in [10, 30, 50, 100, 500, 1000]"
-                      :key="v"
-                      clickable
-                      v-close-popup
-                      @click="workflowPageSize = v"
-                    >
-                      <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">

src/pages/05_quotation/MainPage.vue

@@ -41,6 +41,7 @@ import {
 import { useCustomerForm } from 'src/pages/03_customer-management/form';
 import { Quotation } from 'src/stores/quotations/types';
 import TableQuotation from 'src/components/05_quotation/TableQuotation.vue';
+import PaginationPageSize from 'src/components/PaginationPageSize.vue';
 
 const quotationFormStore = useQuotationForm();
 const customerFormStore = useCustomerForm();
@@ -307,8 +308,10 @@ async function fetchQuotationList() {
   flowStore.rotate();
 }
 
-watch(() => pageState.currentTab, fetchQuotationList);
+watch(
-watch(() => pageState.inputSearch, fetchQuotationList);
+  [() => pageState.currentTab, () => pageState.inputSearch, quotationPageSize],
+  fetchQuotationList,
+);
 
 async function storeDataLocal(id: string) {
   await quotationFormStore.assignFormData(id, 'assign');
@@ -692,28 +695,7 @@ async function storeDataLocal(id: string) {
               <div class="app-text-muted q-mr-sm" v-if="$q.screen.gt.sm">
                 {{ $t('general.recordPerPage') }}
               </div>
-              <div>
+              <div><PaginationPageSize v-model="quotationPageSize" /></div>
-                <q-btn-dropdown
-                  dense
-                  unelevated
-                  :label="quotationPageSize"
-                  class="bordered q-pl-md"
-                >
-                  <q-list>
-                    <q-item
-                      v-for="v in [10, 30, 50, 100, 500, 1000]"
-                      :key="v"
-                      clickable
-                      v-close-popup
-                      @click="quotationPageSize = v"
-                    >
-                      <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">