refactor: edit div of DialogForm

This commit is contained in:
Net 2024-08-16 17:36:25 +07:00
parent a56ac704ee
commit 601537049d

View file

@ -213,7 +213,9 @@ const fieldDisplayEmployee = ref<
const fieldSelected = ref<
(
| 'orderNumber'
| 'customerName'
| 'businessTypePure'
| 'type'
| 'personName'
| 'telephoneNo'
@ -228,7 +230,9 @@ const fieldSelected = ref<
| 'action'
)[]
>([
'orderNumber',
'customerName',
'businessTypePure',
'personName',
'telephoneNo',
'branchEmail',
@ -1793,6 +1797,7 @@ const emptyCreateDialog = ref(false);
}
employeeFormState.isEmployeeEdit = false;
employeeFormState.currentIndex = -1;
await fetchListEmployee();
}
@ -1813,7 +1818,7 @@ const emptyCreateDialog = ref(false);
}
"
>
<div class="q-mx-lg q-mt-lg">
<div class="q-px-lg q-pt-lg surface-2">
<ProfileBanner
active
useToggle
@ -1859,293 +1864,357 @@ const emptyCreateDialog = ref(false);
</div>
<div
class="col surface-1 q-ma-lg rounded bordered scroll row"
id="personnel-form"
style="flex: 1; width: 100%; overflow-y: auto"
class="surface-2 q-pa-lg"
id="drawer-employee-form"
>
<div class="col">
<div style="position: sticky; top: 0" class="q-pa-sm">
<SideMenu
:menu="
employeeFormState.currentTab === 'personalInfo'
? [
{
name: $t('formDialogTitleInformation'),
anchor: 'form-information',
},
{
name: $t('formDialogTitlePersonal'),
anchor: 'form-personal',
},
{
name: $t('formDialogTitlePersonnelAddress'),
anchor: 'form-personal-address',
},
{
name: $t('formDialogTitlePassport'),
anchor: 'form-passport',
},
{
name: $t('formDialogTitleVisa'),
anchor: 'form-visa',
},
]
: employeeFormState.currentTab === 'healthCheck'
<div class="col surface-1 full-height rounded bordered scroll row">
<div
class="col"
style="height: 100%; max-height: 100; overflow-y: auto"
v-if="$q.screen.gt.sm"
>
<div class="q-py-md q-pl-md q-pr-sm">
<SideMenu
:menu="
employeeFormState.currentTab === 'personalInfo'
? [
{
name: $t('formDialogInputCheckupRes'),
anchor: 'form-checkup',
name: $t('formDialogTitleInformation'),
anchor: 'form-information',
},
{
name: $t('formDialogTitlePersonal'),
anchor: 'form-personal',
},
{
name: $t('formDialogTitlePersonnelAddress'),
anchor: 'form-personal-address',
},
{
name: $t('formDialogTitlePassport'),
anchor: 'form-passport',
},
{
name: $t('formDialogTitleVisa'),
anchor: 'form-visa',
},
]
: employeeFormState.currentTab === 'workHistory'
: employeeFormState.currentTab === 'healthCheck'
? [
{
name: $t('workHistory'),
anchor: 'form-workHistory',
name: $t('formDialogInputCheckupRes'),
anchor: 'form-checkup',
},
]
: employeeFormState.currentTab === 'other'
: employeeFormState.currentTab === 'workHistory'
? [
{
name: $t('other'),
anchor: 'form-other',
name: $t('workHistory'),
anchor: 'form-workHistory',
},
]
: []
"
background="transparent"
:active="{
background: 'hsla(var(--blue-6-hsl) / .2)',
foreground: 'var(--blue-6)',
}"
scroll-element="#employee-form"
/>
: employeeFormState.currentTab === 'other'
? [
{
name: $t('other'),
anchor: 'form-other',
},
]
: []
"
background="transparent"
:active="{
background: 'hsla(var(--blue-6-hsl) / .2)',
foreground: 'var(--blue-6)',
}"
scroll-element="#employee-form-content"
/>
</div>
</div>
</div>
<div
v-if="employeeFormState.currentTab === 'personalInfo'"
class="col-10 q-pa-md q-gutter-y-xl"
>
<BasicInformation
id="form-information"
prefix-id="form-employee"
:show-btn-save="employeeFormState.dialogType === 'create'"
employee
dense
outlined
separator
:title="$t('formDialogTitleInformation')"
:readonly="!employeeFormState.isEmployeeEdit"
:employee-owner-option="employeeStore.ownerOption"
v-model:customer-branch="employeeFormState.formDataEmployeeOwner"
v-model:employee-id="employeeFormState.currentEmployeeCode"
v-model:nrc-no="currentFromDataEmployee.nrcNo"
v-model:code="currentFromDataEmployee.code"
@filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
@undo="
() => {
employeeFormStore.resetFormDataEmployee();
employeeFormState.isEmployeeEdit = false;
employeeFormState.dialogType = 'info';
}
"
@edit="
() => {
employeeFormState.isEmployeeEdit = true;
employeeFormState.dialogType = 'edit';
}
"
@save="() => {}"
@delete="() => deleteEmployeeById({ id: currentFromDataEmployee.id })"
/>
<FormPerson
id="form-personal"
prefix-id="form-employee"
dense
outlined
employee
separator
:title="$t('personalInfo')"
v-model:open="employeeFormState.dialogModal"
v-model:firstName="currentFromDataEmployee.firstName"
v-model:lastName="currentFromDataEmployee.lastName"
v-model:firstNameEN="currentFromDataEmployee.firstNameEN"
v-model:lastNameEN="currentFromDataEmployee.lastNameEN"
v-model:gender="currentFromDataEmployee.gender"
v-model:birthDate="currentFromDataEmployee.dateOfBirth"
v-model:nationality="currentFromDataEmployee.nationality"
/>
<AddressForm
id="form-personal-address"
prefix-id="form-employee"
v-model:same-with-employer="
employeeFormState.formDataEmployeeSameAddr
"
v-model:address="currentFromDataEmployee.address"
v-model:addressEN="currentFromDataEmployee.addressEN"
v-model:provinceId="currentFromDataEmployee.provinceId"
v-model:districtId="currentFromDataEmployee.districtId"
v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
v-model:zipCode="currentFromDataEmployee.zipCode"
employee
dense
/>
<div
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
id="employee-form-content"
style="height: 100%; max-height: 100; overflow-y: auto"
>
<template v-if="employeeFormState.currentTab === 'personalInfo'">
<div
class="q-pt-sm row"
style="position: absolute; z-index: 999; right: 4%"
>
<UndoButton
v-if="
employeeFormState.isEmployeeEdit &&
employeeFormState.dialogType !== 'create'
"
id="btn-info-basic-undo"
icon-only
@click="
() => {
employeeFormStore.resetFormDataEmployee();
employeeFormState.isEmployeeEdit = false;
employeeFormState.dialogType = 'info';
}
"
type="button"
/>
<SaveButton
v-if="employeeFormState.isEmployeeEdit"
id="btn-info-basic-save"
icon-only
type="submit"
/>
<EditButton
v-if="!employeeFormState.isEmployeeEdit"
id="btn-info-basic-edit"
icon-only
@click="
() => {
employeeFormState.isEmployeeEdit = true;
employeeFormState.dialogType = 'edit';
}
"
type="button"
/>
<DeleteButton
v-if="!employeeFormState.isEmployeeEdit"
id="btn-info-basic-delete"
icon-only
@click="
() => deleteEmployeeById({ id: currentFromDataEmployee.id })
"
type="button"
/>
</div>
<FormEmployeePassport
prefix-id="drawer-info-employee"
id="form-passport"
dense
outlined
separator
:title="$t('formDialogTitlePassport')"
v-model:passport-type="currentFromDataEmployee.passportType"
v-model:passport-number="currentFromDataEmployee.passportNumber"
v-model:passport-issue-date="
currentFromDataEmployee.passportIssueDate
"
v-model:passport-expiry-date="
currentFromDataEmployee.passportExpiryDate
"
v-model:passport-issuing-place="
currentFromDataEmployee.passportIssuingPlace
"
v-model:passport-issuing-country="
currentFromDataEmployee.passportIssuingCountry
"
v-model:previous-passport-reference="
currentFromDataEmployee.previousPassportReference
"
/>
<BasicInformation
no-action
id="form-information"
prefix-id="form-employee"
:show-btn-save="employeeFormState.dialogType === 'create'"
employee
dense
outlined
separator
:title="$t('formDialogTitleInformation')"
:readonly="!employeeFormState.isEmployeeEdit"
:employee-owner-option="employeeStore.ownerOption"
v-model:customer-branch="employeeFormState.formDataEmployeeOwner"
v-model:employee-id="employeeFormState.currentEmployeeCode"
v-model:nrc-no="currentFromDataEmployee.nrcNo"
v-model:code="currentFromDataEmployee.code"
@filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
/>
<FormPerson
id="form-personal"
prefix-id="form-employee"
dense
outlined
employee
separator
:title="$t('personalInfo')"
v-model:open="employeeFormState.dialogModal"
v-model:firstName="currentFromDataEmployee.firstName"
v-model:lastName="currentFromDataEmployee.lastName"
v-model:firstNameEN="currentFromDataEmployee.firstNameEN"
v-model:lastNameEN="currentFromDataEmployee.lastNameEN"
v-model:gender="currentFromDataEmployee.gender"
v-model:birthDate="currentFromDataEmployee.dateOfBirth"
v-model:nationality="currentFromDataEmployee.nationality"
/>
<AddressForm
id="form-personal-address"
prefix-id="form-employee"
v-model:same-with-employer="
employeeFormState.formDataEmployeeSameAddr
"
v-model:address="currentFromDataEmployee.address"
v-model:addressEN="currentFromDataEmployee.addressEN"
v-model:provinceId="currentFromDataEmployee.provinceId"
v-model:districtId="currentFromDataEmployee.districtId"
v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
v-model:zipCode="currentFromDataEmployee.zipCode"
employee
dense
/>
<FormEmployeeVisa
prefix-id="drawer-info-employee"
id="form-visa"
dense
outlined
:title="$t(`formDialogTitleVisa`)"
v-model:visa-type="currentFromDataEmployee.visaType"
v-model:visa-number="currentFromDataEmployee.visaNumber"
v-model:visa-issue-date="currentFromDataEmployee.visaIssueDate"
v-model:visa-expiry-date="currentFromDataEmployee.visaExpiryDate"
v-model:visa-issuing-place="currentFromDataEmployee.visaIssuingPlace"
v-model:visa-stay-until-date="
currentFromDataEmployee.visaStayUntilDate
"
v-model:tm6-number="currentFromDataEmployee.tm6Number"
v-model:entry-date="currentFromDataEmployee.entryDate"
/>
</div>
<FormEmployeePassport
prefix-id="drawer-info-employee"
id="form-passport"
dense
outlined
separator
:title="$t('formDialogTitlePassport')"
v-model:passport-type="currentFromDataEmployee.passportType"
v-model:passport-number="currentFromDataEmployee.passportNumber"
v-model:passport-issue-date="
currentFromDataEmployee.passportIssueDate
"
v-model:passport-expiry-date="
currentFromDataEmployee.passportExpiryDate
"
v-model:passport-issuing-place="
currentFromDataEmployee.passportIssuingPlace
"
v-model:passport-issuing-country="
currentFromDataEmployee.passportIssuingCountry
"
v-model:previous-passport-reference="
currentFromDataEmployee.previousPassportReference
"
/>
<div class="col-10 q-pa-md q-gutter-y-xl" v-else>
<FormEmployeeHealthCheck
v-if="employeeFormState.currentTab === 'healthCheck'"
id="form-checkup"
prefix-id="form-employee"
dense
outlined
v-model:current-index="employeeFormState.currentIndex"
v-model:employeeCheckup="currentFromDataEmployee.employeeCheckup"
v-model:checkupTypeOption="optionStore.globalOption.insurancePlace"
v-model:medicalBenefitOption="optionStore.globalOption.typeInsurance"
v-model:insuranceCompanyOption="
optionStore.globalOption.insurancePlace
"
@delete="
(index) => {
employeeFormState.currentIndex = index;
deleteEmployeeById({ type: 'healthCheck' });
}
"
@save="
(index) => {
employeeFormState.currentIndex = index;
notify('create', $t('success'));
}
"
@undo="
(index) => {
if (
currentFromDataEmployee.employeeCheckup?.[index].statusSave ===
false
) {
currentFromDataEmployee.employeeCheckup[index].statusSave =
true;
}
}
"
@edit="
(index) => {
if (currentFromDataEmployee.employeeCheckup?.[index].statusSave) {
currentFromDataEmployee.employeeCheckup[index].statusSave =
false;
}
}
"
/>
<FormEmployeeWorkHistory
v-if="employeeFormState.currentTab === 'workHistory'"
id="form-work-history"
prefix-id="form-employee"
dense
outlined
v-model:current-index="employeeFormState.currentIndex"
v-model:employee-work="currentFromDataEmployee.employeeWork"
v-model:position-name-option="optionStore.globalOption.position"
v-model:job-type-option="optionStore.globalOption.businessType"
v-model:workplace-option="optionStore.globalOption.area"
@delete="
(index) => {
employeeFormState.currentIndex = index;
deleteEmployeeById({ type: 'work' });
}
"
@save="
(index) => {
employeeFormState.currentIndex = index;
}
"
@undo="
(index) => {
if (
currentFromDataEmployee.employeeWork?.[index].statusSave ===
false
) {
currentFromDataEmployee.employeeWork[index].statusSave = true;
}
}
"
@edit="
(index) => {
if (currentFromDataEmployee.employeeWork?.[index].statusSave) {
currentFromDataEmployee.employeeWork[index].statusSave = false;
}
}
"
/>
<FormEmployeeOther
v-if="employeeFormState.currentTab === 'other'"
id="form-other"
prefix-id="form-employee"
dense
outlined
v-model:employee-other="currentFromDataEmployee.employeeOtherInfo"
@undo="
() => {
if (
currentFromDataEmployee.employeeOtherInfo?.statusSave === false
) {
currentFromDataEmployee.employeeOtherInfo.statusSave = true;
}
}
"
@edit="
() => {
if (currentFromDataEmployee.employeeOtherInfo?.statusSave) {
currentFromDataEmployee.employeeOtherInfo.statusSave = false;
}
}
"
/>
<FormEmployeeVisa
prefix-id="drawer-info-employee"
id="form-visa"
dense
outlined
:title="$t(`formDialogTitleVisa`)"
v-model:visa-type="currentFromDataEmployee.visaType"
v-model:visa-number="currentFromDataEmployee.visaNumber"
v-model:visa-issue-date="currentFromDataEmployee.visaIssueDate"
v-model:visa-expiry-date="currentFromDataEmployee.visaExpiryDate"
v-model:visa-issuing-place="
currentFromDataEmployee.visaIssuingPlace
"
v-model:visa-stay-until-date="
currentFromDataEmployee.visaStayUntilDate
"
v-model:tm6-number="currentFromDataEmployee.tm6Number"
v-model:entry-date="currentFromDataEmployee.entryDate"
/>
</template>
<template v-if="employeeFormState.currentTab === 'healthCheck'">
<FormEmployeeHealthCheck
v-if="employeeFormState.currentTab === 'healthCheck'"
id="form-checkup"
prefix-id="form-employee"
dense
outlined
v-model:current-index="employeeFormState.currentIndex"
v-model:employeeCheckup="currentFromDataEmployee.employeeCheckup"
v-model:checkupTypeOption="
optionStore.globalOption.insurancePlace
"
v-model:medicalBenefitOption="
optionStore.globalOption.typeInsurance
"
v-model:insuranceCompanyOption="
optionStore.globalOption.insurancePlace
"
@delete="
(index) => {
employeeFormState.currentIndex = index;
deleteEmployeeById({ type: 'healthCheck' });
}
"
@save="
(index) => {
employeeFormState.currentIndex = index;
notify('create', $t('success'));
}
"
@undo="
(index) => {
if (
currentFromDataEmployee.employeeCheckup?.[index]
.statusSave === false
) {
currentFromDataEmployee.employeeCheckup[index].statusSave =
true;
}
}
"
@edit="
(index) => {
if (
currentFromDataEmployee.employeeCheckup?.[index].statusSave
) {
currentFromDataEmployee.employeeCheckup[index].statusSave =
false;
}
}
"
/>
</template>
<template v-if="employeeFormState.currentTab === 'workHistory'">
<FormEmployeeWorkHistory
v-if="employeeFormState.currentTab === 'workHistory'"
id="form-work-history"
prefix-id="form-employee"
dense
outlined
v-model:current-index="employeeFormState.currentIndex"
v-model:employee-work="currentFromDataEmployee.employeeWork"
v-model:position-name-option="optionStore.globalOption.position"
v-model:job-type-option="optionStore.globalOption.businessType"
v-model:workplace-option="optionStore.globalOption.area"
@delete="
(index) => {
employeeFormState.currentIndex = index;
deleteEmployeeById({ type: 'work' });
}
"
@save="
(index) => {
employeeFormState.currentIndex = index;
}
"
@undo="
(index) => {
if (
currentFromDataEmployee.employeeWork?.[index].statusSave ===
false
) {
currentFromDataEmployee.employeeWork[index].statusSave =
true;
}
}
"
@edit="
(index) => {
if (
currentFromDataEmployee.employeeWork?.[index].statusSave
) {
currentFromDataEmployee.employeeWork[index].statusSave =
false;
}
}
"
/>
</template>
<template v-if="employeeFormState.currentTab === 'other'">
<FormEmployeeOther
v-if="employeeFormState.currentTab === 'other'"
id="form-other"
prefix-id="form-employee"
dense
outlined
v-model:employee-other="currentFromDataEmployee.employeeOtherInfo"
@undo="
() => {
if (
currentFromDataEmployee.employeeOtherInfo?.statusSave ===
false
) {
currentFromDataEmployee.employeeOtherInfo.statusSave = true;
}
}
"
@edit="
() => {
if (currentFromDataEmployee.employeeOtherInfo?.statusSave) {
currentFromDataEmployee.employeeOtherInfo.statusSave = false;
}
}
"
/>
</template>
</div>
</div>
</div>
</DialogForm>
@ -2497,8 +2566,6 @@ const emptyCreateDialog = ref(false);
</template>
<template v-if="employeeFormState.currentTab === 'healthCheck'">
>
<FormEmployeeHealthCheck
v-if="employeeFormState.currentTab === 'healthCheck'"
id="drawer-form-checkup"