From 7a02cb19d7288b68e804cc81e7ba49bd1f77562f Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Mon, 23 Sep 2024 17:46:23 +0700
Subject: [PATCH] refactor: edit uploadfile

---
 src/components/upload-file/UploadFile.vue   | 338 ++++----
 src/pages/01_branch-management/MainPage.vue | 812 +++++++++-----------
 2 files changed, 508 insertions(+), 642 deletions(-)

diff --git a/src/components/upload-file/UploadFile.vue b/src/components/upload-file/UploadFile.vue
index 9f870137..f2dfac4b 100644
--- a/src/components/upload-file/UploadFile.vue
+++ b/src/components/upload-file/UploadFile.vue
@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
-import {
-  SaveButton,
-  UndoButton,
-  CloseButton,
-  DeleteButton,
-} from 'components/button';
+import { DeleteButton } from 'components/button';
 import { dialog } from 'stores/utils';
 
 import { useI18n } from 'vue-i18n';
@@ -13,18 +8,18 @@ import { VuePDF, usePDF } from '@tato30/vue-pdf';
 
 const { t } = useI18n();
 const currentFileSelected = ref<string>('');
-const file = defineModel<
+const obj = defineModel<
   {
     name?: string;
     group?: string;
     url?: string;
     file?: File;
   }[]
->('file', {
+>({
   default: [],
 });
 
-const currentFile = computed(() => file.value.at(currentIndex.value));
+const currentFile = computed(() => obj.value.at(currentIndex.value));
 const statusOcr = defineModel<boolean>('statusOcr', { default: false });
 const currentMode = ref<string>('');
 const currentIndex = ref(0);
@@ -40,11 +35,11 @@ const props = withDefaults(
     readonly?: boolean;
     dropdownList?: { label: string; value: string }[];
     hideAction?: boolean;
-    branch?: boolean;
+    autoSave?: boolean;
   }>(),
   {
+    autoSave: false,
     treeFile: () => [],
-    branch: false,
   },
 );
 
@@ -60,61 +55,82 @@ const inputFile = (() => {
   return _element;
 })();
 
-function change(e: Event) {
+async function change(e: Event) {
   const _element = e.target as HTMLInputElement | null;
   const _file = _element?.files?.[0];
-  currentIndex.value = file.value.length;
 
   if (_file) {
-    currentIndex.value = file.value.length + 1;
+    if (!obj.value[currentIndex.value]) {
+      obj.value = [
+        ...obj.value,
+        {
+          name: _file.name,
+          file: _file,
+        },
+      ];
+      currentIndex.value = obj.value.length;
+    }
+
     const reader = new FileReader();
     reader.readAsDataURL(_file);
     reader.onload = () => {
-      if (file.value[currentIndex.value]) {
-        file.value[currentIndex.value].url = reader.result as string;
-        console.log(file.value[currentIndex.value]);
+      if (obj.value[currentIndex.value]) {
+        obj.value[currentIndex.value].url = reader.result as string;
+        currentFileSelected.value = _file.name;
       }
     };
 
-    if (_file && file.value[currentIndex.value]) {
-      file.value[currentIndex.value].file = _file;
-      file.value[currentIndex.value].group =
-        props.dropdownList?.[currentIndexDropdownList.value].value;
-    } else {
-      const newName =
-        props.dropdownList?.[currentIndexDropdownList.value].value +
-        '-' +
-        _file.name;
-
-      file.value.push({
-        name: props.branch === true ? _file.name : newName,
-        group: props.dropdownList?.[currentIndexDropdownList.value].value,
-        file: _file,
-      });
-
-      currentFileSelected.value = props.branch === true ? _file.name : newName;
-    }
-
-    statusOcr.value = true;
-
-    if (props.branch === true) {
+    if (!!props.autoSave) {
       emit(
         'save',
         props.dropdownList?.[currentIndexDropdownList.value].value || '',
         inputFile?.files?.[0],
       );
-    } else {
-      emit(
-        'sendOcr',
-        props.dropdownList?.[currentIndexDropdownList.value].value || '',
-        inputFile?.files?.[0],
-      );
     }
   }
 }
 
+// function change(e: Event) {
+//   const _element = e.target as HTMLInputElement | null;
+//   const _file = _element?.files?.[0];
+//   currentIndex.value = obj.value.length;
+
+//   if (_file) {
+//     currentIndex.value = obj.value.length + 1;
+//     const reader = new FileReader();
+//     reader.readAsDataURL(_file);
+//     reader.onload = () => {
+//       if (obj.value[currentIndex.value]) {
+//         obj.value[currentIndex.value].url = reader.result as string;
+//         console.log('asd');
+//       }
+//     };
+
+//     if (_file && obj.value[currentIndex.value]) {
+//       obj.value[currentIndex.value].file = _file;
+//       obj.value[currentIndex.value].group =
+//         props.dropdownList?.[currentIndexDropdownList.value].value;
+//     } else {
+//       obj.value.push({
+//         name: _file.name,
+//         group: props.dropdownList?.[currentIndexDropdownList.value].value,
+//         file: _file,
+//       });
+//     }
+
+//     if (!!props.autoSave) {
+//       emit(
+//         'save',
+//         props.dropdownList?.[currentIndexDropdownList.value].value || '',
+//         inputFile?.files?.[0],
+//       );
+//     } else {
+//     }
+//   }
+// }
+
 watch(currentFileSelected, () => {
-  file.value.findIndex((v, i) => {
+  obj.value.findIndex((v, i) => {
     if (v.name?.includes(currentFileSelected.value)) {
       currentIndex.value = i;
 
@@ -136,7 +152,7 @@ const emit = defineEmits<{
 
 const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
 
-function deleteFileOfBranch(filename: string) {
+function deleteFileOfBranch(filename: string, index: number) {
   dialog({
     color: 'negative',
     icon: 'mdi-alert',
@@ -145,35 +161,11 @@ function deleteFileOfBranch(filename: string) {
     persistent: true,
     message: t('dialog.message.confirmDelete'),
     action: async () => {
-      emit('deleteFile', filename);
-    },
-
-    cancel: () => {},
-  });
-}
-
-function deleteFile() {
-  const tempValue = props.treeFile.find(
-    (v: any) => v.label === t(currentMode.value),
-  );
-
-  if (!tempValue) return;
-
-  const idx = tempValue.file?.findIndex(
-    (v: any) => v.label === currentFileSelected.value,
-  );
-
-  dialog({
-    color: 'negative',
-    icon: 'mdi-alert',
-    title: t('dialog.title.confirmDelete'),
-    actionText: t('general.delete'),
-    persistent: true,
-    message: t('dialog.message.confirmDelete'),
-    action: async () => {
-      emit('deleteFile', currentFileSelected.value);
-
-      currentFileSelected.value = tempValue.file?.[idx - 1].label || '';
+      if (!!props.autoSave) {
+        emit('deleteFile', filename);
+      } else {
+        obj.value.splice(index, 1);
+      }
     },
 
     cancel: () => {},
@@ -183,7 +175,7 @@ function deleteFile() {
 
 <template>
   <div class="full-width row no-wrap wrapper" style="height: 250px">
-    <div class="col full-height column no-wrap">
+    <div class="col-3 full-height column no-wrap">
       <div class="q-pa-sm text-center bordered" style="height: 50px">
         <q-btn-dropdown
           :disable="readonly"
@@ -192,34 +184,61 @@ function deleteFile() {
           label="อัปโหลดเอกสาร"
           @click="
             () => {
-              if (branch) {
-                browse();
-              }
+              currentIndex = obj.length;
+              browse();
+            }
+          "
+        ></q-btn-dropdown>
+      </div>
+
+      <div class="bordered-l bordered-b q-pa-sm full-height scroll">
+        <q-item
+          clickable
+          v-for="(v, i) in obj"
+          :key="v.name"
+          dense
+          type="button"
+          class="no-padding items-center rounded"
+          active-class="menu-active"
+          :active="currentFileSelected === v.name"
+          @click="
+            async () => {
+              currentFileSelected = v.name || '';
             }
           "
         >
-          <q-list v-for="(v, i) in dropdownList" :key="v.value">
-            <q-item
-              clickable
-              v-close-popup
-              @click="
+          <div class="full-width row items-center justify-between">
+            <div class="ellipsis col-8">
+              <q-tooltip>{{ v.name }}</q-tooltip>
+              {{ v.name }}
+            </div>
+            <DeleteButton
+              iconOnly
+              @click.stop="
                 () => {
-                  currentIndexDropdownList = i;
-                  browse();
+                  deleteFileOfBranch(v.name || '', i);
                 }
               "
-            >
-              <q-item-section>
-                <q-item-label>{{ $t(v.label) }}</q-item-label>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </q-btn-dropdown>
-      </div>
+            />
+          </div>
+        </q-item>
 
-      <div class="bordered-l bordered-b q-pa-sm col full-height scroll">
-        <q-tree
-          :nodes="treeFile || []"
+        <!-- <q-tree
+          :nodes="
+            Object.values(
+              obj.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;
+              }, {}) || {},
+            ) || []
+          "
           node-key="label"
           label-key="label"
           children-key="file"
@@ -233,22 +252,20 @@ function deleteFile() {
                 <q-tooltip>{{ prop.node.label }}</q-tooltip>
                 {{ prop.node.label }}
               </div>
-              <div v-if="branch">
-                <DeleteButton
-                  iconOnly
-                  @click.stop="
-                    () => {
-                      deleteFileOfBranch(prop.node.label);
-                    }
-                  "
-                />
-              </div>
+              <DeleteButton
+                iconOnly
+                @click.stop="
+                  () => {
+                    deleteFileOfBranch(prop.node.label);
+                  }
+                "
+              />
             </div>
           </template>
-        </q-tree>
+        </q-tree> -->
       </div>
     </div>
-    <div v-if="!branch" class="col full-height column no-wrap">
+    <div class="col full-height column no-wrap">
       <div
         class="bordered row items-center justify-evenly q-pa-sm no-wrap"
         style="height: 50px"
@@ -302,92 +319,25 @@ function deleteFile() {
       <div
         class="flex flex-center surface-2 bordered-l bordered-r bordered-b full-height scroll"
       >
-        <template v-if="statusOcr">
-          <q-spinner color="primary" size="3em" :thickness="2" />
-        </template>
-
-        <template v-else>
-          <VuePDF
-            v-if="
-              currentFile?.url?.split('?').at(0)?.endsWith('.pdf') ||
-              currentFile?.file?.type === 'application/pdf'
-            "
-            class="q-py-md"
-            :pdf="pdf"
-            :page="page"
-            :scale="scale"
-          />
-
-          <q-img v-else class="q-py-md full-width" :src="currentFile?.url" />
-        </template>
+        <VuePDF
+          style="height: 100%"
+          v-if="
+            currentFile?.url?.split('?').at(0)?.endsWith('.pdf') ||
+            currentFile?.file?.type === 'application/pdf'
+          "
+          class="q-py-md"
+          :pdf="pdf"
+          :page="page"
+          :scale="scale"
+        />
+        <q-img
+          v-else
+          class="q-py-md full-width"
+          :src="currentFile?.url"
+          style="height: 220px; max-width: 300px"
+        />
       </div>
     </div>
-
-    <div v-if="!branch" class="col-5 full-height column no-wrap">
-      <div
-        class="bordered row items-center justify-between q-pa-sm"
-        style="height: 50px"
-      >
-        {{ currentMode && $t(currentMode) }}
-        <div class="row" v-if="!hideAction">
-          <UndoButton icon-only type="button" />
-          <SaveButton
-            icon-only
-            type="button"
-            @click="
-              $emit(
-                'save',
-                dropdownList?.[currentIndexDropdownList].value || '',
-                inputFile?.files?.[0],
-              )
-            "
-          />
-        </div>
-      </div>
-
-      <div class="q-pa-sm bordered-r bordered-b full-height col scroll">
-        <slot name="form" :mode="currentMode.split('.').at(-1)" />
-
-        <div class="row items-center">
-          {{ currentFileSelected }}
-          <CloseButton
-            icon-only
-            v-if="!readonly && !!currentFileSelected"
-            type="button"
-            class="q-ml-sm"
-            @click="
-              () => {
-                deleteFile();
-              }
-            "
-          />
-        </div>
-      </div>
-    </div>
-
-    <div
-      v-if="branch"
-      class="bordered col-8 surface-2 column justify-center items-center no-wrap scroll"
-    >
-      <VuePDF
-        style="height: 100%"
-        v-if="
-          currentFile?.url?.split('?').at(0)?.endsWith('.pdf') ||
-          currentFile?.file?.type === 'application/pdf'
-        "
-        class="q-py-md"
-        :pdf="pdf"
-        :page="page"
-        :scale="scale"
-      />
-
-      <q-img
-        v-else
-        class="q-py-md full-width"
-        style="height: 220px; max-width: 300px"
-        :src="currentFile?.url"
-      />
-    </div>
   </div>
 </template>
 
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 202aa877..d3eea57e 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -792,6 +792,7 @@ async function onSubmit(submitSelectedItem?: boolean) {
         },
         formBankBook.value,
         onCreateImageList.value,
+        currentAttachmentList.value,
       );
 
       if (res) {
@@ -1731,31 +1732,6 @@ watch(currentHq, () => {
         }-hsl)/${imageUrl ? '0' : '0.15'})`"
         :menu="formMenuIcon"
         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',
-            },
-          ].filter((v) => {
-            if (!currentId && v.name === 'attachment') {
-              return false;
-            }
-
-            if (!currentId && v.name === 'remark') {
-              return false;
-            }
-            return true;
-          })
-        "
         @view="
           () => {
             imageDialog = true;
@@ -1824,52 +1800,44 @@ watch(currentHq, () => {
           v-if="$q.screen.gt.sm"
         >
           <SideMenu
-            :menu="
+            :menu="[
               {
-                main: [
-                  {
-                    name: $t('form.field.basicInformation'),
-                    anchor: 'form-information',
-                  },
-                  {
-                    name: $t('branch.form.group.contact'),
-                    anchor: 'form-contact',
-                  },
-                  {
-                    name: $t('form.address'),
-                    anchor: 'form-address',
-                  },
-                  {
-                    name: $t('branch.form.group.location'),
-                    anchor: 'form-location',
-                  },
-                  {
-                    name: 'QR Code',
-                    anchor: 'form-qr',
-                  },
-                  {
-                    name: $t('branch.form.group.bankAccount'),
-                    anchor: 'form-bank',
-                  },
-                  {
-                    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] || []
-            "
+                name: $t('form.field.basicInformation'),
+                anchor: 'form-information',
+              },
+              {
+                name: $t('branch.form.group.contact'),
+                anchor: 'form-contact',
+              },
+              {
+                name: $t('form.address'),
+                anchor: 'form-address',
+              },
+              {
+                name: $t('branch.form.group.location'),
+                anchor: 'form-location',
+              },
+              {
+                name: 'QR Code',
+                anchor: 'form-qr',
+              },
+              {
+                name: $t('branch.form.group.bankAccount'),
+                anchor: 'form-bank',
+              },
+              {
+                name: $t('branch.form.group.admin'),
+                anchor: 'form-branch-admin-view',
+              },
+              {
+                name: $t('customerBranch.tab.attachment'),
+                anchor: 'form-attachment',
+              },
+              {
+                name: $t('customerBranch.tab.remark'),
+                anchor: 'form-remark',
+              },
+            ]"
             background="transparent"
             :active="{
               background: 'hsla(var(--blue-6-hsl) / .2)',
@@ -1885,163 +1853,144 @@ watch(currentHq, () => {
           id="branch-form"
           style="overflow-y: auto"
         >
-          <template v-if="currentTab === 'main'">
-            <FormBranchInformation
-              id="form-information"
-              v-model:branchCount="formLastSubBranch"
-              v-model:abbreviation="formData.code"
-              v-model:code="formData.codeHeadOffice"
-              v-model:code-sub-branch="currentEdit.code"
-              v-model:taxNo="formData.taxNo"
-              v-model:name="formData.name"
-              v-model:nameEN="formData.nameEN"
-              v-model:type-branch="formTypeBranch"
-              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 || !!currentId"
-              onCreate
-            />
-            <FormBranchContact
-              id="form-contact"
-              v-model:type-branch="formTypeBranch"
-              v-model:telephone-no="formData.telephoneNo"
-              v-model:contact="formData.contact"
-              v-model:email="formData.email"
-              v-model:contact-name="formData.contactName"
-              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"
-            />
+          <FormBranchInformation
+            id="form-information"
+            v-model:branchCount="formLastSubBranch"
+            v-model:abbreviation="formData.code"
+            v-model:code="formData.codeHeadOffice"
+            v-model:code-sub-branch="currentEdit.code"
+            v-model:taxNo="formData.taxNo"
+            v-model:name="formData.name"
+            v-model:nameEN="formData.nameEN"
+            v-model:type-branch="formTypeBranch"
+            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 || !!currentId"
+            onCreate
+          />
+          <FormBranchContact
+            id="form-contact"
+            v-model:type-branch="formTypeBranch"
+            v-model:telephone-no="formData.telephoneNo"
+            v-model:contact="formData.contact"
+            v-model:email="formData.email"
+            v-model:contact-name="formData.contactName"
+            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"
+          />
 
-            <AddressForm
-              id="form-address"
-              dense
-              outlined
-              separator
-              prefix-id="default"
-              :title="'form.address'"
-              v-model:address="formData.address"
-              v-model:addressEN="formData.addressEN"
-              v-model:province-id="formData.provinceId"
-              v-model:district-id="formData.districtId"
-              v-model:sub-district-id="formData.subDistrictId"
-              v-model:moo="formData.moo"
-              v-model:mooEN="formData.mooEN"
-              v-model:soi="formData.soi"
-              v-model:soiEN="formData.soiEN"
-              v-model:street="formData.street"
-              v-model:streetEN="formData.streetEN"
-              :readonly="formType === 'view'"
-            />
-            <FormLocation
-              id="form-location"
-              :readonly="formType === 'view'"
-              :separator="true"
-              v-model:latitude="formData.latitude"
-              v-model:longitude="formData.longitude"
-              outlined
-              dense
-              title="branch.form.group.location"
-            />
-            <FormQr
-              id="form-qr"
-              title="QR Code"
-              :separator="true"
-              :qr="qrCodeimageUrl"
-              :readonly="formType === 'view'"
-              @view-qr="
-                () => {
-                  triggerEditQrCodeLine();
-                }
-              "
-              @edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()"
-            />
-            <FormBank
-              id="form-bank"
-              :readonly="formType === 'view'"
-              title="branch.form.group.bankAccount"
-              dense
-              v-model:bank-book-list="formBankBook"
-              @view-qr="
-                (i) => {
-                  currentIndexQrCodeBank = i;
-                  triggerEditQrCodeBank();
-                }
-              "
-              @edit-qr="
-                (i) => {
-                  currentIndexQrCodeBank = i;
-                  refQrCodeUpload && refQrCodeUpload.browse();
-                }
-              "
-            />
-            <FormBranchAdmin
-              id="form-branch-admin-view"
-              :admin="currentBranchAdmin"
-            />
-          </template>
+          <AddressForm
+            id="form-address"
+            dense
+            outlined
+            separator
+            prefix-id="default"
+            :title="'form.address'"
+            v-model:address="formData.address"
+            v-model:addressEN="formData.addressEN"
+            v-model:province-id="formData.provinceId"
+            v-model:district-id="formData.districtId"
+            v-model:sub-district-id="formData.subDistrictId"
+            v-model:moo="formData.moo"
+            v-model:mooEN="formData.mooEN"
+            v-model:soi="formData.soi"
+            v-model:soiEN="formData.soiEN"
+            v-model:street="formData.street"
+            v-model:streetEN="formData.streetEN"
+            :readonly="formType === 'view'"
+          />
+          <FormLocation
+            id="form-location"
+            :readonly="formType === 'view'"
+            :separator="true"
+            v-model:latitude="formData.latitude"
+            v-model:longitude="formData.longitude"
+            outlined
+            dense
+            title="branch.form.group.location"
+          />
+          <FormQr
+            id="form-qr"
+            title="QR Code"
+            :separator="true"
+            :qr="qrCodeimageUrl"
+            :readonly="formType === 'view'"
+            @view-qr="
+              () => {
+                triggerEditQrCodeLine();
+              }
+            "
+            @edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()"
+          />
+          <FormBank
+            id="form-bank"
+            :readonly="formType === 'view'"
+            title="branch.form.group.bankAccount"
+            dense
+            v-model:bank-book-list="formBankBook"
+            @view-qr="
+              (i) => {
+                currentIndexQrCodeBank = i;
+                triggerEditQrCodeBank();
+              }
+            "
+            @edit-qr="
+              (i) => {
+                currentIndexQrCodeBank = i;
+                refQrCodeUpload && refQrCodeUpload.browse();
+              }
+            "
+          />
+          <FormBranchAdmin
+            id="form-branch-admin-view"
+            :admin="currentBranchAdmin"
+            class="q-mb-xl"
+          />
 
-          <template v-if="currentTab === 'attachment'">
-            <UploadFile
-              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: [],
-                      };
+          <UploadFile
+            id="form-attachment"
+            class="q-mb-xl"
+            :auto-save="currentId !== ''"
+            branch
+            v-model="currentAttachmentList"
+            @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 a;
-                  }, {}) || {},
-                )
-              "
-              @save="
-                async (_group, file) => {
-                  if (file) {
-                    attachmentList.push(file);
-
-                    await branchStore.putAttachment(currentId, attachmentList);
-                  }
+                    return true;
+                  });
                 }
-              "
-              @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>
@@ -2083,20 +2032,6 @@ watch(currentHq, () => {
           :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'
@@ -2134,7 +2069,7 @@ watch(currentHq, () => {
                 formType = 'view';
               }
 
-              await fetchList({ pageSize: 99999 });
+              await fetchList({ tree: true, pageSize: 99999 });
             }
           "
           :menu="formMenuIcon"
@@ -2147,7 +2082,6 @@ 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"
           >
@@ -2188,52 +2122,44 @@ 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',
-                    },
-                    {
-                      name: $t('branch.form.group.contact'),
-                      anchor: 'info-contact',
-                    },
-                    {
-                      name: $t('form.address'),
-                      anchor: 'info-address',
-                    },
-                    {
-                      name: $t('branch.form.group.location'),
-                      anchor: 'info-location',
-                    },
-                    {
-                      name: 'QR Code',
-                      anchor: 'info-qr',
-                    },
-                    {
-                      name: $t('branch.form.group.bankAccount'),
-                      anchor: 'info-bank',
-                    },
-                    {
-                      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] || []
-              "
+                  name: $t('form.field.basicInformation'),
+                  anchor: 'info-information',
+                },
+                {
+                  name: $t('branch.form.group.contact'),
+                  anchor: 'info-contact',
+                },
+                {
+                  name: $t('form.address'),
+                  anchor: 'info-address',
+                },
+                {
+                  name: $t('branch.form.group.location'),
+                  anchor: 'info-location',
+                },
+                {
+                  name: 'QR Code',
+                  anchor: 'info-qr',
+                },
+                {
+                  name: $t('branch.form.group.bankAccount'),
+                  anchor: 'info-bank',
+                },
+                {
+                  name: $t('branch.form.group.admin'),
+                  anchor: 'info-branch-admin-view',
+                },
+                {
+                  name: $t('customerBranch.tab.attachment'),
+                  anchor: 'info-attachment',
+                },
+                {
+                  name: $t('customerBranch.tab.remark'),
+                  anchor: 'info-remark',
+                },
+              ]"
               background="transparent"
               :active="{
                 background: 'hsla(var(--blue-6-hsl) / .2)',
@@ -2248,175 +2174,165 @@ watch(currentHq, () => {
             id="branch-info"
             style="overflow-y: auto"
           >
-            <template v-if="currentTab === 'main'">
-              <FormBranchInformation
-                id="info-information"
-                v-model:virtual="formData.virtual"
-                v-model:abbreviation="formData.code"
-                v-model:code="formData.codeHeadOffice"
-                v-model:code-sub-branch="currentEdit.code"
-                v-model:taxNo="formData.taxNo"
-                v-model:name="formData.name"
-                v-model:nameEN="formData.nameEN"
-                v-model:type-branch="formTypeBranch"
-                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'"
-                view
-                title="form.field.basicInformation"
-                class="q-mb-xl"
-              />
-              <FormBranchContact
-                id="info-contact"
-                title="branch.form.group.contact"
-                v-model:telephone-no="formData.telephoneNo"
-                v-model:contact="formData.contact"
-                v-model:email="formData.email"
-                v-model:contact-name="formData.contactName"
-                v-model:line-id="formData.lineId"
-                v-model:web-url="formData.webUrl"
-                :readonly="formType === 'view'"
-                :view="formType === 'view'"
-                :separator="true"
-                :dense="true"
-                :outlined="true"
-                class="q-mb-xl"
-              />
-              <AddressForm
-                id="info-address"
-                dense
-                outlined
-                separator
-                prefix-id="default"
-                :title="'form.address'"
-                :readonly="formType === 'view'"
-                v-model:address="formData.address"
-                v-model:addressEN="formData.addressEN"
-                v-model:province-id="formData.provinceId"
-                v-model:district-id="formData.districtId"
-                v-model:sub-district-id="formData.subDistrictId"
-                v-model:moo="formData.moo"
-                v-model:mooEN="formData.mooEN"
-                v-model:soi="formData.soi"
-                v-model:soiEN="formData.soiEN"
-                v-model:street="formData.street"
-                v-model:streetEN="formData.streetEN"
-                v-model:zip-code="formData.zipCode"
-                class="q-mb-xl"
-              />
-              <FormLocation
-                id="info-location"
-                title="branch.form.group.location"
-                v-model:latitude="formData.latitude"
-                v-model:longitude="formData.longitude"
-                :readonly="formType === 'view'"
-                :separator="true"
-                outlined
-                dense
-                class="q-mb-xl"
-              />
-              <FormQr
-                id="info-qr"
-                :readonly="formType === 'view'"
-                title="QR Code"
-                :separator="true"
-                :qr="qrCodeimageUrl"
-                @view-qr="
-                  () => {
-                    triggerEditQrCodeLine();
-                  }
-                "
-                @edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()"
-                class="q-mb-xl"
-              />
-              <FormBank
-                id="info-bank"
-                :readonly="formType === 'view'"
-                title="branch.form.group.bankAccount"
-                dense
-                v-model:bank-book-list="formBankBook"
-                class="q-mb-xl"
-                @view-qr="
-                  (i) => {
-                    currentIndexQrCodeBank = i;
-                    triggerEditQrCodeBank();
-                  }
-                "
-                @edit-qr="
-                  (i) => {
-                    currentIndexQrCodeBank = i;
-                    refQrCodeUpload.browse();
-                  }
-                "
-              />
-              <FormBranchAdmin
-                id="info-branch-admin-view"
-                :admin="currentBranchAdmin"
-              />
-            </template>
+            <FormBranchInformation
+              id="info-information"
+              v-model:virtual="formData.virtual"
+              v-model:abbreviation="formData.code"
+              v-model:code="formData.codeHeadOffice"
+              v-model:code-sub-branch="currentEdit.code"
+              v-model:taxNo="formData.taxNo"
+              v-model:name="formData.name"
+              v-model:nameEN="formData.nameEN"
+              v-model:type-branch="formTypeBranch"
+              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'"
+              view
+              title="form.field.basicInformation"
+              class="q-mb-xl"
+            />
+            <FormBranchContact
+              id="info-contact"
+              title="branch.form.group.contact"
+              v-model:telephone-no="formData.telephoneNo"
+              v-model:contact="formData.contact"
+              v-model:email="formData.email"
+              v-model:contact-name="formData.contactName"
+              v-model:line-id="formData.lineId"
+              v-model:web-url="formData.webUrl"
+              :readonly="formType === 'view'"
+              :view="formType === 'view'"
+              :separator="true"
+              :dense="true"
+              :outlined="true"
+              class="q-mb-xl"
+            />
+            <AddressForm
+              id="info-address"
+              dense
+              outlined
+              separator
+              prefix-id="default"
+              :title="'form.address'"
+              :readonly="formType === 'view'"
+              v-model:address="formData.address"
+              v-model:addressEN="formData.addressEN"
+              v-model:province-id="formData.provinceId"
+              v-model:district-id="formData.districtId"
+              v-model:sub-district-id="formData.subDistrictId"
+              v-model:moo="formData.moo"
+              v-model:mooEN="formData.mooEN"
+              v-model:soi="formData.soi"
+              v-model:soiEN="formData.soiEN"
+              v-model:street="formData.street"
+              v-model:streetEN="formData.streetEN"
+              v-model:zip-code="formData.zipCode"
+              class="q-mb-xl"
+            />
+            <FormLocation
+              id="info-location"
+              title="branch.form.group.location"
+              v-model:latitude="formData.latitude"
+              v-model:longitude="formData.longitude"
+              :readonly="formType === 'view'"
+              :separator="true"
+              outlined
+              dense
+              class="q-mb-xl"
+            />
+            <FormQr
+              id="info-qr"
+              :readonly="formType === 'view'"
+              title="QR Code"
+              :separator="true"
+              :qr="qrCodeimageUrl"
+              @view-qr="
+                () => {
+                  triggerEditQrCodeLine();
+                }
+              "
+              @edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()"
+              class="q-mb-xl"
+            />
+            <FormBank
+              id="info-bank"
+              :readonly="formType === 'view'"
+              title="branch.form.group.bankAccount"
+              dense
+              v-model:bank-book-list="formBankBook"
+              class="q-mb-xl"
+              @view-qr="
+                (i) => {
+                  currentIndexQrCodeBank = i;
+                  triggerEditQrCodeBank();
+                }
+              "
+              @edit-qr="
+                (i) => {
+                  currentIndexQrCodeBank = i;
+                  refQrCodeUpload.browse();
+                }
+              "
+            />
+            <FormBranchAdmin
+              id="info-branch-admin-view"
+              :admin="currentBranchAdmin"
+              class="q-mb-xl"
+            />
 
-            <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,
-                      );
+            <UploadFile
+              auto-save
+              class="q-mb-xl"
+              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,
+                }
+              "
+              @deleteFile="
+                async (filename) => {
+                  const res = await branchStore.deleteByIdAttachment(
+                    currentId,
+                    filename,
+                  );
+
+                  if (res) {
+                    currentAttachmentList = currentAttachmentList.filter(
+                      (v) => {
+                        if (v.name === filename) {
+                          return false;
+                        }
+                        return true;
+                      },
                     );
-
-                    if (res) {
-                      currentAttachmentList = currentAttachmentList.filter(
-                        (v) => {
-                          if (v.name === filename) {
-                            return false;
-                          }
-                          return true;
-                        },
-                      );
-                    }
                   }
-                "
-              />
-            </template>
-
-            <template v-if="currentTab === 'remark'"></template>
+                }
+              "
+            />
           </div>
         </div>
       </div>