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

fix: all date picker input

Browse source
This commit is contained in:
puriphatt 2024-07-17 10:49:36 +00:00
parent dedb589b99
commit 7b262d34d7
8 changed files with 240 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,8 +2,10 @@
import useUserStore from 'src/stores/user';
import { UserAttachmentDelete } from 'src/stores/user/types';
import { dialog } from 'src/stores/utils';
import { dateFormat } from 'src/utils/datetime';
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
const userStore = useUserStore();
const userId = defineModel<string>('userId');
@ -83,6 +85,7 @@ function deleteFile(name: string) {
v-model="registrationNo"
/>
<VueDatePicker
id="input-startDate"
utc
autoApply
:dark="$q.dark.isActive"
@ -106,7 +109,20 @@ function deleteFile(name: string) {
:dense="dense"
outlined
:readonly="readonly"
:model-value="startDate ? dateFormat(startDate) : ''"
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
@ -153,7 +169,20 @@ function deleteFile(name: string) {
:dense="dense"
outlined
:readonly="readonly"
:model-value="retireDate ? dateFormat(retireDate) : ''"
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

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

@ -6,7 +6,9 @@ import {
parseAndFormatDate,
disabledAfterToday,
} from 'src/utils/datetime';
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
const optionStore = useOptionStore();
const firstName = defineModel<string>('firstName');
@ -143,14 +145,8 @@ defineProps<{
</template>
<template #trigger>
<q-input
id="input-birth-date"
for="input-birth-date"
hide-bottom-space
:mask="
birthDate?.toString() === 'Invalid Date' ||
birthDate?.toString() === undefined
? '##/##/####'
: ''
"
placeholder="DD/MM/YYYY"
:label="$t('formDialogInputBirthDate')"
:dense="dense"
@ -160,15 +156,19 @@ defineProps<{
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
]"
:model-value="birthDate ? dateFormat(birthDate) : ''"
: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);
const date = parseAndFormatDate(v, locale);
birthDate = date && date > today ? today : date;
}
if (v && v.toString().length === 0) birthDate = '';
}
"
>

31
src/components/03_customer-management/AboutComponent.vue
View file

@ -1,5 +1,7 @@
<script setup lang="ts">
import { dateFormat } from 'src/utils/datetime';
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
import { useI18n } from 'vue-i18n';
defineProps<{
title?: string;
dense?: boolean;
@ -8,7 +10,7 @@ defineProps<{
separator?: boolean;
typeCustomer?: string;
}>();
const { locale } = useI18n();
const branchCode = defineModel<string>('branchCode');
const legalEntityCode = defineModel<string>('legalEntityCode');
const taxNo = defineModel<string | null | undefined>('taxNo');
@ -139,11 +141,11 @@ const branchNo = defineModel<number>('branchNo');
class="col-6"
:label="$t('taxNo')"
v-model="taxNo"
:rules="[
(val) =>
(val && val.length === 13 && /[0-9]+/.test(val)) ||
$t('formDialogInputTaxNoValidate'),
]"
:rules="[
(val) =>
(val && val.length === 13 && /[0-9]+/.test(val)) ||
$t('formDialogInputTaxNoValidate'),
]"
/>
<q-input
for="input-registerName"
@ -196,7 +198,20 @@ const branchNo = defineModel<number>('branchNo');
:dense="dense"
outlined
:readonly="readonly"
:model-value="registerDate ? dateFormat(registerDate) : ''"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
registerDate && readonly
? dateFormat(registerDate)
: dateFormat(registerDate, false, false, true)
"
@update:model-value="
(v) => {
if (v && v.toString().length === 10) {
registerDate = parseAndFormatDate(v, locale);
}
}
"
>
<template v-slot:prepend>
<q-icon

21
src/components/03_customer-management/FormBusiness.vue
View file

@ -1,9 +1,9 @@
<script setup lang="ts">
import { dateFormat } from 'src/utils/datetime';
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
import { onMounted } from 'vue';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n({ useScope: 'global' });
const { locale } = useI18n({ useScope: 'global' });
const employmentOffice = defineModel<string>('employmentOffice');
const bussinessType = defineModel<string>('bussinessType');
@ -14,7 +14,7 @@ const jobPositionEN = defineModel<string>('jobPositionEn');
const jobDescription = defineModel<string>('jobDescription');
const payDate = defineModel<Date>('payDate');
const payDate = defineModel<Date | null>('payDate');
const wageRate = defineModel<number>('wageRate');
const saleEmployee = defineModel<string>('saleEmployee');
@ -157,7 +157,20 @@ onMounted(async () => {
:dense="dense"
outlined
:readonly="readonly"
:model-value="payDate ? dateFormat(payDate) : ''"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
payDate && readonly
? dateFormat(payDate)
: dateFormat(payDate, false, false, true)
"
@update:model-value="
(v) => {
if (v && v.toString().length === 10) {
payDate = parseAndFormatDate(v, locale);
}
}
"
>
<template v-slot:prepend>
<q-icon

33
src/components/03_customer-management/FormEmployeeHealthCheck.vue
View file

@ -1,13 +1,15 @@
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { dateFormat } from 'src/utils/datetime';
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
import useAddressStore, {
District,
Province,
SubDistrict,
} from 'src/stores/address';
import { EmployeeCheckupCreate } from 'src/stores/employee/types';
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
const adrressStore = useAddressStore();
const addrOptions = reactive<{
@ -261,10 +263,19 @@ onMounted(async () => {
:dense="dense"
outlined
:readonly="readonly"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
checkup.coverageStartDate
checkup.coverageStartDate && readonly
? dateFormat(checkup.coverageStartDate)
: ''
: dateFormat(checkup.coverageStartDate, false, false, true)
"
@update:model-value="
(v) => {
if (v && v.toString().length === 10) {
checkup.coverageStartDate = parseAndFormatDate(v, locale);
}
}
"
>
<template v-slot:prepend>
@ -311,10 +322,22 @@ onMounted(async () => {
:dense="dense"
outlined
:readonly="readonly"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
checkup.coverageExpireDate
checkup.coverageExpireDate && readonly
? dateFormat(checkup.coverageExpireDate)
: ''
: dateFormat(checkup.coverageExpireDate, false, false, true)
"
@update:model-value="
(v) => {
if (v && v.toString().length === 10) {
checkup.coverageExpireDate = parseAndFormatDate(
v,
locale,
);
}
}
"
>
<template v-slot:prepend>

39
src/components/03_customer-management/FormEmployeePassport.vue
View file

@ -1,6 +1,8 @@
<script setup lang="ts">
import { onMounted } from 'vue';
import { dateFormat } from 'src/utils/datetime';
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
const passportType = defineModel<string>('passportType');
const passportNumber = defineModel<string>('passportNumber');
@ -73,7 +75,6 @@ defineProps<{
class="col-6"
:label="$t('formDialogInputPassportRef')"
v-model="previousPassportReference"
/>
<q-input
for="input-passport-place"
@ -136,12 +137,25 @@ defineProps<{
:dense="dense"
outlined
:readonly="readonly"
:model-value="passportIssueDate ? dateFormat(passportIssueDate) : ''"
:rules="[
(val: string) =>
!!val ||
$t('selectValidate') + $t('formDialogInputPassportIssuance'),
]"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
passportIssueDate && readonly
? dateFormat(passportIssueDate)
: dateFormat(passportIssueDate, false, false, true)
"
@update:model-value="
(v) => {
if (v && v.toString().length === 10) {
passportIssueDate = parseAndFormatDate(v, locale);
}
}
"
>
<template v-slot:prepend>
<q-icon
@ -180,14 +194,25 @@ defineProps<{
:dense="dense"
outlined
:readonly="readonly"
:model-value="
passportExpiryDate ? dateFormat(passportExpiryDate) : ''
"
:rules="[
(val: string) =>
!!val ||
$t('selectValidate') + $t('formDialogInputPassportExpire'),
]"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
passportExpiryDate && readonly
? dateFormat(passportExpiryDate)
: dateFormat(passportExpiryDate, false, false, true)
"
@update:model-value="
(v) => {
if (v && v.toString().length === 10) {
passportExpiryDate = parseAndFormatDate(v, locale);
}
}
"
>
<template v-slot:prepend>
<q-icon

64
src/components/03_customer-management/FormEmployeeVisa.vue
View file

@ -1,12 +1,14 @@
<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { dateFormat } from 'src/utils/datetime';
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
import useAddressStore, {
District,
Province,
SubDistrict,
} from 'src/stores/address';
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
const adrressStore = useAddressStore();
const addrOptions = reactive<{
@ -115,7 +117,20 @@ onMounted(async () => {
:dense="dense"
outlined
:readonly="readonly"
:model-value="visaIssueDate ? dateFormat(visaIssueDate) : ''"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
visaIssueDate && readonly
? dateFormat(visaIssueDate)
: dateFormat(visaIssueDate, false, false, true)
"
@update:model-value="
(v) => {
if (v && v.toString().length === 10) {
visaIssueDate = parseAndFormatDate(v, locale);
}
}
"
>
<!-- :rules="[
(val: string) =>
@ -167,7 +182,20 @@ onMounted(async () => {
:dense="dense"
outlined
:readonly="readonly"
:model-value="visaExpiryDate ? dateFormat(visaExpiryDate) : ''"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
visaExpiryDate && readonly
? dateFormat(visaExpiryDate)
: dateFormat(visaExpiryDate, false, false, true)
"
@update:model-value="
(v) => {
if (v && v.toString().length === 10) {
visaExpiryDate = parseAndFormatDate(v, locale);
}
}
"
>
<!-- :rules="[
(val: string) =>
@ -233,7 +261,20 @@ onMounted(async () => {
:dense="dense"
outlined
:readonly="readonly"
:model-value="visaStayUntilDate ? dateFormat(visaStayUntilDate) : ''"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
visaStayUntilDate && readonly
? dateFormat(visaStayUntilDate)
: dateFormat(visaStayUntilDate, false, false, true)
"
@update:model-value="
(v) => {
if (v && v.toString().length === 10) {
visaStayUntilDate = parseAndFormatDate(v, locale);
}
}
"
>
<!-- :rules="[
(val: string) =>
@ -299,7 +340,20 @@ onMounted(async () => {
:dense="dense"
outlined
:readonly="readonly"
:model-value="entryDate ? dateFormat(entryDate) : ''"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
entryDate && readonly
? dateFormat(entryDate)
: dateFormat(entryDate, false, false, true)
"
@update:model-value="
(v) => {
if (v && v.toString().length === 10) {
entryDate = parseAndFormatDate(v, locale);
}
}
"
>
<!-- :rules="[
(val: string) =>

46
src/components/03_customer-management/FormEmployeeWorkHistory.vue
View file

@ -1,7 +1,10 @@
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { dateFormat } from 'src/utils/datetime';
import { onMounted, ref } from 'vue';
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
import { EmployeeWorkCreate } from 'src/stores/employee/types';
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
const employeeWork = defineModel<EmployeeWorkCreate[]>('employeeWork');
const positionNameOption =
@ -208,8 +211,19 @@ onMounted(async () => {
:dense="dense"
outlined
:readonly="readonly"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
work.workEndDate ? dateFormat(work.workEndDate) : ''
work.workEndDate && readonly
? dateFormat(work.workEndDate)
: dateFormat(work.workEndDate, false, false, true)
"
@update:model-value="
(v) => {
if (v && v.toString().length === 10) {
work.workEndDate = parseAndFormatDate(v, locale);
}
}
"
>
<template v-slot:prepend>
@ -267,10 +281,19 @@ onMounted(async () => {
:dense="dense"
outlined
:readonly="readonly"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
work.workPermitIssuDate
work.workPermitIssuDate && readonly
? dateFormat(work.workPermitIssuDate)
: ''
: dateFormat(work.workPermitIssuDate, false, false, true)
"
@update:model-value="
(v) => {
if (v && v.toString().length === 10) {
work.workPermitIssuDate = parseAndFormatDate(v, locale);
}
}
"
>
<template v-slot:prepend>
@ -318,10 +341,19 @@ onMounted(async () => {
:dense="dense"
outlined
:readonly="readonly"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
work.workPermitExpireDate
work.workPermitExpireDate && readonly
? dateFormat(work.workPermitExpireDate)
: ''
: dateFormat(work.workPermitExpireDate, false, false, true)
"
@update:model-value="
(v) => {
if (v && v.toString().length === 10) {
work.workPermitExpireDate = parseAndFormatDate(v, locale);
}
}
"
>
<template v-slot:prepend>