From 17b527c078ad32f832a19bbfe7d5c2ce9d351682 Mon Sep 17 00:00:00 2001 From: puriphatt Date: Fri, 31 Jan 2025 11:57:52 +0700 Subject: [PATCH] refactor: 04 => improve fetchWorkflowList for mobile handling and adjust pagination logic --- src/pages/04_flow-managment/MainPage.vue | 12 +- src/pages/04_product-service/MainPage.vue | 159 ++++++++++++++-------- 2 files changed, 107 insertions(+), 64 deletions(-) diff --git a/src/pages/04_flow-managment/MainPage.vue b/src/pages/04_flow-managment/MainPage.vue index 960e011d..81d43002 100644 --- a/src/pages/04_flow-managment/MainPage.vue +++ b/src/pages/04_flow-managment/MainPage.vue @@ -127,7 +127,7 @@ async function deleteWorkflow(id?: string) { message: t('dialog.message.confirmDelete'), action: async () => { await workflowStore.deleteWorkflowTemplate(targetId); - await fetchWorkflowList(); + await fetchWorkflowList($q.screen.xs); resetForm(); }, @@ -263,10 +263,12 @@ function resetForm() { } 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, + pageSize: mobileFetch + ? workflowData.value.length + + (pageState.total - workflowData.value.length === 0 ? 1 : 0) + : workflowPageSize.value, query: pageState.inputSearch, status: statusFilter.value === 'all' @@ -515,7 +517,7 @@ watch([() => pageState.inputSearch, workflowPageSize], () => {
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue index e6ca784d..1523e5d7 100644 --- a/src/pages/04_product-service/MainPage.vue +++ b/src/pages/04_product-service/MainPage.vue @@ -274,6 +274,10 @@ const formProduct = ref({ code: '', image: undefined, shared: false, + serviceChargeCalcVat: true, + serviceChargeVatIncluded: true, + agentPriceCalcVat: true, + agentPriceVatIncluded: true, }); const currWorkflow = ref(); @@ -596,10 +600,14 @@ function selectAllProduct(list: Product[]) { }); } -async function fetchListGroups() { +async function fetchListGroups(mobileFetch?: boolean) { + const productGroupLength = productGroup.value?.length || 0; const res = await fetchProductGroup({ - page: currentPageGroup.value, - pageSize: pageSizeGroup.value, + page: mobileFetch ? 1 : currentPageGroup.value, + pageSize: mobileFetch + ? productGroupLength + + (stat.value[0]?.count - productGroupLength === 1 ? 1 : 0) + : pageSizeGroup.value, query: !!inputSearch.value ? inputSearch.value : undefined, status: currentStatus.value === 'All' @@ -610,13 +618,14 @@ async function fetchListGroups() { }); if (res) { - currentPageGroup.value = res.page; + // currentPageGroup.value = res.page; totalGroup.value = res.total; maxPageGroup.value = Math.ceil(res.total / pageSizeGroup.value); if (!productGroup.value) productGroup.value = []; - $q.screen.lt.md - ? productGroup.value.push(...res.result) - : (productGroup.value = res.result); + productGroup.value = + $q.screen.xs && !mobileFetch + ? [...productGroup.value, ...res.result] + : res.result; } } @@ -649,10 +658,13 @@ async function fetchListOfProductIsAdd( } } -async function fetchListOfProduct() { +async function fetchListOfProduct(mobileFetch?: boolean) { + const productLength = product.value?.length || 0; const res = await fetchListProduct({ - page: currentPageServiceAndProduct.value, - pageSize: pageSizeServiceAndProduct.value, + page: mobileFetch ? 1 : currentPageServiceAndProduct.value, + pageSize: mobileFetch + ? productLength + (stat.value[2]?.count - productLength === 1 ? 1 : 0) + : pageSizeServiceAndProduct.value, query: !!inputSearchProductAndService.value ? inputSearchProductAndService.value : undefined, @@ -666,14 +678,14 @@ async function fetchListOfProduct() { }); if (res) { + // currentPageServiceAndProduct.value = res.page; total.value = res.total; totalProduct.value = res.total; - currentPageServiceAndProduct.value = res.page; maxPageServiceAndProduct.value = Math.ceil( res.total / pageSizeServiceAndProduct.value, ); if (!product.value) product.value = []; - $q.screen.xs + $q.screen.xs && !mobileFetch ? product.value.push( ...res.result.map((v) => { return { @@ -691,13 +703,16 @@ async function fetchListOfProduct() { } } -async function fetchListOfService() { +async function fetchListOfService(mobileFetch?: boolean) { + const serviceLength = service.value?.length || 0; const res = await fetchListService({ - page: currentPageServiceAndProduct.value, + page: mobileFetch ? 1 : currentPageServiceAndProduct.value, query: !!inputSearchProductAndService.value ? inputSearchProductAndService.value : undefined, - pageSize: pageSizeServiceAndProduct.value, + pageSize: mobileFetch + ? serviceLength + (stat.value[1]?.count - serviceLength === 1 ? 1 : 0) + : pageSizeServiceAndProduct.value, status: currentStatus.value === 'INACTIVE' ? 'INACTIVE' @@ -708,14 +723,14 @@ async function fetchListOfService() { }); if (res) { + // currentPageServiceAndProduct.value = res.page; totalService.value = res.total; total.value = res.total; - currentPageServiceAndProduct.value = res.page; maxPageServiceAndProduct.value = Math.ceil( res.total / pageSizeServiceAndProduct.value, ); if (!service.value) service.value = []; - $q.screen.xs + $q.screen.xs && !mobileFetch ? service.value.push( ...res.result.map((v) => { return { @@ -811,15 +826,18 @@ async function deleteServiceConfirm(serviceId?: string) { action: async () => { const res = await deleteService(serviceId ?? currentIdService.value); - if (productAndServiceTab.value === 'service') { - await fetchListOfService(); - } - dialogServiceEdit.value = false; if (res) { totalService.value = totalService.value - 1; + allStat.value[1].count = allStat.value[1].count - 1; + stat.value[1].count = stat.value[1].count - 1; + + if (productAndServiceTab.value === 'service') { + await fetchListOfService($q.screen.xs); + } } + flowStore.rotate(); calculateStats({ reFetch: true }); }, @@ -843,14 +861,16 @@ async function deleteProductConfirm(id?: string) { return; } - if (productAndServiceTab.value === 'product') { - await fetchListOfProduct(); - } - dialogProductEdit.value = false; if (res) { totalProduct.value = totalProduct.value - 1; + allStat.value[2].count = allStat.value[2].count - 1; + stat.value[2].count = stat.value[2].count - 1; + + if (productAndServiceTab.value === 'product') { + await fetchListOfProduct($q.screen.xs); + } } flowStore.rotate(); calculateStats({ reFetch: true }); @@ -860,7 +880,7 @@ async function deleteProductConfirm(id?: string) { } // type or group -async function deleteProductById(productId?: string) { +async function deleteGroupById(productId?: string) { dialog({ color: 'negative', icon: 'mdi-alert', @@ -876,8 +896,10 @@ async function deleteProductById(productId?: string) { productId ?? currentIdGroup.value, ); if (res) { + allStat.value[0].count = allStat.value[0].count - 1; + stat.value[0].count = stat.value[0].count - 1; + await fetchListGroups($q.screen.xs); } - await fetchListGroups(); } flowStore.rotate(); @@ -891,8 +913,10 @@ async function deleteProductById(productId?: string) { productId ?? currentIdGroup.value, ); if (res) { + allStat.value[0].count = allStat.value[0].count - 1; + stat.value[0].count = stat.value[0].count - 1; + await fetchListGroups(); } - await fetchListGroups(); } flowStore.rotate(); @@ -1259,7 +1283,7 @@ async function submitService(notClose = false) { if (!notClose) clearFormService(); if (productAndServiceTab.value === 'service') { - await fetchListOfService(); + await fetchListOfService($q.screen.xs); } flowStore.rotate(); @@ -1304,7 +1328,7 @@ async function submitProduct(notClose = false) { if (!notClose) clearFormProduct(); if (productAndServiceTab.value === 'product') { - await fetchListOfProduct(); + await fetchListOfProduct($q.screen.xs); } flowStore.rotate(); } @@ -1329,7 +1353,7 @@ async function submitGroup() { currentIdGroupTree.value = ''; drawerInfo.value = false; - await fetchListGroups(); + await fetchListGroups($q.screen.xs); clearFormGroup(); flowStore.rotate(); } @@ -1470,17 +1494,22 @@ async function calculateStats(opt?: { allStat.value.push({ mode: 'product', count: resStatsProduct ?? 0 }); } stat.value[0].count = allStat.value[0].count; - stat.value[1].count = allStat.value[1].count; - stat.value[2].count = allStat.value[2].count; + if (productMode.value === 'group') { + stat.value[1].count = allStat.value[1].count; + stat.value[2].count = allStat.value[2].count; + } } async function fetchStatus() { + currentPageServiceAndProduct.value = 1; if (productAndServiceTab.value === 'product') { + product.value = []; await fetchListOfProduct(); flowStore.rotate(); } if (productAndServiceTab.value === 'service') { + service.value = []; await fetchListOfService(); flowStore.rotate(); } @@ -1577,10 +1606,14 @@ async function enterNext(type: 'service' | 'product') { filterStat.value.push('service'); } - if (productMode.value === 'service' && $q.screen.gt.xs) + if (productMode.value === 'service') { + service.value = []; await fetchListOfService(); - if (productMode.value === 'product' && $q.screen.gt.xs) + } + if (productMode.value === 'product') { + product.value = []; await fetchListOfProduct(); + } flowStore.rotate(); } @@ -1695,6 +1728,8 @@ watch( watch(currentStatus, async () => { if (productMode.value === 'group') { + productGroup.value = []; + currentPageGroup.value = 1; await fetchListGroups(); } flowStore.rotate(); @@ -1702,12 +1737,17 @@ watch(currentStatus, async () => { watch(inputSearch, async () => { if (productMode.value === 'group') { + productGroup.value = []; + currentPageGroup.value = 1; await fetchListGroups(); flowStore.rotate(); } }); watch(inputSearchProductAndService, async () => { + product.value = []; + service.value = []; + currentPageServiceAndProduct.value = 1; await alternativeFetch(); }); @@ -1917,7 +1957,7 @@ watch(
@@ -2262,9 +2299,11 @@ watch( " > {{ - (currentPageGroup - 1) * pageSizeGroup + - props.rowIndex + - 1 + $q.screen.xs + ? props.rowIndex + 1 + : (currentPageGroup - 1) * pageSizeGroup + + props.rowIndex + + 1 }}