refactor:edit get file

src/components/upload-file/UploadFile.vue

@@ -1,26 +1,33 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { SaveButton, UndoButton } from 'components/button';
 
 import { VuePDF, usePDF } from '@tato30/vue-pdf';
 
-const currentFileUrl = defineModel<string>('currentFileUrl');
-const { pdf, pages } = usePDF(currentFileUrl);
+const groupSelected = defineModel<string>('selected');
+const file = defineModel<
+  {
+    group?: string;
+    url?: string;
+    file?: File;
+  }[]
+>('file', {
+  default: [],
+});
 
-const selected = defineModel<string>('selected');
-const file = defineModel<File | null>('file');
+const currentFile = computed(() => file.value.at(currentIndex.value));
+const currentIndex = ref(0);
 
 const scale = ref(1);
 const page = ref(1);
 
-const currentTab = ref<string>('information');
-
 const currentIndexDropdownList = ref(0);
 
 const props = withDefaults(
   defineProps<{
     tree?: { label: string; children: { label: string }[] }[];
     dropdownList?: string[];
+    hideAction?: boolean;
   }>(),
   {
     tree: () => [],
@@ -47,10 +54,19 @@ function change(e: Event) {
     const reader = new FileReader();
     reader.readAsDataURL(_file);
     reader.onload = () => {
-      currentFileUrl.value = reader.result as string;
+      if (file.value[currentIndex.value]) {
+        file.value[currentIndex.value].url = reader.result as string;
+      }
     };
 
-    if (_file) file.value = _file;
+    if (_file && file.value[currentIndex.value]) {
+      file.value[currentIndex.value].file = _file;
+    } else {
+      file.value.push({
+        group: props.dropdownList?.[currentIndexDropdownList.value],
+        file: _file,
+      });
+    }
 
     emit(
       'sendOcr',
@@ -60,24 +76,16 @@ function change(e: Event) {
   }
 }
 
-const tabsList = [
-  {
-    label: 'information',
-    name: 'information',
-  },
-  {
-    label: 'document',
-    name: 'document',
-  },
-];
-
 const emit = defineEmits<{
   (e: 'sendOcr', dropdown: string, file?: File): void;
+  (e: 'save', file?: File): void;
 }>();
+
+const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
 </script>
 
 <template>
-  <div class="full-height full-width row">
+  <div class="full-width row" stlye="min-height: 500px">
     <div>
       <div class="q-pa-sm text-center bordered" style="height: 50px">
         <q-btn-dropdown icon="mdi-upload" color="info" label="อัปโหลดเอกสาร">
@@ -105,7 +113,7 @@ const emit = defineEmits<{
           :nodes="tree || []"
           node-key="label"
           selected-color="primary"
-          v-model:selected="selected"
+          v-model:selected="groupSelected"
           default-expand-all
         />
       </div>
@@ -166,13 +174,16 @@ const emit = defineEmits<{
         class="flex flex-center surface-2 bordered-l bordered-r bordered-b full-height scroll"
       >
         <VuePDF
-          v-if="file?.type === 'application/pdf'"
+          v-if="
+            currentFile?.url?.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="currentFileUrl" />
+        <q-img v-else class="q-py-md full-width" :src="currentFile?.url" />
       </div>
     </div>
 
@@ -183,31 +194,18 @@ const emit = defineEmits<{
       >
         ข้อมูลหนังสือเดินทาง
 
-        <div class="row">
+        <div class="row" v-if="!hideAction">
           <UndoButton icon-only type="button" />
-          <SaveButton icon-only type="button" />
+          <SaveButton
+            icon-only
+            type="button"
+            @click="$emit('save', inputFile?.files?.[0])"
+          />
         </div>
       </div>
 
       <div class="bordered-r bordered-b full-height">
-        <q-tabs
-          dense
-          inline-label
-          mobile-arrows
-          v-model="currentTab"
-          active-class="active-tab text-weight-bold"
-          class="app-text-muted full-width"
-          align="left"
-        >
-          <q-tab
-            :id="`tab-${tab.label}`"
-            v-for="tab in tabsList"
-            v-bind:key="tab.name"
-            class="content-tab text-capitalize"
-            :name="tab.name"
-            :label="$t(tab.label)"
-          />
-        </q-tabs>
+        <slot name="form" />
       </div>
     </div>
   </div>