From 97eea0cc6ba63a5058ccad1244f3bec4dbf1ae03 Mon Sep 17 00:00:00 2001 From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com> Date: Fri, 2 Aug 2024 17:05:55 +0700 Subject: [PATCH] refactor: cleanup --- src/pages/03_customer-management/MainPage.vue | 156 ++++++++---------- 1 file changed, 65 insertions(+), 91 deletions(-) diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue index 710a4b97..cf2a3bae 100644 --- a/src/pages/03_customer-management/MainPage.vue +++ b/src/pages/03_customer-management/MainPage.vue @@ -75,29 +75,56 @@ async function init() { } onMounted(init); +// NOTE: Page Data +const currentCustomer = ref(); +const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]); +const listEmployee = ref([]); +const hideStats = ref(false); +const statsCustomerType = ref({ + CORP: 0, + PERS: 0, +}); + +// NOTE: Page State const currentTab = ref<'employer' | 'employee'>('employer'); const inputSearch = ref(''); const currentStatus = ref('All'); - -watch(() => route.name, init); -watch([currentTab, currentStatus, inputSearch], async ([name]) => { - if (name === 'employer') { - currentPageCustomer.value = 1; - await fetchListCustomer(true); - } - if (name === 'employee') { - currentPageEmployee.value = 1; - await fetchListEmployee(true); - } - flowStore.rotate(); -}); - -const { fetchList } = customerStore; - -const fieldSelectedCustomer = ref<{ label: string; value: string }>({ +const customerTypeSelected = ref<{ + label: string; + value: 'all' | 'customerLegalEntity' | 'customerNaturalPerson'; +}>({ label: t('all'), value: 'all', }); +const employeeStats = ref(0); +const gridView = ref(false); +const splitPercent = ref(15); // Customer only + +watch(() => route.name, init); +watch( + [currentTab, currentStatus, inputSearch, customerTypeSelected], + async ([tabName]) => { + if (tabName === 'employer') { + currentPageCustomer.value = 1; + await fetchListCustomer(true); + } + if (tabName === 'employee') { + currentPageEmployee.value = 1; + await fetchListEmployee(true); + } + flowStore.rotate(); + }, +); +watch(locale, () => { + customerTypeSelected.value = { + label: `${customerTypeSelected.value.label}`, + value: customerTypeSelected.value?.value, + }; +}); +watch( + () => $q.screen.lt.md, + () => $q.screen.lt.md && (gridView.value = true), +); const fieldDisplayEmployer = ref<{ label: string; value: string }[]>([ { label: 'corporation', value: 'customerName' }, @@ -161,26 +188,8 @@ const fieldSelected = ref< 'action', ]); -const splitPercent = ref(15); -const gridView = ref(false); -const statsEmployee = ref(0); -const hideStat = ref(false); - const registerAbleBranchOption = ref<{ id: string; name: string }[]>(); -const statusToggle = ref(false); -const statsCustomerType = ref({ - CORP: 0, - PERS: 0, -}); -const currentCustomerId = ref(''); -const currentCustomer = ref(); - -const currentBranch = ref<{ name: string; code: string }>({ - name: '', - code: '', -}); - const branch = ref(); const currentPageCustomer = ref(1); @@ -190,23 +199,17 @@ const pageSize = ref(10); const currentPageEmployee = ref(1); const maxPageEmployee = ref(1); -const currentBranchId = ref(''); - -const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]); -const listEmployee = ref([]); - const customerStats = [ { id: 1, count: 2, name: 'CORP' }, { id: 2, count: 3, name: 'PERS' }, ]; -const fieldCustomer = ref([ +const fieldCustomer = [ 'all', 'customerLegalEntity', 'customerNaturalPerson', -]); +] as const; -const infoDrawerBranch = ref(false); const customerType = ref('CORP'); const employeeHistoryDialog = ref(false); const employeeHistory = ref(); @@ -251,7 +254,7 @@ async function fetchListOfOptionBranch() { } async function fetchListCustomer(fetchStats = false) { - const resultList = await fetchList({ + const resultList = await customerStore.fetchList({ includeBranch: true, page: currentPageCustomer.value, pageSize: pageSize.value, @@ -262,6 +265,13 @@ async function fetchListCustomer(fetchStats = false) { ? 'ACTIVE' : 'INACTIVE', query: inputSearch.value, + customerType: ( + { + all: undefined, + customerLegalEntity: 'CORP', + customerNaturalPerson: 'PERS', + } as const + )[customerTypeSelected.value.value], }); if (resultList) { @@ -296,7 +306,7 @@ async function fetchListEmployee(fetchStats = false) { listEmployee.value = resultListEmployee.result; } - if (fetchStats) statsEmployee.value = await employeeStore.getStatsEmployee(); + if (fetchStats) employeeStats.value = await employeeStore.getStatsEmployee(); } async function triggerChangeStatus(id: string, status: string) { @@ -365,36 +375,7 @@ async function openHistory(id: string) { employeeHistoryDialog.value = true; } -watch(locale, () => { - fieldSelectedCustomer.value = { - label: `${fieldSelectedCustomer.value.label}`, - value: fieldSelectedCustomer.value?.value, - }; -}); - -watch(fieldSelectedCustomer, async () => { - const resultList = await fetchList({ - includeBranch: true, - customerType: ( - { - all: undefined, - cusomterLegalEnity: 'CORP', - customerNaturalPerson: 'PERS', - } as const - )[fieldSelectedCustomer.value.value], - }); - - if (resultList) listCustomer.value = resultList.result; - - flowStore.rotate(); -}); - // TODO: When in employee form, if select address same as customer then auto fill - -watch( - () => $q.screen.lt.md, - () => $q.screen.lt.md && (gridView.value = true), -);