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