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

---
 .../02_personnel-management/FormPerson.vue    | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index 2c26bed3..5d9d1692 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -238,6 +238,62 @@ watch(
         />
       </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-2"
+        :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`"
         :for="`${prefixId}-input-birth-date`"