From aae6de5c90bd1c94a1784db90da2594dbb9e249f Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Fri, 9 Aug 2024 10:25:25 +0700
Subject: [PATCH] refactor: edit layout input

---
 .../02_personnel-management/FormPerson.vue    | 190 +++++++-----------
 1 file changed, 72 insertions(+), 118 deletions(-)

diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index 4b0ab43b..2c26bed3 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/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,121 +183,60 @@ watch(
         />
       </div>
 
-      <q-select
-        outlined
-        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"
-        :dense="dense"
-        :readonly="readonly"
-        :options="prefixNameOptions"
-        hide-dropdown-icon
-        :for="`${prefixId}-select-prefix-name`"
-        :label="$t('formDialogInputPrefixName')"
-        @filter="prefixNameFilter"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">
-              {{ $t('noResults') }}
-            </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
+      <div class="col-12 row" style="display: flex; gap: var(--size-2)">
+        <q-input
+          lazy-rules="ondemand"
+          :for="`${prefixId}-input-first-name`"
+          :dense="dense"
+          outlined
+          hide-bottom-space
+          disable
+          class="col-1"
+          :label="$t('formDialogInputPrefixName')"
+          v-model="firstName"
+        />
 
-      <q-input
-        lazy-rules="ondemand"
-        :for="`${prefixId}-input-first-name-en`"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-2"
-        :label="$t('formDialogInputFirstNameEN')"
-        v-model="firstNameEN"
-        :rules="[
-          (val: string) => !!val || $t('formDialogInputFirstNameENValidate'),
-        ]"
-      />
-      <q-input
-        lazy-rules="ondemand"
-        :for="`${prefixId}-input-last-name-en`"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-2"
-        :label="$t('formDialogInputLastNameEN')"
-        v-model="lastNameEN"
-        :rules="[
-          (val: string) => !!val || $t('formDialogInputLastNameENValidate'),
-        ]"
-      />
+        <q-input
+          lazy-rules="ondemand"
+          :for="`${prefixId}-input-first-name-en`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col"
+          :label="$t('formDialogInputFirstNameEN')"
+          v-model="firstNameEN"
+          :rules="[
+            (val: string) => !!val || $t('formDialogInputFirstNameENValidate'),
+          ]"
+        />
 
-      <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>
+        <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`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col"
+          :label="$t('formDialogInputLastNameEN')"
+          v-model="lastNameEN"
+          :rules="[
+            (val: string) => !!val || $t('formDialogInputLastNameENValidate'),
+          ]"
+        />
+      </div>
 
       <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"