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

Squashed commit of the following:

Browse source 
commit eb6c7b164a9f182f8d1ce73cc5354866c6d6b10e
Author: puriphatt <puriphat@frappet.com>
Date:   Wed Sep 11 11:29:44 2024 +0700

    refactor: no img close to default on create

commit eae9eb26071cc2985624bb1c6ce551bf5eb6eb8b
Author: puriphatt <puriphat@frappet.com>
Date:   Wed Sep 11 11:04:04 2024 +0700

    refactor/feat: save => apply, disabled selected img, no img close to default

commit ccbf80fc53db3144873c049bd6dbd37b4e2e9ff3
Author: puriphatt <puriphat@frappet.com>
Date:   Wed Sep 11 09:31:32 2024 +0700

    fix(01): use submit function

commit 36b4f6ca15e5966f37dfefc9fdb744feec60dd27
Author: puriphatt <puriphat@frappet.com>
Date:   Tue Sep 10 17:45:19 2024 +0700

    fix: imgList error

commit bac0eaf3ab955672ae0c78d3295b4a839827c5f2
Author: puriphatt <puriphat@frappet.com>
Date:   Tue Sep 10 17:18:03 2024 +0700

    refactor(03): customer new upload img dialog

commit 9d7398e9613a738c33e265482cdb7d7bb250ea9f
Author: puriphatt <puriphat@frappet.com>
Date:   Tue Sep 10 15:40:39 2024 +0700

    refactor(02): new upload dialog

commit 8b91d43f41eae3ba2442f6c742d617c25ee180cb
Author: puriphatt <puriphat@frappet.com>
Date:   Tue Sep 10 15:25:21 2024 +0700

    refactor(01): new upload dialog, confirm remove, individual action

commit 61caf1919168bc5635568d7ca246574fdc43cd04
Author: puriphatt <puriphat@frappet.com>
Date:   Mon Sep 9 17:08:42 2024 +0700

    refactor(01): branch new img upload

commit e791b7316d001d839c8afb1950f7331c62d9e81a
Author: puriphatt <puriphat@frappet.com>
Date:   Mon Sep 9 17:08:42 2024 +0700

    refactor(02): personnel new img upload

commit af4d11312b9cb666338901efa9971117cb7738c4
Author: puriphatt <puriphat@frappet.com>
Date:   Mon Sep 9 17:08:42 2024 +0700

    feat(02): new image upload

commit e4d7afdb8c74d65a550644f2c60f70909d51d4a8
Author: puriphatt <puriphat@frappet.com>
Date:   Mon Sep 9 17:08:41 2024 +0700

    refactor: mock select image function

commit 5ab3f045b9c7d2c821920c12114da15eed09655a
Author: puriphatt <puriphat@frappet.com>
Date:   Mon Sep 9 17:08:41 2024 +0700

    refactor: mock new image preview
This commit is contained in:
puriphatt 2024-09-11 16:43:41 +07:00
parent ab0b3bb4f3
commit 62fc7055dd
13 changed files with 925 additions and 254 deletions
Download patch file Download diff file Expand all files Collapse all files

176
src/pages/01_branch-management/MainPage.vue
View file

@ -47,7 +47,6 @@ import {
UndoButton,
} from 'components/button';
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
const $q = useQuasar();
const { t } = useI18n();
const utilsStore = useUtilsStore();
@ -160,12 +159,18 @@ const refQrCodeUpload = ref();
const refImageUpload = ref();
const isImageEdit = ref(false);
const isQrCodeEdit = ref(false);
const profileFile = ref<File | undefined>(undefined);
const profileFile = ref<File | null>(null);
const qrCodeFile = ref<File | undefined>(undefined);
const imageUrl = ref<string>('');
const prevImageUrl = ref<string>('');
const currentNode = ref<BranchWithChildren>();
const imageDialog = ref(false);
const refreshImageState = ref(false);
const imageList = ref<{ selectedImage: string; list: string[] }>();
const onCreateImageList = ref<{
selectedImage: string;
list: { url: string; imgFile: File | null; name: string }[];
}>({ selectedImage: '', list: [] });
const qrCodeDialog = ref(false);
const qrCodeimageUrl = ref<string>('');
@ -335,6 +340,7 @@ const defaultFormData = {
lineId: '',
webUrl: '',
virtual: false,
selectedImage: '',
};
const formDialogRef = ref();
@ -350,11 +356,11 @@ const currentEdit = ref<{ id: string; code: string }>({
code: '',
});
const formData = ref<
Omit<BranchCreate & { codeHeadOffice?: string }, 'qrCodeImage' | 'imageUrl'>
Omit<BranchCreate & { codeHeadOffice?: string }, 'qrCodeImage'>
>(structuredClone(defaultFormData));
const prevFormData = ref<
Omit<BranchCreate & { codeHeadOffice?: string }, 'qrCodeImage' | 'imageUrl'>
Omit<BranchCreate & { codeHeadOffice?: string }, 'qrCodeImage'>
>(structuredClone(defaultFormData));
const modalDrawer = ref<boolean>(false);
@ -383,8 +389,8 @@ async function selectedSubBranche(id: string) {
async function fetchBranchById(id: string) {
const res = await branchStore.fetchById(id, { includeContact: true });
if (res) {
qrCodeimageUrl.value = `${apiBaseUrl}/branch/${res.id}/line-image?ts=${Date.now()}`;
imageUrl.value = `${apiBaseUrl}/branch/${res.id}/branch-image`;
qrCodeimageUrl.value = `${baseUrl}/branch/${res.id}/image?ts=${Date.now()}`;
imageUrl.value = `${baseUrl}/branch/${res.id}/image/${res.selectedImage}`;
prevImageUrl.value = res.imageUrl;
formBankBook.value = res.bank;
@ -417,6 +423,7 @@ async function fetchBranchById(id: string) {
status: res.status,
webUrl: res.webUrl,
virtual: res.virtual,
selectedImage: res.selectedImage,
};
}
}
@ -447,8 +454,9 @@ async function undo() {
isQrCodeEdit.value = false;
isImageEdit.value = false;
formType.value = 'view';
imageUrl.value = prevImageUrl.value;
formData.value = prevFormData.value;
const tempSelectedImage = formData.value.selectedImage;
formData.value = JSON.parse(JSON.stringify(prevFormData.value));
formData.value.selectedImage = tempSelectedImage;
}
watch(expandedTree, async () => {
@ -501,9 +509,7 @@ function drawerEdit() {
isQrCodeEdit.value = true;
isImageEdit.value = true;
formType.value = 'edit';
prevFormData.value = {
...formData.value,
};
prevFormData.value = JSON.parse(JSON.stringify(formData.value));
}
const currentBranchAdmin = ref<User | null>(null);
@ -514,6 +520,8 @@ async function triggerEdit(
code?: string,
) {
await fetchBranchById(id);
await fetchImageList(id, formData.value.selectedImage || '');
if (openFormType === 'form') {
formType.value = 'edit';
openDialog();
@ -675,12 +683,12 @@ async function triggerChangeStatus(
});
}
async function onSubmit() {
if (formType.value === 'edit') {
async function onSubmit(submitSelectedItem?: boolean) {
if (formType.value === 'edit' || submitSelectedItem) {
delete formData.value['codeHeadOffice'];
delete formData.value['code'];
await branchStore.editById(
const res = await branchStore.editById(
currentEdit.value.id,
{
...formData.value,
@ -695,8 +703,12 @@ async function onSubmit() {
},
);
formData.value.codeHeadOffice = formData.value.code = res.code;
imageUrl.value = `${baseUrl}/branch/${res.id}/image/${res.selectedImage}`;
await fetchList({ pageSize: 99999 });
if (!imageDialog.value) modalDrawer.value = false;
if (!imageDialog.value) modalDrawer.value = submitSelectedItem || false;
modal.value = false;
}
@ -709,6 +721,7 @@ async function onSubmit() {
imageUrl: profileFile.value,
},
formBankBook.value,
onCreateImageList.value,
);
await fetchList({ pageSize: 99999 });
@ -801,6 +814,15 @@ function handleHold(node: BranchWithChildren) {
// };
}
async function fetchImageList(id: string, selectedName: string) {
const res = await branchStore.fetchImageListById(id);
imageList.value = {
selectedImage: selectedName,
list: res.map((n: string) => `branch/${id}/image/${n}`),
};
return res;
}
watch(
() => profileFile.value,
() => {
@ -1291,7 +1313,11 @@ watch(currentHq, () => {
:ratio="1"
:src="
baseUrl +
`/branch/${props.row.id}/branch-image?ts=${Date.now()}`
`/branch/${props.row.id}/image/${props.row.selectedImage}`.concat(
refreshImageState
? `?ts=${Date.now()}`
: '',
)
"
>
<template #error>
@ -1392,6 +1418,7 @@ watch(currentHq, () => {
'subBranch',
);
}
await drawerEdit();
formType = 'edit';
}
"
@ -1465,7 +1492,7 @@ watch(currentHq, () => {
$i18n.locale === 'eng'
? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
: `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
branchImgUrl: `/branch/${props.row.id}/branch-image`,
branchImgUrl: `/branch/${props.row.id}/branch`,
}"
:field-selected="fieldSelected"
:badge-field="['branchLabelStatus']"
@ -1517,6 +1544,7 @@ watch(currentHq, () => {
'subBranch',
);
}
await drawerEdit();
formType = 'edit';
}
"
@ -1556,13 +1584,15 @@ watch(currentHq, () => {
}
"
:close="
() => (
(formLastSubBranch = 0),
(modal = false),
(profileFile = undefined),
(isImageEdit = false),
(isSubCreate = false)
)
() => {
formLastSubBranch = 0;
modal = false;
profileFile = null;
isImageEdit = false;
isSubCreate = false;
imageList = { selectedImage: '', list: [] };
onCreateImageList = { selectedImage: '', list: [] };
}
"
>
<div class="q-mx-lg q-mt-lg">
@ -1604,8 +1634,13 @@ watch(currentHq, () => {
: '--violet-11'
}-hsl)/${imageUrl ? '0' : '0.15'})`"
:menu="formMenuIcon"
@view="imageDialog = true"
@edit="refImageUpload && refImageUpload.browse()"
@view="
() => {
imageDialog = true;
isImageEdit = false;
}
"
@edit="imageDialog = isImageEdit = true"
@update:toggle-status="
() => {
formData.status =
@ -1769,21 +1804,18 @@ watch(currentHq, () => {
<DrawerInfo
ref="formDialogRef"
v-model:drawer-open="modalDrawer"
:submit="() => onSubmit()"
:category="changeTitle(formType, formTypeBranch)"
:title="$i18n.locale === 'eng' ? formData.nameEN : formData.name"
:address-separator="true"
:undo="() => undo()"
:is-edit="formType === 'edit'"
:edit-data="() => drawerEdit()"
:submit="() => onSubmit()"
:delete-data="() => triggerDelete(currentEdit.id)"
:close="
() => (
(modalDrawer = false),
flowStore.rotate(),
(isImageEdit = false),
resetScrollBar('branch-info')
)
() => {
modalDrawer = false;
isImageEdit = false;
imageList = { selectedImage: '', list: [] };
onCreateImageList = { selectedImage: '', list: [] };
flowStore.rotate();
resetScrollBar('branch-info');
}
"
:statusBranch="formData.status"
hide-action
@ -1796,8 +1828,11 @@ watch(currentHq, () => {
v-model:cover-url="imageUrl"
:toggleTitle="$t('status.title')"
:hideFade="imageUrl === '' || imageUrl === null"
:img="imageUrl || null"
:cover="imageUrl || null"
:img="
`${baseUrl}/branch/${currentId}/image/${formData.selectedImage}`.concat(
refreshImageState ? `?ts=${Date.now()}` : '',
) || null
"
:title="formData.name"
:caption="formData.code"
icon="mdi-office-building-outline"
@ -1820,10 +1855,15 @@ watch(currentHq, () => {
: $q.dark.isActive
? '--violet-10'
: '--violet-11'
}-hsl)/${imageUrl ? '0' : '0.15'})`"
}-hsl)/${imageUrl ? '0' : '0.1'})`"
v-model:toggle-status="formData.status"
@view="imageDialog = true"
@edit="refImageUpload && refImageUpload.browse()"
@view="
() => {
imageDialog = true;
isImageEdit = false;
}
"
@edit="imageDialog = isImageEdit = true"
@update:toggle-status="
async (v) => {
const res = await triggerChangeStatus(currentId, v);
@ -1836,7 +1876,6 @@ watch(currentHq, () => {
await fetchList({ pageSize: 99999 });
}
"
:readonly="formType === 'view'"
:menu="formMenuIcon"
/>
</div>
@ -2200,12 +2239,53 @@ watch(currentHq, () => {
<ImageUploadDialog
ref="refImageUpload"
v-model:dialogState="imageDialog"
v-model:file="profileFile as File"
v-model:file="profileFile"
v-model:image-url="imageUrl"
:hiddenFooter="!isImageEdit && !modal"
@save="imageDialog = false"
clearButton
v-model:data-list="imageList"
v-model:on-create-data-list="onCreateImageList"
:on-create="modal"
:hiddenFooter="!isImageEdit"
@add-image="
async (v) => {
if (!v) return;
if (!currentId) return;
await branchStore.addImageList(v, currentId, Date.now());
await fetchImageList(currentId, formData.selectedImage || '');
}
"
@remove-image="
async (v) => {
if (!v) return;
if (!currentId) return;
const name = v.split('/').pop() || '';
await branchStore.deleteImageByName(currentId, name);
await fetchImageList(currentId, name);
}
"
@submit="
async (v) => {
if (modal) {
imageUrl = v;
imageDialog = false;
} else {
refreshImageState = true;
formData.selectedImage = v;
imageList ? (imageList.selectedImage = v) : '';
imageUrl = `${baseUrl}/branch/${currentId && currentId}/image/${v}`;
await onSubmit(true);
imageDialog = false;
refreshImageState = false;
}
}
"
>
<template #title>
<span v-if="!modal" class="justify-center flex text-bold">
{{ $t('general.image') }}
{{ changeTitle(formType, formTypeBranch) }}
{{ $i18n.locale === 'eng' ? formData.nameEN : formData.name }}
</span>
</template>
<template #error>
<div class="full-height full-width" style="background: white">
<div