diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue index 11645a44..aa0c23d1 100644 --- a/src/pages/03_customer-management/MainPage.vue +++ b/src/pages/03_customer-management/MainPage.vue @@ -384,6 +384,12 @@ async function editCustomerForm(id: string) { customerFormState.value.dialogModal = true; } +function createCustomerForm(customerType: 'CORP' | 'PERS') { + customerFormState.value.dialogModal = true; + customerFormState.value.dialogType = 'create'; + customerFormData.value.customerType = customerType; +} + // TODO: When in employee form, if select address same as customer then auto fill @@ -394,11 +400,7 @@ async function editCustomerForm(id: string) { v-if="currentTab === 'employer'" id="add-customer-legal-entity" style="color: white; background-color: hsla(var(--violet-11-hsl))" - @click=" - (customerFormState.dialogModal = true), - (customerFormState.dialogType = 'create'), - (customerFormData.customerType = 'CORP') - " + @click="createCustomerForm('CORP')" padding="xs" icon="mdi-office-building" :label="$t('add') + ' ' + $t('customerLegalEntity')" @@ -411,11 +413,7 @@ async function editCustomerForm(id: string) { :label="$t('add') + ' ' + $t('customerNaturalPerson')" external-label label-position="left" - @click=" - (customerFormState.dialogModal = true), - (customerFormState.dialogType = 'create'), - (customerFormData.customerType = 'CORP') - " + @click="createCustomerForm('PERS')" style="color: white; background-color: hsla(var(--teal-10-hsl))" padding="xs" icon="mdi-account-plus" @@ -1639,9 +1637,11 @@ async function editCustomerForm(id: string) { :title="$t('form.title.create', { name: 'Employer' })" :show=" async () => - await fetchListOfOptionBranch().then(() => - customerFormStore.resetForm(), - ) + await fetchListOfOptionBranch().then(() => { + customerFormStore.resetForm( + customerFormState.dialogType === 'create', + ); + }) " :submit=" () => { @@ -1701,6 +1701,7 @@ async function editCustomerForm(id: string) { id="customer-form-content" style="height: 100%; max-height: 100%; overflow-y: auto" > + {{ customerFormData.customerType }} { editCustomerBranchId: '', }); + watch( + currentFormData, + (v) => (defaultFormData.customerType = v.customerType), + ); + function isFormDataDifferent() { return ( JSON.stringify(resetFormData) !== JSON.stringify(currentFormData.value) ); } - function resetForm() { + function resetForm(clean = false) { + if (clean) { + defaultFormData.customerType = currentFormData.value.customerType; + currentFormData.value = structuredClone(defaultFormData); + currentFormData.value.registeredBranchId = + branchStore.currentMyBranch?.id || ''; + return; + } + if (!resetFormData.registeredBranchId) { resetFormData.registeredBranchId = branchStore.currentMyBranch?.id || ''; } @@ -60,7 +73,12 @@ export const useCustomerForm = defineStore('form-customer', () => { currentFormData.value = structuredClone(resetFormData); } - async function assignFormData(id: string) { + async function assignFormData(id?: string) { + if (!id) { + resetFormData = structuredClone(defaultFormData); + return; + } + const data = await customerStore.fetchById(id); if (!data) return;