feat: add prefix and middlename field

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

@@ -10,11 +10,12 @@ import {
 } from 'src/utils/datetime';
 import { ref, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { capitalize } from 'vue';
 
 const { locale } = useI18n();
 const optionStore = useOptionStore();
-const prefixName = defineModel<string>('prefixName');
+const prefixName = defineModel<string | null>('prefixName');
-const prefixNameEN = defineModel<string>('prefixNameEn');
+const prefixNameEN = defineModel<string | null>('prefixNameEn');
 const firstName = defineModel<string>('firstName');
 const lastName = defineModel<string>('lastName');
 const firstNameEN = defineModel<string>('firstNameEn');
@@ -24,8 +25,8 @@ 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>('midName');
+const midName = defineModel<string | null>('midName');
-const midNameEn = defineModel<string>('midNameEn');
+const midNameEn = defineModel<string | null>('midNameEn');
 
 defineProps<{
   dense?: boolean;
@@ -195,7 +196,7 @@ watch(
           :disable="!readonly"
           class="col-1"
           :label="$t('formDialogInputPrefixName')"
-          v-model="prefixNameEN"
+          :model-value="capitalize(prefixNameEn || '')"
         />
 
         <q-input

src/pages/02_personnel-management/MainPage.vue

@@ -207,8 +207,11 @@ const formData = ref<UserCreate>({
   registrationNo: null,
   lastNameEN: '',
   lastName: '',
+  middleNameEN: '',
+  middleName: '',
   firstNameEN: '',
   firstName: '',
+  namePrefix: null,
   userRole: '',
   userType: '',
   profileImage: null,
@@ -601,8 +604,11 @@ async function assignFormData(idEdit: string) {
       registrationNo: foundUser.registrationNo,
       lastNameEN: foundUser.lastNameEN,
       lastName: foundUser.lastName,
+      middleNameEN: foundUser.middleNameEN,
+      middleName: foundUser.middleName,
       firstNameEN: foundUser.firstNameEN,
       firstName: foundUser.firstName,
+      namePrefix: foundUser.namePrefix,
       userRole: foundUser.userRole,
       userType: foundUser.userType,
       username: foundUser.username,
@@ -1678,6 +1684,10 @@ watch(
             id="info-personal"
             v-model:first-name="formData.firstName"
             v-model:last-name="formData.lastName"
+            v-model:mid-name="formData.middleName"
+            v-model:mid-name-en="formData.middleNameEN"
+            v-model:prefix-name="formData.namePrefix"
+            v-model:prefix-name-en="formData.namePrefix"
             v-model:first-name-en="formData.firstNameEN"
             v-model:last-name-en="formData.lastNameEN"
             v-model:telephone-no="formData.telephoneNo"

src/stores/user/types.ts

@@ -35,8 +35,11 @@ export type User = {
   address: string;
   lastNameEN: string;
   lastName: string;
+  middleNameEN?: string | null;
+  middleName?: string | null;
   firstNameEN: string;
   firstName: string;
+  namePrefix?: string | null;
   id: string;
   profileImageUrl: string;
   code: string;
@@ -70,8 +73,11 @@ export type UserCreate = {
   registrationNo?: string | null;
   lastNameEN: string;
   lastName: string;
+  middleNameEN?: string | null;
+  middleName?: string | null;
   firstNameEN: string;
   firstName: string;
+  namePrefix?: string | null;
   userRole: string;
   userType: string;
   username: string;