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

refactor/feat: 02 image & download image

Browse source
This commit is contained in:
puriphatt 2024-08-22 13:48:59 +07:00
parent 251c460787
commit 78c0af9aae
4 changed files with 80 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

87
src/pages/02_personnel-management/MainPage.vue
View file

@ -237,33 +237,6 @@ const imageUrl = ref<string>('');
const profileFileImg = ref<File | null>(null);
const imageDialog = ref(false);
const inputFileImg = (() => {
const element = document.createElement('input');
element.type = 'file';
element.accept = 'image/*';
const reader = new FileReader();
reader.addEventListener('load', () => {
if (typeof reader.result === 'string') imageUrl.value = reader.result;
if (infoDrawerEdit.value && currentUser.value)
currentUser.value.profileImageUrl = imageUrl.value as string;
// profileUrl.value = currentUser.value?.profileImageUrl as string;
// if (infoDrawerEmployeeEdit.value && infoEmployeePersonCard.value)
// infoEmployeePersonCard.value[0].img = profileUrl.value as string;
});
element.addEventListener('change', () => {
profileFileImg.value = element.files?.[0] || null;
if (profileFileImg.value) {
reader.readAsDataURL(profileFileImg.value);
}
});
return element;
})();
// const inputFile = document.createElement('input');
// inputFile.type = 'file';
// inputFile.accept = 'image/*';
@ -317,23 +290,18 @@ const columns = [
},
] satisfies QTableProps['columns'];
reader.addEventListener('load', () => {
if (typeof reader.result === 'string') {
urlProfile.value = reader.result;
}
// reader.addEventListener('load', () => {
// if (typeof reader.result === 'string') {
// urlProfile.value = reader.result;
// }
if (infoDrawerEdit.value) infoPersonCard.value[0].img = urlProfile.value;
});
// if (infoDrawerEdit.value) infoPersonCard.value[0].img = urlProfile.value;
// });
watch(profileFileImg, () => {
if (profileFileImg.value) reader.readAsDataURL(profileFileImg.value);
});
inputFileImg.addEventListener('change', (e) => {
profileFileImg.value =
(e.currentTarget as HTMLInputElement).files?.[0] || null;
});
const selectorList = computed(() => [
{ label: 'USER', count: typeStats.value?.USER || 0 },
{ label: 'MESSENGER', count: typeStats.value?.MESSENGER || 0 },
@ -427,7 +395,7 @@ function onClose() {
brId.value = '';
userId.value = '';
userCode.value = '';
urlProfile.value = undefined;
urlProfile.value = '';
profileFileImg.value = null;
infoDrawerEdit.value = false;
agencyFile.value = [];
@ -441,7 +409,6 @@ function onClose() {
mapUserType(selectorLabel.value);
flowStore.rotate();
}
async function onSubmit() {
if (profileSubmit.value) {
formData.value.profileImage = profileFileImg.value as File;
@ -1171,7 +1138,7 @@ watch(
<q-img
class="text-center"
:ratio="1"
:src="`${apiBaseUrl}/user/${props.row.id}/image`"
:src="`${apiBaseUrl}/user/${props.row.id}/image?ts=${Date.now()}`"
>
<template #error>
<div
@ -1650,7 +1617,7 @@ watch(
:menu="formMenuIcon"
:readonly="!infoDrawerEdit"
:toggleTitle="$t('formDialogTitleUserStatus')"
:title="`${formData.firstName} ${formData.lastName}`"
:title="`${$i18n.locale === 'en-US' ? `${formData.firstNameEN} ${formData.lastNameEN}` : `${formData.firstName} ${formData.lastName}`}`"
:caption="userCode"
:img="
urlProfile ||
@ -1659,8 +1626,14 @@ watch(
female: '/no-img-female.png',
}[formData.gender]
"
:fallbackImg="
{
male: '/no-img-man.png',
female: '/no-img-female.png',
}[formData.gender]
"
@view="openImageDialog"
@edit="inputFileImg.click()"
@edit="refImageUpload && refImageUpload.browse()"
@update:toggle-status="
async (v) => {
await triggerChangeStatus(infoPersonId, v);
@ -1871,9 +1844,21 @@ watch(
bgColor="linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)"
v-model:toggle-status="formData.status"
:menu="formMenuIcon"
:img="urlProfile || undefined"
:img="
urlProfile ||
{
male: '/no-img-man.png',
female: '/no-img-female.png',
}[formData.gender]
"
:toggleTitle="$t('formDialogTitleUserStatus')"
:title="`${formData.firstName} ${formData.lastName}`"
:title="`${$i18n.locale === 'en-US' ? `${formData.firstNameEN} ${formData.lastNameEN}` : `${formData.firstName} ${formData.lastName}`}`"
:fallbackImg="
{
male: '/no-img-man.png',
female: '/no-img-female.png',
}[formData.gender]
"
hideFade
@view="imageDialog = true"
@edit="refImageUpload && refImageUpload.browse()"
@ -1885,16 +1870,6 @@ watch(
"
/>
</div>
<!-- <template #prepend>
<ProfileUpload
prefix-id="form-dialog-personnel"
v-model:url-profile="urlProfile"
v-model:status-toggle="statusToggle"
v-model:profile-submit="profileSubmit"
@input-file="inputFileImg.click()"
@cancel-file="inputFileImg.value = ''"
/>
</template> -->
<div
class="col surface-1 q-ma-lg rounded bordered row relative-position"
@ -2015,12 +1990,12 @@ watch(
</div>
</DialogForm>
<!-- :default-url="`${baseUrl}/user/${currentUser?.id}/image`" -->
<ImageUploadDialog
ref="refImageUpload"
v-model:dialogState="imageDialog"
v-model:file="profileFileImg"
v-model:image-url="urlProfile"
:default-url="`${baseUrl}/user/${currentUser?.id}/image`"
:hiddenFooter="!isImageEdit"
:changeDisabled="!isImageEdit"
@save="imageDialog = false"