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