refactor: create / edit function

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
 </script>
 
@@ -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="
+        @click="createCustomerForm('CORP')"
-          (customerFormState.dialogModal = true),
-            (customerFormState.dialogType = 'create'),
-            (customerFormData.customerType = '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="
+        @click="createCustomerForm('PERS')"
-          (customerFormState.dialogModal = true),
-            (customerFormState.dialogType = 'create'),
-            (customerFormData.customerType = 'CORP')
-        "
         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(() =>
+        await fetchListOfOptionBranch().then(() => {
-          customerFormStore.resetForm(),
+          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 }}
         <FormBasicInfo
           id="form-basic-info-customer"
           @save="customerFormState.saveMode = 'customer'"

src/pages/03_customer-management/form.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { defineStore } from 'pinia';
 import { CustomerCreate } from 'src/stores/customer/types';
 import useMyBranch from 'src/stores/my-branch';
@@ -46,13 +46,26 @@ export const useCustomerForm = defineStore('form-customer', () => {
     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;