refactor: edit layout input

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`"