refactor: employee mid name and prefix

src/components/02_personnel-management/FormPerson.vue

@@ -11,15 +11,15 @@ const optionStore = useOptionStore();
 const prefixName = defineModel<string | null>('prefixName');
 const firstName = defineModel<string>('firstName');
 const lastName = defineModel<string>('lastName');
-const firstNameEN = defineModel<string>('firstNameEn');
+const firstNameEN = defineModel<string>('firstNameEN');
-const lastNameEN = defineModel<string>('lastNameEn');
+const lastNameEN = defineModel<string>('lastNameEN');
 const telephoneNo = defineModel<string>('telephoneNo');
 const email = defineModel<string>('email');
 const gender = defineModel<string>('gender');
 const birthDate = defineModel<Date | string | null>('birthDate');
 const nationality = defineModel<string>('nationality');
 const midName = defineModel<string | null>('midName');
-const midNameEn = defineModel<string | null>('midNameEn');
+const midNameEN = defineModel<string | null>('midNameEN');
 
 defineProps<{
   dense?: boolean;
@@ -154,7 +154,7 @@ watch(
 
         <q-input
           lazy-rules="ondemand"
-          :for="`${prefixId}-input-first-name`"
+          :for="`${prefixId}-input-mid-name`"
           :dense="dense"
           outlined
           :readonly="readonly"
@@ -216,21 +216,20 @@ watch(
           v-model="firstNameEN"
           :rules="[(val: string) => !!val || $t('form.error.required')]"
         />
-
         <q-input
           lazy-rules="ondemand"
-          :for="`${prefixId}-input-first-name-en`"
+          :for="`${prefixId}-input-mid-name-en`"
           :dense="dense"
           outlined
           :readonly="readonly"
           hide-bottom-space
           class="col-md-3 col-6"
           :label="$t('personnel.form.middleNameEN')"
-          :model-value="readonly ? midNameEn || '-' : midNameEn"
+          :model-value="readonly ? midNameEN || '-' : midNameEN"
           @update:model-value="
-            (v) => (typeof v === 'string' ? (midNameEn = v) : '')
+            (v) => (typeof v === 'string' ? (midNameEN = v) : '')
           "
-          @clear="midNameEn = ''"
+          @clear="midNameEN = ''"
         />
         <q-input
           lazy-rules="ondemand"

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-status-color: var(--stone-5-hsl);
-  --_branch-badge-bg: var(--red-4-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: '',

src/stores/employee/types.ts

@@ -68,10 +68,13 @@ export type EmployeeCreate = {
   gender: string;
   nationality: string;
 
+  namePrefix: string;
   firstName: string;
   firstNameEN: string;
   lastName: string;
   lastNameEN: string;
+  middleName?: string;
+  middleNameEN?: string;
 
   addressEN: string;
   address: string;