From 6ea964852b623e4812eb20989dbcd88f0bb7f758 Mon Sep 17 00:00:00 2001 From: puriphatt Date: Thu, 5 Sep 2024 15:25:35 +0700 Subject: [PATCH] feat(01): bank qr code --- .../01_branch-management/FormBank.vue | 367 +++++++++++------- src/components/button/ToggleButton.vue | 2 +- src/pages/01_branch-management/MainPage.vue | 7 +- src/stores/branch/index.ts | 45 ++- src/stores/branch/types.ts | 3 + 5 files changed, 273 insertions(+), 151 deletions(-) diff --git a/src/components/01_branch-management/FormBank.vue b/src/components/01_branch-management/FormBank.vue index 69fb2fbf..7eca3986 100644 --- a/src/components/01_branch-management/FormBank.vue +++ b/src/components/01_branch-management/FormBank.vue @@ -11,6 +11,23 @@ import ToggleButton from '../button/ToggleButton.vue'; const optionStore = useOptionStore(); const bankBookList = defineModel('bankBookList', { default: [] }); +const baseUrl = ref(import.meta.env.VITE_API_BASE_URL); + +const bankQrUrl = ref([]); +const listIndex = ref(0); + +const reader = new FileReader(); +const inputFile = (() => { + const _element = document.createElement('input'); + _element.type = 'file'; + _element.accept = 'image/*'; + _element.addEventListener('change', change); + return _element; +})(); +reader.addEventListener('load', () => { + if (typeof reader.result === 'string') + bankQrUrl.value[listIndex.value] = reader.result; +}); defineProps<{ title?: string; @@ -43,6 +60,15 @@ function addBankBook() { }); } +function change(e: Event) { + const _element = e.target as HTMLInputElement | null; + const _file = _element?.files?.[0]; + if (_file) { + bankBookList.value[listIndex.value].bankQr = _file; + reader.readAsDataURL(_file); + } +} + onMounted(() => { if (optionStore.globalOption) { bankBoookFilter = selectFilterOptionRefMod( @@ -99,7 +125,7 @@ watch(
@@ -129,140 +155,159 @@ watch( v-if="bankBookList.length !== 1 && !readonly" id="btn-delete-bank" icon-only - @click="deleteItem(bankBookList, i)" + @click=" + () => { + deleteItem(bankBookList, i); + bankQrUrl[i] = ''; + } + " />
- - - - - - - - - - - - + +
+
+ + + + + + + + + + - + + + + +
+
+ diff --git a/src/components/button/ToggleButton.vue b/src/components/button/ToggleButton.vue index a95669c9..03530bb7 100644 --- a/src/components/button/ToggleButton.vue +++ b/src/components/button/ToggleButton.vue @@ -67,7 +67,7 @@ input:checked + .slider { background-color: hsl(var(--positive-bg)); &.disable { - background-color: var(--stone-4); + // background-color: var(--stone-4); } } diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue index 0fd26030..3b63929f 100644 --- a/src/pages/01_branch-management/MainPage.vue +++ b/src/pages/01_branch-management/MainPage.vue @@ -345,12 +345,7 @@ async function fetchBranchById(id: string) { qrCodeimageUrl.value = `${apiBaseUrl}/branch/${res.id}/line-image`; imageUrl.value = `${apiBaseUrl}/branch/${res.id}/branch-image`; prevImageUrl.value = res.imageUrl; - - const updatedBank = res.bank.map((item) => { - const { id: _id, branchId: _branchId, ...rest } = item; - return rest; - }); - formBankBook.value = updatedBank; + formBankBook.value = res.bank; formData.value = { code: res.code, diff --git a/src/stores/branch/index.ts b/src/stores/branch/index.ts index d3fe3263..990cb0eb 100644 --- a/src/stores/branch/index.ts +++ b/src/stores/branch/index.ts @@ -89,10 +89,13 @@ const useBranchStore = defineStore('api-branch', () => { async function create(branch: BranchCreate, bank?: BankBook[]) { const { qrCodeImage, imageUrl, ...payload } = branch; + const bankPayload = bank?.map(({ bankQr, ...rest }) => ({ + ...rest, + })); const res = await api.post( '/branch', - { ...payload, bank: bank }, + { ...payload, bank: bankPayload }, { headers: { 'X-Rtid': flowStore.rtid } }, ); @@ -114,6 +117,23 @@ const useBranchStore = defineStore('api-branch', () => { .catch((e) => console.error(e)); } + if (res.data.bank) { + for (let i = 0; i < bank?.length; i++) { + if (bank[i].bankQr) { + await api + .put( + `/branch/${res.data.id}/bank-qr/${res.data.bank[i].id}`, + bank[i].bankQr, + { + headers: { 'Content-Type': bank[i].bankQr.type }, + onUploadProgress: (e) => console.log(e), + }, + ) + .catch((e) => console.error(e)); + } + } + } + if (!res) return false; return res.data; @@ -127,9 +147,13 @@ const useBranchStore = defineStore('api-branch', () => { bank?: BankBook[], ) { const { ...payload } = data; + const bankPayload = bank?.map(({ branchId, bankQr, ...rest }) => ({ + ...rest, + })); + const res = await api.put( `/branch/${id}`, - { ...payload, bank: bank }, + { ...payload, bank: bankPayload }, { headers: { 'X-Rtid': flowStore.rtid }, }, @@ -153,6 +177,23 @@ const useBranchStore = defineStore('api-branch', () => { .catch((e) => console.error(e)); } + if (res.data.bank) { + for (let i = 0; i < bank?.length; i++) { + if (bank[i].bankQr) { + await api + .put( + `/branch/${res.data.id}/bank-qr/${res.data.bank[i].id}`, + bank[i].bankQr, + { + headers: { 'Content-Type': bank[i].bankQr.type }, + onUploadProgress: (e) => console.log(e), + }, + ) + .catch((e) => console.error(e)); + } + } + } + if (!res) return false; return res.data; diff --git a/src/stores/branch/types.ts b/src/stores/branch/types.ts index dd52e702..d68e9c0c 100644 --- a/src/stores/branch/types.ts +++ b/src/stores/branch/types.ts @@ -3,12 +3,15 @@ import { BranchContact } from '../branch-contact/types'; import { Status } from '../types'; export type BankBook = { + id?: string; bankName: string; accountNumber: string; bankBranch: string; accountName: string; accountType: string; currentlyUse: boolean; + bankQr?: File; + branchId?: string; }; export type Branch = {