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

refactor: edit layout ui input

Browse source
This commit is contained in:
Net 2024-08-06 15:01:21 +07:00
parent 8d18b96d67
commit 00d0e698a6
2 changed files with 660 additions and 606 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,11 @@ import { selectFilterOptionRefMod } from 'src/stores/utils';
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime'; import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
import { ref } from 'vue'; import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import useOptionStore from 'src/stores/options';
import { watch } from 'vue';
import { onMounted } from 'vue';
const optionStore = useOptionStore();
const { locale } = useI18n(); const { locale } = useI18n();
const passportType = defineModel<string>('passportType'); const passportType = defineModel<string>('passportType');
@ -20,13 +24,6 @@ const passportIssuingPlace = defineModel<string>('passportIssuingPlace');
const previousPassportReference = defineModel<string>( const previousPassportReference = defineModel<string>(
'previousPassportReference', 'previousPassportReference',
); );
const passportTypeOption = defineModel<{ label: string; value: string }[]>(
'passportTypeOption',
{ required: true },
);
const passportIssuingCountryOption = defineModel<
{ label: string; value: string }[]
>('passportIssuingCountryOption', { required: true });
defineProps<{ defineProps<{
title?: string; title?: string;
@ -34,263 +31,297 @@ defineProps<{
outlined?: boolean; outlined?: boolean;
readonly?: boolean; readonly?: boolean;
separator?: boolean; separator?: boolean;
prefixId: string; prefixId: string;
}>(); }>();
const passportTypeOptions = ref<Record<string, unknown>[]>([]); const passportTypeOptions = ref<Record<string, unknown>[]>([]);
const passportTypeFilter = selectFilterOptionRefMod( let passportTypeFilter: (
passportTypeOption, value: string,
passportTypeOptions, update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
'label', ) => void;
);
const passportIssuingCountryOptions = ref<Record<string, unknown>[]>([]); const passportIssuingCountryOptions = ref<Record<string, unknown>[]>([]);
const passportIssuingCountryFilter = selectFilterOptionRefMod( let passportIssuingCountryFilter: (
passportIssuingCountryOption, value: string,
passportIssuingCountryOptions, update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
'label', ) => void;
onMounted(() => {
passportTypeFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.nationality),
passportTypeOptions,
'label',
);
passportIssuingCountryFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.nationality),
passportIssuingCountryOptions,
'label',
);
});
watch(
() => optionStore.globalOption,
() => {
passportTypeFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.nationality),
passportTypeOptions,
'label',
);
passportIssuingCountryFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.nationality),
passportIssuingCountryOptions,
'label',
);
},
); );
</script> </script>
<template> <template>
<div class="col-md-3 col-12 app-text-muted"> <div class="row col-12">
• {{ $t(`formDialogTitlePassport`) }} <div class="col-12 q-pb-sm text-weight-bold text-body1">
</div> <q-icon
<div class="col-md-9 col-12 row q-col-gutter-md"> flat
<q-select size="xs"
outlined class="q-pa-sm rounded q-mr-xs"
clearable color="info"
use-input name="mdi-passport"
fill-input style="background-color: var(--surface-3)"
emit-value />
map-options {{ $t(`${title}`) }}
hide-selected </div>
hide-bottom-space
input-debounce="0"
option-value="value"
option-label="label"
lazy-rules="ondemand"
v-model="passportType"
class="col-md-3 col-12"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:options="passportTypeOptions"
:for="`${prefixId}-select-passport-type`"
:label="$t('formDialogInputPassportType')"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputPassportType'),
]"
@filter="passportTypeFilter"
>
<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-passport-no`"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-md-3 col-6"
:label="$t('formDialogInputPassportNo')"
v-model="passportNumber"
:rules="[
(val: string) =>
!!val || $t('inputValidate') + $t('formDialogInputPassportNo'),
]"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-passport-ref`"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputPassportRef')"
v-model="previousPassportReference"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-passport-place`"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-md-3 col-6"
:label="$t('formDialogInputWPassportPlace')"
v-model="passportIssuingPlace"
:rules="[
(val: string) =>
!!val || $t('inputValidate') + $t('formDialogInputWPassportPlace'),
]"
/>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
input-debounce="0"
option-value="value"
option-label="label"
lazy-rules="ondemand"
class="col-md-3 col-6"
v-model="passportIssuingCountry"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:options="passportIssuingCountryOptions"
:for="`${prefixId}-select-passport-country`"
:label="$t('formDialogInputPassportCountry')"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputPassportCountry'),
]"
@filter="passportIssuingCountryFilter"
>
<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}-date-picker-passport-issueance`"
utc
autoApply
v-model="passportIssueDate"
: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"
:id="`${prefixId}-input-birth-date`"
hide-bottom-space
:label="$t('formDialogInputPassportIssuance')"
:dense="dense"
outlined
:readonly="readonly"
: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
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="positive"
/>
</template>
</q-input>
</template>
</VueDatePicker>
<VueDatePicker
:id="`${prefixId}-date-picker-passport-expire`"
utc
autoApply
v-model="passportExpiryDate"
: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"
:id="`${prefixId}-input-birth-date`"
hide-bottom-space
:label="$t('formDialogInputPassportExpire')"
:dense="dense"
outlined
:readonly="readonly"
: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
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="positive"
/>
</template>
</q-input>
</template>
</VueDatePicker>
</div>
<q-separator <div class="col-12 row q-col-gutter-sm">
v-if="separator" <q-select
class="col-12 q-mb-md" outlined
style="padding-block: 0.5px; margin-top: 32px" clearable
/> use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
input-debounce="0"
option-value="value"
option-label="label"
lazy-rules="ondemand"
v-model="passportType"
class="col-md-3 col-12"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:options="passportTypeOptions"
:for="`${prefixId}-select-passport-type`"
:label="$t('formDialogInputPassportType')"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputPassportType'),
]"
@filter="passportTypeFilter"
>
<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-passport-no`"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-md-3 col-6"
:label="$t('formDialogInputPassportNo')"
v-model="passportNumber"
:rules="[
(val: string) =>
!!val || $t('inputValidate') + $t('formDialogInputPassportNo'),
]"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-passport-ref`"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputPassportRef')"
v-model="previousPassportReference"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-passport-place`"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-md-3 col-6"
:label="$t('formDialogInputWPassportPlace')"
v-model="passportIssuingPlace"
:rules="[
(val: string) =>
!!val || $t('inputValidate') + $t('formDialogInputWPassportPlace'),
]"
/>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
input-debounce="0"
option-value="value"
option-label="label"
lazy-rules="ondemand"
class="col-md-3 col-6"
v-model="passportIssuingCountry"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:options="passportIssuingCountryOptions"
:for="`${prefixId}-select-passport-country`"
:label="$t('formDialogInputPassportCountry')"
:rules="[
(val: string) =>
!!val ||
$t('selectValidate') + $t('formDialogInputPassportCountry'),
]"
@filter="passportIssuingCountryFilter"
>
<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}-date-picker-passport-issueance`"
utc
autoApply
v-model="passportIssueDate"
: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"
:id="`${prefixId}-input-birth-date`"
hide-bottom-space
:label="$t('formDialogInputPassportIssuance')"
:dense="dense"
outlined
:readonly="readonly"
: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
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="primary"
/>
</template>
</q-input>
</template>
</VueDatePicker>
<VueDatePicker
:id="`${prefixId}-date-picker-passport-expire`"
utc
autoApply
v-model="passportExpiryDate"
: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"
:id="`${prefixId}-input-birth-date`"
hide-bottom-space
:label="$t('formDialogInputPassportExpire')"
:dense="dense"
outlined
:readonly="readonly"
: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
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="primary"
/>
</template>
</q-input>
</template>
</VueDatePicker>
</div>
</div>
</template> </template>
<style scoped></style> <style scoped></style>

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

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { QSelect } from 'quasar';
import { onMounted, reactive, ref } from 'vue'; import { onMounted, reactive, ref } from 'vue';
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime'; import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
import useAddressStore, { import useAddressStore, {
@ -8,7 +9,10 @@ import useAddressStore, {
} from 'src/stores/address'; } from 'src/stores/address';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { selectFilterOptionRefMod } from 'src/stores/utils'; import { selectFilterOptionRefMod } from 'src/stores/utils';
import useOptionStore from 'src/stores/options';
import { watch } from 'vue';
const optionStore = useOptionStore();
const { locale } = useI18n(); const { locale } = useI18n();
const adrressStore = useAddressStore(); const adrressStore = useAddressStore();
@ -33,11 +37,6 @@ const visaStayUntilDate = defineModel<Date | null | string>(
const tm6Number = defineModel<string>('tm6Number'); const tm6Number = defineModel<string>('tm6Number');
const entryDate = defineModel<Date | null | string>('entryDate'); const entryDate = defineModel<Date | null | string>('entryDate');
const visaTypeOption = defineModel<{ label: string; value: string }[]>(
'visaTypeOption',
{ required: true },
);
withDefaults( withDefaults(
defineProps<{ defineProps<{
title?: string; title?: string;
@ -65,390 +64,414 @@ onMounted(async () => {
}); });
const visaTypeOptions = ref<Record<string, unknown>[]>([]); const visaTypeOptions = ref<Record<string, unknown>[]>([]);
const visaTypeFilter = selectFilterOptionRefMod( let visaTypeFilter: (
visaTypeOption, value: string,
visaTypeOptions, update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
'label', ) => void;
onMounted(() => {
visaTypeFilter = selectFilterOptionRefMod(
optionStore.globalOption?.nationality,
visaTypeOptions,
'label',
);
});
watch(
() => optionStore.globalOption,
() => {
visaTypeFilter = selectFilterOptionRefMod(
optionStore.globalOption.nationality,
visaTypeOptions,
'label',
);
},
); );
</script> </script>
<template> <template>
<div class="col-md-3 col-12 app-text-muted"> <div class="row">
• {{ $t(`formDialogTitleVisa`) }} <div class="col-12 q-pb-sm text-weight-bold text-body1">
</div> <q-icon
<div class="col-md-9 col-12 row q-col-gutter-md"> flat
<q-select size="xs"
outlined class="q-pa-sm rounded q-mr-xs"
clearable color="info"
use-input name="mdi-notebook"
fill-input style="background-color: var(--surface-3)"
emit-value />
map-options {{ $t(`${title}`) }}
hide-selected </div>
hide-bottom-space <div class="col-12 row q-col-gutter-md">
input-debounce="0" <q-select
v-model="visaType" outlined
option-value="value" clearable
option-label="label" use-input
lazy-rules="ondemand" fill-input
class="col-md-3 col-6" emit-value
:dense="dense" map-options
:readonly="readonly" hide-selected
:options="visaTypeOptions" hide-bottom-space
:hide-dropdown-icon="readonly" input-debounce="0"
:for="`${prefixId}-select-visa-type`" v-model="visaType"
:label="$t('formDialogInputVisaType')" option-value="value"
@filter="visaTypeFilter" option-label="label"
> lazy-rules="ondemand"
<template v-slot:no-option> class="col-4"
<q-item> :dense="dense"
<q-item-section class="text-grey"> :readonly="readonly"
{{ $t('noResults') }} :options="visaTypeOptions"
</q-item-section> :hide-dropdown-icon="readonly"
</q-item> :for="`${prefixId}-select-visa-type`"
</template> :label="$t('formDialogInputVisaType')"
</q-select> @filter="visaTypeFilter"
<!-- :rules="[ >
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
<!-- :rules="[
(val: string) => (val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputVisaType'), !!val || $t('selectValidate') + $t('formDialogInputVisaType'),
]" --> ]" -->
<q-input <q-input
lazy-rules="ondemand" lazy-rules="ondemand"
:for="`${prefixId}-input-visa-no`" :for="`${prefixId}-input-visa-no`"
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-md-3 col-6" class="col-4"
:label="$t('formDialogInputVisaNo')" :label="$t('formDialogInputVisaNo')"
v-model="visaNumber" v-model="visaNumber"
/> />
<!-- :rules="[ <!-- :rules="[
(val: string) => (val: string) =>
!!val || $t('inputValidate') + $t('formDialogInputVisaNo'), !!val || $t('inputValidate') + $t('formDialogInputVisaNo'),
]" --> ]" -->
<VueDatePicker <VueDatePicker
:id="`${prefixId}-date-picker-visa-issuance`" :id="`${prefixId}-date-picker-visa-issuance`"
utc utc
autoApply autoApply
v-model="visaIssueDate" v-model="visaIssueDate"
:teleport="true" :teleport="true"
:dark="$q.dark.isActive" :dark="$q.dark.isActive"
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'" :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false" :enableTimePicker="false"
:disabled="readonly" :disabled="readonly"
class="col-md-3 col-6" class="col-2"
> >
<template #year="{ value }"> <template #year="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }} {{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }} {{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
lazy-rules="ondemand" lazy-rules="ondemand"
:id="`${prefixId}-input-birth-date`" :id="`${prefixId}-input-birth-date`"
hide-bottom-space hide-bottom-space
:label="$t('formDialogInputVisaIssuance')" :label="$t('formDialogInputVisaIssuance')"
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
placeholder="DD/MM/YYYY" placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'" :mask="readonly ? '' : '##/##/####'"
:model-value=" :model-value="
visaIssueDate visaIssueDate
? readonly ? readonly
? dateFormat(visaIssueDate) ? dateFormat(visaIssueDate)
: dateFormat(visaIssueDate, false, false, true) : dateFormat(visaIssueDate, false, false, true)
: undefined : undefined
" "
@update:model-value=" @update:model-value="
(v) => { (v) => {
if (v && v.toString().length === 10) { if (v && v.toString().length === 10) {
visaIssueDate = parseAndFormatDate(v, locale); visaIssueDate = parseAndFormatDate(v, locale);
}
} }
} "
" >
> <!-- :rules="[
<!-- :rules="[
(val: string) => (val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputVisaIssuance'), !!val || $t('selectValidate') + $t('formDialogInputVisaIssuance'),
]" --> ]" -->
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
size="xs" size="xs"
name="mdi-calendar-blank-outline" name="mdi-calendar-blank-outline"
class="cursor-pointer" class="cursor-pointer"
color="positive" color="primary"
/> />
</template> </template>
<template v-slot:append> <template v-slot:append>
<q-icon <q-icon
v-if="visaIssueDate && !readonly" v-if="visaIssueDate && !readonly"
name="mdi-close-circle" name="mdi-close-circle"
class="cursor-pointer app-text-muted" class="cursor-pointer app-text-muted"
size="sm" size="sm"
@click="visaIssueDate = undefined" @click="visaIssueDate = undefined"
/> />
</template> </template>
</q-input> </q-input>
</template> </template>
</VueDatePicker> </VueDatePicker>
<VueDatePicker <VueDatePicker
:id="`${prefixId}-date-picker-visa-expire`" :id="`${prefixId}-date-picker-visa-expire`"
utc utc
autoApply autoApply
v-model="visaExpiryDate" v-model="visaExpiryDate"
:teleport="true" :teleport="true"
:dark="$q.dark.isActive" :dark="$q.dark.isActive"
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'" :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false" :enableTimePicker="false"
:disabled="readonly" :disabled="readonly"
class="col-md-3 col-6" class="col-2"
> >
<template #year="{ value }"> <template #year="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }} {{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }} {{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
lazy-rules="ondemand" lazy-rules="ondemand"
:id="`${prefixId}-input-birth-date`" :id="`${prefixId}-input-birth-date`"
hide-bottom-space hide-bottom-space
:label="$t('formDialogInputVisaExpire')" :label="$t('formDialogInputVisaExpire')"
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
placeholder="DD/MM/YYYY" placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'" :mask="readonly ? '' : '##/##/####'"
:model-value=" :model-value="
visaExpiryDate visaExpiryDate
? readonly ? readonly
? dateFormat(visaExpiryDate) ? dateFormat(visaExpiryDate)
: dateFormat(visaExpiryDate, false, false, true) : dateFormat(visaExpiryDate, false, false, true)
: undefined : undefined
" "
@update:model-value=" @update:model-value="
(v) => { (v) => {
if (v && v.toString().length === 10) { if (v && v.toString().length === 10) {
visaExpiryDate = parseAndFormatDate(v, locale); visaExpiryDate = parseAndFormatDate(v, locale);
}
} }
} "
" >
> <!-- :rules="[
<!-- :rules="[
(val: string) => (val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputVisaExpire'), !!val || $t('selectValidate') + $t('formDialogInputVisaExpire'),
]" --> ]" -->
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
size="xs" size="xs"
name="mdi-calendar-blank-outline" name="mdi-calendar-blank-outline"
class="cursor-pointer" class="cursor-pointer"
color="positive" color="primary"
/> />
</template> </template>
<template v-slot:append> <template v-slot:append>
<q-icon <q-icon
v-if="visaExpiryDate && !readonly" v-if="visaExpiryDate && !readonly"
name="mdi-close-circle" name="mdi-close-circle"
class="cursor-pointer app-text-muted" class="cursor-pointer app-text-muted"
size="sm" size="sm"
@click="visaExpiryDate = undefined" @click="visaExpiryDate = undefined"
/> />
</template> </template>
</q-input> </q-input>
</template> </template>
</VueDatePicker> </VueDatePicker>
<q-input
lazy-rules="ondemand" <q-input
:for="`${prefixId}-input-visa-place`" lazy-rules="ondemand"
:dense="dense" :for="`${prefixId}-input-visa-place`"
outlined :dense="dense"
:readonly="readonly" outlined
hide-bottom-space :readonly="readonly"
class="col-6" hide-bottom-space
:label="$t('formDialogInputVisaPlace')" class="col-5"
v-model="visaIssuingPlace" :label="$t('formDialogInputVisaPlace')"
/> v-model="visaIssuingPlace"
<!-- :rules="[ />
<!-- :rules="[
(val: string) => (val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputVisaPlace'), !!val || $t('selectValidate') + $t('formDialogInputVisaPlace'),
]" --> ]" -->
<VueDatePicker <VueDatePicker
:id="`${prefixId}-date-picker-visa-until`" :id="`${prefixId}-date-picker-visa-until`"
utc utc
autoApply autoApply
v-model="visaStayUntilDate" v-model="visaStayUntilDate"
:teleport="true" :teleport="true"
:dark="$q.dark.isActive" :dark="$q.dark.isActive"
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'" :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false" :enableTimePicker="false"
:disabled="readonly" :disabled="readonly"
class="col-6" class="col-4"
> >
<template #year="{ value }"> <template #year="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }} {{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }} {{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
lazy-rules="ondemand" lazy-rules="ondemand"
:id="`${prefixId}-input-birth-date`" :id="`${prefixId}-input-birth-date`"
hide-bottom-space hide-bottom-space
:label="$t('formDialogInputVisaStayUntil')" :label="$t('formDialogInputVisaStayUntil')"
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
placeholder="DD/MM/YYYY" placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'" :mask="readonly ? '' : '##/##/####'"
:model-value=" :model-value="
visaStayUntilDate visaStayUntilDate
? readonly ? readonly
? dateFormat(visaStayUntilDate) ? dateFormat(visaStayUntilDate)
: dateFormat(visaStayUntilDate, false, false, true) : dateFormat(visaStayUntilDate, false, false, true)
: undefined : undefined
" "
@update:model-value=" @update:model-value="
(v) => { (v) => {
if (v && v.toString().length === 10) { if (v && v.toString().length === 10) {
visaStayUntilDate = parseAndFormatDate(v, locale); visaStayUntilDate = parseAndFormatDate(v, locale);
}
} }
} "
" >
> <!-- :rules="[
<!-- :rules="[
(val: string) => (val: string) =>
!!val || !!val ||
$t('selectValidate') + $t('formDialogInputVisaStayUntil'), $t('selectValidate') + $t('formDialogInputVisaStayUntil'),
]" --> ]" -->
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
size="xs" size="xs"
name="mdi-calendar-blank-outline" name="mdi-calendar-blank-outline"
class="cursor-pointer" class="cursor-pointer"
color="positive" color="primary"
/> />
</template> </template>
<template v-slot:append> <template v-slot:append>
<q-icon <q-icon
v-if="visaStayUntilDate && !readonly" v-if="visaStayUntilDate && !readonly"
name="mdi-close-circle" name="mdi-close-circle"
class="cursor-pointer app-text-muted" class="cursor-pointer app-text-muted"
size="sm" size="sm"
@click="visaStayUntilDate = undefined" @click="visaStayUntilDate = undefined"
/> />
</template> </template>
</q-input> </q-input>
</template> </template>
</VueDatePicker> </VueDatePicker>
<q-input
lazy-rules="ondemand" <q-input
:for="`${prefixId}-input-tm6`" lazy-rules="ondemand"
:dense="dense" :for="`${prefixId}-input-tm6`"
outlined :dense="dense"
:readonly="readonly" outlined
hide-bottom-space :readonly="readonly"
class="col-6" hide-bottom-space
:label="$t('formDialogInputVisaTM6')" class="col-5"
v-model="tm6Number" :label="$t('formDialogInputVisaTM6')"
/> v-model="tm6Number"
<!-- :rules="[ />
<!-- :rules="[
(val: string) => (val: string) =>
!!val || $t('inputValidate') + $t('formDialogInputVisaTM6'), !!val || $t('inputValidate') + $t('formDialogInputVisaTM6'),
]" --> ]" -->
<VueDatePicker <VueDatePicker
:id="`${prefixId}-date-picker-visa-enter`" :id="`${prefixId}-date-picker-visa-enter`"
utc utc
autoApply autoApply
v-model="entryDate" v-model="entryDate"
:teleport="true" :teleport="true"
:dark="$q.dark.isActive" :dark="$q.dark.isActive"
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'" :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false" :enableTimePicker="false"
:disabled="readonly" :disabled="readonly"
class="col-6" class="col-4"
> >
<template #year="{ value }"> <template #year="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }} {{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }} {{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
lazy-rules="ondemand" lazy-rules="ondemand"
:id="`${prefixId}-input-birth-date`" :id="`${prefixId}-input-birth-date`"
:label="$t('formDialogInputVisaEnter')" :label="$t('formDialogInputVisaEnter')"
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
placeholder="DD/MM/YYYY" placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'" :mask="readonly ? '' : '##/##/####'"
:model-value=" :model-value="
entryDate entryDate
? readonly ? readonly
? dateFormat(entryDate) ? dateFormat(entryDate)
: dateFormat(entryDate, false, false, true) : dateFormat(entryDate, false, false, true)
: undefined : undefined
" "
@update:model-value=" @update:model-value="
(v) => { (v) => {
if (v && v.toString().length === 10) { if (v && v.toString().length === 10) {
entryDate = parseAndFormatDate(v, locale); entryDate = parseAndFormatDate(v, locale);
}
} }
} "
" >
> <!-- :rules="[
<!-- :rules="[
(val: string) => (val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputVisaEnter'), !!val || $t('selectValidate') + $t('formDialogInputVisaEnter'),
]" --> ]" -->
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
size="xs" size="xs"
name="mdi-calendar-blank-outline" name="mdi-calendar-blank-outline"
class="cursor-pointer" class="cursor-pointer"
color="positive" color="primary"
/> />
</template> </template>
<template v-slot:append> <template v-slot:append>
<q-icon <q-icon
v-if="entryDate && !readonly" v-if="entryDate && !readonly"
name="mdi-close-circle" name="mdi-close-circle"
class="cursor-pointer app-text-muted" class="cursor-pointer app-text-muted"
size="sm" size="sm"
@click.stop="entryDate = undefined" @click.stop="entryDate = undefined"
/> />
</template> </template>
</q-input> </q-input>
</template> </template>
</VueDatePicker> </VueDatePicker>
<div class="col-12 row justify-end" style="min-height: 50px"> <div class="col-12 row justify-end" style="min-height: 50px">
<q-btn <q-btn
v-if="!readonly && showBtnSave" v-if="!readonly && showBtnSave"
dense dense
unelevated unelevated
id="save-basic-info" id="save-basic-info"
color="primary" color="primary"
class="q-px-md" class="q-px-md"
:label="$t('save')" :label="$t('save')"
@click="$emit('save')" @click="$emit('save')"
/> />
</div>
</div> </div>
</div> </div>
<q-separator
v-if="separator"
class="col-12 q-mt-xl q-mb-md"
style="padding-block: 0.5px"
/>
</template> </template>
<style scoped></style> <style scoped></style>