From a61d2225f991049d5fe49eaa9e4b8df4a14b4f55 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 30 Jan 2025 17:33:53 +0700
Subject: [PATCH] refactor: 04 => enhance fetchWorkflowList for mobile
 responsiveness and optimize data handling

---
 src/pages/04_flow-managment/MainPage.vue | 68 +++++++++++++++---------
 1 file changed, 42 insertions(+), 26 deletions(-)

diff --git a/src/pages/04_flow-managment/MainPage.vue b/src/pages/04_flow-managment/MainPage.vue
index d5003bcd..960e011d 100644
--- a/src/pages/04_flow-managment/MainPage.vue
+++ b/src/pages/04_flow-managment/MainPage.vue
@@ -205,7 +205,7 @@ async function submit() {
       ...formDataWorkflow.value,
     });
   }
-  await fetchWorkflowList();
+  await fetchWorkflowList($q.screen.xs);
   resetForm();
 }
 
@@ -262,28 +262,28 @@ function resetForm() {
   };
 }
 
-async function fetchWorkflowList() {
-  {
-    const res = await workflowStore.getWorkflowTemplateList({
-      page: workflowPage.value,
-      pageSize: workflowPageSize.value,
-      query: pageState.inputSearch,
-      status:
-        statusFilter.value === 'all'
-          ? undefined
-          : statusFilter.value === 'statusACTIVE'
-            ? 'ACTIVE'
-            : 'INACTIVE',
-    });
-    if (res) {
-      $q.screen.xs
-        ? workflowData.value.push(...res.result)
-        : (workflowData.value = res.result);
+async function fetchWorkflowList(mobileFetch?: boolean) {
+  console.log(workflowData.value.length);
+  const res = await workflowStore.getWorkflowTemplateList({
+    page: mobileFetch ? 1 : workflowPage.value,
+    pageSize: mobileFetch ? workflowData.value.length : workflowPageSize.value,
+    query: pageState.inputSearch,
+    status:
+      statusFilter.value === 'all'
+        ? undefined
+        : statusFilter.value === 'statusACTIVE'
+          ? 'ACTIVE'
+          : 'INACTIVE',
+  });
+  if (res) {
+    workflowData.value =
+      $q.screen.xs && !mobileFetch
+        ? [...workflowData.value, ...res.result]
+        : res.result;
 
-      workflowPageMax.value = Math.ceil(res.total / workflowPageSize.value);
-      if (pageState.inputSearch || statusFilter.value !== 'all') return;
-      pageState.total = res.total;
-    }
+    workflowPageMax.value = Math.ceil(res.total / workflowPageSize.value);
+    if (pageState.inputSearch || statusFilter.value !== 'all') return;
+    pageState.total = res.total;
   }
 }
 
@@ -295,8 +295,19 @@ onMounted(async () => {
   await fetchWorkflowList();
 });
 
-watch(statusFilter, fetchWorkflowList);
-watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
+watch(
+  () => statusFilter.value,
+  () => {
+    workflowData.value = [];
+    workflowPage.value = 1;
+    fetchWorkflowList();
+  },
+);
+watch([() => pageState.inputSearch, workflowPageSize], () => {
+  workflowData.value = [];
+  workflowPage.value = 1;
+  fetchWorkflowList();
+});
 </script>
 <template>
   <FloatingActionButton
@@ -573,8 +584,13 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
                     v-if="fieldSelected.includes('order')"
                     class="text-center"
                   >
-                    {{ props.rowIndex + 1 }}
-                    <!-- {{ (currentPage - 1) * pageSize + props.rowIndex + 1 }} -->
+                    {{
+                      $q.screen.xs
+                        ? props.rowIndex + 1
+                        : (workflowPage - 1) * workflowPageSize +
+                          props.rowIndex +
+                          1
+                    }}
                   </q-td>
                   <q-td v-if="fieldSelected.includes('name')">
                     <section class="row items-center no-wrap">