refactor: currentFileSelected

src/components/upload-file/UploadFile.vue

@@ -4,7 +4,7 @@ import { SaveButton, UndoButton } from 'components/button';
 
 import { VuePDF, usePDF } from '@tato30/vue-pdf';
 
-const groupSelected = defineModel<string>('selected');
+const currentFileSelected = ref<string>('');
 const file = defineModel<
   {
     group?: string;
@@ -25,12 +25,12 @@ const currentIndexDropdownList = ref(0);
 
 const props = withDefaults(
   defineProps<{
-    tree?: { label: string; children: { label: string }[] }[];
+    treeFile: { lable: string; file: { lable: string }[] }[];
-    dropdownList?: string[];
+    dropdownList?: { label: string; value: string }[];
     hideAction?: boolean;
   }>(),
   {
-    tree: () => [],
+    treeFile: () => [],
   },
 );
 
@@ -61,24 +61,34 @@ function change(e: Event) {
 
     if (_file && file.value[currentIndex.value]) {
       file.value[currentIndex.value].file = _file;
+      file.value[currentIndex.value].group =
+        props.dropdownList?.[currentIndexDropdownList.value].value;
     } else {
       file.value.push({
-        group: props.dropdownList?.[currentIndexDropdownList.value],
+        group: props.dropdownList?.[currentIndexDropdownList.value].value,
         file: _file,
       });
     }
 
     emit(
       'sendOcr',
-      props.dropdownList?.[currentIndexDropdownList.value] || '',
+      props.dropdownList?.[currentIndexDropdownList.value].value || '',
       inputFile?.files?.[0],
     );
   }
 }
 
+watch(currentFileSelected, () => {
+  file.value.findIndex((v, i) => {
+    if (v.url?.includes(currentFileSelected.value)) {
+      currentIndex.value = i;
+    }
+  });
+});
+
 const emit = defineEmits<{
   (e: 'sendOcr', dropdown: string, file?: File): void;
-  (e: 'save', file?: File): void;
+  (e: 'save', เgroup: string, file?: File): void;
 }>();
 
 const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
@@ -89,7 +99,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
     <div>
       <div class="q-pa-sm text-center bordered" style="height: 50px">
         <q-btn-dropdown icon="mdi-upload" color="info" label="อัปโหลดเอกสาร">
-          <q-list v-for="(v, i) in dropdownList" :key="v">
+          <q-list v-for="(v, i) in dropdownList" :key="v.value">
             <q-item
               clickable
               v-close-popup
@@ -101,7 +111,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
               "
             >
               <q-item-section>
-                <q-item-label>{{ v }}</q-item-label>
+                <q-item-label>{{ $t(v.label) }}</q-item-label>
               </q-item-section>
             </q-item>
           </q-list>
@@ -110,10 +120,12 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
 
       <div class="full-height bordered-l bordered-b q-pa-sm">
         <q-tree
-          :nodes="tree || []"
+          :nodes="treeFile || []"
-          node-key="label"
+          node-key="lable"
+          label-key="lable"
+          children-key="file"
           selected-color="primary"
-          v-model:selected="groupSelected"
+          v-model:selected="currentFileSelected"
           default-expand-all
         />
       </div>
@@ -183,6 +195,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
           :page="page"
           :scale="scale"
         />
+
         <q-img v-else class="q-py-md full-width" :src="currentFile?.url" />
       </div>
     </div>
@@ -199,7 +212,13 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
           <SaveButton
             icon-only
             type="button"
-            @click="$emit('save', inputFile?.files?.[0])"
+            @click="
+              $emit(
+                'save',
+                dropdownList?.[currentIndexDropdownList].value || '',
+                inputFile?.files?.[0],
+              )
+            "
           />
         </div>
       </div>