refactor: use page size component

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>
-                <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><PaginationPageSize v-model="workflowPageSize" /></div>
             </div>
           </div>
           <div class="col-4 row justify-center app-text-muted">