refactor: by value inputFileQrCode

src/pages/01_branch-management/MainPage.vue

@@ -9,7 +9,6 @@ import type { QTableProps } from 'quasar';
 import { resetScrollBar } from 'src/stores/utils';
 import useBranchStore from 'stores/branch';
 import useFlowStore from 'stores/flow';
-import { isRoleInclude } from 'src/stores/utils';
 import {
   BranchWithChildren,
   BranchCreate,
@@ -17,6 +16,7 @@ import {
   BankBook,
 } from 'stores/branch/types';
 
+import QrCodeUploadDialog from 'src/components/QrCodeUploadDialog.vue';
 import ItemCard from 'src/components/ItemCard.vue';
 import useUtilsStore, { dialog, baseUrl } from 'stores/utils';
 import EmptyAddButton from 'components/AddButton.vue';
@@ -145,41 +145,32 @@ const formBankBook = ref<BankBook[]>([
     accountName: '',
     accountType: '',
     currentlyUse: true,
+    bankUrl: '',
   },
 ]);
 
+const statusQrCodeFile = ref<File | undefined>(undefined);
+const statusQrCodeUrl = ref<string>('');
+const statusDeletsQrCode = ref<boolean>(false);
+
+const deletsStatusQrCodeImag = ref(false);
+const deletsStatusQrCodeBankImag = ref<number[]>([]);
+const currentIndexQrCodeBank = ref<number>(-1);
+const refQrCodeUpload = ref();
 const refImageUpload = ref();
 const isImageEdit = ref(false);
+const isQrCodeEdit = ref(false);
 const profileFile = ref<File | undefined>(undefined);
+const qrCodeFile = ref<File | undefined>(undefined);
 const imageUrl = ref<string>('');
 const prevImageUrl = ref<string>('');
 const currentNode = ref<BranchWithChildren>();
 const imageDialog = ref(false);
+const qrCodeDialog = ref(false);
 
-const qrFile = ref<File | undefined>(undefined);
+const qrCodeimageUrl = ref<string>('');
-const qrCodeimageUrl = ref<string | null>('');
 const formLastSubBranch = ref<number>(0);
 
-const inputFile = (() => {
-  const element = document.createElement('input');
-  element.type = 'file';
-  element.accept = 'image/*';
-
-  const reader = new FileReader();
-  reader.addEventListener('load', () => {
-    if (typeof reader.result === 'string') qrCodeimageUrl.value = reader.result;
-  });
-
-  element.addEventListener('change', () => {
-    qrFile.value = element.files?.[0];
-    if (qrFile.value) {
-      reader.readAsDataURL(qrFile.value);
-    }
-  });
-
-  return element;
-})();
-
 const branchStore = useBranchStore();
 const flowStore = useFlowStore();
 const { locale } = useI18n();
@@ -372,13 +363,19 @@ function openDialog() {
 
 async function fetchBranchById(id: string) {
   const res = await branchStore.fetchById(id, { includeContact: true });
-
   if (res) {
-    qrCodeimageUrl.value = `${apiBaseUrl}/branch/${res.id}/line-image`;
+    qrCodeimageUrl.value = `${apiBaseUrl}/branch/${res.id}/line-image?ts=${Date.now()}`;
     imageUrl.value = `${apiBaseUrl}/branch/${res.id}/branch-image`;
     prevImageUrl.value = res.imageUrl;
     formBankBook.value = res.bank;
 
+    formBankBook.value = formBankBook.value.map((v) => {
+      return {
+        ...v,
+        bankUrl: `${apiBaseUrl}/branch/${res.id}/bank-qr/${v.id}?ts=${Date.now()}`,
+      };
+    });
+
     formData.value = {
       code: res.code,
       headOfficeId: res.headOfficeId,
@@ -408,12 +405,12 @@ async function fetchBranchById(id: string) {
 function clearData() {
   formData.value = structuredClone(defaultFormData);
   imageUrl.value = '';
-  qrCodeimageUrl.value = null;
+  qrCodeimageUrl.value = '';
   currentEdit.value = {
     id: '',
     code: '',
   };
-  qrFile.value = undefined;
+  qrCodeFile.value = undefined;
 
   formBankBook.value = [
     {
@@ -428,6 +425,7 @@ function clearData() {
 }
 
 async function undo() {
+  isQrCodeEdit.value = false;
   isImageEdit.value = false;
   formType.value = 'view';
   imageUrl.value = prevImageUrl.value;
@@ -481,6 +479,7 @@ function findLastSub(code: string) {
 }
 
 function drawerEdit() {
+  isQrCodeEdit.value = true;
   isImageEdit.value = true;
   formType.value = 'edit';
   prevFormData.value = {
@@ -579,6 +578,40 @@ function triggerDelete(id: string) {
   }
 }
 
+function triggerEditQrCodeLine(opts?: { save?: boolean }) {
+  if (opts?.save === undefined) {
+    qrCodeDialog.value = true;
+    statusDeletsQrCode.value = false;
+    deletsStatusQrCodeImag.value = false;
+    statusQrCodeUrl.value = qrCodeimageUrl.value;
+  } else {
+    qrCodeimageUrl.value = statusQrCodeUrl.value;
+    qrCodeFile.value = statusQrCodeFile.value;
+    deletsStatusQrCodeImag.value = statusDeletsQrCode.value;
+  }
+}
+
+function triggerEditQrCodeBank(opts?: { save?: boolean }) {
+  if (opts?.save === undefined) {
+    qrCodeDialog.value = true;
+    statusDeletsQrCode.value = false;
+    statusQrCodeUrl.value =
+      formBankBook.value[currentIndexQrCodeBank.value].bankUrl || '';
+    statusDeletsQrCode.value = false;
+  } else {
+    formBankBook.value[currentIndexQrCodeBank.value].bankUrl =
+      statusQrCodeUrl.value;
+
+    formBankBook.value[currentIndexQrCodeBank.value].bankQr =
+      statusQrCodeFile.value;
+
+    if (statusDeletsQrCode.value) {
+      deletsStatusQrCodeBankImag.value.push(currentIndexQrCodeBank.value);
+    }
+    currentIndexQrCodeBank.value = -1;
+  }
+}
+
 async function triggerChangeStatus(
   id: string,
   status: string,
@@ -617,9 +650,13 @@ async function onSubmit() {
         ...formData.value,
         status: undefined,
       },
-      qrFile.value,
+      qrCodeFile.value,
       profileFile.value,
       formBankBook.value,
+      {
+        deleteQrCodeImage: deletsStatusQrCodeImag.value,
+        indexDeleteQrCodeBank: deletsStatusQrCodeBankImag.value,
+      },
     );
 
     await branchStore.fetchList({ pageSize: 99999 });
@@ -632,7 +669,7 @@ async function onSubmit() {
       await branchStore.create(
         {
           ...formData.value,
-          qrCodeImage: qrFile.value,
+          qrCodeImage: qrCodeFile.value,
           imageUrl: profileFile.value,
         },
         formBankBook.value,
@@ -735,6 +772,13 @@ watch(
   },
 );
 
+watch(
+  () => qrCodeFile.value,
+  () => {
+    if (qrCodeFile !== null) isQrCodeEdit.value = true;
+  },
+);
+
 watch(locale, () => {
   fieldSelectedBranch.value = {
     label: t(`${fieldSelectedBranch.value.label}`),
@@ -1653,11 +1697,6 @@ watch(currentHq, () => {
           :separator="true"
           :qr="qrCodeimageUrl"
           :readonly="formType === 'view'"
-          @upload="
-            () => {
-              inputFile.click();
-            }
-          "
         />
         <FormBank
           id="form-bank"
@@ -1915,11 +1954,12 @@ watch(currentHq, () => {
               title="QR Code"
               :separator="true"
               :qr="qrCodeimageUrl"
-              @upload="
+              @view-qr="
                 () => {
-                  inputFile.click();
+                  triggerEditQrCodeLine();
                 }
               "
+              @edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()"
               class="q-mb-xl"
             />
             <FormBank
@@ -1929,6 +1969,17 @@ watch(currentHq, () => {
               dense
               v-model:bank-book-list="formBankBook"
               class="q-mb-xl"
+              @view-qr="
+                (i) => {
+                  currentIndexQrCodeBank = i;
+                  triggerEditQrCodeBank();
+                }
+              "
+              @edit-qr="
+                (i) => {
+                  currentIndexQrCodeBank = i;
+                }
+              "
             />
             <FormBranchAdmin
               id="info-branch-admin-view"
@@ -2073,6 +2124,35 @@ watch(currentHq, () => {
     </div>
   </q-dialog>
 
+  <QrCodeUploadDialog
+    ref="refQrCodeUpload"
+    v-model:dialogState="qrCodeDialog"
+    v-model:file="statusQrCodeFile as File"
+    v-model:image-url="statusQrCodeUrl"
+    @save="
+      () => {
+        qrCodeDialog = false;
+        if (currentIndexQrCodeBank === -1) {
+          triggerEditQrCodeLine({ save: true });
+        }
+        if (currentIndexQrCodeBank !== -1) {
+          triggerEditQrCodeBank({ save: true });
+        }
+      }
+    "
+    @clear="statusDeletsQrCode = true"
+    clearButton
+  >
+    <template #error>
+      <div
+        class="full-width full-height flex items-center justify-center"
+        style="color: gray"
+      >
+        <q-icon size="15rem" name="mdi-qrcode" />
+      </div>
+    </template>
+  </QrCodeUploadDialog>
+
   <ImageUploadDialog
     ref="refImageUpload"
     v-model:dialogState="imageDialog"