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

fix(03): employee drawer info & icon outline

Browse source
This commit is contained in:
puriphatt 2024-08-09 02:10:06 +00:00
parent 8129ae05da
commit 187ae5fb1f
2 changed files with 143 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -434,6 +434,7 @@ async function editCustomerForm(id: string) {
async function editEmployeeFormPersonal(id: string) {
await employeeFormStore.assignFormDataEmployee(id);
employeeFormState.value.isEmployeeEdit = true;
employeeFormState.value.dialogType = 'edit';
employeeFormState.value.drawerModal = true;
}
@ -540,6 +541,13 @@ watch(
employeeFormState.value.formDataEmployeeOwner.id;
},
);
watch(
() => employeeFormState.value.currentTab,
() => {
employeeFormState.value.isEmployeeEdit = false;
},
);
</script>
<template>
@ -551,7 +559,7 @@ watch(
style="color: white; background-color: hsla(var(--violet-11-hsl))"
@click="createCustomerForm('CORP')"
padding="xs"
icon="mdi-office-building"
icon="mdi-office-building-outline"
:label="$t('add') + ' ' + $t('customerLegalEntity')"
external-label
label-position="left"
@ -565,7 +573,7 @@ watch(
@click="createCustomerForm('PERS')"
style="color: white; background-color: hsla(var(--teal-10-hsl))"
padding="xs"
icon="mdi-account-plus"
icon="mdi-account-plus-outline"
/>
<q-fab-action
v-if="currentTab === 'employee'"
@ -576,7 +584,7 @@ watch(
@click="createEmployeeForm()"
color="primary"
padding="xs"
icon="mdi-account-plus"
icon="mdi-account-plus-outline"
/>
</div>
<div v-else>
@ -591,7 +599,7 @@ watch(
}"
@click="console.log('add-branch')"
padding="xs"
icon="mdi-office-building"
icon="mdi-office-building-outline"
:label="$t('formDialogTitleCreateSubBranch')"
external-label
label-position="left"
@ -620,7 +628,7 @@ watch(
</q-badge>
<q-btn
class="q-ml-sm"
icon="mdi-pin"
icon="mdi-pin-outline"
color="primary"
size="sm"
flat
@ -646,23 +654,23 @@ watch(
? customerStats.map((v) => ({
count:
v.name === 'CORP'
? statsCustomerType?.CORP ?? 0
: statsCustomerType?.PERS ?? 0,
? (statsCustomerType?.CORP ?? 0)
: (statsCustomerType?.PERS ?? 0),
label:
v.name === 'CORP'
? 'customerLegalEntity'
: 'customerNaturalPerson',
icon:
v.name === 'CORP'
? 'mdi-office-building'
: 'mdi-account',
? 'mdi-office-building-outline'
: 'mdi-account-outline',
color: v.name === 'CORP' ? 'purple' : 'green',
}))
: [
{
label: 'EMPLOYEE',
count: employeeStats,
icon: 'mdi-account',
icon: 'mdi-account-outline',
color: 'pink',
},
])
@ -1191,11 +1199,11 @@ watch(
female: undefined,
detail: [
{
icon: 'mdi-cellphone',
icon: 'mdi-cellphone-outline',
value: props.row.branch[0]?.telephoneNo || '-',
},
{
icon: 'mdi-account',
icon: 'mdi-account-outline',
value: props.row.personName || '-',
},
],
@ -1358,12 +1366,11 @@ watch(
:id="`row-table-${props.row.firstNameEN}`"
@click="
() => {
employeeFormState.drawerModal = true;
employeeFormStore.assignFormDataEmployee(
props.row.id,
);
// employeeFormState.drawerModal = true;
// employeeFormStore.assignFormDataEmployee(
// props.row.id,
// );
// $router.push(`/customer-management/${props.row.id}/branch`);
// openDialogInputForm('INFO', props.row.id);
}
"
@ -1466,7 +1473,10 @@ watch(
<q-td
v-if="fieldSelected.includes('formDialogInputAge')"
>
<div class="row items-center">
<div
class="row items-center"
v-if="props.row.customerBranch"
>
<div class="col">
<div class="col">
{{ props.row.customerBranch.code }}
@ -1496,6 +1506,10 @@ watch(
flat
@click.stop="
() => {
employeeFormState.drawerModal = true;
employeeFormStore.assignFormDataEmployee(
props.row.id,
);
// openDialogInputForm('INFO', props.row.id);
}
"
@ -1514,10 +1528,15 @@ watch(
<q-menu class="bordered">
<q-list v-close-popup>
<q-item
v-close-popup
:id="`view-detail-btn-${props.row.name}-view`"
@click.stop="
() => {
// openDialogInputForm('INFO', props.row.id);
employeeFormState.drawerModal = true;
employeeFormStore.assignFormDataEmployee(
props.row.id,
);
}
"
clickable
@ -1648,7 +1667,7 @@ watch(
{
icon: 'mdi-clock-outline',
value: props.row.dateOfBirth
? calculateAge(props.row.dateOfBirth) ?? ''
? (calculateAge(props.row.dateOfBirth) ?? '')
: '',
},
],
@ -1942,7 +1961,7 @@ watch(
size="xs"
class="q-pa-sm rounded q-mr-xs"
color="info"
name="mdi-briefcase"
name="mdi-briefcase-outline"
style="background-color: var(--surface-3)"
/>
<span>{{ $t('customer.form.group.branch') }}</span>
@ -1958,6 +1977,7 @@ watch(
class="full-width"
v-if="customerFormData.customerBranch"
v-for="(_, idx) in customerFormData.customerBranch"
:key="idx"
@submit.prevent="
async () => {
if (!customerFormData.customerBranch) return;
@ -2023,7 +2043,8 @@ watch(
</DialogContainer>
<DialogForm
:title="$t('form.title.create', { name: 'Employee' })"
hideFooter
:title="$t('form.title.create', { name: $t('customer.employee') })"
v-model:modal="employeeFormState.dialogModal"
:undo="() => employeeFormUndo(false)"
:submit="
@ -2065,7 +2086,7 @@ watch(
active
useToggle
color="white"
icon="mdi-account-plus"
icon="mdi-account-plus-outline"
bgColor="linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)"
v-model:current-tab="employeeFormState.currentTab"
v-model:cover-url="employeeFormState.profileUrl"
@ -2389,9 +2410,11 @@ watch(
<!-- ลูกจ้าง -->
<DrawerInfo
hide-action
v-model:drawer-open="employeeFormState.drawerModal"
:is-edit="employeeFormState.isEmployeeEdit"
:edit-data="() => (employeeFormState.isEmployeeEdit = true)"
:undo="() => (employeeFormState.isEmployeeEdit = false)"
:title="
employeeFormState.currentEmployee
? $i18n.locale === 'en-US'
@ -2431,7 +2454,7 @@ watch(
active
useToggle
color="white"
icon="mdi-account-plus"
icon="mdi-account-plus-outline"
bgColor="linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)"
v-model:current-tab="employeeFormState.currentTab"
v-model:cover-url="employeeFormState.profileUrl"
@ -2489,6 +2512,7 @@ watch(
/>
</div>
</div>
<div
v-if="employeeFormState.currentTab === 'personalInfo'"
class="col-10 q-pa-md q-gutter-y-xl"
@ -2496,11 +2520,9 @@ watch(
<BasicInformation
id="form-information"
prefix-id="drawer-info-employee"
employee
dense
outlined
separator
:title="$t('formDialogTitleInformation')"
:title="'formDialogTitleInformation'"
:readonly="!employeeFormState.isEmployeeEdit"
:employee-owner-option="employeeStore.ownerOption"
v-model:customer-branch="employeeFormState.formDataEmployeeOwner"
@ -2508,7 +2530,26 @@ watch(
v-model:nrc-no="currentFromDataEmployee.nrcNo"
v-model:code="currentFromDataEmployee.code"
@filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
@save="() => employeeFormStore.submitPersonal()"
@undo="
() => {
employeeFormStore.resetFormDataEmployee();
employeeFormState.isEmployeeEdit = false;
}
"
@edit="
() => {
employeeFormState.isEmployeeEdit = true;
}
"
@save="
async () => {
employeeFormState.dialogType = 'edit';
await employeeFormStore.submitPersonal();
employeeFormState.dialogType = 'info';
employeeFormState.isEmployeeEdit = false;
}
"
@delete="() => console.log('asd')"
/>
<FormPerson
id="form-personal"
@ -2517,7 +2558,7 @@ watch(
outlined
employee
separator
:title="$t('personalInfo')"
:title="'personalInfo'"
:readonly="!employeeFormState.isEmployeeEdit"
v-model:firstName="currentFromDataEmployee.firstName"
v-model:lastName="currentFromDataEmployee.lastName"
@ -2540,14 +2581,13 @@ watch(
prefix-id="drawer-info-personnel"
dense
/>
<FormEmployeePassport
prefix-id="drawer-info-employee"
id="form-passport"
dense
outlined
separator
:title="$t('formDialogTitlePassport')"
:title="'formDialogTitlePassport'"
:readonly="!employeeFormState.isEmployeeEdit"
v-model:passport-type="currentFromDataEmployee.passportType"
v-model:passport-number="currentFromDataEmployee.passportNumber"
@ -2567,13 +2607,12 @@ watch(
currentFromDataEmployee.previousPassportReference
"
/>
<FormEmployeeVisa
prefix-id="drawer-info-employee"
id="form-visa"
dense
outlined
:title="$t(`formDialogTitleVisa`)"
:title="`formDialogTitleVisa`"
:readonly="!employeeFormState.isEmployeeEdit"
v-model:visa-type="currentFromDataEmployee.visaType"
v-model:visa-number="currentFromDataEmployee.visaNumber"
@ -2597,6 +2636,7 @@ watch(
prefix-id="form-employee"
dense
outlined
:readonly="!employeeFormState.isEmployeeEdit"
v-model:employeeCheckup="currentFromDataEmployee.employeeCheckup"
v-model:checkupTypeOption="optionStore.globalOption.insurancePlace"
v-model:medicalBenefitOption="
@ -2612,6 +2652,7 @@ watch(
"
@edit="
(index) => {
employeeFormState.isEmployeeEdit = true;
if (
currentFromDataEmployee.employeeCheckup?.[index].statusSave
) {
@ -2620,6 +2661,7 @@ watch(
}
}
"
@undo="employeeFormState.isEmployeeEdit = false"
/>
<FormEmployeeWorkHistory
v-if="employeeFormState.currentTab === 'workHistory'"
@ -2627,10 +2669,13 @@ watch(
prefix-id="form-employee"
dense
outlined
:readonly="!employeeFormState.isEmployeeEdit"
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"
@edit="employeeFormState.isEmployeeEdit = true"
@undo="employeeFormState.isEmployeeEdit = false"
/>
<FormEmployeeOther
v-if="employeeFormState.currentTab === 'other'"