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

refactor: customer => display no data condition

Browse source
This commit is contained in:
puriphatt 2024-12-11 13:52:23 +07:00
parent 6f9e693c58
commit 3b30e9a736
1 changed files with 338 additions and 309 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5050,8 +5050,8 @@ const emptyCreateDialog = ref(false);
</template> </template>
<template v-if="employeeFormState.currentTab === 'passport'"> <template v-if="employeeFormState.currentTab === 'passport'">
<div class="q-gutter-sm full-width"> <div class="q-gutter-sm full-width column no-wrap">
<div class="col-12 q-pb-sm text-weight-bold text-body1"> <div class="q-pb-sm text-weight-bold text-body1">
<q-icon <q-icon
flat flat
size="xs" size="xs"
@ -5069,38 +5069,197 @@ const emptyCreateDialog = ref(false);
) in currentFromDataEmployee.employeePassport" ) in currentFromDataEmployee.employeePassport"
:key="index" :key="index"
> >
<FormEmployeePassport <div class="col" v-if="value !== undefined">
v-if="value !== undefined" <FormEmployeePassport
prefix-id="drawer-info-employee"
id="form-passport"
hide-title
dense
outlined
separator
:title="$t('customerEmployee.form.group.passport')"
:readonly="
employeeFormState.currentIndexPassport !== index
"
:full-name="
employeeFormState.currentIndexPassport !== index
"
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"
>
<template v-slot:expiryDate>
{{ $t('general.expirationDate') }} :
{{ dateFormat(value.expireDate) }}
<ExpirationDate
v-if="value.id !== undefined"
:expiration-date="value.expireDate"
/>
</template>
<template v-slot:button>
<div
class="surface-1 row rounded"
style="min-height: 35px"
>
<UndoButton
v-if="
employeeFormState.isEmployeeEdit &&
!(
employeeFormState.currentIndexPassport === -1
) &&
employeeFormState.currentIndexPassport === index
"
id="btn-info-basic-undo"
icon-only
@click="
() => {
employeeFormStore.resetFormDataEmployee();
employeeFormState.isEmployeeEdit = false;
employeeFormState.dialogType = 'info';
employeeFormState.currentIndexPassport = -1;
}
"
type="button"
/>
<SaveButton
v-if="
(employeeFormState.isEmployeeEdit ||
value.id === undefined) &&
!(
employeeFormState.currentIndexPassport === -1
) &&
employeeFormState.currentIndexPassport === index
"
id="btn-info-basic-save"
icon-only
@click="
() => {
employeeFormState.currentIndexPassport = index;
}
"
type="submit"
/>
<EditButton
v-if="
employeeFormState.currentIndexPassport === -1 ||
(!employeeFormState.isEmployeeEdit &&
value.id !== undefined &&
employeeFormState.currentIndexPassport ===
index)
"
id="btn-info-basic-edit"
icon-only
@click="
() => {
employeeFormState.currentIndexPassport = index;
employeeFormState.isEmployeeEdit = true;
employeeFormState.dialogType = 'edit';
}
"
type="button"
/>
<DeleteButton
v-if="
employeeFormState.currentIndexPassport === -1 ||
(!employeeFormState.isEmployeeEdit &&
value.id !== undefined &&
!(
employeeFormState.currentIndexPassport === -1
) &&
employeeFormState.currentIndexPassport ===
index)
"
id="btn-info-basic-delete"
icon-only
@click.stop="
() => {
deleteEmployeeById({ type: 'passport', index });
}
"
type="button"
:disabled="
!(
employeeFormState.currentIndexPassport === -1
) &&
!(
employeeFormState.currentIndexPassport === index
)
"
/>
</div>
</template>
</FormEmployeePassport>
</div>
</template>
<div
class="full-width flex flex-center col"
v-if="currentFromDataEmployee.employeePassport?.length === 0"
>
<NoData />
</div>
</div>
</template>
<template v-if="employeeFormState.currentTab === 'visa'">
<div class="q-gutter-sm full-width column no-wrap">
<div class="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('customerEmployee.form.group.visa') }}
</div>
<div class="col">
<FormEmployeeVisa
v-for="(
value, index
) in currentFromDataEmployee.employeeVisa"
:key="index"
prefix-id="drawer-info-employee" prefix-id="drawer-info-employee"
id="form-passport" id="form-visa"
hide-title
dense dense
outlined outlined
separator :title="$t('customerEmployee.form.group.visa')"
:title="$t('customerEmployee.form.group.passport')" :readonly="employeeFormState.currentIndexVisa !== index"
:readonly="employeeFormState.currentIndexPassport !== index" hide-title
:full-name=" v-model:arrival-at="value.arrivalAt"
employeeFormState.currentIndexPassport !== index v-model:arrival-tm-no="value.arrivalTMNo"
" v-model:arrival-tm="value.arrivalTM"
v-model:birth-country="value.birthCountry" v-model:mrz="value.mrz"
v-model:previous-passportRef="value.previousPassportRef" v-model:entry-count="value.entryCount"
v-model:issue-place="value.issuePlace" v-model:issue-place="value.issuePlace"
v-model:issue-country="value.issueCountry" v-model:issue-country="value.issueCountry"
v-model:issue-date="value.issueDate" v-model:issueDate="value.issueDate"
v-model:type="value.type" v-model:type="value.type"
v-model:expire-date="value.expireDate" v-model:expire-date="value.expireDate"
v-model:birth-date="value.birthDate" v-model:visa-issue-date="value.issueDate"
v-model:worker-status="value.workerStatus" v-model:visa-expiry-date="value.expireDate"
v-model:nationality="value.nationality" v-model:remark="value.remark"
v-model:gender="value.gender" v-model:worker-type="value.workerType"
v-model:last-name-en="value.lastNameEN" v-model:number="value.number"
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"
> >
<template v-slot:expiryDate> <template v-slot:expiryDate>
{{ $t('general.expirationDate') }} : {{ $t('general.expirationDate') }} :
@ -5119,8 +5278,8 @@ const emptyCreateDialog = ref(false);
<UndoButton <UndoButton
v-if=" v-if="
employeeFormState.isEmployeeEdit && employeeFormState.isEmployeeEdit &&
!(employeeFormState.currentIndexPassport === -1) && !(employeeFormState.currentIndexVisa === -1) &&
employeeFormState.currentIndexPassport === index employeeFormState.currentIndexVisa === index
" "
id="btn-info-basic-undo" id="btn-info-basic-undo"
icon-only icon-only
@ -5129,7 +5288,7 @@ const emptyCreateDialog = ref(false);
employeeFormStore.resetFormDataEmployee(); employeeFormStore.resetFormDataEmployee();
employeeFormState.isEmployeeEdit = false; employeeFormState.isEmployeeEdit = false;
employeeFormState.dialogType = 'info'; employeeFormState.dialogType = 'info';
employeeFormState.currentIndexPassport = -1; employeeFormState.currentIndexVisa = -1;
} }
" "
type="button" type="button"
@ -5138,14 +5297,14 @@ const emptyCreateDialog = ref(false);
v-if=" v-if="
(employeeFormState.isEmployeeEdit || (employeeFormState.isEmployeeEdit ||
value.id === undefined) && value.id === undefined) &&
!(employeeFormState.currentIndexPassport === -1) && !(employeeFormState.currentIndexVisa === -1) &&
employeeFormState.currentIndexPassport === index employeeFormState.currentIndexVisa === index
" "
id="btn-info-basic-save" id="btn-info-basic-save"
icon-only icon-only
@click=" @click="
() => { () => {
employeeFormState.currentIndexPassport = index; employeeFormState.currentIndexVisa = index;
} }
" "
type="submit" type="submit"
@ -5153,16 +5312,16 @@ const emptyCreateDialog = ref(false);
<EditButton <EditButton
v-if=" v-if="
employeeFormState.currentIndexPassport === -1 || employeeFormState.currentIndexVisa === -1 ||
(!employeeFormState.isEmployeeEdit && (!employeeFormState.isEmployeeEdit &&
value.id !== undefined && value.id !== undefined &&
employeeFormState.currentIndexPassport === index) employeeFormState.currentIndexVisa === index)
" "
id="btn-info-basic-edit" id="btn-info-basic-edit"
icon-only icon-only
@click=" @click="
() => { () => {
employeeFormState.currentIndexPassport = index; employeeFormState.currentIndexVisa = index;
employeeFormState.isEmployeeEdit = true; employeeFormState.isEmployeeEdit = true;
employeeFormState.dialogType = 'edit'; employeeFormState.dialogType = 'edit';
} }
@ -5171,180 +5330,40 @@ const emptyCreateDialog = ref(false);
/> />
<DeleteButton <DeleteButton
v-if=" v-if="
employeeFormState.currentIndexPassport === -1 || employeeFormState.currentIndexVisa === -1 ||
(!employeeFormState.isEmployeeEdit && (!employeeFormState.isEmployeeEdit &&
value.id !== undefined && value.id !== undefined &&
!( !(employeeFormState.currentIndexVisa === -1) &&
employeeFormState.currentIndexPassport === -1 employeeFormState.currentIndexVisa === index)
) &&
employeeFormState.currentIndexPassport === index)
" "
id="btn-info-basic-delete" id="btn-info-basic-delete"
icon-only icon-only
@click.stop=" @click.stop="
() => { () => {
deleteEmployeeById({ type: 'passport', index }); deleteEmployeeById({ type: 'visa', index });
} }
" "
type="button" type="button"
:disabled=" :disabled="
!(employeeFormState.currentIndexPassport === -1) && !(employeeFormState.currentIndexVisa === -1) &&
!(employeeFormState.currentIndexPassport === index) !(employeeFormState.currentIndexVisa === index)
" "
/> />
</div> </div>
</template> </template>
</FormEmployeePassport> </FormEmployeeVisa>
</template>
<div class="full-width full-height flex flex-center">
<NoData
v-if="
currentFromDataEmployee.employeePassport?.length === 0
"
/>
</div> </div>
</div> <div
</template> v-if="currentFromDataEmployee.employeeVisa?.length === 0"
class="full-width col flex flex-center"
<template v-if="employeeFormState.currentTab === 'visa'">
<div class="q-gutter-sm full-width">
<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('customerEmployee.form.group.visa') }}
</div>
<FormEmployeeVisa
v-for="(value, index) in currentFromDataEmployee.employeeVisa"
:key="index"
prefix-id="drawer-info-employee"
id="form-visa"
dense
outlined
:title="$t('customerEmployee.form.group.visa')"
:readonly="employeeFormState.currentIndexVisa !== index"
hide-title
v-model:arrival-at="value.arrivalAt"
v-model:arrival-tm-no="value.arrivalTMNo"
v-model:arrival-tm="value.arrivalTM"
v-model:mrz="value.mrz"
v-model:entry-count="value.entryCount"
v-model:issue-place="value.issuePlace"
v-model:issue-country="value.issueCountry"
v-model:issueDate="value.issueDate"
v-model:type="value.type"
v-model:expire-date="value.expireDate"
v-model:visa-issue-date="value.issueDate"
v-model:visa-expiry-date="value.expireDate"
v-model:remark="value.remark"
v-model:worker-type="value.workerType"
v-model:number="value.number"
> >
<template v-slot:expiryDate> <NoData />
{{ $t('general.expirationDate') }} :
{{ dateFormat(value.expireDate) }}
<ExpirationDate
v-if="value.id !== undefined"
:expiration-date="value.expireDate"
/>
</template>
<template v-slot:button>
<div class="surface-1 row rounded" style="min-height: 35px">
<UndoButton
v-if="
employeeFormState.isEmployeeEdit &&
!(employeeFormState.currentIndexVisa === -1) &&
employeeFormState.currentIndexVisa === index
"
id="btn-info-basic-undo"
icon-only
@click="
() => {
employeeFormStore.resetFormDataEmployee();
employeeFormState.isEmployeeEdit = false;
employeeFormState.dialogType = 'info';
employeeFormState.currentIndexVisa = -1;
}
"
type="button"
/>
<SaveButton
v-if="
(employeeFormState.isEmployeeEdit ||
value.id === undefined) &&
!(employeeFormState.currentIndexVisa === -1) &&
employeeFormState.currentIndexVisa === index
"
id="btn-info-basic-save"
icon-only
@click="
() => {
employeeFormState.currentIndexVisa = index;
}
"
type="submit"
/>
<EditButton
v-if="
employeeFormState.currentIndexVisa === -1 ||
(!employeeFormState.isEmployeeEdit &&
value.id !== undefined &&
employeeFormState.currentIndexVisa === index)
"
id="btn-info-basic-edit"
icon-only
@click="
() => {
employeeFormState.currentIndexVisa = index;
employeeFormState.isEmployeeEdit = true;
employeeFormState.dialogType = 'edit';
}
"
type="button"
/>
<DeleteButton
v-if="
employeeFormState.currentIndexVisa === -1 ||
(!employeeFormState.isEmployeeEdit &&
value.id !== undefined &&
!(employeeFormState.currentIndexVisa === -1) &&
employeeFormState.currentIndexVisa === index)
"
id="btn-info-basic-delete"
icon-only
@click.stop="
() => {
deleteEmployeeById({ type: 'visa', index });
}
"
type="button"
:disabled="
!(employeeFormState.currentIndexVisa === -1) &&
!(employeeFormState.currentIndexVisa === index)
"
/>
</div>
</template>
</FormEmployeeVisa>
<div class="full-width full-height flex flex-center">
<NoData
v-if="currentFromDataEmployee.employeeVisa?.length === 0"
/>
</div> </div>
</div> </div>
</template> </template>
<template v-if="employeeFormState.currentTab === 'healthCheck'"> <template v-if="employeeFormState.currentTab === 'healthCheck'">
<div class="q-gutter-sm full-width"> <div class="q-gutter-sm full-width column">
<div <div
class="q-pb-sm text-weight-bold text-body1 row items-center" class="q-pb-sm text-weight-bold text-body1 row items-center"
> >
@ -5360,81 +5379,85 @@ const emptyCreateDialog = ref(false);
{{ $t(`customerEmployee.formHealthCheck.title`) }} {{ $t(`customerEmployee.formHealthCheck.title`) }}
</div> </div>
<FormEmployeeHealthCheck <div class="col">
v-if="employeeFormState.currentTab === 'healthCheck'" <FormEmployeeHealthCheck
id="drawer-form-checkup" v-if="employeeFormState.currentTab === 'healthCheck'"
prefix-id="drawer-employee" id="drawer-form-checkup"
dense prefix-id="drawer-employee"
outlined dense
:hide-action="currentFromDataEmployee.status === 'INACTIVE'" outlined
v-model:current-index="employeeFormState.currentIndexCheckup" :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
v-model:employee-checkup=" v-model:current-index="
currentFromDataEmployee.employeeCheckup employeeFormState.currentIndexCheckup
" "
v-model:checkup-results-option=" v-model:employee-checkup="
optionStore.globalOption.checkupResults currentFromDataEmployee.employeeCheckup
" "
v-model:checkup-type-option=" v-model:checkup-results-option="
optionStore.globalOption.insurancePlace optionStore.globalOption.checkupResults
" "
v-model:medical-benefit-option=" v-model:checkup-type-option="
optionStore.globalOption.typeInsurance optionStore.globalOption.insurancePlace
" "
v-model:insurance-company-option=" v-model:medical-benefit-option="
optionStore.globalOption.insurancePlace optionStore.globalOption.typeInsurance
" "
@save=" v-model:insurance-company-option="
(index) => { optionStore.globalOption.insurancePlace
employeeFormState.currentIndexCheckup = index; "
notify('create', $t('general.success')); @save="
} (index) => {
"
@edit="
(index) => {
if (
currentFromDataEmployee.employeeCheckup?.[index]
.statusSave
) {
employeeFormState.currentIndexCheckup = index; employeeFormState.currentIndexCheckup = index;
currentFromDataEmployee.employeeCheckup[ notify('create', $t('general.success'));
index
].statusSave = false;
} }
} "
" @edit="
@undo=" (index) => {
(index) => { if (
if ( currentFromDataEmployee.employeeCheckup?.[index]
currentFromDataEmployee.employeeCheckup?.[index] .statusSave
.statusSave === false ) {
) { employeeFormState.currentIndexCheckup = index;
employeeFormState.currentIndexCheckup = -1; currentFromDataEmployee.employeeCheckup[
currentFromDataEmployee.employeeCheckup[ index
index ].statusSave = false;
].statusSave = true; }
employeeFormStore.resetFormDataEmployee();
} }
} "
" @undo="
@delete=" (index) => {
(index) => { if (
employeeFormState.currentIndexCheckup = index; currentFromDataEmployee.employeeCheckup?.[index]
deleteEmployeeById({ type: 'healthCheck', index }); .statusSave === false
} ) {
" employeeFormState.currentIndexCheckup = -1;
/> currentFromDataEmployee.employeeCheckup[
index
<div class="full-width full-height flex flex-center"> ].statusSave = true;
<NoData employeeFormStore.resetFormDataEmployee();
v-if="currentFromDataEmployee.employeeCheckup?.length === 0" }
}
"
@delete="
(index) => {
employeeFormState.currentIndexCheckup = index;
deleteEmployeeById({ type: 'healthCheck', index });
}
"
/> />
</div> </div>
<div
class="full-width col flex flex-center"
v-if="currentFromDataEmployee.employeeCheckup?.length === 0"
>
<NoData />
</div>
</div> </div>
</template> </template>
<template v-if="employeeFormState.currentTab === 'workHistory'"> <template v-if="employeeFormState.currentTab === 'workHistory'">
<div class="q-gutter-sm full-width"> <div class="q-gutter-sm full-width column">
<div <div
class="col-12 q-pb-sm text-weight-bold text-body1 row items-center" class="q-pb-sm text-weight-bold text-body1 row items-center"
> >
<q-icon <q-icon
flat flat
@ -5447,65 +5470,71 @@ const emptyCreateDialog = ref(false);
{{ $t(`customerEmployee.form.group.workHistory`) }} {{ $t(`customerEmployee.form.group.workHistory`) }}
</div> </div>
<FormEmployeeWorkHistory <div class="col">
v-if="employeeFormState.currentTab === 'workHistory'" <FormEmployeeWorkHistory
id="drawer-work-history" v-if="employeeFormState.currentTab === 'workHistory'"
prefix-id="drawer-employee" id="drawer-work-history"
dense prefix-id="drawer-employee"
:hide-action="currentFromDataEmployee.status === 'INACTIVE'" dense
outlined :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
v-model:current-index=" outlined
employeeFormState.currentIndexWorkHistory v-model:current-index="
" employeeFormState.currentIndexWorkHistory
v-model:employee-work="currentFromDataEmployee.employeeWork" "
v-model:position-name-option=" v-model:employee-work="currentFromDataEmployee.employeeWork"
optionStore.globalOption.position v-model:position-name-option="
" optionStore.globalOption.position
v-model:job-type-option=" "
optionStore.globalOption.businessType v-model:job-type-option="
" optionStore.globalOption.businessType
v-model:workplace-option="optionStore.globalOption.area" "
@delete=" v-model:workplace-option="optionStore.globalOption.area"
(index) => { @delete="
employeeFormState.currentIndexWorkHistory = index; (index) => {
deleteEmployeeById({ type: 'work', index });
}
"
@save="
(index) => {
employeeFormState.currentIndexWorkHistory = index;
}
"
@undo="
(index) => {
if (
currentFromDataEmployee.employeeWork?.[index]
.statusSave === false
) {
employeeFormState.currentIndexWorkHistory = -1;
currentFromDataEmployee.employeeWork[index].statusSave =
true;
}
}
"
@edit="
(index) => {
if (
currentFromDataEmployee.employeeWork?.[index].statusSave
) {
employeeFormState.currentIndexWorkHistory = index; employeeFormState.currentIndexWorkHistory = index;
currentFromDataEmployee.employeeWork[index].statusSave = deleteEmployeeById({ type: 'work', index });
false;
} }
} "
" @save="
/> (index) => {
employeeFormState.currentIndexWorkHistory = index;
}
"
@undo="
(index) => {
if (
currentFromDataEmployee.employeeWork?.[index]
.statusSave === false
) {
employeeFormState.currentIndexWorkHistory = -1;
currentFromDataEmployee.employeeWork[
index
].statusSave = true;
}
}
"
@edit="
(index) => {
if (
currentFromDataEmployee.employeeWork?.[index]
.statusSave
) {
employeeFormState.currentIndexWorkHistory = index;
currentFromDataEmployee.employeeWork[
index
].statusSave = false;
}
}
"
/>
</div>
</div> </div>
<div class="full-width full-height flex flex-center"> <div
<NoData class="full-width col flex flex-center"
v-if="currentFromDataEmployee.employeeWork?.length === 0" v-if="currentFromDataEmployee.employeeWork?.length === 0"
/> >
<NoData />
</div> </div>
</template> </template>
<template v-if="employeeFormState.currentTab === 'other'"> <template v-if="employeeFormState.currentTab === 'other'">