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

refactor(02): use share DatePicker

Browse source
This commit is contained in:
puriphatt 2024-08-21 13:39:34 +07:00
parent 8ee67bbca5
commit e6b63a8476
2 changed files with 28 additions and 183 deletions
Download patch file Download diff file Expand all files Collapse all files

139
src/components/02_personnel-management/FormByType.vue
View file

@ -8,6 +8,7 @@ import { onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { Icon } from '@iconify/vue';
import { QSelect } from 'quasar';
import DatePicker from '../shared/DatePicker.vue';
const { locale } = useI18n();
const userStore = useUserStore();
@ -158,132 +159,24 @@ watch(
"
@clear="registrationNo = ''"
/>
<VueDatePicker
id="input-startDate"
utc
autoApply
:dark="$q.dark.isActive"
<DatePicker
class="col-6"
id="input-start-date"
:readonly="readonly"
:label="$t('formDialogInputStartDate')"
v-model="startDate"
:teleport="true"
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
class="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="input-start-date"
:label="$t('formDialogInputStartDate')"
:dense="dense"
outlined
:readonly="readonly"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
startDate
? readonly
? dateFormat(startDate)
: dateFormat(startDate, false, false, true)
: '-'
"
@update:model-value="
(v) => {
if (v && v.toString().length === 10) {
startDate = parseAndFormatDate(v, locale);
}
}
"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="primary"
/>
</template>
<template v-slot:append>
<q-icon
v-if="startDate && !readonly"
name="mdi-close-circle"
class="cursor-pointer app-text-muted"
size="sm"
@click.stop="startDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
clearable
/>
<VueDatePicker
utc
autoApply
v-model="retireDate"
:dark="$q.dark.isActive"
:teleport="true"
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
<DatePicker
class="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="input-retire-date"
:label="$t('formDialogInputRetireDate')"
:dense="dense"
outlined
:readonly="readonly"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
retireDate
? readonly
? dateFormat(retireDate)
: dateFormat(retireDate, false, false, true)
: '-'
"
@update:model-value="
(v) => {
if (v && v.toString().length === 10) {
retireDate = parseAndFormatDate(v, locale);
}
}
"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="primary"
/>
</template>
<template v-slot:append>
<q-icon
v-if="retireDate && !readonly"
name="mdi-close-circle"
class="cursor-pointer app-text-muted"
size="sm"
@click.stop="retireDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
id="input-retire-date"
:readonly="readonly"
:label="$t('formDialogInputRetireDate')"
v-model="retireDate"
clearable
/>
<q-select
v-if="userType === 'MESSENGER'"
outlined

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

@ -11,6 +11,7 @@ import {
import { ref, onMounted, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { capitalize } from 'vue';
import DatePicker from '../shared/DatePicker.vue';
const { locale } = useI18n();
const optionStore = useOptionStore();
@ -325,68 +326,19 @@ watch(
</template>
</q-select>
<VueDatePicker
:id="`${prefixId}-input-birth-date`"
:for="`${prefixId}-input-birth-date`"
utc
autoApply
<DatePicker
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-2"
>
<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;
console.log(today);
}
}
"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="primary"
/>
</template>
</q-input>
</template>
</VueDatePicker>
:id="`${prefixId}-input-birth-date`"
:readonly="readonly"
:label="$t('formDialogInputBirthDate')"
:disabled-dates="disabledAfterToday"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
]"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-age`"