chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: edit layout input

Browse source
This commit is contained in:
Net 2024-08-09 10:25:25 +07:00
parent 65c84f0229
commit aae6de5c90
1 changed files with 72 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

190
src/components/02_personnel-management/FormPerson.vue
View file

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