feat(01): bank qr code

src/components/01_branch-management/FormBank.vue

@@ -11,6 +11,23 @@ import ToggleButton from '../button/ToggleButton.vue';
 const optionStore = useOptionStore();
 
 const bankBookList = defineModel<BankBook[]>('bankBookList', { default: [] });
+const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
+
+const bankQrUrl = ref<string[]>([]);
+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(
 
     <div
       v-for="(book, i) in bankBookList"
-      class="col-12 row q-col-gutter-sm"
+      class="col-12 row"
       :class="{ 'q-pt-lg': i !== 0 }"
       :key="i"
     >
@@ -129,10 +155,62 @@ watch(
             v-if="bankBookList.length !== 1 && !readonly"
             id="btn-delete-bank"
             icon-only
-            @click="deleteItem(bankBookList, i)"
+            @click="
+              () => {
+                deleteItem(bankBookList, i);
+                bankQrUrl[i] = '';
+              }
+            "
           />
         </div>
       </span>
+
+      <div
+        class="bordered q-mr-sm rounded"
+        :class="{ 'cursor-pointer': !readonly }"
+        style="width: 12vw; height: 12vw; overflow: hidden"
+        @click="
+          () => {
+            readonly ? '' : inputFile?.click(), (listIndex = i);
+          }
+        "
+      >
+        <q-img v-if="bankQrUrl[i]" fit="cover" :ratio="1" :src="bankQrUrl[i]" />
+        <q-img
+          v-else
+          fit="cover"
+          :ratio="1"
+          :src="baseUrl + `/branch/${book.branchId}/bank-qr/${book.id}`"
+        >
+          <template #error>
+            <span
+              class="full-width full-height column items-center justify-center app-text-muted"
+            >
+              <q-icon name="mdi-qrcode" size="4vw" />
+              <span class="q-mt-sm">{{ $t('general.upload') }} QR code</span>
+            </span>
+          </template>
+        </q-img>
+
+        <!-- <q-img v-if="bankQrUrl[i]" fit="cover" :src="bankQrUrl[i]">
+          <template #error>
+            <div class="full-width full-height">
+              <q-icon name="mdi-qrcode" size="4vw" />
+              <span class="q-mt-sm">{{ $t('general.upload') }} QR code</span>
+            </div>
+          </template>
+        </q-img>
+
+        <div
+          v-else
+          class="full-width full-height column items-center justify-center app-text-muted bank-qr"
+        >
+          <q-icon name="mdi-qrcode" size="4vw" />
+          <span class="q-mt-sm">{{ $t('general.upload') }} QR code</span>
+        </div> -->
+      </div>
+      <div class="col">
+        <div class="row q-col-gutter-sm">
           <q-select
             outlined
             clearable
@@ -200,6 +278,22 @@ watch(
               </q-item>
             </template>
           </q-select>
+          <q-input
+            outlined
+            for="input-bankbook"
+            class="col-12 col-md-4"
+            hide-bottom-space
+            :dense="dense"
+            :readonly="readonly"
+            :label="$t('branch.form.bankAccountNumber')"
+            :maxlength="13"
+            :model-value="
+              readonly ? book.accountNumber || '-' : book.accountNumber
+            "
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (book.accountNumber = v) : '')
+            "
+          />
           <q-input
             outlined
             for="input-bankbook"
@@ -213,6 +307,27 @@ watch(
               (v) => (typeof v === 'string' ? (book.bankBranch = v) : '')
             "
           />
+          <!--         :rules="[
+          (val: string) =>
+            (val.length >= 7 && val.length <= 13) ||
+            $t('form.error.please', {
+              msg: $t('branch.form.bankAccountNumber'),
+            }),
+        ]" -->
+
+          <q-input
+            outlined
+            for="input-bankbook"
+            class="col-12 col-md-4"
+            hide-bottom-space
+            :dense="dense"
+            :readonly="readonly"
+            :label="$t('branch.form.bankAccountName')"
+            :model-value="readonly ? book.accountName || '-' : book.accountName"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (book.accountName = v) : '')
+            "
+          />
           <q-select
             outlined
             clearable
@@ -248,41 +363,9 @@ watch(
               </q-item>
             </template>
           </q-select>
-      <q-input
+        </div>
-        outlined
+      </div>
-        for="input-bankbook"
-        class="col-12 col-md-4"
-        hide-bottom-space
-        :dense="dense"
-        :readonly="readonly"
-        :label="$t('branch.form.bankAccountNumber')"
-        :maxlength="13"
-        :model-value="readonly ? book.accountNumber || '-' : book.accountNumber"
-        @update:model-value="
-          (v) => (typeof v === 'string' ? (book.accountNumber = v) : '')
-        "
-      />
-      <!--         :rules="[
-          (val: string) =>
-            (val.length >= 7 && val.length <= 13) ||
-            $t('form.error.please', {
-              msg: $t('branch.form.bankAccountNumber'),
-            }),
-        ]" -->
-
-      <q-input
-        outlined
-        for="input-bankbook"
-        class="col-12 col-md-4"
-        hide-bottom-space
-        :dense="dense"
-        :readonly="readonly"
-        :label="$t('branch.form.bankAccountName')"
-        :model-value="readonly ? book.accountName || '-' : book.accountName"
-        @update:model-value="
-          (v) => (typeof v === 'string' ? (book.accountName = v) : '')
-        "
-      />
     </div>
   </div>
 </template>
+<style scoped lang="scss"></style>

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);
   }
 }
 

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;
-
+    formBankBook.value = res.bank;
-    const updatedBank = res.bank.map((item) => {
-      const { id: _id, branchId: _branchId, ...rest } = item;
-      return rest;
-    });
-    formBankBook.value = updatedBank;
 
     formData.value = {
       code: res.code,

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>(
       '/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>(
       `/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;

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 = {