Squashed commit of the following:
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
parent
ab0b3bb4f3
commit
62fc7055dd
13 changed files with 925 additions and 254 deletions
|
|
@ -178,6 +178,14 @@ const dialogCreateCustomerItem = [
|
|||
},
|
||||
];
|
||||
|
||||
// image
|
||||
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: [] });
|
||||
|
||||
watch(() => route.name, init);
|
||||
watch(
|
||||
[currentTab, currentStatus, inputSearch, customerTypeSelected],
|
||||
|
|
@ -475,6 +483,7 @@ async function openHistory(id: string) {
|
|||
async function editCustomerForm(id: string) {
|
||||
await customerFormStore.assignFormData(id);
|
||||
await fetchListOfOptionBranch();
|
||||
await fetchImageList(id, customerFormData.value.selectedImage || '');
|
||||
customerFormState.value.dialogType = 'edit';
|
||||
customerFormState.value.drawerModal = true;
|
||||
customerFormState.value.editCustomerId = id;
|
||||
|
|
@ -563,6 +572,15 @@ function returnCountryCode(country: string) {
|
|||
return tempValue?.value;
|
||||
}
|
||||
|
||||
async function fetchImageList(id: string, selectedName: string) {
|
||||
const res = await customerStore.fetchImageListById(id);
|
||||
imageList.value = {
|
||||
selectedImage: selectedName,
|
||||
list: res.map((n: string) => `customer/${id}/image/${n}`),
|
||||
};
|
||||
return res;
|
||||
}
|
||||
|
||||
// TODO: When in employee form, if select address same as customer then auto fill
|
||||
|
||||
watch(
|
||||
|
|
@ -705,6 +723,14 @@ watch(
|
|||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => customerFormData.value.image,
|
||||
() => {
|
||||
if (customerFormData.value.image !== null)
|
||||
customerFormState.value.isImageEdit = true;
|
||||
},
|
||||
);
|
||||
|
||||
const emptyCreateDialog = ref(false);
|
||||
</script>
|
||||
|
||||
|
|
@ -1161,7 +1187,7 @@ const emptyCreateDialog = ref(false);
|
|||
<div class="branch-card__icon">
|
||||
<q-avatar size="md">
|
||||
<q-img
|
||||
:src="`${baseUrl}/customer/${props.row.id}/image`"
|
||||
:src="`${baseUrl}/customer/${props.row.id}/image/${props.row.selectedImage}`"
|
||||
class="full-height full-width"
|
||||
>
|
||||
<template #error>
|
||||
|
|
@ -1371,7 +1397,7 @@ const emptyCreateDialog = ref(false);
|
|||
$i18n.locale === 'eng'
|
||||
? `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim()
|
||||
: `${props.row.firstName} ${props.row.lastName} `.trim(),
|
||||
img: `${baseUrl}/customer/${props.row.id}/image`,
|
||||
img: `${baseUrl}/customer/${props.row.id}/image/${props.row.selectedImage}`,
|
||||
fallbackImg: `/images/customer-${props.row.customerType}-avartar-${props.row.gender}.png`,
|
||||
male: undefined,
|
||||
female: undefined,
|
||||
|
|
@ -1750,8 +1776,15 @@ const emptyCreateDialog = ref(false);
|
|||
? 'mdi-account-plus-outline'
|
||||
: 'mdi-office-building-outline'
|
||||
"
|
||||
@view="customerFormState.imageDialog = true"
|
||||
@edit="dialogCustomerImageUpload?.browse()"
|
||||
@view="
|
||||
() => {
|
||||
customerFormState.imageDialog = true;
|
||||
customerFormState.isImageEdit = false;
|
||||
}
|
||||
"
|
||||
@edit="
|
||||
customerFormState.imageDialog = customerFormState.isImageEdit = true
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -1804,7 +1837,7 @@ const emptyCreateDialog = ref(false);
|
|||
<q-form
|
||||
@submit.prevent="
|
||||
async () => {
|
||||
await customerFormStore.submitFormCustomer();
|
||||
await customerFormStore.submitFormCustomer(onCreateImageList);
|
||||
customerFormState.readonly = true;
|
||||
notify('create', $t('general.success'));
|
||||
await fetchListCustomer();
|
||||
|
|
@ -2629,18 +2662,69 @@ const emptyCreateDialog = ref(false);
|
|||
v-model:dialog-state="customerFormState.imageDialog"
|
||||
v-model:file="customerFormData.image"
|
||||
v-model:image-url="customerFormState.customerImageUrl"
|
||||
v-model:data-list="imageList"
|
||||
v-model:on-create-data-list="onCreateImageList"
|
||||
:on-create="customerFormState.dialogModal"
|
||||
:default-url="customerFormState.defaultCustomerImageUrl"
|
||||
clear-button
|
||||
@save="
|
||||
:hiddenFooter="!customerFormState.isImageEdit"
|
||||
@add-image="
|
||||
async (v) => {
|
||||
if (v && customerFormState.editCustomerId) {
|
||||
await customerStore.setImage(customerFormState.editCustomerId, v);
|
||||
await fetchListCustomer();
|
||||
if (!v) return;
|
||||
if (!customerFormState.editCustomerId) return;
|
||||
await customerStore.addImageList(
|
||||
v,
|
||||
customerFormState.editCustomerId,
|
||||
Date.now(),
|
||||
);
|
||||
await fetchImageList(
|
||||
customerFormState.editCustomerId,
|
||||
customerFormData.selectedImage || '',
|
||||
);
|
||||
}
|
||||
"
|
||||
@remove-image="
|
||||
async (v) => {
|
||||
if (!v) return;
|
||||
if (!customerFormState.editCustomerId) return;
|
||||
const name = v.split('/').pop() || '';
|
||||
await customerStore.deleteImageByName(
|
||||
customerFormState.editCustomerId,
|
||||
name,
|
||||
);
|
||||
await fetchImageList(customerFormState.editCustomerId, name);
|
||||
}
|
||||
"
|
||||
@submit="
|
||||
async (v) => {
|
||||
if (customerFormState.dialogModal) {
|
||||
customerFormState.customerImageUrl = v;
|
||||
customerFormState.imageDialog = false;
|
||||
} else {
|
||||
refreshImageState = true;
|
||||
customerFormData.selectedImage = v;
|
||||
imageList ? (imageList.selectedImage = v) : '';
|
||||
customerFormState.customerImageUrl = `${baseUrl}/customer/${customerFormState.editCustomerId && customerFormState.editCustomerId}/image/${v}`;
|
||||
customerFormStore.resetForm();
|
||||
await customerFormStore.submitFormCustomer();
|
||||
customerFormState.imageDialog = false;
|
||||
refreshImageState = false;
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<template #title>
|
||||
<span
|
||||
v-if="!customerFormState.dialogModal"
|
||||
class="justify-center flex text-bold"
|
||||
>
|
||||
{{ $t('general.image') }}
|
||||
{{
|
||||
$i18n.locale === 'eng'
|
||||
? `${customerFormData.firstNameEN} ${customerFormData.lastNameEN}`
|
||||
: `${customerFormData.firstName} ${customerFormData.lastName}`
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
<template #error>
|
||||
<div class="full-height full-width" style="background: white">
|
||||
<div
|
||||
|
|
@ -2663,7 +2747,7 @@ const emptyCreateDialog = ref(false);
|
|||
class="full-width full-height column items-center justify-center"
|
||||
>
|
||||
<q-icon
|
||||
size="7vw"
|
||||
size="3rem"
|
||||
:name="
|
||||
customerFormData.customerType === 'PERS'
|
||||
? 'mdi-account-plus-outline'
|
||||
|
|
@ -2766,8 +2850,9 @@ const emptyCreateDialog = ref(false);
|
|||
hide-fade
|
||||
:fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
|
||||
:img="
|
||||
customerFormState.customerImageUrl ||
|
||||
`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.gender}.png`
|
||||
`${baseUrl}/customer/${customerFormState.editCustomerId}/image/${customerFormData.selectedImage}`.concat(
|
||||
refreshImageState ? `?ts=${Date.now()}` : '',
|
||||
) || null
|
||||
"
|
||||
:fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.gender}.png`"
|
||||
:color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
|
||||
|
|
@ -2777,8 +2862,15 @@ const emptyCreateDialog = ref(false);
|
|||
? 'mdi-account-plus-outline'
|
||||
: 'mdi-office-building-outline'
|
||||
"
|
||||
@view="customerFormState.imageDialog = true"
|
||||
@edit="dialogCustomerImageUpload?.browse()"
|
||||
@view="
|
||||
() => {
|
||||
customerFormState.imageDialog = true;
|
||||
customerFormState.isImageEdit = false;
|
||||
}
|
||||
"
|
||||
@edit="
|
||||
customerFormState.imageDialog = customerFormState.isImageEdit = true
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
registeredBranchId: branchStore.currentMyBranch?.id || '',
|
||||
customerBranch: [],
|
||||
image: null,
|
||||
selectedImage: '',
|
||||
};
|
||||
let resetFormData = structuredClone(defaultFormData);
|
||||
|
||||
|
|
@ -50,6 +51,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
editCustomerBranchId?: string;
|
||||
treeFile: { label: string; file: { label: string }[] }[];
|
||||
formDataOcr: Record<string, any>;
|
||||
isImageEdit: boolean;
|
||||
}>({
|
||||
dialogType: 'info',
|
||||
dialogOpen: false,
|
||||
|
|
@ -65,6 +67,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
defaultCustomerImageUrl: '',
|
||||
treeFile: [],
|
||||
formDataOcr: {},
|
||||
isImageEdit: false,
|
||||
});
|
||||
|
||||
watch(
|
||||
|
|
@ -110,8 +113,9 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
if (state.value.dialogType === 'create') {
|
||||
state.value.editCustomerId = '';
|
||||
}
|
||||
|
||||
const currentImg = currentFormData.value.selectedImage;
|
||||
currentFormData.value = structuredClone(resetFormData);
|
||||
currentFormData.value.selectedImage = currentImg;
|
||||
}
|
||||
|
||||
async function assignFormData(id?: string) {
|
||||
|
|
@ -129,8 +133,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`;
|
||||
state.value.defaultCustomerImageUrl = `${apiBaseUrl}/customer/${id}/image`;
|
||||
state.value.customerImageUrl = `${apiBaseUrl}/customer/${id}/image/${data.selectedImage}`;
|
||||
state.value.defaultCustomerImageUrl = `${apiBaseUrl}/customer/${id}/image/${data.selectedImage}`;
|
||||
|
||||
resetFormData.registeredBranchId = data.registeredBranchId;
|
||||
resetFormData.code = data.code || '';
|
||||
|
|
@ -144,6 +148,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
resetFormData.gender = data.gender;
|
||||
resetFormData.birthDate = new Date(data.birthDate);
|
||||
resetFormData.image = null;
|
||||
resetFormData.selectedImage = data.selectedImage;
|
||||
|
||||
resetFormData.customerBranch = await Promise.all(
|
||||
data.branch.map(async (v) => ({
|
||||
|
|
@ -259,11 +264,14 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
(currentFormData.value.customerBranch?.length || 0) - 1;
|
||||
}
|
||||
|
||||
async function submitFormCustomer() {
|
||||
async function submitFormCustomer(imgList?: {
|
||||
selectedImage: string;
|
||||
list: { url: string; imgFile: File | null; name: string }[];
|
||||
}) {
|
||||
if (state.value.dialogType === 'info') return;
|
||||
|
||||
if (state.value.dialogType === 'create') {
|
||||
const _data = await customerStore.create(currentFormData.value);
|
||||
const _data = await customerStore.create(currentFormData.value, imgList);
|
||||
|
||||
if (_data) await assignFormData(_data.id);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue