chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: 04 => enhance fetchWorkflowList for mobile responsiveness and optimize data handling

Browse source
This commit is contained in:
puriphatt 2025-01-30 17:33:53 +07:00
parent 84282ff5ce
commit a61d2225f9
1 changed files with 42 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

68
src/pages/04_flow-managment/MainPage.vue
View file

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