refactor: edit upload Attachment

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

@@ -149,6 +149,17 @@ const formBankBook = ref<BankBook[]>([
   },
 ]);
 
+const attachmentList = ref<File[]>([]);
+const currentAttachmentList = ref<
+  {
+    name?: string;
+    group?: string;
+    url?: string;
+    file?: File;
+  }[]
+>([]);
+const currentAttachmentSelected = ref<string>('');
+
 const statusQrCodeFile = ref<File | undefined>(undefined);
 const statusQrCodeUrl = ref<string>('');
 const statusDeletsQrCode = ref<boolean>(false);
@@ -403,6 +414,19 @@ async function fetchBranchById(id: string) {
       };
     });
 
+    const resAttachment = await branchStore.fetchListAttachment(res.id);
+
+    if (resAttachment) {
+      currentAttachmentList.value = await Promise.all(
+        resAttachment.map(async (v) => {
+          return {
+            name: v,
+            url: (await branchStore.fetchByIdAttachment(res.id, v)) || '',
+          };
+        }),
+      );
+    }
+
     formData.value = {
       code: res.code,
       headOfficeId: res.headOfficeId,
@@ -443,7 +467,8 @@ function clearData() {
     code: '',
   };
   qrCodeFile.value = undefined;
-
+  currentAttachmentList.value = [];
+  currentTab.value = 'main';
   formBankBook.value = [
     {
       bankName: '',
@@ -496,6 +521,7 @@ function triggerCreate(
     formLastSubBranch.value = findLastSub(code);
   }
   formType.value = 'create';
+  currentId.value = '';
   openDialog();
 }
 
@@ -528,6 +554,7 @@ async function triggerEdit(
   await fetchBranchById(id);
   await fetchImageList(id, formData.value.selectedImage || '');
 
+  formTypeBranch.value = typeBranch;
   if (openFormType === 'form') {
     formType.value = 'edit';
     openDialog();
@@ -566,8 +593,6 @@ async function triggerEdit(
       currentHq.value = currentEdit.value;
     }
   }
-  formTypeBranch.value = typeBranch;
-
   const branchAdmin = await branchStore.getAdmin(id);
 
   if (!branchAdmin) {
@@ -589,7 +614,7 @@ function triggerDelete(id: string) {
       message: t('dialog.message.confirmDelete'),
       action: async () => {
         await branchStore.deleteById(id);
-        await fetchList({ pageSize: 99999 });
+        await fetchList({ tree: true, pageSize: 99999 });
         modalDrawer.value = false;
         await calculateStats();
 
@@ -618,7 +643,6 @@ function triggerEditQrCodeLine(opts?: { save?: boolean }) {
     deletsStatusQrCodeImag.value = false;
     statusQrCodeUrl.value = qrCodeimageUrl.value;
   } else {
-    console.log('save', qrCodeFile.value);
     qrCodeimageUrl.value = statusQrCodeUrl.value;
     qrCodeFile.value = statusQrCodeFile.value;
     deletsStatusQrCodeImag.value = statusDeletsQrCode.value;
@@ -658,7 +682,6 @@ async function fetchList(opts: {
 }
 
 watch(inputSearch, () => {
-  console.log(inputSearch.value);
   fetchList({ tree: true, query: inputSearch.value });
   currentSubBranch.value = undefined;
 });
@@ -710,19 +733,17 @@ async function onSubmit(submitSelectedItem?: boolean) {
     );
 
     if (!res) return;
-
     formData.value.codeHeadOffice = formData.value.code = res.code;
     imageUrl.value = `${baseUrl}/branch/${res.id}/image/${res.selectedImage}`;
 
     await fetchList({ tree: true, pageSize: 99999 });
 
     if (!imageDialog.value) modalDrawer.value = submitSelectedItem || false;
-    modal.value = false;
   }
 
   if (formType.value === 'create') {
     const createBranch = async () => {
-      await branchStore.create(
+      const res = await branchStore.create(
         {
           ...formData.value,
           qrCodeImage: qrCodeFile.value,
@@ -731,8 +752,20 @@ async function onSubmit(submitSelectedItem?: boolean) {
         onCreateImageList.value,
       );
 
+      if (res) {
+        currentId.value = res.id;
+        formData.value.codeHeadOffice = res.code;
+        formData.value.code = res.code;
+        prevFormData.value = JSON.parse(JSON.stringify(formData.value));
+
+        currentEdit.value = {
+          id: res.id,
+          code: res.code,
+        };
+        formType.value = 'view';
+      }
+
       await fetchList({ tree: true, pageSize: 99999 });
-      modal.value = false;
     };
 
     if (formTypeBranch.value === 'subBranch') {
@@ -1582,6 +1615,7 @@ watch(currentHq, () => {
   </div>
 
   <DialogForm
+    hide-footer
     ref="formDialogRef"
     v-model:modal="modal"
     :title="changeTitle(formType, formTypeBranch) + ' ' + currentEdit.code"
@@ -1642,7 +1676,8 @@ watch(currentHq, () => {
         }-hsl)/${imageUrl ? '0' : '0.15'})`"
         :menu="formMenuIcon"
         v-model:current-tab="currentTab"
-        :tabs-list="[
+        :tabs-list="
+          [
             {
               name: 'main',
               label: 'customerBranch.tab.main',
@@ -1655,7 +1690,17 @@ watch(currentHq, () => {
               name: 'remark',
               label: 'customerBranch.tab.remark',
             },
-        ]"
+          ].filter((v) => {
+            if (!currentId && v.name === 'attachment') {
+              return false;
+            }
+
+            if (!currentId && v.name === 'remark') {
+              return false;
+            }
+            return true;
+          })
+        "
         @view="
           () => {
             imageDialog = true;
@@ -1671,14 +1716,58 @@ watch(currentHq, () => {
         "
       />
     </div>
+    <div class="col q-pa-lg">
       <div
-      class="col surface-1 q-ma-lg rounded bordered scroll row"
+        style="overflow-y: auto"
-      id="branch-form"
+        class="row full-width full-height surface-1 rounded relative-position"
+      >
+        <div
+          v-if="currentTab === 'main'"
+          class="q-py-md q-px-lg"
+          style="position: absolute; z-index: 99999; top: 0; right: 0"
+        >
+          <div
+            v-if="formData.status !== 'INACTIVE'"
+            class="surface-1 row rounded"
+          >
+            <UndoButton
+              v-if="formType === 'edit' && !!currentId"
+              icon-only
+              @click="undo()"
+              type="button"
+            />
+            <SaveButton
+              v-if="formType === 'edit' || formType === 'create'"
+              id="btn-info-basic-save"
+              icon-only
+              type="submit"
+            />
+
+            <EditButton
+              v-if="formType !== 'edit' && !!currentId"
+              id="btn-info-basic-edit"
+              icon-only
+              @click="drawerEdit()"
+              type="button"
+            />
+
+            <DeleteButton
+              v-if="formType !== 'edit' && !!currentId"
+              id="btn-info-basic-delete"
+              icon-only
+              @click="triggerDelete(currentEdit.id)"
+              type="button"
+            />
+          </div>
+        </div>
+        <div
+          class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
+          v-if="$q.screen.gt.sm"
         >
-      <div class="col" v-if="$q.screen.gt.sm">
-        <div style="position: sticky; top: 0" class="q-pa-sm">
           <SideMenu
-            :menu="[
+            :menu="
+              {
+                main: [
                   {
                     name: $t('form.field.basicInformation'),
                     anchor: 'form-information',
@@ -1707,7 +1796,21 @@ watch(currentHq, () => {
                     name: $t('branch.form.group.admin'),
                     anchor: 'form-branch-admin-view',
                   },
-            ]"
+                ],
+                attachment: [
+                  {
+                    name: $t('customerBranch.tab.attachment'),
+                    anchor: 'form-attachment',
+                  },
+                ],
+                remark: [
+                  {
+                    name: $t('customerBranch.tab.remark'),
+                    anchor: 'form-remark',
+                  },
+                ],
+              }[currentTab] || []
+            "
             background="transparent"
             :active="{
               background: 'hsla(var(--blue-6-hsl) / .2)',
@@ -1716,9 +1819,13 @@ watch(currentHq, () => {
             scroll-element="#branch-form"
           />
         </div>
-      </div>
 
-      <div class="col-md-10 col-12 q-pa-md q-gutter-y-xl">
+        <div
+          class="col-12 col-md-10 q-py-md q-pr-md full-height"
+          :class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
+          id="branch-form"
+          style="overflow-y: auto"
+        >
           <template v-if="currentTab === 'main'">
             <FormBranchInformation
               id="form-information"
@@ -1733,11 +1840,12 @@ watch(currentHq, () => {
               v-model:permit-no="formData.permitNo"
               v-model:permit-issue-date="formData.permitIssueDate"
               v-model:permit-expire-date="formData.permitExpireDate"
+              :separator="true"
               :dense="true"
               :outlined="true"
               :readonly="formType === 'view'"
               title="form.field.basicInformation"
-            :view="isSubCreate"
+              :view="isSubCreate || !!currentId"
               onCreate
             />
             <FormBranchContact
@@ -1750,6 +1858,7 @@ watch(currentHq, () => {
               v-model:line-id="formData.lineId"
               v-model:web-url="formData.webUrl"
               :separator="true"
+              :readonly="formType === 'view'"
               title="branch.form.group.contact"
               :dense="true"
               :outlined="true"
@@ -1768,6 +1877,7 @@ watch(currentHq, () => {
               v-model:district-id="formData.districtId"
               v-model:sub-district-id="formData.subDistrictId"
               v-model:zip-code="formData.zipCode"
+              :readonly="formType === 'view'"
             />
             <FormLocation
               id="form-location"
@@ -1794,6 +1904,7 @@ watch(currentHq, () => {
             />
             <FormBank
               id="form-bank"
+              :readonly="formType === 'view'"
               title="branch.form.group.bankAccount"
               dense
               v-model:bank-book-list="formBankBook"
@@ -1817,80 +1928,59 @@ watch(currentHq, () => {
           </template>
 
           <template v-if="currentTab === 'attachment'">
-          <AddressForm
+            <UploadFile
-            id="form-address"
+              branch
-            dense
+              :file="currentAttachmentList"
-            outlined
+              :tree-file="
-            separator
+                Object.values(
-            prefix-id="default"
+                  currentAttachmentList.reduce<
-            :title="'form.address'"
+                    Record<string, { label: string; file: { label: string }[] }>
-            v-model:address="formData.address"
+                  >((a, b) => {
-            v-model:addressEN="formData.addressEN"
+                    if (b.name && !a[b.name]) {
-            v-model:province-id="formData.provinceId"
+                      a[b.name] = {
-            v-model:district-id="formData.districtId"
+                        label: b.name,
-            v-model:sub-district-id="formData.subDistrictId"
+                        file: [],
-            v-model:zip-code="formData.zipCode"
+                      };
-          />
+                    }
-          <FormLocation
+                    return a;
-            id="form-location"
+                  }, {}) || {},
-            :readonly="formType === 'view'"
+                )
-            :separator="true"
+              "
-            v-model:latitude="formData.latitude"
+              @save="
-            v-model:longitude="formData.longitude"
+                async (_group, file) => {
-            outlined
+                  if (file) {
-            dense
+                    attachmentList.push(file);
-            title="branch.form.group.location"
+
-          />
+                    await branchStore.putAttachment(currentId, attachmentList);
-          <FormQr
+                  }
-            id="form-qr"
-            title="QR Code"
-            :separator="true"
-            :qr="qrCodeimageUrl"
-            :readonly="formType === 'view'"
-            @view-qr="
-              () => {
-                triggerEditQrCodeLine();
                 }
               "
-            @edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()"
+              @deleteFile="
-          />
+                async (filename) => {
-          <FormBank
+                  const res = await branchStore.deleteByIdAttachment(
-            id="form-bank"
+                    currentId,
-            title="branch.form.group.bankAccount"
+                    filename,
-            dense
+                  );
-            v-model:bank-book-list="formBankBook"
+
-            @view-qr="
+                  if (res) {
-              (i) => {
+                    currentAttachmentList = currentAttachmentList.filter(
-                currentIndexQrCodeBank = i;
+                      (v) => {
-                triggerEditQrCodeBank();
+                        if (v.name === filename) {
+                          return false;
+                        }
+                        return true;
+                      },
+                    );
                   }
-            "
-            @edit-qr="
-              (i) => {
-                currentIndexQrCodeBank = i;
-                refQrCodeUpload && refQrCodeUpload.browse();
                 }
               "
             />
-          <FormBranchAdmin
-            id="form-branch-admin-view"
-            :admin="currentBranchAdmin"
-          />
-          <!-- <FormImage
-          :readonly="formType === 'view'"
-          v-model:image="imageUrl"
-          @upload="
-            () => {
-              inputFileImg.click();
-            }
-          "
-          :title="$t('formDialogTitleImg')"
-        /> -->
           </template>
 
           <template v-if="currentTab === 'remark'"></template>
         </div>
       </div>
+    </div>
   </DialogForm>
 
   <DrawerInfo
@@ -1928,6 +2018,21 @@ watch(currentHq, () => {
           :title="formData.name"
           :caption="formData.code"
           icon="mdi-office-building-outline"
+          v-model:current-tab="currentTab"
+          :tabs-list="[
+            {
+              name: 'main',
+              label: 'customerBranch.tab.main',
+            },
+            {
+              name: 'attachment',
+              label: 'customerBranch.tab.attachment',
+            },
+            {
+              name: 'remark',
+              label: 'customerBranch.tab.remark',
+            },
+          ]"
           :color="`hsla(var(${
             formTypeBranch === 'headOffice'
               ? '--pink-6'
@@ -1978,6 +2083,7 @@ watch(currentHq, () => {
           class="row full-width full-height surface-1 rounded relative-position"
         >
           <div
+            v-if="currentTab === 'main'"
             class="q-py-md q-px-lg"
             style="position: absolute; z-index: 99999; top: 0; right: 0"
           >
@@ -2018,7 +2124,9 @@ watch(currentHq, () => {
             class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
           >
             <SideMenu
-              :menu="[
+              :menu="
+                {
+                  main: [
                     {
                       name: $t('form.field.basicInformation'),
                       anchor: 'info-information',
@@ -2047,7 +2155,21 @@ watch(currentHq, () => {
                       name: $t('branch.form.group.admin'),
                       anchor: 'info-branch-admin-view',
                     },
-              ]"
+                  ],
+                  attachment: [
+                    {
+                      name: $t('customerBranch.tab.attachment'),
+                      anchor: 'info-attachment',
+                    },
+                  ],
+                  remark: [
+                    {
+                      name: $t('customerBranch.tab.remark'),
+                      anchor: 'info-remark',
+                    },
+                  ],
+                }[currentTab] || []
+              "
               background="transparent"
               :active="{
                 background: 'hsla(var(--blue-6-hsl) / .2)',
@@ -2062,6 +2184,7 @@ watch(currentHq, () => {
             id="branch-info"
             style="overflow-y: auto"
           >
+            <template v-if="currentTab === 'main'">
               <FormBranchInformation
                 id="info-information"
                 v-model:virtual="formData.virtual"
@@ -2164,6 +2287,66 @@ watch(currentHq, () => {
                 id="info-branch-admin-view"
                 :admin="currentBranchAdmin"
               />
+            </template>
+
+            <template v-if="currentTab === 'attachment'">
+              <UploadFile
+                id="info-attachment"
+                branch
+                :file="currentAttachmentList"
+                :tree-file="
+                  Object.values(
+                    currentAttachmentList.reduce<
+                      Record<
+                        string,
+                        { label: string; file: { label: string }[] }
+                      >
+                    >((a, b) => {
+                      if (b.name && !a[b.name]) {
+                        a[b.name] = {
+                          label: b.name,
+                          file: [],
+                        };
+                      }
+                      return a;
+                    }, {}) || {},
+                  )
+                "
+                @save="
+                  async (_group, file) => {
+                    if (file) {
+                      attachmentList.push(file);
+
+                      await branchStore.putAttachment(
+                        currentId,
+                        attachmentList,
+                      );
+                    }
+                  }
+                "
+                @deleteFile="
+                  async (filename) => {
+                    const res = await branchStore.deleteByIdAttachment(
+                      currentId,
+                      filename,
+                    );
+
+                    if (res) {
+                      currentAttachmentList = currentAttachmentList.filter(
+                        (v) => {
+                          if (v.name === filename) {
+                            return false;
+                          }
+                          return true;
+                        },
+                      );
+                    }
+                  }
+                "
+              />
+            </template>
+
+            <template v-if="currentTab === 'remark'"></template>
           </div>
         </div>
       </div>