refactor: employee mid name and prefix

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

@@ -1257,8 +1257,8 @@ const emptyCreateDialog = ref(false);
                             code: props.row.code,
                             name:
                               $i18n.locale === 'eng'
-                                ? `${props.row.firstName} ${props.row.lastName} `.trim()
-                                : `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim(),
+                                ? `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim()
+                                : `${props.row.firstName} ${props.row.lastName} `.trim(),
                             img:
                               props.row.imageUrl ||
                               '/images/customer-' +
@@ -1557,6 +1557,7 @@ const emptyCreateDialog = ref(false);
     </div>
   </div>
 
+  <!-- add customer -->
   <DialogForm
     v-model:modal="emptyCreateDialog"
     :title="$t('customer.employerType')"
@@ -1855,6 +1856,7 @@ const emptyCreateDialog = ref(false);
     </div>
   </DialogContainer>
 
+  <!-- add employee -->
   <DialogForm
     hideFooter
     :title="$t('form.title.create', { name: $t('customer.employee') })"
@@ -2108,10 +2110,13 @@ const emptyCreateDialog = ref(false);
               separator
               title="customerEmployee.form.group.personalInfo"
               v-model:open="employeeFormState.dialogModal"
+              v-model:prefixName="employeeFormState.namePrefix"
               v-model:firstName="currentFromDataEmployee.firstName"
               v-model:lastName="currentFromDataEmployee.lastName"
               v-model:firstNameEN="currentFromDataEmployee.firstNameEN"
               v-model:lastNameEN="currentFromDataEmployee.lastNameEN"
+              v-model:midName="currentFromDataEmployee.middleName"
+              v-model:midNameEN="currentFromDataEmployee.middleNameEN"
               v-model:gender="currentFromDataEmployee.gender"
               v-model:birthDate="currentFromDataEmployee.dateOfBirth"
               v-model:nationality="currentFromDataEmployee.nationality"
@@ -2379,7 +2384,7 @@ const emptyCreateDialog = ref(false);
       </div>
     </template>
   </ImageUploadDialog>
-  <!-- นายจ้าง -->
+  <!-- นายจ้าง edit customer -->
   <DrawerInfo
     hide-action
     v-model:drawer-open="customerFormState.drawerModal"
@@ -2395,6 +2400,11 @@ const emptyCreateDialog = ref(false);
           ? 'app-bg-female text-white'
           : ''
     "
+    :close="
+      () => {
+        customerFormState.drawerModal = false;
+      }
+    "
     :submit="
       async () => {
         await customerFormStore.submitFormCustomer();
@@ -2655,6 +2665,11 @@ const emptyCreateDialog = ref(false);
   <DrawerInfo
     hide-action
     v-model:drawer-open="employeeFormState.drawerModal"
+    :close="
+      () => {
+        employeeFormState.drawerModal = false;
+      }
+    "
     :title="
       employeeFormState.currentEmployee
         ? $i18n.locale === 'eng'
@@ -2913,10 +2928,13 @@ const emptyCreateDialog = ref(false);
                 separator
                 title="customerEmployee.form.group.personalInfo"
                 :readonly="!employeeFormState.isEmployeeEdit"
+                v-model:prefixName="currentFromDataEmployee.namePrefix"
                 v-model:firstName="currentFromDataEmployee.firstName"
                 v-model:lastName="currentFromDataEmployee.lastName"
                 v-model:firstNameEN="currentFromDataEmployee.firstNameEN"
                 v-model:lastNameEN="currentFromDataEmployee.lastNameEN"
+                v-model:midName="currentFromDataEmployee.middleName"
+                v-model:midNameEN="currentFromDataEmployee.middleNameEN"
                 v-model:gender="currentFromDataEmployee.gender"
                 v-model:birthDate="currentFromDataEmployee.dateOfBirth"
                 v-model:nationality="currentFromDataEmployee.nationality"
@@ -2931,6 +2949,9 @@ const emptyCreateDialog = ref(false);
                 v-model:districtId="currentFromDataEmployee.districtId"
                 v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
                 v-model:zipCode="currentFromDataEmployee.zipCode"
+                v-model:sameWithEmployer="
+                  employeeFormState.formDataEmployeeSameAddr
+                "
                 :readonly="!employeeFormState.isEmployeeEdit"
                 prefix-id="drawer-info-personnel"
                 dense
@@ -3209,8 +3230,8 @@ const emptyCreateDialog = ref(false);
 }
 
 .status-inactive {
-  --_branch-status-color: var(--red-4-hsl);
-  --_branch-badge-bg: var(--red-4-hsl);
+  --_branch-status-color: var(--stone-5-hsl);
+  --_branch-badge-bg: var(--stone-5-hsl);
   filter: grayscale(0.5);
   opacity: 0.5;
 }

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

@@ -497,10 +497,13 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     nationality: '',
     status: 'CREATED',
 
+    namePrefix: '',
     firstName: '',
     firstNameEN: '',
     lastName: '',
     lastNameEN: '',
+    middleName: '',
+    middleNameEN: '',
 
     addressEN: '',
     address: '',