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