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

96
src/components/03_customer-management/employee/BasicInformation.vue
View file

@ -3,8 +3,12 @@ import { QSelect } from 'quasar';
import { CustomerBranch } from 'src/stores/customer/types'; import { CustomerBranch } from 'src/stores/customer/types';
import { selectFilterOptionRefMod } from 'src/stores/utils'; import { selectFilterOptionRefMod } from 'src/stores/utils';
import { onMounted, ref, watch } from 'vue'; import { onMounted, ref, watch } from 'vue';
import {
import SaveButton from 'src/components/button/SaveButton.vue'; EditButton,
DeleteButton,
SaveButton,
UndoButton,
} from 'src/components/button';
const optionsBranch = defineModel<{ id: string; name: string }[]>( const optionsBranch = defineModel<{ id: string; name: string }[]>(
'optionsBranch', 'optionsBranch',
@ -25,26 +29,24 @@ const customerBranch = defineModel<{
const nrcNo = defineModel<string>('nrcNo'); const nrcNo = defineModel<string>('nrcNo');
const code = defineModel<string>('code'); const code = defineModel<string>('code');
const props = withDefaults( defineProps<{
defineProps<{ title?: string;
title?: string; dense?: boolean;
dense?: boolean; outlined?: boolean;
outlined?: boolean; readonly?: boolean;
readonly?: boolean; typeCustomer?: string;
separator?: boolean; employee?: boolean;
typeCustomer?: string; employeeOwnerOption?: CustomerBranch[];
employee?: boolean; prefixId: string;
employeeOwnerOption?: CustomerBranch[]; showBtnSave?: boolean;
prefixId: string; }>();
showBtnSave?: boolean;
}>(),
{
showBtnSave: false,
},
);
defineEmits<{ defineEmits<{
(e: 'filterOwnerBranch', val: string, update: void): void; (e: 'filterOwnerBranch', val: string, update: void): void;
(e: 'save'): void;
(e: 'undo'): void;
(e: 'delete'): void;
(e: 'edit'): void;
}>(); }>();
const branchOptions = ref<Record<string, unknown>[]>([]); const branchOptions = ref<Record<string, unknown>[]>([]);
@ -74,16 +76,49 @@ onMounted(() => {
<div <div
class="col-12 items-center row justify-between q-pb-sm text-weight-bold text-body1" class="col-12 items-center row justify-between q-pb-sm text-weight-bold text-body1"
> >
<q-icon <div>
flat <q-icon
size="xs" flat
class="q-pa-sm rounded q-mr-xs" size="xs"
color="info" class="q-pa-sm rounded q-mr-xs"
name="mdi-office-building-outline" color="info"
style="background-color: var(--surface-3)" name="mdi-office-building-outline"
/> style="background-color: var(--surface-3)"
{{ $t(`${title}`) }} />
<SaveButton class="q-ml-auto" v-if="!readonly" @click="$emit('save')" /> {{ $t(`${title}`) }}
</div>
<!-- v-if="!readonly" -->
<div class="row">
<UndoButton
v-if="!readonly"
id="btn-info-basic-undo"
icon-only
@click="$emit('undo')"
type="button"
/>
<SaveButton
v-if="!readonly"
id="btn-info-basic-save"
icon-only
@click="$emit('save')"
type="button"
/>
<EditButton
v-if="readonly"
id="btn-info-basic-edit"
icon-only
@click="$emit('edit')"
type="button"
/>
<DeleteButton
v-if="readonly"
id="btn-info-basic-delete"
icon-only
@click="$emit('delete')"
type="button"
/>
</div>
</div> </div>
<div class="col-12 row" style="gap: var(--size-2)"> <div class="col-12 row" style="gap: var(--size-2)">
@ -96,7 +131,7 @@ onMounted(() => {
:hide-dropdown-icon="readonly" :hide-dropdown-icon="readonly"
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly || customerBranch !== undefined" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-12" class="col-12"
:label="$t('formDialogEmployerBranchCode')" :label="$t('formDialogEmployerBranchCode')"
@ -305,6 +340,7 @@ onMounted(() => {
outlined outlined
hide-bottom-space hide-bottom-space
:readonly="readonly" :readonly="readonly"
:disable="!readonly"
class="col-3" class="col-3"
:label="$t('formDialogEmployeeID')" :label="$t('formDialogEmployeeID')"
v-model="code" v-model="code"

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

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