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

refactor: employee new img dialog

Browse source
This commit is contained in:
puriphatt 2024-09-11 16:53:08 +07:00
parent 893b0a8c2a
commit 685ad0cc54
7 changed files with 254 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -483,7 +483,11 @@ async function openHistory(id: string) {
async function editCustomerForm(id: string) {
await customerFormStore.assignFormData(id);
await fetchListOfOptionBranch();
await fetchImageList(id, customerFormData.value.selectedImage || '');
await fetchImageList(
id,
customerFormData.value.selectedImage || '',
'customer',
);
customerFormState.value.dialogType = 'edit';
customerFormState.value.drawerModal = true;
customerFormState.value.editCustomerId = id;
@ -491,6 +495,11 @@ async function editCustomerForm(id: string) {
async function editEmployeeFormPersonal(id: string) {
await employeeFormStore.assignFormDataEmployee(id);
await fetchImageList(
id,
currentFromDataEmployee.value.selectedImage || '',
'employee',
);
employeeFormState.value.isEmployeeEdit = true;
employeeFormState.value.dialogType = 'edit';
employeeFormState.value.drawerModal = true;
@ -506,6 +515,7 @@ function employeeConfirmUnsave(close = true) {
message: t('form.warning.unsave'),
action: () => {
employeeFormStore.resetFormDataEmployee();
onCreateImageList.value = { selectedImage: '', list: [] };
employeeFormState.value.editReadonly = true;
employeeFormState.value.dialogModal = !close;
employeeFormState.value.drawerModal = !close;
@ -572,12 +582,20 @@ function returnCountryCode(country: string) {
return tempValue?.value;
}
async function fetchImageList(id: string, selectedName: string) {
const res = await customerStore.fetchImageListById(id);
async function fetchImageList(
id: string,
selectedName: string,
type: 'customer' | 'employee',
) {
const res =
type === 'customer'
? await customerStore.fetchImageListById(id)
: await employeeStore.fetchImageListById(id);
imageList.value = {
selectedImage: selectedName,
list: res.map((n: string) => `customer/${id}/image/${n}`),
list: res.map((n: string) => `${type}/${id}/image/${n}`),
};
return res;
}
@ -1354,12 +1372,17 @@ const emptyCreateDialog = ref(false);
:columns-employee="columnsEmployee"
@history="(item: any) => {}"
@view="
(item: any) => {
async (item: any) => {
employeeFormState.drawerModal = true;
employeeFormState.isEmployeeEdit = false;
employeeFormStore.assignFormDataEmployee(
item.id,
);
await fetchImageList(
item.id,
item.selectedImage || '',
'employee',
);
}
"
@edit="
@ -1548,10 +1571,15 @@ const emptyCreateDialog = ref(false);
:field-selected="fieldSelected"
@history="(item: any) => {}"
@view="
(item: any) => {
async (item: any) => {
employeeFormState.drawerModal = true;
employeeFormState.isEmployeeEdit = false;
employeeFormStore.assignFormDataEmployee(item.id);
await fetchImageList(
item.id,
item.selectedImage || '',
'employee',
);
}
"
@edit="(item: any) => editEmployeeFormPersonal(item.id)"
@ -1702,7 +1730,12 @@ const emptyCreateDialog = ref(false);
no-app-box
width="40vw"
height="250px"
:close="() => (emptyCreateDialog = false)"
:close="
() => {
emptyCreateDialog = false;
onCreateImageList = { selectedImage: '', list: [] };
}
"
>
<div class="full-height row q-pa-md">
<ItemCard
@ -1730,10 +1763,16 @@ const emptyCreateDialog = ref(false);
:on-open="
async () => {
customerFormStore.resetForm(customerFormState.dialogType === 'create');
onCreateImageList = { selectedImage: '', list: [] };
await fetchListOfOptionBranch();
}
"
:on-close="() => (customerFormState.dialogModal = false)"
:on-close="
() => {
customerFormState.dialogModal = false;
onCreateImageList = { selectedImage: '', list: [] };
}
"
>
<template #header>
<DialogHeader
@ -2036,7 +2075,6 @@ const emptyCreateDialog = ref(false);
</DialogContainer>
<!-- add employee -->
<DialogForm
hideFooter
:title="$t('form.title.create', { name: $t('customer.employee') })"
@ -2045,7 +2083,7 @@ const emptyCreateDialog = ref(false);
:submit="
async () => {
if (employeeFormState.currentTab === 'personalInfo') {
await employeeFormStore.submitPersonal();
await employeeFormStore.submitPersonal(onCreateImageList);
employeeFormState.isEmployeeEdit = false;
employeeFormState.dialogType = 'info';
}
@ -2125,8 +2163,15 @@ const emptyCreateDialog = ref(false);
:menu="formMenuIconEmployee"
:toggleTitle="$t('status.title')"
hideFade
@view="employeeFormState.imageDialog = true"
@edit="dialogEmployeeImageUpload && dialogEmployeeImageUpload.browse()"
@view="
() => {
employeeFormState.imageDialog = true;
employeeFormState.isImageEdit = false;
}
"
@edit="
employeeFormState.imageDialog = employeeFormState.isImageEdit = true
"
@update:toggle-status="
() => {
currentFromDataEmployee.status =
@ -2679,6 +2724,7 @@ const emptyCreateDialog = ref(false);
await fetchImageList(
customerFormState.editCustomerId,
customerFormData.selectedImage || '',
'customer',
);
}
"
@ -2691,7 +2737,11 @@ const emptyCreateDialog = ref(false);
customerFormState.editCustomerId,
name,
);
await fetchImageList(customerFormState.editCustomerId, name);
await fetchImageList(
customerFormState.editCustomerId,
name,
'customer',
);
}
"
@submit="
@ -2768,16 +2818,70 @@ const emptyCreateDialog = ref(false);
v-model:dialog-state="employeeFormState.imageDialog"
v-model:file="currentFromDataEmployee.image"
v-model:image-url="employeeFormState.profileUrl"
:hidden-footer="
!currentFromDataEmployee.image || !employeeFormState.profileUrl
v-model:data-list="imageList"
v-model:on-create-data-list="onCreateImageList"
:on-create="employeeFormState.dialogModal"
:hiddenFooter="!employeeFormState.isImageEdit"
@add-image="
async (v) => {
if (!v) return;
if (!currentFromDataEmployee.id) return;
await employeeStore.addImageList(
v,
currentFromDataEmployee.id,
Date.now(),
);
await fetchImageList(
currentFromDataEmployee.id,
currentFromDataEmployee.selectedImage || '',
'employee',
);
}
"
clear-button
@save="
async () => {
await employeeFormStore.submitPersonal();
@remove-image="
async (v) => {
if (!v) return;
if (!currentFromDataEmployee.id) return;
const name = v.split('/').pop() || '';
await employeeStore.deleteImageByName(currentFromDataEmployee.id, name);
await fetchImageList(currentFromDataEmployee.id, name, 'employee');
}
"
@submit="
async (v) => {
if (employeeFormState.dialogModal) {
employeeFormState.profileUrl = v;
employeeFormState.imageDialog = false;
} else {
refreshImageState = true;
employeeFormState.dialogType = 'edit';
currentFromDataEmployee.selectedImage = v;
imageList ? (imageList.selectedImage = v) : '';
employeeFormState.profileUrl = `${baseUrl}/employee/${currentFromDataEmployee.id && currentFromDataEmployee.id}/image/${v}`;
employeeFormStore.resetFormDataEmployee();
await employeeFormStore.submitPersonal();
employeeFormState.imageDialog = false;
refreshImageState = false;
employeeFormState.isEmployeeEdit = false;
employeeFormState.dialogType = 'info';
await fetchListEmployee();
}
}
"
>
<template #title>
<span
v-if="!employeeFormState.dialogModal"
class="justify-center flex text-bold"
>
{{ $t('general.image') }}
{{
$i18n.locale === 'eng'
? `${currentFromDataEmployee.firstNameEN} ${currentFromDataEmployee.lastNameEN}`
: `${currentFromDataEmployee.firstName} ${currentFromDataEmployee.lastName}`
}}
</span>
</template>
<template #error>
<div class="full-height full-width" style="background: white">
<div
@ -3194,10 +3298,14 @@ const emptyCreateDialog = ref(false);
<div class="q-px-lg q-pt-lg surface-2">
<ProfileBanner
hideFade
:readonly="!employeeFormState.isEmployeeEdit"
@view="employeeFormState.imageDialog = true"
@view="
() => {
employeeFormState.imageDialog = true;
employeeFormState.isImageEdit = false;
}
"
@edit="
dialogEmployeeImageUpload && dialogEmployeeImageUpload.browse()
employeeFormState.imageDialog = employeeFormState.isImageEdit = true
"
@update:toggle-status="
(v) => {
@ -3225,7 +3333,11 @@ const emptyCreateDialog = ref(false);
: '-'
"
:caption="currentFromDataEmployee.code"
:img="employeeFormState.profileUrl || '/images/employee-avatar.png'"
:img="
`${baseUrl}/employee/${currentFromDataEmployee.id}/image/${currentFromDataEmployee.selectedImage}`.concat(
refreshImageState ? `?ts=${Date.now()}` : '',
) || null
"
:fallbackImg="'/images/employee-avatar.png'"
:tabs-list="[
{
@ -3436,7 +3548,7 @@ const emptyCreateDialog = ref(false);
dense
outlined
separator
:title="'customerEmployee.form.group.passport'"
:title="$t('customerEmployee.form.group.passport')"
:readonly="!employeeFormState.isEmployeeEdit"
v-model:passport-type="currentFromDataEmployee.passportType"
v-model:passport-number="currentFromDataEmployee.passportNumber"
@ -3575,7 +3687,7 @@ const emptyCreateDialog = ref(false);
outlined
separator
ocr
:title="'customerEmployee.form.group.passport'"
:title="$t('customerEmployee.form.group.passport')"
:readonly="!employeeFormState.isEmployeeEdit"
v-model:passport-type="
currentFromDataEmployee.passportType

40
src/pages/03_customer-management/form.ts
View file

@ -9,9 +9,10 @@ import useCustomerStore from 'stores/customer';
import useEmployeeStore from 'stores/employee';
import useFlowStore from 'stores/flow';
import { baseUrl } from 'src/stores/utils';
export const useCustomerForm = defineStore('form-customer', () => {
const { t } = useI18n();
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
const customerStore = useCustomerStore();
const branchStore = useMyBranch();
@ -133,8 +134,8 @@ export const useCustomerForm = defineStore('form-customer', () => {
state.value.dialogType = 'edit';
state.value.editCustomerId = id;
state.value.editCustomerCode = data.code;
state.value.customerImageUrl = `${apiBaseUrl}/customer/${id}/image/${data.selectedImage}`;
state.value.defaultCustomerImageUrl = `${apiBaseUrl}/customer/${id}/image/${data.selectedImage}`;
state.value.customerImageUrl = `${baseUrl}/customer/${id}/image/${data.selectedImage}`;
state.value.defaultCustomerImageUrl = `${baseUrl}/customer/${id}/image/${data.selectedImage}`;
resetFormData.registeredBranchId = data.registeredBranchId;
resetFormData.code = data.code || '';
@ -487,6 +488,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
currentTab: string;
dialogModal: boolean;
drawerModal: boolean;
isImageEdit: boolean;
currentEmployeeCode: string;
currentEmployee: Employee | null;
@ -519,6 +521,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
| undefined;
ocr: boolean;
}>({
isImageEdit: false,
currentIndex: -1,
statusSavePersonal: false,
drawerModal: false,
@ -541,7 +544,6 @@ export const useEmployeeForm = defineStore('form-employee', () => {
const defaultFormData: EmployeeCreate = {
id: '',
code: '',
image: null,
customerBranchId: '',
nrcNo: '',
dateOfBirth: null,
@ -623,6 +625,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
motherLastNameEN: '',
motherBirthPlace: '',
},
image: null,
};
let resetEmployeeData = structuredClone(defaultFormData);
@ -650,6 +653,9 @@ export const useEmployeeForm = defineStore('form-employee', () => {
resetEmployeeData = structuredClone(defaultFormData);
state.value.statusSavePersonal = false;
state.value.profileUrl = '';
} else {
resetEmployeeData.selectedImage =
currentFromDataEmployee.value.selectedImage;
}
currentFromDataEmployee.value = structuredClone(resetEmployeeData);
}
@ -790,16 +796,22 @@ export const useEmployeeForm = defineStore('form-employee', () => {
await assignFormDataEmployee(currentFromDataEmployee.value.id);
}
async function submitPersonal() {
async function submitPersonal(imgList?: {
selectedImage: string;
list: { url: string; imgFile: File | null; name: string }[];
}) {
if (state.value.dialogType === 'create') {
const res = await employeeStore.create({
...currentFromDataEmployee.value,
customerBranchId: state.value.formDataEmployeeOwner?.id || '',
const res = await employeeStore.create(
{
...currentFromDataEmployee.value,
customerBranchId: state.value.formDataEmployeeOwner?.id || '',
employeeWork: [],
employeeCheckup: [],
employeeOtherInfo: undefined,
});
employeeWork: [],
employeeCheckup: [],
employeeOtherInfo: undefined,
},
imgList,
);
if (res) {
await assignFormDataEmployee(res.id);
@ -898,7 +910,6 @@ export const useEmployeeForm = defineStore('form-employee', () => {
}),
)
: [],
image: null,
};
currentFromDataEmployee.value = structuredClone(resetEmployeeData);
@ -908,7 +919,8 @@ export const useEmployeeForm = defineStore('form-employee', () => {
state.value.currentEmployeeCode = payload.code;
state.value.profileUrl = profileImageUrl || '';
state.value.profileUrl =
`${baseUrl}/employee/${id}/image/${_data.selectedImage}` || '';
profileImageUrl
? (state.value.profileSubmit = true)