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

refactor: edit type passpor

Browse source
This commit is contained in:
Thanaphon Frappet 2024-11-11 14:58:24 +07:00
parent 6efce3c4bb
commit 82d28cc3aa
3 changed files with 124 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -12,36 +12,25 @@ import DatePicker from '../shared/DatePicker.vue';
const optionStore = useOptionStore(); const optionStore = useOptionStore();
const { locale } = useI18n(); const { locale } = useI18n();
const firstName = defineModel<string>('firstName'); const birthCountry = defineModel<string>('birthCountry');
const lastName = defineModel<string>('lastName'); const previousPassportRef = defineModel<string>('previousPassportRef');
const issuePlace = defineModel<string>('issuePlace');
const prefixName = defineModel<string>('prefixName'); const issueCountry = defineModel<string>('issueCountry');
const gender = defineModel<string>('gender'); const issueDate = defineModel<Date | null | string>('issueDate');
const type = defineModel<string>('type');
const passportType = defineModel<string>('passportType'); const expireDate = defineModel<Date>('expireDate');
const passportNumber = defineModel<string>('passportNumber');
const passportIssueDate = defineModel<Date | null | string>(
'passportIssueDate',
);
const passportExpiryDate = defineModel<Date | null | string>(
'passportExpiryDate',
);
const passportIssuingCountry = defineModel<string>('passportIssuingCountry');
const passportIssuingPlace = defineModel<string>('passportIssuingPlace');
const previousPassportReference = defineModel<string>(
'previousPassportReference',
);
const workerStatus = defineModel<string>('workerStatus');
const previousPassportNo = defineModel<string>('previousPassportNo');
const birthDate = defineModel<Date>('birthDate'); const birthDate = defineModel<Date>('birthDate');
const workerStatus = defineModel<string>('workerStatus');
const nationality = defineModel<string>('nationality'); const nationality = defineModel<string>('nationality');
const placeOfBirth = defineModel<string>('placeOfBirth'); const gender = defineModel<string>('gender');
const countryOfBirth = defineModel<string>('countryOfBirth');
const firstNameEN = defineModel<string>('firstNameEn');
const middleNameEN = defineModel<string>('middleNameEn');
const lastNameEN = defineModel<string>('lastNameEn'); const lastNameEN = defineModel<string>('lastNameEn');
const lastName = defineModel<string>('lastName');
const middleNameEN = defineModel<string>('middleNameEn');
const middleName = defineModel<string>('middleName'); const middleName = defineModel<string>('middleName');
const firstNameEN = defineModel<string>('firstNameEn');
const firstName = defineModel<string>('firstName');
const namePrefix = defineModel<string>('namePrefix');
const passportNumber = defineModel<string>('passportNumber');
const genderOptions = ref<Record<string, unknown>[]>([]); const genderOptions = ref<Record<string, unknown>[]>([]);
let genderFilter: ( let genderFilter: (
@ -96,8 +85,8 @@ let workerStatusFilter: (
function matPreFixName() { function matPreFixName() {
if (!gender.value) return; if (!gender.value) return;
if (gender.value === 'male') prefixName.value = 'mr'; if (gender.value === 'male') namePrefix.value = 'mr';
else prefixName.value = 'mrs'; else namePrefix.value = 'mrs';
} }
onMounted(() => { onMounted(() => {
@ -187,7 +176,7 @@ watch(
); );
watch( watch(
() => prefixName.value, () => namePrefix.value,
(v) => { (v) => {
if (v === 'mr') gender.value = 'male'; if (v === 'mr') gender.value = 'male';
else if (v !== '') gender.value = 'female'; else if (v !== '') gender.value = 'female';
@ -232,7 +221,7 @@ watch(
input-debounce="0" input-debounce="0"
option-value="value" option-value="value"
option-label="label" option-label="label"
v-model="passportType" v-model="type"
class="col-12" class="col-12"
:dense="dense" :dense="dense"
:readonly="readonly" :readonly="readonly"
@ -304,11 +293,11 @@ watch(
:for="`${prefixId}-select-prefix-name`" :for="`${prefixId}-select-prefix-name`"
:label="$t('personnel.form.prefixName')" :label="$t('personnel.form.prefixName')"
@filter="prefixNameFilter" @filter="prefixNameFilter"
:model-value="readonly ? prefixName || '-' : prefixName" :model-value="readonly ? namePrefix || '-' : namePrefix"
@update:model-value=" @update:model-value="
(v) => (typeof v === 'string' ? (prefixName = v) : '') (v) => (typeof v === 'string' ? (namePrefix = v) : '')
" "
@clear="prefixName = ''" @clear="namePrefix = ''"
> >
<template v-slot:no-option> <template v-slot:no-option>
<q-item> <q-item>
@ -350,13 +339,10 @@ watch(
class="col-2" class="col-2"
:label="$t('customerEmployee.form.passportRef')" :label="$t('customerEmployee.form.passportRef')"
:model-value=" :model-value="
readonly readonly ? previousPassportRef || '-' : previousPassportRef
? previousPassportReference || '-'
: previousPassportReference
" "
@update:model-value=" @update:model-value="
(v) => (v) => (typeof v === 'string' ? (previousPassportRef = v) : '')
typeof v === 'string' ? (previousPassportReference = v) : ''
" "
/> />
<q-input <q-input
@ -367,7 +353,7 @@ watch(
hide-bottom-space hide-bottom-space
class="col-12" class="col-12"
:label="$t('customerEmployee.form.passportPlace')" :label="$t('customerEmployee.form.passportPlace')"
v-model="passportIssuingPlace" v-model="issuePlace"
:rules="[ :rules="[
(val) => (val && val.length > 0) || $t('form.error.required'), (val) => (val && val.length > 0) || $t('form.error.required'),
]" ]"
@ -385,7 +371,7 @@ watch(
option-value="value" option-value="value"
option-label="label" option-label="label"
class="col-12" class="col-12"
v-model="passportIssuingCountry" v-model="issueCountry"
:dense="dense" :dense="dense"
:readonly="readonly" :readonly="readonly"
:hide-dropdown-icon="readonly" :hide-dropdown-icon="readonly"
@ -412,7 +398,7 @@ watch(
<DatePicker <DatePicker
:id="`${prefixId}-date-picker-passport-issueance`" :id="`${prefixId}-date-picker-passport-issueance`"
:label="$t('customerEmployee.form.passportIssueDate')" :label="$t('customerEmployee.form.passportIssueDate')"
v-model="passportIssueDate" v-model="issueDate"
class="col-6" class="col-6"
:readonly="readonly" :readonly="readonly"
:rules="[ :rules="[
@ -426,7 +412,7 @@ watch(
<DatePicker <DatePicker
:id="`${prefixId}-date-picker-passport-expire`" :id="`${prefixId}-date-picker-passport-expire`"
:label="$t('customerEmployee.form.passportExpireDate')" :label="$t('customerEmployee.form.passportExpireDate')"
v-model="passportExpiryDate" v-model="expireDate"
class="col-6" class="col-6"
:readonly="readonly" :readonly="readonly"
:rules="[ :rules="[
@ -527,7 +513,7 @@ watch(
hide-bottom-space hide-bottom-space
class="col-6" class="col-6"
:label="$t('customerEmployee.form.previousPassportNumber')" :label="$t('customerEmployee.form.previousPassportNumber')"
v-model="previousPassportNo" v-model="previousPassportRef"
/> />
<q-select <q-select
@ -549,11 +535,11 @@ watch(
:for="`${prefixId}-select-prefix-name`" :for="`${prefixId}-select-prefix-name`"
:label="$t('personnel.form.prefixName')" :label="$t('personnel.form.prefixName')"
@filter="prefixNameFilter" @filter="prefixNameFilter"
:model-value="readonly ? prefixName || '-' : prefixName" :model-value="readonly ? namePrefix || '-' : namePrefix"
@update:model-value=" @update:model-value="
(v) => (typeof v === 'string' ? (prefixName = v) : '') (v) => (typeof v === 'string' ? (namePrefix = v) : '')
" "
@clear="prefixName = ''" @clear="namePrefix = ''"
> >
<template v-slot:no-option> <template v-slot:no-option>
<q-item> <q-item>
@ -772,7 +758,8 @@ watch(
@filter="nationalityFilter" @filter="nationalityFilter"
:model-value="readonly ? nationality || '-' : nationality" :model-value="readonly ? nationality || '-' : nationality"
@update:model-value=" @update:model-value="
(v) => (typeof v === 'string' ? (nationality = v) : '') (v) =>
typeof v === 'string' ? (birthCountry = nationality = v) : ''
" "
@clear="nationality = ''" @clear="nationality = ''"
> >
@ -793,44 +780,12 @@ watch(
hide-bottom-space hide-bottom-space
class="col-4" class="col-4"
:label="$t('customerEmployee.form.placeOfBirth')" :label="$t('customerEmployee.form.placeOfBirth')"
v-model="placeOfBirth" :model-value="optionStore.mapOption(birthCountry || '')"
@update:model-value="
(v) => (typeof v === 'string' ? (birthCountry = v) : '')
"
/> />
<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"
class="col-4"
:dense="dense"
:readonly="readonly"
:options="nationalityOptions"
:hide-dropdown-icon="readonly"
:for="`${prefixId}-select-visa-type`"
:label="$t('customerEmployee.form.countryOfbirth')"
@filter="nationalityFilter"
:model-value="readonly ? countryOfBirth || '-' : countryOfBirth"
@update:model-value="
(v) => (typeof v === 'string' ? (countryOfBirth = v) : '')
"
@clear="countryOfBirth = ''"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-select <q-select
outlined outlined
clearable clearable
@ -844,13 +799,14 @@ watch(
option-value="value" option-value="value"
option-label="label" option-label="label"
class="col-6 col-md-4" class="col-6 col-md-4"
v-model="passportIssuingCountry" v-model="issueCountry"
:dense="dense" :dense="dense"
:readonly="readonly" :readonly="readonly"
:hide-dropdown-icon="readonly" :hide-dropdown-icon="readonly"
:options="passportIssuingCountryOptions" :options="passportIssuingCountryOptions"
:for="`${prefixId}-select-passport-country`" :for="`${prefixId}-select-passport-country`"
:label="$t('customerEmployee.form.passportIssuer')" :label="$t('customerEmployee.form.passportIssuer')"
@update:model-value="(v) => (issuePlace = v)"
:rules="[ :rules="[
(val) => (val) =>
(val && val.length > 0) || (val && val.length > 0) ||
@ -869,10 +825,31 @@ watch(
</template> </template>
</q-select> </q-select>
<q-input
:for="`${prefixId}-input-passport-place`"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-4"
:label="$t('customerEmployee.form.passportPlace')"
:model-value="
readonly
? optionStore.mapOption(issuePlace || '') || '-'
: optionStore.mapOption(issuePlace || '')
"
@update:model-value="
(v) => (typeof v === 'string' ? (issuePlace = v) : '')
"
:rules="[
(val) => (val && val.length > 0) || $t('form.error.required'),
]"
/>
<DatePicker <DatePicker
:id="`${prefixId}-date-picker-passport-issueance`" :id="`${prefixId}-date-picker-passport-issueance`"
:label="$t('customerEmployee.form.passportIssueDate')" :label="$t('customerEmployee.form.passportIssueDate')"
v-model="passportIssueDate" v-model="issueDate"
class="col-6 col-md-3" class="col-6 col-md-3"
:readonly="readonly" :readonly="readonly"
:rules="[ :rules="[
@ -886,7 +863,7 @@ watch(
<DatePicker <DatePicker
:id="`${prefixId}-date-picker-passport-expire`" :id="`${prefixId}-date-picker-passport-expire`"
:label="$t('customerEmployee.form.passportExpireDate')" :label="$t('customerEmployee.form.passportExpireDate')"
v-model="passportExpiryDate" v-model="expireDate"
class="col-6 col-md-3" class="col-6 col-md-3"
:readonly="readonly" :readonly="readonly"
:rules="[ :rules="[

55
src/pages/03_customer-management/MainPage.vue
View file

@ -3040,15 +3040,25 @@ const emptyCreateDialog = ref(false);
:title="$t('customerEmployee.form.group.passport')" :title="$t('customerEmployee.form.group.passport')"
:readonly="employeeFormState.currentIndexPassport !== index" :readonly="employeeFormState.currentIndexPassport !== index"
:full-name="employeeFormState.currentIndexPassport !== index" :full-name="employeeFormState.currentIndexPassport !== index"
v-model:passport-type="value.type" v-model:birth-country="value.birthCountry"
v-model:previous-passportRef="value.previousPassportRef"
v-model:issue-place="value.issuePlace"
v-model:issue-country="value.issueCountry"
v-model:issue-date="value.issueDate"
v-model:type="value.type"
v-model:expire-date="value.expireDate"
v-model:birth-date="value.birthDate"
v-model:worker-status="value.workerStatus"
v-model:nationality="value.nationality"
v-model:gender="value.gender"
v-model:last-name-en="value.lastNameEN"
v-model:last-name="value.lastName"
v-model:middle-name-en="value.middleNameEN"
v-model:middle-name="value.middleName"
v-model:first-name-en="value.firstNameEN"
v-model:first-name="value.firstName"
v-model:name-prefix="value.namePrefix"
v-model:passport-number="value.number" v-model:passport-number="value.number"
v-model:prefix-name="currentFromDataEmployee.namePrefix"
v-model:first-name="currentFromDataEmployee.firstName"
v-model:last-name="currentFromDataEmployee.lastName"
v-model:passport-issue-date="value.issueDate"
v-model:passport-expiry-date="value.expireDate"
v-model:passport-issuing-place="value.issuePlace"
v-model:passport-issuing-country="value.issueCountry"
> >
<template v-slot:expiryDate> <template v-slot:expiryDate>
{{ $t('general.expirationDate') }} : {{ $t('general.expirationDate') }} :
@ -4714,15 +4724,25 @@ const emptyCreateDialog = ref(false);
:title="$t('customerEmployee.form.group.passport')" :title="$t('customerEmployee.form.group.passport')"
:readonly="employeeFormState.currentIndexPassport !== index" :readonly="employeeFormState.currentIndexPassport !== index"
:full-name="employeeFormState.currentIndexPassport !== index" :full-name="employeeFormState.currentIndexPassport !== index"
v-model:passport-type="value.type" v-model:birth-country="value.birthCountry"
v-model:previous-passportRef="value.previousPassportRef"
v-model:issue-place="value.issuePlace"
v-model:issue-country="value.issueCountry"
v-model:issue-date="value.issueDate"
v-model:type="value.type"
v-model:expire-date="value.expireDate"
v-model:birth-date="value.birthDate"
v-model:worker-status="value.workerStatus"
v-model:nationality="value.nationality"
v-model:gender="value.gender"
v-model:last-name-en="value.lastNameEN"
v-model:last-name="value.lastName"
v-model:middle-name-en="value.middleNameEN"
v-model:middle-name="value.middleName"
v-model:first-name-en="value.firstNameEN"
v-model:first-name="value.firstName"
v-model:name-prefix="value.namePrefix"
v-model:passport-number="value.number" v-model:passport-number="value.number"
v-model:prefix-name="currentFromDataEmployee.namePrefix"
v-model:first-name="currentFromDataEmployee.firstName"
v-model:last-name="currentFromDataEmployee.lastName"
v-model:passport-issue-date="value.issueDate"
v-model:passport-expiry-date="value.expireDate"
v-model:passport-issuing-place="value.issuePlace"
v-model:passport-issuing-country="value.issueCountry"
> >
<template v-slot:expiryDate> <template v-slot:expiryDate>
{{ $t('general.expirationDate') }} : {{ $t('general.expirationDate') }} :
@ -4939,6 +4959,9 @@ const emptyCreateDialog = ref(false);
v-model:employee-checkup=" v-model:employee-checkup="
currentFromDataEmployee.employeeCheckup currentFromDataEmployee.employeeCheckup
" "
v-model:checkup-results-option="
optionStore.globalOption.checkupResults
"
v-model:checkup-type-option=" v-model:checkup-type-option="
optionStore.globalOption.insurancePlace optionStore.globalOption.insurancePlace
" "

29
src/stores/employee/types.ts
View file

@ -297,14 +297,29 @@ export type EmployeeVisaPayload = {
}; };
export type EmployeePassportPayload = { export type EmployeePassportPayload = {
id?: string; birthCountry: string;
number: string; previousPassportRef: string;
type: string;
issueDate: Date;
expireDate: Date;
issueCountry: string;
issuePlace: string; issuePlace: string;
previousPassportRef?: string | null; issueCountry: string;
issueDate: Date;
type: string;
expireDate: Date;
birthDate: Date;
updatedAt: Date;
createdAt: Date;
workerStatus: string;
nationality: string;
gender: string;
lastNameEN: string;
lastName: string;
middleNameEN: string;
middleName: string;
firstNameEN: string;
firstName: string;
namePrefix: string;
employeeId: string;
number: string;
id?: string;
}; };
export type EmployeeInCountryNoticePayload = { export type EmployeeInCountryNoticePayload = {