refactor: edit layout

src/components/upload-file/UploadFile.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
-import { SaveButton, UndoButton, CloseButton } from 'components/button';
+import {
+  SaveButton,
+  UndoButton,
+  CloseButton,
+  DeleteButton,
+} from 'components/button';
 import { dialog } from 'stores/utils';
 
+import { useI18n } from 'vue-i18n';
 import { VuePDF, usePDF } from '@tato30/vue-pdf';
 
+const { t } = useI18n();
 const currentFileSelected = ref<string>('');
 const file = defineModel<
   {
@@ -33,9 +40,11 @@ const props = withDefaults(
     readonly?: boolean;
     dropdownList?: { label: string; value: string }[];
     hideAction?: boolean;
+    branch?: boolean;
   }>(),
   {
     treeFile: () => [],
+    branch: false,
   },
 );
 
@@ -63,6 +72,7 @@ function change(e: Event) {
     reader.onload = () => {
       if (file.value[currentIndex.value]) {
         file.value[currentIndex.value].url = reader.result as string;
+        console.log(file.value[currentIndex.value]);
       }
     };
 
@@ -77,21 +87,29 @@ function change(e: Event) {
         _file.name;
 
       file.value.push({
-        name: newName,
+        name: props.branch === true ? _file.name : newName,
         group: props.dropdownList?.[currentIndexDropdownList.value].value,
         file: _file,
       });
 
-      currentFileSelected.value = newName;
+      currentFileSelected.value = props.branch === true ? _file.name : newName;
     }
 
     statusOcr.value = true;
 
-    emit(
+    if (props.branch === true) {
-      'sendOcr',
+      emit(
-      props.dropdownList?.[currentIndexDropdownList.value].value || '',
+        'save',
-      inputFile?.files?.[0],
+        props.dropdownList?.[currentIndexDropdownList.value].value || '',
-    );
+        inputFile?.files?.[0],
+      );
+    } else {
+      emit(
+        'sendOcr',
+        props.dropdownList?.[currentIndexDropdownList.value].value || '',
+        inputFile?.files?.[0],
+      );
+    }
   }
 }
 
@@ -112,15 +130,59 @@ watch(currentFileSelected, () => {
 
 const emit = defineEmits<{
   (e: 'sendOcr', dropdown: string, file?: File): void;
-  (e: 'save', เgroup: string, file?: File): void;
+  (e: 'save', group: string, file?: File): void;
   (e: 'deleteFile', filename: string): void;
 }>();
 
 const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
+
+function deleteFileOfBranch(filename: string) {
+  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', 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 || '';
+    },
+
+    cancel: () => {},
+  });
+}
 </script>
 
 <template>
-  <div class="full-width row no-wrap wrapper">
+  <div class="full-width row no-wrap wrapper" style="height: 250px">
     <div class="col full-height column no-wrap">
       <div class="q-pa-sm text-center bordered" style="height: 50px">
         <q-btn-dropdown
@@ -128,6 +190,13 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
           icon="mdi-upload"
           color="info"
           label="อัปโหลดเอกสาร"
+          @click="
+            () => {
+              if (branch) {
+                browse();
+              }
+            }
+          "
         >
           <q-list v-for="(v, i) in dropdownList" :key="v.value">
             <q-item
@@ -159,16 +228,27 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
           default-expand-all
         >
           <template v-slot:default-header="prop">
-            <div class="ellipsis">
+            <div class="full-width row items-center justify-between">
-              <q-tooltip>{{ prop.node.label }}</q-tooltip>
+              <div class="col-8 ellipsis">
-              {{ prop.node.label }}
+                <q-tooltip>{{ prop.node.label }}</q-tooltip>
+                {{ prop.node.label }}
+              </div>
+              <div v-if="branch">
+                <DeleteButton
+                  iconOnly
+                  @click.stop="
+                    () => {
+                      deleteFileOfBranch(prop.node.label);
+                    }
+                  "
+                />
+              </div>
             </div>
           </template>
         </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"
@@ -243,7 +323,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
       </div>
     </div>
 
-    <div class="col-5 full-height column no-wrap">
+    <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"
@@ -277,37 +357,37 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
             class="q-ml-sm"
             @click="
               () => {
-                const tempValue = treeFile.find(
+                deleteFile();
-                  (v: any) => v.label === $t(currentMode),
-                );
-
-                if (!tempValue) return;
-
-                const idx = tempValue.file?.findIndex(
-                  (v: any) => v.label === currentFileSelected,
-                );
-
-                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);
-
-                    currentFileSelected = tempValue.file?.[idx - 1].label || '';
-                  },
-
-                  cancel: () => {},
-                });
               }
             "
           />
         </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>