chamomind/jws-frontend
chamomind/jws-frontend
6
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

81
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,29 +31,67 @@ 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,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;
const passportIssuingCountryOptions = ref<Record<string, unknown>[]>([]);
let passportIssuingCountryFilter: (
value: string,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;
onMounted(() => {
passportTypeFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.nationality),
passportTypeOptions, passportTypeOptions,
'label', 'label',
); );
passportIssuingCountryFilter = selectFilterOptionRefMod(
const passportIssuingCountryOptions = ref<Record<string, unknown>[]>([]); ref(optionStore.globalOption.nationality),
const passportIssuingCountryFilter = selectFilterOptionRefMod(
passportIssuingCountryOption,
passportIssuingCountryOptions, passportIssuingCountryOptions,
'label', '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">
<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> </div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<div class="col-12 row q-col-gutter-sm">
<q-select <q-select
outlined outlined
clearable clearable
@ -156,7 +191,8 @@ const passportIssuingCountryFilter = selectFilterOptionRefMod(
:label="$t('formDialogInputPassportCountry')" :label="$t('formDialogInputPassportCountry')"
:rules="[ :rules="[
(val: string) => (val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputPassportCountry'), !!val ||
$t('selectValidate') + $t('formDialogInputPassportCountry'),
]" ]"
@filter="passportIssuingCountryFilter" @filter="passportIssuingCountryFilter"
> >
@ -220,7 +256,7 @@ const passportIssuingCountryFilter = selectFilterOptionRefMod(
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>
</q-input> </q-input>
@ -278,19 +314,14 @@ const passportIssuingCountryFilter = selectFilterOptionRefMod(
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>
</q-input> </q-input>
</template> </template>
</VueDatePicker> </VueDatePicker>
</div> </div>
</div>
<q-separator
v-if="separator"
class="col-12 q-mb-md"
style="padding-block: 0.5px; margin-top: 32px"
/>
</template> </template>
<style scoped></style> <style scoped></style>

79
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,18 +64,45 @@ onMounted(async () => {
}); });
const visaTypeOptions = ref<Record<string, unknown>[]>([]); const visaTypeOptions = ref<Record<string, unknown>[]>([]);
const visaTypeFilter = selectFilterOptionRefMod( let visaTypeFilter: (
visaTypeOption, value: string,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;
onMounted(() => {
visaTypeFilter = selectFilterOptionRefMod(
optionStore.globalOption?.nationality,
visaTypeOptions, visaTypeOptions,
'label', '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">
<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>
<div class="col-md-9 col-12 row q-col-gutter-md"> <div class="col-12 row q-col-gutter-md">
<q-select <q-select
outlined outlined
clearable clearable
@ -91,7 +117,7 @@ const visaTypeFilter = selectFilterOptionRefMod(
option-value="value" option-value="value"
option-label="label" option-label="label"
lazy-rules="ondemand" lazy-rules="ondemand"
class="col-md-3 col-6" class="col-4"
:dense="dense" :dense="dense"
:readonly="readonly" :readonly="readonly"
:options="visaTypeOptions" :options="visaTypeOptions"
@ -119,7 +145,7 @@ const visaTypeFilter = selectFilterOptionRefMod(
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"
/> />
@ -137,7 +163,7 @@ const visaTypeFilter = selectFilterOptionRefMod(
: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 }}
@ -180,7 +206,7 @@ const visaTypeFilter = selectFilterOptionRefMod(
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>
@ -205,7 +231,7 @@ const visaTypeFilter = selectFilterOptionRefMod(
: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 }}
@ -248,7 +274,7 @@ const visaTypeFilter = selectFilterOptionRefMod(
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>
@ -263,6 +289,7 @@ const visaTypeFilter = selectFilterOptionRefMod(
</q-input> </q-input>
</template> </template>
</VueDatePicker> </VueDatePicker>
<q-input <q-input
lazy-rules="ondemand" lazy-rules="ondemand"
:for="`${prefixId}-input-visa-place`" :for="`${prefixId}-input-visa-place`"
@ -270,7 +297,7 @@ const visaTypeFilter = selectFilterOptionRefMod(
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-6" class="col-5"
:label="$t('formDialogInputVisaPlace')" :label="$t('formDialogInputVisaPlace')"
v-model="visaIssuingPlace" v-model="visaIssuingPlace"
/> />
@ -288,7 +315,7 @@ const visaTypeFilter = selectFilterOptionRefMod(
: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 }}
@ -332,7 +359,7 @@ const visaTypeFilter = selectFilterOptionRefMod(
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>
@ -347,6 +374,7 @@ const visaTypeFilter = selectFilterOptionRefMod(
</q-input> </q-input>
</template> </template>
</VueDatePicker> </VueDatePicker>
<q-input <q-input
lazy-rules="ondemand" lazy-rules="ondemand"
:for="`${prefixId}-input-tm6`" :for="`${prefixId}-input-tm6`"
@ -354,7 +382,7 @@ const visaTypeFilter = selectFilterOptionRefMod(
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-6" class="col-5"
:label="$t('formDialogInputVisaTM6')" :label="$t('formDialogInputVisaTM6')"
v-model="tm6Number" v-model="tm6Number"
/> />
@ -372,7 +400,7 @@ const visaTypeFilter = selectFilterOptionRefMod(
: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 }}
@ -414,7 +442,7 @@ const visaTypeFilter = selectFilterOptionRefMod(
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>
@ -443,12 +471,7 @@ const visaTypeFilter = selectFilterOptionRefMod(
/> />
</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>