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

refactor: edit div of DrawerInfo

Browse source
This commit is contained in:
Net 2024-08-16 16:47:13 +07:00
parent d03c04f0d0
commit b0885e10a3
1 changed files with 347 additions and 276 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,6 +14,12 @@ import useFlowStore from 'stores/flow';
import { Status } from 'stores/types';
import { CustomerStats, Customer, CustomerBranch } from 'stores/customer/types';
import { Employee, EmployeeHistory } from 'stores/employee/types';
import {
EditButton,
DeleteButton,
SaveButton,
UndoButton,
} from 'components/button';
import { AddressForm } from 'components/form';
import ItemCard from 'src/components/ItemCard.vue';
@ -2265,13 +2271,10 @@ const emptyCreateDialog = ref(false);
}
"
>
<div class="full-height full-width column">
<div class="q-mx-lg q-mt-lg">
<div class="q-px-lg q-pt-lg surface-2">
<ProfileBanner
@view="employeeFormState.imageDialog = true"
@edit="
dialogEmployeeImageUpload && dialogEmployeeImageUpload.browse()
"
@edit="dialogEmployeeImageUpload && dialogEmployeeImageUpload.browse()"
@update:toggle-status="
(v) => {
if (currentFromDataEmployee.id !== undefined)
@ -2302,33 +2305,40 @@ const emptyCreateDialog = ref(false);
"
/>
</div>
<div
class="col surface-1 q-ma-lg rounded bordered scroll row"
id="employee-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">
<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="[
{
name: $t('formDialogTitleInformation'),
anchor: 'form-information',
anchor: 'drawer-form-information',
},
{
name: $t('formDialogTitlePersonal'),
anchor: 'form-personal',
anchor: 'drawer-form-personal',
},
{
name: $t('formDialogTitlePersonnelAddress'),
anchor: 'form-personal-address',
anchor: 'drawer-form-personal-address',
},
{
name: $t('formDialogTitlePassport'),
anchor: 'form-passport',
anchor: 'drawer-form-passport',
},
{
name: $t('formDialogTitleVisa'),
anchor: 'form-visa',
anchor: 'drawer-form-visa',
},
]"
background="transparent"
@ -2336,18 +2346,66 @@ const emptyCreateDialog = ref(false);
background: 'hsla(var(--blue-6-hsl) / .2)',
foreground: 'var(--blue-6)',
}"
scroll-element="#employee-form"
scroll-element="#drawer-employee-form-content"
/>
</div>
</div>
<div
v-if="employeeFormState.currentTab === 'personalInfo'"
class="col-10 q-pa-md q-gutter-y-xl"
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
id="drawer-employee-form-content"
style="height: 290px; 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"
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>
<BasicInformation
:no-action="$route.name === 'CustomerBranchManagement'"
id="form-information"
no-action
id="drawer-form-information"
prefix-id="drawer-info-employee"
dense
outlined
@ -2378,7 +2436,7 @@ const emptyCreateDialog = ref(false);
"
/>
<FormPerson
id="form-personal"
id="drawer-form-personal"
prefix-id="drawer-info-employee"
dense
outlined
@ -2395,7 +2453,7 @@ const emptyCreateDialog = ref(false);
v-model:nationality="currentFromDataEmployee.nationality"
/>
<AddressForm
id="form-personal-address"
id="drawer-form-personal-address"
employee
v-model:address="currentFromDataEmployee.address"
v-model:addressEN="currentFromDataEmployee.addressEN"
@ -2409,7 +2467,7 @@ const emptyCreateDialog = ref(false);
/>
<FormEmployeePassport
prefix-id="drawer-info-employee"
id="form-passport"
id="drawer-form-passport"
dense
outlined
separator
@ -2435,7 +2493,7 @@ const emptyCreateDialog = ref(false);
/>
<FormEmployeeVisa
prefix-id="drawer-info-employee"
id="form-visa"
id="drawer-form-visa"
dense
outlined
:title="`formDialogTitleVisa`"
@ -2453,11 +2511,14 @@ const emptyCreateDialog = ref(false);
v-model:tm6-number="currentFromDataEmployee.tm6Number"
v-model:entry-date="currentFromDataEmployee.entryDate"
/>
</div>
<div class="col-10 q-pa-md q-gutter-y-xl" v-else>
</template>
<template v-if="employeeFormState.currentTab === 'healthCheck'">
>
<FormEmployeeHealthCheck
v-if="employeeFormState.currentTab === 'healthCheck'"
id="form-checkup"
id="drawer-form-checkup"
prefix-id="form-employee"
dense
outlined
@ -2509,10 +2570,13 @@ const emptyCreateDialog = ref(false);
}
"
/>
</template>
<template v-if="employeeFormState.currentTab === 'workHistory'">
<FormEmployeeWorkHistory
v-if="employeeFormState.currentTab === 'workHistory'"
id="form-work-history"
prefix-id="form-employee"
id="drawer-work-history"
prefix-id="drawer-employee"
dense
outlined
v-model:current-index="employeeFormState.currentIndex"
@ -2538,13 +2602,16 @@ const emptyCreateDialog = ref(false);
false
) {
employeeFormState.currentIndex = -1;
currentFromDataEmployee.employeeWork[index].statusSave = true;
currentFromDataEmployee.employeeWork[index].statusSave =
true;
}
}
"
@edit="
(index) => {
if (currentFromDataEmployee.employeeWork?.[index].statusSave) {
if (
currentFromDataEmployee.employeeWork?.[index].statusSave
) {
employeeFormState.currentIndex = index;
currentFromDataEmployee.employeeWork[index].statusSave =
false;
@ -2552,10 +2619,13 @@ const emptyCreateDialog = ref(false);
}
"
/>
</template>
<template v-if="employeeFormState.currentTab === 'other'">
<FormEmployeeOther
v-if="employeeFormState.currentTab === 'other'"
id="form-other"
prefix-id="form-employee"
id="drawer-other"
prefix-id="drawer-employee"
dense
outlined
v-model:employee-other="currentFromDataEmployee.employeeOtherInfo"
@ -2577,6 +2647,7 @@ const emptyCreateDialog = ref(false);
}
"
/>
</template>
</div>
</div>
</div>