refactor: edit uploadfile

src/components/upload-file/UploadFile.vue

@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
-import {
+import { DeleteButton } from 'components/button';
-  SaveButton,
-  UndoButton,
-  CloseButton,
-  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]) {
+      if (obj.value[currentIndex.value]) {
-        file.value[currentIndex.value].url = reader.result as string;
+        obj.value[currentIndex.value].url = reader.result as string;
-        console.log(file.value[currentIndex.value]);
+        currentFileSelected.value = _file.name;
       }
     };
 
-    if (_file && file.value[currentIndex.value]) {
+    if (!!props.autoSave) {
-      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) {
       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 () => {
+      if (!!props.autoSave) {
         emit('deleteFile', filename);
-    },
+      } else {
-
+        obj.value.splice(index, 1);
-    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 || '';
     },
 
     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) {
+              currentIndex = obj.length;
-                browse();
-              }
-            }
-          "
-        >
-          <q-list v-for="(v, i) in dropdownList" :key="v.value">
-            <q-item
-              clickable
-              v-close-popup
-              @click="
-                () => {
-                  currentIndexDropdownList = i;
               browse();
             }
           "
-            >
+        ></q-btn-dropdown>
-              <q-item-section>
-                <q-item-label>{{ $t(v.label) }}</q-item-label>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </q-btn-dropdown>
       </div>
 
-      <div class="bordered-l bordered-b q-pa-sm col full-height scroll">
+      <div class="bordered-l bordered-b q-pa-sm full-height scroll">
-        <q-tree
+        <q-item
-          :nodes="treeFile || []"
+          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 || '';
+            }
+          "
+        >
+          <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="
+                () => {
+                  deleteFileOfBranch(v.name || '', i);
+                }
+              "
+            />
+          </div>
+        </q-item>
+
+        <!-- <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,7 +252,6 @@ function deleteFile() {
                 <q-tooltip>{{ prop.node.label }}</q-tooltip>
                 {{ prop.node.label }}
               </div>
-              <div v-if="branch">
               <DeleteButton
                 iconOnly
                 @click.stop="
@@ -243,12 +261,11 @@ function deleteFile() {
                 "
               />
             </div>
-            </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"
@@ -301,73 +318,6 @@ 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>
-      </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%"
@@ -380,15 +330,15 @@ function deleteFile() {
           :page="page"
           :scale="scale"
         />
-
         <q-img
           v-else
           class="q-py-md full-width"
-        style="height: 220px; max-width: 300px"
           :src="currentFile?.url"
+          style="height: 220px; max-width: 300px"
         />
       </div>
     </div>
+  </div>
 </template>
 
 <style lang="scss">

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,9 +1800,7 @@ watch(currentHq, () => {
           v-if="$q.screen.gt.sm"
         >
           <SideMenu
-            :menu="
+            :menu="[
-              {
-                main: [
               {
                 name: $t('form.field.basicInformation'),
                 anchor: 'form-information',
@@ -1855,21 +1829,15 @@ 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)',
@@ -1885,7 +1853,6 @@ watch(currentHq, () => {
           id="branch-form"
           style="overflow-y: auto"
         >
-          <template v-if="currentTab === 'main'">
           <FormBranchInformation
             id="form-information"
             v-model:branchCount="formLastSubBranch"
@@ -1988,28 +1955,15 @@ watch(currentHq, () => {
           <FormBranchAdmin
             id="form-branch-admin-view"
             :admin="currentBranchAdmin"
+            class="q-mb-xl"
           />
-          </template>
 
-          <template v-if="currentTab === 'attachment'">
           <UploadFile
+            id="form-attachment"
+            class="q-mb-xl"
+            :auto-save="currentId !== ''"
             branch
-              :file="currentAttachmentList"
+            v-model="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) {
@@ -2027,21 +1981,16 @@ watch(currentHq, () => {
                 );
 
                 if (res) {
-                    currentAttachmentList = currentAttachmentList.filter(
+                  currentAttachmentList = currentAttachmentList.filter((v) => {
-                      (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,9 +2122,7 @@ 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',
@@ -2219,21 +2151,15 @@ 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)',
@@ -2248,7 +2174,6 @@ watch(currentHq, () => {
             id="branch-info"
             style="overflow-y: auto"
           >
-            <template v-if="currentTab === 'main'">
             <FormBranchInformation
               id="info-information"
               v-model:virtual="formData.virtual"
@@ -2356,21 +2281,19 @@ watch(currentHq, () => {
             <FormBranchAdmin
               id="info-branch-admin-view"
               :admin="currentBranchAdmin"
+              class="q-mb-xl"
             />
-            </template>
 
-            <template v-if="currentTab === 'attachment'">
             <UploadFile
+              auto-save
+              class="q-mb-xl"
               id="info-attachment"
               branch
               :file="currentAttachmentList"
               :tree-file="
                 Object.values(
                   currentAttachmentList.reduce<
-                      Record<
+                    Record<string, { label: string; file: { label: string }[] }>
-                        string,
-                        { label: string; file: { label: string }[] }
-                      >
                   >((a, b) => {
                     if (b.name && !a[b.name]) {
                       a[b.name] = {
@@ -2386,11 +2309,7 @@ watch(currentHq, () => {
                 async (_group, file) => {
                   if (file) {
                     attachmentList.push(file);
-
+                    await branchStore.putAttachment(currentId, attachmentList);
-                      await branchStore.putAttachment(
-                        currentId,
-                        attachmentList,
-                      );
                   }
                 }
               "
@@ -2414,9 +2333,6 @@ watch(currentHq, () => {
                 }
               "
             />
-            </template>
-
-            <template v-if="currentTab === 'remark'"></template>
           </div>
         </div>
       </div>