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

feat: search and paging workflow template

Browse source
This commit is contained in:
Methapon Metanipat 2024-10-25 16:22:45 +07:00
parent 1fe2c3a96c
commit 65e0bd8d69
1 changed files with 36 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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