321 lines
8.6 KiB
Vue
321 lines
8.6 KiB
Vue
<script setup lang="ts">
|
|
import useOptionStore from 'src/stores/options';
|
|
import { selectFilterOptionRefMod } from 'src/stores/utils';
|
|
import {
|
|
dateFormat,
|
|
calculateAge,
|
|
parseAndFormatDate,
|
|
disabledAfterToday,
|
|
} from 'src/utils/datetime';
|
|
import { ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { locale } = useI18n();
|
|
const optionStore = useOptionStore();
|
|
|
|
const firstName = defineModel<string>('firstName');
|
|
const lastName = defineModel<string>('lastName');
|
|
const firstNameEN = defineModel<string>('firstNameEN');
|
|
const lastNameEN = defineModel<string>('lastNameEN');
|
|
const telephoneNo = defineModel<string>('telephoneNo');
|
|
const email = defineModel<string>('email');
|
|
const gender = defineModel<string>('gender');
|
|
const birthDate = defineModel<Date | string | null>('birthDate');
|
|
const nationality = defineModel<string>('nationality');
|
|
|
|
const genderOptions = ref<Record<string, unknown>[]>([]);
|
|
const genderFilter = selectFilterOptionRefMod(
|
|
ref(optionStore.globalOption.gender),
|
|
genderOptions,
|
|
'label',
|
|
);
|
|
|
|
const nationalityOptions = ref<Record<string, unknown>[]>([]);
|
|
const nationalityFilter = selectFilterOptionRefMod(
|
|
ref(optionStore.globalOption.nationality),
|
|
nationalityOptions,
|
|
'label',
|
|
);
|
|
|
|
defineProps<{
|
|
dense?: boolean;
|
|
outlined?: boolean;
|
|
readonly?: boolean;
|
|
separator?: boolean;
|
|
employee?: boolean;
|
|
title?: string;
|
|
prefixId: string;
|
|
}>();
|
|
</script>
|
|
<template>
|
|
<div class="col-md-3 col-12 app-text-muted">
|
|
• {{ title || $t('formDialogTitlePersonnel') }}
|
|
</div>
|
|
<div class="col-md-9 col-12 row q-col-gutter-md">
|
|
<q-input
|
|
lazy-rules="ondemand"
|
|
:for="`${prefixId}-input-first-name`"
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
class="col-md-3 col-6"
|
|
:label="$t('formDialogInputFirstName')"
|
|
v-model="firstName"
|
|
:rules="[
|
|
(val: string) => !!val || $t('formDialogInputFirstNameValidate'),
|
|
]"
|
|
/>
|
|
<q-input
|
|
lazy-rules="ondemand"
|
|
:for="`${prefixId}-input-last-name`"
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
class="col-md-3 col-6"
|
|
:label="$t('formDialogInputLastName')"
|
|
v-model="lastName"
|
|
:rules="[(val: string) => !!val || $t('formDialogInputLastNameValidate')]"
|
|
/>
|
|
<q-input
|
|
lazy-rules="ondemand"
|
|
:for="`${prefixId}-input-first-name-en`"
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
class="col-md-3 col-6"
|
|
: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-md-3 col-6"
|
|
:label="$t('formDialogInputLastNameEN')"
|
|
v-model="lastNameEN"
|
|
:rules="[
|
|
(val: string) => !!val || $t('formDialogInputLastNameENValidate'),
|
|
]"
|
|
/>
|
|
<q-input
|
|
lazy-rules="ondemand"
|
|
v-if="!employee"
|
|
:for="`${prefixId}-input-telephone`"
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
class="col-6"
|
|
: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-6"
|
|
v-model="email"
|
|
/>
|
|
<q-select
|
|
v-if="!employee"
|
|
outlined
|
|
clearable
|
|
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-md-3 col-6"
|
|
: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`"
|
|
utc
|
|
autoApply
|
|
v-model="birthDate"
|
|
:disabled-dates="disabledAfterToday"
|
|
:teleport="true"
|
|
:dark="$q.dark.isActive"
|
|
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
|
|
:enableTimePicker="false"
|
|
:disabled="readonly"
|
|
class="col-md-3 col-6"
|
|
>
|
|
<template #year="{ value }">
|
|
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
|
|
</template>
|
|
<template #year-overlay-value="{ value }">
|
|
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
|
|
</template>
|
|
<template #trigger>
|
|
<q-input
|
|
lazy-rules="ondemand"
|
|
:for="`${prefixId}-input-birth-date`"
|
|
hide-bottom-space
|
|
placeholder="DD/MM/YYYY"
|
|
:label="$t('formDialogInputBirthDate')"
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
|
|
]"
|
|
:mask="readonly ? '' : '##/##/####'"
|
|
:model-value="
|
|
birthDate && readonly
|
|
? dateFormat(birthDate)
|
|
: dateFormat(birthDate, false, false, true)
|
|
"
|
|
@update:model-value="
|
|
(v) => {
|
|
if (v && v.toString().length === 10) {
|
|
const today = new Date();
|
|
const date = parseAndFormatDate(v, locale);
|
|
birthDate = date && date > today ? today : date;
|
|
}
|
|
}
|
|
"
|
|
>
|
|
<!-- v-model="birthDate" -->
|
|
<template v-slot:prepend>
|
|
<q-icon
|
|
size="xs"
|
|
name="mdi-calendar-blank-outline"
|
|
class="cursor-pointer"
|
|
color="positive"
|
|
/>
|
|
</template>
|
|
</q-input>
|
|
</template>
|
|
</VueDatePicker>
|
|
<q-input
|
|
lazy-rules="ondemand"
|
|
:for="`${prefixId}-input-age`"
|
|
:id="`${prefixId}-input-age`"
|
|
:dense="dense"
|
|
outlined
|
|
readonly
|
|
:label="$t('formDialogInputAge')"
|
|
class="col-md-3 col-6"
|
|
:model-value="
|
|
birthDate?.toString() === 'Invalid Date' ||
|
|
birthDate?.toString() === undefined
|
|
? ''
|
|
: calculateAge(birthDate)
|
|
"
|
|
/>
|
|
<q-select
|
|
v-if="employee"
|
|
outlined
|
|
clearable
|
|
use-input
|
|
fill-input
|
|
emit-value
|
|
map-options
|
|
hide-selected
|
|
hide-bottom-space
|
|
input-debounce="0"
|
|
option-label="label"
|
|
option-value="value"
|
|
lazy-rules="ondemand"
|
|
class="col-md-3 col-6"
|
|
:dense="dense"
|
|
v-model="gender"
|
|
:readonly="readonly"
|
|
:options="genderOptions"
|
|
:hide-dropdown-icon="readonly"
|
|
:for="`${prefixId}-select-gender`"
|
|
:label="$t('formDialogInputGender')"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || $t('selectValidate') + $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-select
|
|
v-if="employee"
|
|
outlined
|
|
clearable
|
|
use-input
|
|
fill-input
|
|
emit-value
|
|
map-options
|
|
hide-selected
|
|
hide-bottom-space
|
|
input-debounce="0"
|
|
option-label="label"
|
|
option-value="label"
|
|
v-model="nationality"
|
|
lazy-rules="ondemand"
|
|
class="col-md-3 col-6"
|
|
:dense="dense"
|
|
:readonly="readonly"
|
|
:options="nationalityOptions"
|
|
:hide-dropdown-icon="readonly"
|
|
:for="`${prefixId}-select-nationality`"
|
|
:label="$t('formDialogInputNationality')"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || $t('selectValidate') + $t('formDialogInputNationality'),
|
|
]"
|
|
@filter="nationalityFilter"
|
|
>
|
|
<template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-grey">
|
|
{{ $t('noResults') }}
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
</div>
|
|
<q-separator
|
|
v-if="separator"
|
|
class="col-12 q-mb-md"
|
|
style="padding-block: 0.5px; margin-top: 32px"
|
|
/>
|
|
</template>
|