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 2024-09-11 16:43:41 +07:00
parent ab0b3bb4f3
commit 62fc7055dd
13 changed files with 925 additions and 254 deletions

View file

@ -87,15 +87,80 @@ const useBranchStore = defineStore('api-branch', () => {
return false;
}
async function create(branch: BranchCreate, bank?: BankBook[]) {
const { qrCodeImage, imageUrl, zipCode, ...payload } = branch;
async function fetchImageListById(
id: string,
flow?: {
sessionId?: string;
refTransactionId?: string;
transactionId?: string;
},
) {
const res = await api.get(`/branch/${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, branchId: string, name: string) {
await api
.put(`/branch/${branchId}/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(`/branch/${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(
branch: BranchCreate,
bank?: BankBook[],
imgList?: {
selectedImage: string;
list: { url: string; imgFile: File | null; name: string }[];
},
) {
const { qrCodeImage, zipCode, ...payload } = branch;
const bankPayload = bank?.map(({ bankUrl, bankQr, ...rest }) => ({
...rest,
}));
const res = await api.post<Branch>(
'/branch',
{ ...payload, bank: bankPayload },
{
...payload,
selectedImage: (imgList && imgList.selectedImage) || '',
bank: bankPayload,
},
{ headers: { 'X-Rtid': flowStore.rtid } },
);
@ -108,15 +173,6 @@ const useBranchStore = defineStore('api-branch', () => {
.catch((e) => console.error(e));
}
if (imageUrl) {
await api
.put(`/branch/${res.data.id}/branch-image`, imageUrl, {
headers: { 'Content-Type': imageUrl.type },
onUploadProgress: (e) => console.log(e),
})
.catch((e) => console.error(e));
}
if (res.data.bank && bank) {
for (let i = 0; i < bank?.length; i++) {
if (bank[i].bankQr) {
@ -134,6 +190,14 @@ const useBranchStore = defineStore('api-branch', () => {
}
}
if (imgList && 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);
}
}
if (!res) return false;
return res.data;
@ -143,7 +207,6 @@ const useBranchStore = defineStore('api-branch', () => {
id: string,
data: Partial<BranchCreate & { status: 'ACTIVE' | 'INACTIVE' | 'CREATED' }>,
qrCodeImage?: File | undefined,
imageHq?: File | undefined,
bank?: BankBook[],
opts?: {
deleteQrCodeImage?: boolean;
@ -178,15 +241,6 @@ const useBranchStore = defineStore('api-branch', () => {
.catch((e) => console.error(e));
}
if (imageHq) {
await api
.put(`/branch/${res.data.id}/branch-image`, imageHq, {
headers: { 'Content-Type': imageHq.type },
onUploadProgress: (e) => console.log(e),
})
.catch((e) => console.error(e));
}
if (!!res.data.bank && !!bank) {
for (let i = 0; i < bank?.length; i++) {
if (bank?.[i].bankQr) {
@ -339,6 +393,10 @@ const useBranchStore = defineStore('api-branch', () => {
fetchList,
fetchById,
fetchImageListById,
addImageList,
deleteImageByName,
create,
editById,
deleteById,

View file

@ -16,6 +16,7 @@ export type BankBook = {
};
export type Branch = {
selectedImage?: string;
subDistrict: SubDistrict | null;
district: District | null;
province: Province | null;
@ -30,7 +31,6 @@ export type Branch = {
latitude: string;
contactName: string;
qrCodeImageUrl: string;
imageUrl: string;
email: string;
zipCode: string;
subDistrictId: string | null;
@ -57,6 +57,7 @@ export type Branch = {
export type BranchWithChildren = Branch & { branch: Branch[] };
export type BranchCreate = {
selectedImage?: string;
code?: string;
taxNo: string;
nameEN: string;
@ -76,7 +77,6 @@ export type BranchCreate = {
contactName: string;
contact: string;
qrCodeImage?: File;
imageUrl?: File;
lineId: string;
webUrl?: string;
virtual: boolean;

View file

@ -256,7 +256,7 @@ const useCustomerStore = defineStore('api-customer', () => {
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();
@ -267,8 +267,66 @@ const useCustomerStore = defineStore('api-customer', () => {
return res.data;
}
async function fetchImageListById(
id: string,
flow?: {
sessionId?: string;
refTransactionId?: string;
transactionId?: string;
},
) {
const res = await api.get(`/customer/${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(`/customer/${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(`/customer/${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: CustomerCreate,
imgList: {
selectedImage: string;
list: { url: string; imgFile: File | null; name: string }[];
},
flow?: {
sessionId?: string;
refTransactionId?: string;
@ -291,13 +349,17 @@ const useCustomerStore = defineStore('api-customer', () => {
imageUrl: string;
imageUploadUrl: string;
}
>('/customer', payload, {
headers: {
'X-Session-Id': flow?.sessionId,
'X-Rtid': flow?.refTransactionId || flowStore.rtid,
'X-Tid': flow?.transactionId,
>(
'/customer',
{ ...payload, selectedImage: imgList.selectedImage },
{
headers: {
'X-Session-Id': flow?.sessionId,
'X-Rtid': flow?.refTransactionId || flowStore.rtid,
'X-Tid': flow?.transactionId,
},
},
});
);
// await Promise.allSettled([
// ...res.data.branch.map(async (v, i) => {
@ -305,15 +367,23 @@ const useCustomerStore = defineStore('api-customer', () => {
// if (fileList)
// return await addBranchAttachment(v.id, { file: fileList });
// }),
image &&
(await api
.put(`/customer/${res.data.id}/image`, image, {
headers: { 'Content-Type': image?.type },
onUploadProgress: (e) => console.log(e),
})
.catch((e) => console.error(e)));
// image &&
// (await api
// .put(`/customer/${res.data.id}/image`, image, {
// headers: { 'Content-Type': image?.type },
// onUploadProgress: (e) => console.log(e),
// })
// .catch((e) => console.error(e)));
// ]);
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);
}
}
if (!res) return false;
return res.data;
@ -362,13 +432,13 @@ const useCustomerStore = defineStore('api-customer', () => {
// if (fileList)
// return await addBranchAttachment(v.id, { file: fileList });
// }),
image &&
(await axios
.put(res.data.imageUploadUrl, image, {
headers: { 'Content-Type': image.type },
onUploadProgress: (e) => console.log(e),
})
.catch((e) => console.error(e)));
// image &&
// (await axios
// .put(res.data.imageUploadUrl, image, {
// headers: { 'Content-Type': image.type },
// onUploadProgress: (e) => console.log(e),
// })
// .catch((e) => console.error(e)));
// ]);
if (!res) return false;
@ -563,6 +633,11 @@ const useCustomerStore = defineStore('api-customer', () => {
fetchListCustomeBranch,
fetchById,
fetchList,
fetchImageListById,
addImageList,
deleteImageByName,
create,
editById,
deleteById,

View file

@ -150,6 +150,7 @@ export type CustomerBranchCreate = {
};
export type CustomerCreate = {
selectedImage?: string;
code: string;
customerBranch?: (CustomerBranchCreate & { id?: string })[];
customerType: CustomerType;
@ -166,6 +167,7 @@ export type CustomerCreate = {
};
export type CustomerUpdate = {
selectedImage?: string;
status?: Status;
customerType?: CustomerType;
customerBranch?: (CustomerBranchCreate & { id?: string })[];

View file

@ -2,6 +2,7 @@ import { ref } from 'vue';
import { defineStore } from 'pinia';
import { Pagination, Status } from '../types';
import { api } from 'src/boot/axios';
import {
RoleData,
User,
@ -266,18 +267,83 @@ const useUserStore = defineStore('api-user', () => {
return false;
}
async function create(
data: UserCreate,
async function fetchImageListById(
id: string,
flow?: {
sessionId?: string;
refTransactionId?: string;
transactionId?: string;
},
) {
<<<<<<< HEAD
const { profileImage, zipCode, ...payload } = data;
const res = await api.post<User & { profileImageUploadUrl: string }>(
=======
const res = await api.get(`/user/${id}/profile-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, userId: string, name: string) {
await api
.put(`/user/${userId}/profile-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(`/user/${id}/profile-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: UserCreate,
imgList: {
selectedImage: string;
list: { url: string; imgFile: File | null; name: string }[];
},
flow?: {
sessionId?: string;
refTransactionId?: string;
transactionId?: string;
},
) {
const { zipCode, ...payload } = data;
const res = await api.post<User & { profileImageUploadUrl: string }>(
'/user',
payload,
{
...payload,
selectedImage: imgList.selectedImage || '',
},
{
headers: {
'X-Session-Id': flow?.sessionId,
@ -287,13 +353,12 @@ const useUserStore = defineStore('api-user', () => {
},
);
if (profileImage && res.data.id) {
await api
.put(`/user/${res.data.id}/image`, profileImage, {
headers: { 'Content-Type': profileImage.type },
onUploadProgress: (e) => console.log(e),
})
.catch((e) => console.error(e));
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);
}
}
if (!res) return false;
@ -310,26 +375,13 @@ const useUserStore = defineStore('api-user', () => {
transactionId?: string;
},
) {
const { profileImage, ...payload } = data;
const res = await api.put<User & { profileImageUploadUrl: string }>(
`/user/${id}`,
payload,
{
headers: {
'X-Session-Id': flow?.sessionId,
'X-Rtid': flow?.refTransactionId || flowStore.rtid,
'X-Tid': flow?.transactionId,
},
const res = await api.put<User>(`/user/${id}`, data, {
headers: {
'X-Session-Id': flow?.sessionId,
'X-Rtid': flow?.refTransactionId || flowStore.rtid,
'X-Tid': flow?.transactionId,
},
);
if (profileImage)
await axios
.put(res.data.profileImageUploadUrl, profileImage, {
headers: { 'Content-Type': profileImage.type },
onUploadProgress: (e) => console.log(e),
})
.catch((e) => console.error(e));
});
if (!res) return false;
@ -460,6 +512,10 @@ const useUserStore = defineStore('api-user', () => {
fetchList,
fetchById,
fetchImageListById,
addImageList,
deleteImageByName,
create,
editById,
deleteById,

View file

@ -3,6 +3,7 @@ import { Branch } from '../branch/types';
import { Status } from '../types';
export type User = {
selectedImage?: string;
subDistrict: SubDistrict | null;
district: District | null;
province: Province | null;
@ -41,7 +42,6 @@ export type User = {
firstName: string;
namePrefix?: string | null;
id: string;
profileImageUrl: string;
code: string;
birthDate?: Date | null;
responsibleArea: string;
@ -51,6 +51,7 @@ export type User = {
};
export type UserCreate = {
selectedImage?: string;
branchId: string;
provinceId?: string | null;
districtId?: string | null;
@ -82,7 +83,6 @@ export type UserCreate = {
userType: string;
username: string;
status?: Status;
profileImage?: File | null; // required but not strict
birthDate?: Date | null;
responsibleArea?: string | null;
checkpoint?: string | null;