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,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] = '';
+              }
+            "
           />
         </div>
       </span>
-      <q-select
-        outlined
-        clearable
-        use-input
-        emit-value
-        fill-input
-        map-options
-        hide-bottom-space
-        option-value="value"
-        input-debounce="0"
-        option-label="label"
-        class="col-12 col-md-4"
-        autocomplete="off"
-        :dense="dense"
-        :label="$t('branch.form.bank')"
-        :options="bankBookOptions"
-        :readonly="readonly"
-        :hide-dropdown-icon="readonly"
-        for="select-bankbook"
-        :model-value="readonly ? book.bankName || '-' : book.bankName"
-        @update:model-value="
-          (v) => (typeof v === 'string' ? (book.bankName = v) : '')
-        "
-        @filter="bankBoookFilter"
-        @clear="book.bankName = ''"
-      >
-        <template v-slot:option="scope">
-          <q-item
-            v-if="scope.opt"
-            v-bind="scope.itemProps"
-            class="row items-center"
-          >
-            <q-item-section avatar>
-              <q-img
-                :src="`/img/bank/${scope.opt.value}.png`"
-                class="bordered"
-                style="border-radius: 50%"
-              />
-            </q-item-section>
-            <q-item-section>
-              {{ scope.opt.label }}
-            </q-item-section>
-          </q-item>
-        </template>
 
-        <template v-slot:selected-item="scope">
+      <div
-          <q-item-section
+        class="bordered q-mr-sm rounded"
-            v-if="scope.opt && book.bankName"
+        :class="{ 'cursor-pointer': !readonly }"
-            avatar
+        style="width: 12vw; height: 12vw; overflow: hidden"
-            class="q-py-sm"
+        @click="
-          >
+          () => {
-            <q-img
+            readonly ? '' : inputFile?.click(), (listIndex = i);
-              :src="`/img/bank/${scope.opt.value}.png`"
+          }
-              class="bordered"
-              style="border-radius: 50%"
-            />
-          </q-item-section>
-        </template>
-
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">
-              {{ $t('general.noData') }}
-            </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
-      <q-input
-        outlined
-        for="input-bankbook"
-        class="col-md-4 col-12"
-        hide-bottom-space
-        :dense="dense"
-        :readonly="readonly"
-        :label="$t('branch.form.bankBranch')"
-        :model-value="readonly ? book.bankBranch || '-' : book.bankBranch"
-        @update:model-value="
-          (v) => (typeof v === 'string' ? (book.bankBranch = v) : '')
         "
-      />
-      <q-select
-        outlined
-        clearable
-        use-input
-        fill-input
-        emit-value
-        map-options
-        hide-selected
-        hide-bottom-space
-        option-value="value"
-        input-debounce="0"
-        option-label="label"
-        class="col-12 col-md-4"
-        autocomplete="off"
-        :dense="dense"
-        :label="$t('branch.form.bankAccountType')"
-        :options="accountTypeOptions"
-        :readonly="readonly"
-        :hide-dropdown-icon="readonly"
-        for="select-bankbook"
-        :model-value="readonly ? book.accountType || '-' : book.accountType"
-        @update:model-value="
-          (v) => (typeof v === 'string' ? (book.accountType = v) : '')
-        "
-        @filter="accountTypeFilter"
-        @clear="book.accountType = ''"
       >
-        <template v-slot:no-option>
+        <q-img v-if="bankQrUrl[i]" fit="cover" :ratio="1" :src="bankQrUrl[i]" />
-          <q-item>
+        <q-img
-            <q-item-section class="text-grey">
+          v-else
-              {{ $t('general.noData') }}
+          fit="cover"
-            </q-item-section>
+          :ratio="1"
-          </q-item>
+          :src="baseUrl + `/branch/${book.branchId}/bank-qr/${book.id}`"
-        </template>
+        >
-      </q-select>
+          <template #error>
-      <q-input
+            <span
-        outlined
+              class="full-width full-height column items-center justify-center app-text-muted"
-        for="input-bankbook"
+            >
-        class="col-12 col-md-4"
+              <q-icon name="mdi-qrcode" size="4vw" />
-        hide-bottom-space
+              <span class="q-mt-sm">{{ $t('general.upload') }} QR code</span>
-        :dense="dense"
+            </span>
-        :readonly="readonly"
+          </template>
-        :label="$t('branch.form.bankAccountNumber')"
+        </q-img>
-        :maxlength="13"
+
-        :model-value="readonly ? book.accountNumber || '-' : book.accountNumber"
+        <!-- <q-img v-if="bankQrUrl[i]" fit="cover" :src="bankQrUrl[i]">
-        @update:model-value="
+          <template #error>
-          (v) => (typeof v === 'string' ? (book.accountNumber = v) : '')
+            <div class="full-width full-height">
-        "
+              <q-icon name="mdi-qrcode" size="4vw" />
-      />
+              <span class="q-mt-sm">{{ $t('general.upload') }} QR code</span>
-      <!--         :rules="[
+            </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
+            use-input
+            emit-value
+            fill-input
+            map-options
+            hide-bottom-space
+            option-value="value"
+            input-debounce="0"
+            option-label="label"
+            class="col-12 col-md-4"
+            autocomplete="off"
+            :dense="dense"
+            :label="$t('branch.form.bank')"
+            :options="bankBookOptions"
+            :readonly="readonly"
+            :hide-dropdown-icon="readonly"
+            for="select-bankbook"
+            :model-value="readonly ? book.bankName || '-' : book.bankName"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (book.bankName = v) : '')
+            "
+            @filter="bankBoookFilter"
+            @clear="book.bankName = ''"
+          >
+            <template v-slot:option="scope">
+              <q-item
+                v-if="scope.opt"
+                v-bind="scope.itemProps"
+                class="row items-center"
+              >
+                <q-item-section avatar>
+                  <q-img
+                    :src="`/img/bank/${scope.opt.value}.png`"
+                    class="bordered"
+                    style="border-radius: 50%"
+                  />
+                </q-item-section>
+                <q-item-section>
+                  {{ scope.opt.label }}
+                </q-item-section>
+              </q-item>
+            </template>
+
+            <template v-slot:selected-item="scope">
+              <q-item-section
+                v-if="scope.opt && book.bankName"
+                avatar
+                class="q-py-sm"
+              >
+                <q-img
+                  :src="`/img/bank/${scope.opt.value}.png`"
+                  class="bordered"
+                  style="border-radius: 50%"
+                />
+              </q-item-section>
+            </template>
+
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  {{ $t('general.noData') }}
+                </q-item-section>
+              </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"
+            class="col-md-4 col-12"
+            hide-bottom-space
+            :dense="dense"
+            :readonly="readonly"
+            :label="$t('branch.form.bankBranch')"
+            :model-value="readonly ? book.bankBranch || '-' : book.bankBranch"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (book.bankBranch = v) : '')
+            "
+          />
+          <!--         :rules="[
           (val: string) =>
             (val.length >= 7 && val.length <= 13) ||
             $t('form.error.please', {
@@ -270,19 +315,57 @@ watch(
             }),
         ]" -->
 
-      <q-input
+          <q-input
-        outlined
+            outlined
-        for="input-bankbook"
+            for="input-bankbook"
-        class="col-12 col-md-4"
+            class="col-12 col-md-4"
-        hide-bottom-space
+            hide-bottom-space
-        :dense="dense"
+            :dense="dense"
-        :readonly="readonly"
+            :readonly="readonly"
-        :label="$t('branch.form.bankAccountName')"
+            :label="$t('branch.form.bankAccountName')"
-        :model-value="readonly ? book.accountName || '-' : book.accountName"
+            :model-value="readonly ? book.accountName || '-' : book.accountName"
-        @update:model-value="
+            @update:model-value="
-          (v) => (typeof v === 'string' ? (book.accountName = v) : '')
+              (v) => (typeof v === 'string' ? (book.accountName = v) : '')
-        "
+            "
-      />
+          />
+          <q-select
+            outlined
+            clearable
+            use-input
+            fill-input
+            emit-value
+            map-options
+            hide-selected
+            hide-bottom-space
+            option-value="value"
+            input-debounce="0"
+            option-label="label"
+            class="col-12 col-md-4"
+            autocomplete="off"
+            :dense="dense"
+            :label="$t('branch.form.bankAccountType')"
+            :options="accountTypeOptions"
+            :readonly="readonly"
+            :hide-dropdown-icon="readonly"
+            for="select-bankbook"
+            :model-value="readonly ? book.accountType || '-' : book.accountType"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (book.accountType = v) : '')
+            "
+            @filter="accountTypeFilter"
+            @clear="book.accountType = ''"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  {{ $t('general.noData') }}
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+        </div>
+      </div>
     </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 = {