refactor: restructure

src/pages/03_customer-management/MainPage.vue

@@ -27,9 +27,11 @@ import DialogForm from 'components/DialogForm.vue';
 import SideMenu from 'src/components/SideMenu.vue';
 import BasicInformation from 'src/components/03_customer-management/employee/BasicInformation.vue';
 import FormPerson from 'src/components/02_personnel-management/FormPerson.vue';
-import FormBasicInfo from './components/FormBasicInfo.vue';
-import FormBranch from './components/FormBranch.vue';
-import CustomerInfoComponent from './components/CustomerBranch.vue';
+import {
+  EmployerFormBasicInfo,
+  EmployerFormBranch,
+  EmployerBranch,
+} from './components';
 import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
 import FormEmployeePassport from 'src/components/03_customer-management/FormEmployeePassport.vue';
 import FormEmployeeVisa from 'src/components/03_customer-management/FormEmployeeVisa.vue';
@@ -1754,7 +1756,7 @@ watch(
     </div>
 
     <div class="col column" v-if="$route.name === 'CustomerBranchManagement'">
-      <CustomerInfoComponent
+      <EmployerBranch
         v-if="currentCustomer"
         :customer-id="currentCustomer.id"
         :customer-type="currentCustomer.customerType"
@@ -1865,7 +1867,7 @@ watch(
               opacity: customerFormState.branchIndex !== -1 ? '0.5' : undefined,
             }"
           >
-            <FormBasicInfo
+            <EmployerFormBasicInfo
               class="q-mb-xl"
               :readonly="
                 customerFormState.dialogType === 'edit' &&
@@ -1920,7 +1922,7 @@ watch(
               v-if="customerFormData.customerBranch"
               v-for="(_, idx) in customerFormData.customerBranch"
             >
-              <FormBranch
+              <EmployerFormBranch
                 v-if="!!customerFormState.editCustomerId"
                 v-model:customer-branch="customerFormData.customerBranch[idx]"
                 :customer-type="customerFormData.customerType"

src/pages/03_customer-management/components/employer/EmployerFormBranch.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
-import FormBusiness from './FormBusiness.vue';
+import FormBusiness from './EmployerFormBusiness.vue';
+import FormContact from './EmployerFormContact.vue';
 import { CustomerCreate } from 'src/stores/customer/types';
 import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
-import FormContact from './FormContact.vue';
 import { EditButton } from 'src/components/button';
 import DeleteButton from 'src/components/button/DeleteButton.vue';
 import SaveButton from 'src/components/button/SaveButton.vue';

src/pages/03_customer-management/components/index.ts

@@ -0,0 +1,5 @@
+export { default as EmployerBranch } from './employer/EmployerBranch.vue';
+export { default as EmployerFormBasicInfo } from './employer/EmployerFormBasicInfo.vue';
+export { default as EmployerFormBranch } from './employer/EmployerFormBranch.vue';
+export { default as EmployerFormBusiness } from './employer/EmployerFormBusiness.vue';
+export { default as EmployerFormContact } from './employer/EmployerFormContact.vue';

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

@@ -58,7 +58,6 @@ export const useCustomerForm = defineStore('form-customer', () => {
   );
 
   function isFormDataDifferent() {
-    console.log(resetFormData, currentFormData.value);
     return (
       JSON.stringify(resetFormData) !== JSON.stringify(currentFormData.value)
     );
@@ -66,6 +65,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
 
   function resetForm(clean = false) {
     state.value.branchIndex = -1;
+    state.value.readonly = true;
     if (clean) {
       defaultFormData.customerType = currentFormData.value.customerType;
       currentFormData.value = structuredClone(defaultFormData);