refactor: edit layout input

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

@@ -23,6 +23,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 midNameEn = defineModel<string>('midNameEn');
 
 defineProps<{
   dense?: boolean;
@@ -106,7 +108,7 @@ watch(
     </div>
 
     <div class="col-12 row q-col-gutter-sm">
-      <div class="col-6 row" style="display: flex; gap: var(--size-2)">
+      <div class="col-12 row" style="display: flex; gap: var(--size-2)">
         <q-select
           outlined
           use-input
@@ -121,7 +123,7 @@ watch(
           option-value="value"
           lazy-rules="ondemand"
           hide-dropdown-icon
-          class="col-2"
+          class="col-1"
           :dense="dense"
           :readonly="readonly"
           :options="prefixNameOptions"
@@ -152,6 +154,19 @@ watch(
             (val: string) => !!val || $t('formDialogInputFirstNameValidate'),
           ]"
         />
+
+        <q-input
+          lazy-rules="ondemand"
+          :for="`${prefixId}-input-first-name`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-3"
+          :label="$t('formDialogInputMidName')"
+          v-model="midName"
+        />
+
         <q-input
           lazy-rules="ondemand"
           :for="`${prefixId}-input-last-name`"
@@ -168,36 +183,18 @@ watch(
         />
       </div>
 
-      <q-select
+      <div class="col-12 row" style="display: flex; gap: var(--size-2)">
-        outlined
+        <q-input
-        use-input
-        fill-input
-        emit-value
-        map-options
-        hide-selected
-        hide-bottom-space
-        v-model="prefixNameTh"
-        input-debounce="0"
-        option-label="label"
-        option-value="value"
           lazy-rules="ondemand"
-        class="col-1"
+          :for="`${prefixId}-input-first-name`"
           :dense="dense"
-        :readonly="readonly"
+          outlined
-        :options="prefixNameOptions"
+          hide-bottom-space
-        hide-dropdown-icon
+          disable
-        :for="`${prefixId}-select-prefix-name`"
+          class="col-1"
           :label="$t('formDialogInputPrefixName')"
-        @filter="prefixNameFilter"
+          v-model="firstName"
-      >
+        />
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">
-              {{ $t('noResults') }}
-            </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
 
         <q-input
           lazy-rules="ondemand"
@@ -206,13 +203,25 @@ watch(
           outlined
           :readonly="readonly"
           hide-bottom-space
-        class="col-2"
+          class="col"
           :label="$t('formDialogInputFirstNameEN')"
           v-model="firstNameEN"
           :rules="[
             (val: string) => !!val || $t('formDialogInputFirstNameENValidate'),
           ]"
         />
+
+        <q-input
+          lazy-rules="ondemand"
+          :for="`${prefixId}-input-first-name-en`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-3"
+          :label="$t('formDialogInputMidNameEn')"
+          v-model="midNameEn"
+        />
         <q-input
           lazy-rules="ondemand"
           :for="`${prefixId}-input-last-name-en`"
@@ -220,69 +229,14 @@ watch(
           outlined
           :readonly="readonly"
           hide-bottom-space
-        class="col-2"
+          class="col"
           :label="$t('formDialogInputLastNameEN')"
           v-model="lastNameEN"
           :rules="[
             (val: string) => !!val || $t('formDialogInputLastNameENValidate'),
           ]"
         />
-
+      </div>
-      <q-input
-        lazy-rules="ondemand"
-        v-if="!employee"
-        :for="`${prefixId}-input-telephone`"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        class="col-3"
-        :label="$t('formDialogInputTelephone')"
-        v-model="telephoneNo"
-        mask="##########"
-      />
-      <q-input
-        lazy-rules="ondemand"
-        v-if="!employee"
-        :for="`${prefixId}-input-email`"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        :label="$t('formDialogInputEmail')"
-        class="col-3"
-        v-model="email"
-      />
-
-      <q-select
-        v-if="!employee"
-        outlined
-        use-input
-        fill-input
-        emit-value
-        map-options
-        hide-selected
-        hide-bottom-space
-        v-model="gender"
-        input-debounce="0"
-        option-label="label"
-        option-value="value"
-        lazy-rules="ondemand"
-        class="col-1"
-        :dense="dense"
-        :readonly="readonly"
-        :options="genderOptions"
-        :hide-dropdown-icon="readonly"
-        :for="`${prefixId}-select-gender`"
-        :label="$t('formDialogInputGender')"
-        @filter="genderFilter"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">
-              {{ $t('noResults') }}
-            </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
 
       <VueDatePicker
         :id="`${prefixId}-input-birth-date`"
@@ -353,7 +307,7 @@ watch(
         outlined
         readonly
         :label="$t('formDialogInputAge')"
-        class="col"
+        class="col-2"
         :model-value="
           birthDate?.toString() === 'Invalid Date' ||
           birthDate?.toString() === undefined
@@ -376,7 +330,7 @@ watch(
         option-label="label"
         option-value="value"
         lazy-rules="ondemand"
-        class="col-md-3 col-6"
+        class="col-2"
         :dense="dense"
         v-model="gender"
         :readonly="readonly"
@@ -413,7 +367,7 @@ watch(
         option-value="label"
         v-model="nationality"
         lazy-rules="ondemand"
-        class="col-md-3 col-6"
+        class="col-2"
         :dense="dense"
         :readonly="readonly"
         :options="nationalityOptions"