feat: search and paging workflow template

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

@@ -14,8 +14,16 @@ import PaginationComponent from 'src/components/PaginationComponent.vue';
 import FlowDialog from '../04_product-service/FlowDialog.vue';
 import NoData from 'src/components/NoData.vue';
 import { QTableProps } from 'quasar';
+import { storeToRefs } from 'pinia';
+import { watch } from 'vue';
 
 const workflowStore = useWorkflowTemplate();
+const {
+  data: workflowData,
+  page: workflowPage,
+  pageSize: workflowPageSize,
+  pageMax: workflowPageMax,
+} = storeToRefs(workflowStore);
 
 const pageState = reactive({
   hideStat: false,
@@ -27,7 +35,6 @@ const pageState = reactive({
   addModal: false,
 });
 
-const workflowList = ref<WorkflowTemplate[]>([]);
 const formDataWorkflow = ref<WorkflowTemplatePayload>({
   name: '',
   step: [],
@@ -84,13 +91,25 @@ function resetForm() {
 }
 
 async function fetchWorkflowList() {
-  const res = await workflowStore.getWorkflowTemplateList();
-  if (res) workflowList.value = res.result;
+  {
+    const res = await workflowStore.getWorkflowTemplateList({
+      page: workflowPage.value,
+      pageSize: workflowPageSize.value,
+      query: pageState.inputSearch,
+    });
+    if (res) {
+      workflowData.value = res.result;
+      workflowPageMax.value = Math.ceil(res.total / workflowPageSize.value);
+      pageState.total = res.total;
+    }
+  }
 }
 
 onMounted(async () => {
   await fetchWorkflowList();
 });
+
+watch(() => pageState.inputSearch, fetchWorkflowList);
 </script>
 <template>
   <ButtonAddComponent
@@ -111,7 +130,7 @@ onMounted(async () => {
           color: hsl(var(--info-bg));
         "
       >
-        {{ 0 }}
+        {{ pageState.total }}
       </q-badge>
       <q-btn
         class="q-ml-sm"
@@ -135,7 +154,7 @@ onMounted(async () => {
             :branch="[
               {
                 icon: 'mdi-folder-outline',
-                count: 0,
+                count: pageState.total,
                 label: 'flow.title',
                 color: 'red',
               },
@@ -262,7 +281,7 @@ onMounted(async () => {
 
         <!-- SEC: body content -->
         <article
-          v-if="workflowList.length === 0 && !pageState.inputSearch"
+          v-if="workflowData.length === 0 && !pageState.inputSearch"
           class="col surface-2 flex items-center justify-center"
         >
           <NoData
@@ -283,7 +302,7 @@ onMounted(async () => {
             bordered
             hide-pagination
             :columns="columns"
-            :rows="workflowList"
+            :rows="workflowData"
           >
             <template #header="{ cols }">
               <q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
@@ -331,9 +350,9 @@ onMounted(async () => {
         </article>
 
         <!-- SEC: footer content -->
-        <!-- <footer
+        <footer
           class="row justify-between items-center q-px-md q-py-sm surface-2"
-          v-if="quotationPageMax > 0"
+          v-if="workflowPageMax > 0"
         >
           <div class="col-4">
             <div class="row items-center no-wrap">
@@ -344,7 +363,7 @@ onMounted(async () => {
                 <q-btn-dropdown
                   dense
                   unelevated
-                  :label="quotationPageSize"
+                  :label="workflowPageSize"
                   class="bordered q-pl-md"
                 >
                   <q-list>
@@ -353,7 +372,7 @@ onMounted(async () => {
                       :key="v"
                       clickable
                       v-close-popup
-                      @click="quotationPageSize = v"
+                      @click="workflowPageSize = v"
                     >
                       <q-item-section>
                         <q-item-label>{{ v }}</q-item-label>
@@ -367,21 +386,21 @@ onMounted(async () => {
           <div class="col-4 row justify-center app-text-muted">
             {{
               $t('general.recordsPage', {
-                resultcurrentPage: quotationData.length,
+                resultcurrentPage: workflowData.length,
                 total: pageState.inputSearch
-                  ? quotationData.length
+                  ? workflowData.length
                   : pageState.total,
               })
             }}
           </div>
           <nav class="col-4 row justify-end">
             <PaginationComponent
-              v-model:current-page="quotationPage"
-              v-model:max-page="quotationPageMax"
-              :fetch-data="fetchQuotationList"
+              v-model:current-page="workflowPage"
+              v-model:max-page="workflowPageMax"
+              :fetch-data="fetchWorkflowList"
             />
           </nav>
-        </footer> -->
+        </footer>
       </div>
     </section>
   </div>