chamomind/jws-frontend
chamomind/jws-frontend
7
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

2
src/components/03_customer-management/FormEmployeePassport.vue
View file

@ -95,7 +95,7 @@ watch(
name="mdi-passport"
style="background-color: var(--surface-3)"
/>
{{ $t(`${title}`) }}
{{ title }}
</div>
<div class="col-12 row q-col-gutter-sm">

8
src/components/03_customer-management/TableEmpoloyee.vue
View file

@ -1,5 +1,6 @@
<script setup lang="ts">
import { calculateAge, dateFormat } from 'src/utils/datetime';
import { baseUrl } from 'src/stores/utils';
import PersonCard from 'components/shared/PersonCard.vue';
import KebabAction from '../shared/KebabAction.vue';
@ -121,7 +122,7 @@ defineEmits<{
<q-avatar size="md">
<q-img
:src="
props.row.profileImageUrl ||
`${baseUrl}/employee/${props.row.id}/image/${props.row.selectedImage}` ||
'/images/employee-avatar.png'
"
class="text-center"
@ -248,7 +249,10 @@ defineEmits<{
$i18n.locale === 'eng'
? `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim()
: `${props.row.firstName} ${props.row.lastName} `.trim(),
img: props.row.profileImageUrl || '/images/employee-avatar.png',
img:
`${baseUrl}/employee/${props.row.id}/image/${props.row.selectedImage}` ||
'/images/employee-avatar.png',
fallbackImg: '/images/employee-avatar.png',
male: props.row.gender === 'male',
female: props.row.gender === 'female',
detail: [

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

@ -273,7 +273,7 @@ onMounted(() => {
'-' + ' ' + scope.opt.customer.lastName
}}
{{ $t('address') }}
{{ $t('general.address') }}
{{
$i18n.locale === 'eng'
? `${scope.opt.addressEN || ''} ${scope.opt.subDistrict.nameEN || ''} ${scope.opt.district.nameEN || ''} ${scope.opt.province.nameEN || ''}`

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)

94
src/stores/employee/index.ts
View file

@ -63,25 +63,81 @@ const useEmployeeStore = defineStore('api-employee', () => {
return false;
}
async function create(data: EmployeeCreate) {
async function fetchImageListById(
id: string,
flow?: {
sessionId?: string;
refTransactionId?: string;
transactionId?: string;
},
) {
const res = await api.get(`/employee/${id}/image`, {
headers: {
'X-Session-Id': flow?.sessionId,
'X-Rtid': flow?.refTransactionId || flowStore.rtid,
'X-Tid': flow?.transactionId,
},
});
if (!res) return false;
if (res.status === 200) return res.data;
if (res.status === 204) return null;
return false;
}
async function addImageList(file: File, customerId: string, name: string) {
await api
.put(`/employee/${customerId}/image/${name}`, file, {
headers: { 'Content-Type': file.type },
onUploadProgress: (e) => console.log(e),
})
.catch((e) => console.error(e));
return name;
}
async function deleteImageByName(
id: string,
name: string,
flow?: {
sessionId?: string;
refTransactionId?: string;
transactionId?: string;
},
) {
const res = await api.delete(`/employee/${id}/image/${name}`, {
headers: {
'X-Session-Id': flow?.sessionId,
'X-Rtid': flow?.refTransactionId || flowStore.rtid,
'X-Tid': flow?.transactionId,
},
});
if (!res) return false;
}
async function create(
data: EmployeeCreate,
imgList: {
selectedImage: string;
list: { url: string; imgFile: File | null; name: string }[];
},
) {
const { id, code, image, file, zipCode, ...payload } = data;
const res = await api.post<
Employee & { profileImageUrl: string; profileImageUploadUrl: string }
>('/employee', payload, {
headers: { 'X-Rtid': flowStore.rtid },
});
>(
'/employee',
{ ...payload, selectedImage: imgList.selectedImage },
{
headers: { 'X-Rtid': flowStore.rtid },
},
);
if (!res) return false;
if (res.data.id) {
if (image) {
await api
.put(`/employee/${res.data.id}/image`, image, {
headers: { 'Content-Type': image?.type },
onUploadProgress: (e) => console.log(e),
})
.catch((e) => console.error(e));
}
if (file) {
const attachmentUpload = file.map(async ({ group, file }) => {
if (file) {
@ -97,6 +153,13 @@ const useEmployeeStore = defineStore('api-employee', () => {
});
await Promise.all(attachmentUpload);
}
if (imgList.list.length > 0 && res.data.id) {
for (let index = 0; index < imgList.list.length; index++) {
const imgFile = imgList.list[index].imgFile;
if (imgFile)
await addImageList(imgFile, res.data.id, imgList.list[index].name);
}
}
}
return res.data;
@ -392,7 +455,7 @@ const useEmployeeStore = defineStore('api-employee', () => {
fetch(res.data)
.then(async (res) => await res.blob())
.then((blob) => {
let a = document.createElement('a');
const a = document.createElement('a');
a.download = filename;
a.href = window.URL.createObjectURL(blob);
a.click();
@ -434,6 +497,11 @@ const useEmployeeStore = defineStore('api-employee', () => {
fetchById,
fetchList,
fetchImageListById,
addImageList,
deleteImageByName,
create,
editById,
deleteById,

3
src/stores/employee/types.ts
View file

@ -5,6 +5,7 @@ import { User } from '../user/types';
import { Customer, CustomerBranch } from '../customer/types';
export type Employee = {
selectedImage?: string;
id: string;
code: string;
nrcNo: string;
@ -50,7 +51,6 @@ export type Employee = {
subDistrict: SubDistrict | null;
district: District | null;
province: Province | null;
profileImageUrl: string | null;
customerBranch: CustomerBranch & { customer: Customer };
employeeWork?: EmployeeWorkCreate[];
employeeCheckup?: EmployeeCheckupCreate[];
@ -58,6 +58,7 @@ export type Employee = {
};
export type EmployeeCreate = {
selectedImage?: string;
id?: string;
code: string;
image: File | null;