From 17ca97165b07af963171dd3ae3c41ce53f9e7920 Mon Sep 17 00:00:00 2001 From: Net <93821485+somnetsak123@users.noreply.github.com> Date: Tue, 11 Jun 2024 11:24:37 +0700 Subject: [PATCH] =?UTF-8?q?feat:=20=E0=B8=97=E0=B8=B3=E0=B9=81=E0=B8=9A?= =?UTF-8?q?=E0=B9=88=E0=B8=87=E0=B8=82=E0=B8=AD=E0=B8=87=E0=B8=99=E0=B8=B2?= =?UTF-8?q?=E0=B8=A2=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87=20/=20=E0=B9=81?= =?UTF-8?q?=E0=B8=81=E0=B9=89=E0=B8=84=E0=B9=88=E0=B8=B2=E0=B8=82=E0=B8=AD?= =?UTF-8?q?=E0=B8=87=20type?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/03_customer-management/MainPage.vue | 153 ++++++++++++------ 1 file changed, 107 insertions(+), 46 deletions(-) diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue index 4ce2e6cd..69f75831 100644 --- a/src/pages/03_customer-management/MainPage.vue +++ b/src/pages/03_customer-management/MainPage.vue @@ -33,6 +33,7 @@ import { CustomerUpdate, CustomerBranch, CustomerBranchCreate, + CustomerType, } from 'stores/customer/types'; import { EmployeeCreate, Employee } from 'stores/employee/types'; import { onMounted } from 'vue'; @@ -200,9 +201,13 @@ const dialogInputCustomerBranchForm = ref(false); const currentCustomer = ref(); const branch = ref(); +const currentPageCustomer = ref(1); +const maxPageCustomer = ref(1); +const pageSizeCustomer = ref(30); + const currentBranchId = ref(''); const currentCustomerName = ref(''); -const currentCustomerUrlImage = ref(''); +const currentCustomerUrlImage = ref(null); const inputFile = (() => { const element = document.createElement('input'); @@ -230,12 +235,12 @@ const listEmployee = ref(); const itemCard = [ { icon: 'mdi:office-building', - text: 'customerLegalEntity', + text: 'CORP', color: 'var(--purple-8)', }, { icon: 'heroicons:user-solid', - text: 'customerNaturalPerson', + text: 'PERS', color: 'var(--green-9)', }, ]; @@ -244,13 +249,13 @@ const customerStats = [ { id: 1, count: 2, - name: 'customerLegalEntity', + name: 'CORP', }, { id: 2, count: 3, - name: 'customerNaturalPerson', + name: 'PERS', }, ]; @@ -273,11 +278,7 @@ const employeeTab = [ }, ]; -const fieldCustomer = ref([ - 'all', - 'customerLegalEntity', - 'customerNaturalPerson', -]); +const fieldCustomer = ref(['all', 'CORP', 'PERS']); const dialogCustomerType = ref(false); const dialogInputForm = ref(false); @@ -299,11 +300,9 @@ const selectorList = computed(() => [ }, ]); -const customerType = ref< - 'customerLegalEntity' | 'customerNaturalPerson' | undefined ->('customerLegalEntity'); +const customerType = ref('CORP'); -function triggerCreate(type: 'customerLegalEntity' | 'customerNaturalPerson') { +function triggerCreate(type: CustomerType) { customerType.value = type; openDialogInputForm(); dialogCustomerType.value = false; @@ -343,7 +342,7 @@ function onCloseBranch() { } function clearForm() { - customerType.value = undefined; + customerType.value = 'CORP'; dialogInputForm.value = false; formData.value = { status: 'CREATED', @@ -427,8 +426,7 @@ function deleteBranchId(id: string) { async function onSubmit() { await create({ ...formData.value, - customerType: - customerType.value === 'customerLegalEntity' ? 'CORP' : 'PERS', + customerType: customerType.value === 'CORP' ? 'CORP' : 'PERS', image: profileSubmit.value ? profileFile.value ?? null : null, }); clearForm(); @@ -475,6 +473,23 @@ async function searchCustomer() { } } +async function fetchListCustomer() { + const resultList = await fetchList({ + includeBranch: true, + page: currentPageCustomer.value, + pageSize: pageSizeCustomer.value, + }); + + if (resultList) { + currentPageCustomer.value = resultList.page; + maxPageCustomer.value = Math.ceil( + resultList.total / pageSizeCustomer.value, + ); + + listCustomer.value = resultList.result; + } +} + async function onSubmitEdit(id: string) { if (!formData.value) return; @@ -488,6 +503,8 @@ async function onSubmitEdit(id: string) { }; await editById(id, tempValue); + infoDrawer.value = false; + fetchListCustomer(); clearForm(); } @@ -523,6 +540,7 @@ async function submitBranch() { } } infoDrawerBranch.value = false; + clearForm(); } @@ -575,7 +593,11 @@ async function assignFormData(data: Customer & { branch: CustomerBranch[] }) { onMounted(async () => { const resultStats = await getStatsCustomer(); - const resultList = await fetchList({ includeBranch: true }); + const resultList = await fetchList({ + includeBranch: true, + page: 1, + pageSize: pageSizeCustomer.value, + }); const resultListEmployee = await employeeStore.fetchList(); if (resultStats) statsCustomerType.value = resultStats; @@ -590,7 +612,14 @@ onMounted(async () => { selectorLabel.value = 'EMPLOYER'; } - if (resultList) listCustomer.value = resultList.result; + if (resultList) { + currentPageCustomer.value = resultList.page; + maxPageCustomer.value = Math.ceil( + resultList.total / pageSizeCustomer.value, + ); + listCustomer.value = resultList.result; + } + if (resultListEmployee) listEmployee.value = resultListEmployee.result; }); @@ -607,6 +636,30 @@ watch(locale, () => { value: fieldSelectedCustomer.value?.value, }; }); + +watch(currentPageCustomer, async () => { + fetchListCustomer(); +}); + +watch(fieldSelectedCustomer, async () => { + let resultList; + + if (fieldSelectedCustomer.value.value === 'all') { + resultList = await fetchList({ includeBranch: true }); + } + + if (fieldSelectedCustomer.value.value === 'CORP') { + resultList = await fetchList({ includeBranch: true, customerType: 'CORP' }); + } + + if (fieldSelectedCustomer.value.value === 'PERS') { + resultList = await fetchList({ includeBranch: true, customerType: 'PERS' }); + } + + if (resultList) { + listCustomer.value = resultList.result; + } +});