fix: Should allow drop multiple file to mods and saves

Voxelum · May 6, 2023 · c4130bf · c4130bf
1 parent 681ac75
commit c4130bf
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 19 deletions.
diff --git a/xmcl-keystone-ui/src/composables/dragDrop.ts b/xmcl-keystone-ui/src/composables/dragDrop.ts
@@ -26,15 +26,19 @@ export function useDraggableElem (
 }
 
 export function useDrop (
-  callback: (file: File) => void,
+  callback: (files: File[]) => void,
 ) {
   function onDrop (event: DragEvent) {
     if (!event.dataTransfer) return
     event.preventDefault()
     const length = event.dataTransfer.files.length
     if (length > 0) {
+      const files = [] as File[]
       for (let i = 0; i < length; ++i) {
-        callback(event.dataTransfer.files[i])
+        files.push(event.dataTransfer.files[i])
+      }
+      if (files.length > 0) {
+        callback(files)
       }
     }
   }

diff --git a/xmcl-keystone-ui/src/views/Mod.vue b/xmcl-keystone-ui/src/views/Mod.vue
@@ -66,7 +66,6 @@
 
 <script lang=ts setup>
 import Hint from '@/components/Hint.vue'
-import RefreshingTile from '@/components/RefreshingTile.vue'
 import { useDrop, useService } from '@/composables'
 import { kInstanceContext } from '@/composables/instanceContext'
 import { useModDeletion } from '@/composables/modDelete'
@@ -90,9 +89,10 @@ const { isSelectionMode, selectedItems, onEnable, onClick } = useModSelection(fi
 const { t } = useI18n()
 
 const importing = ref(false)
-const { onDrop: onDropToImport } = useDrop((file) => {
+const { onDrop: onDropToImport } = useDrop((files) => {
   importing.value = true
-  importResources([{ path: file.path, domain: ResourceDomain.Mods }]).finally(() => {
+
+  importResources(files.map(f => ({ path: f.path, domain: ResourceDomain.Mods }))).finally(() => {
     importing.value = false
   })
 })

diff --git a/xmcl-keystone-ui/src/views/Save.vue b/xmcl-keystone-ui/src/views/Save.vue
@@ -52,20 +52,19 @@
 </template>
 
 <script lang="ts">
-import { useOperation, useDrop, useService } from '@/composables'
 import Hint from '@/components/Hint.vue'
+import { useDrop, useOperation } from '@/composables'
+import { kInstanceContext } from '@/composables/instanceContext'
+import { usePresence } from '@/composables/presence'
+import { injection } from '@/util/inject'
+import DeleteDialog from '../components/DeleteDialog.vue'
+import { useDialog } from '../composables/dialog'
+import { useInstances } from '../composables/instance'
+import { useInstanceSaves } from '../composables/save'
+import SaveViewPagePreviewCard from './SaveCard.vue'
 import SaveViewPageCopyFromDialog from './SaveCopyFromDialog.vue'
 import SaveViewPageCopyToDialog from './SaveCopyToDialog.vue'
-import SaveViewPagePreviewCard from './SaveCard.vue'
 import SaveViewPageFloatButton from './SaveFloatButton.vue'
-import { useInstances } from '../composables/instance'
-import { useInstanceSaves } from '../composables/save'
-import DeleteDialog from '../components/DeleteDialog.vue'
-import { useDialog } from '../composables/dialog'
-import { usePresence } from '@/composables/presence'
-import { InstanceServiceKey } from '@xmcl/runtime-api'
-import { kInstanceContext } from '@/composables/instanceContext'
-import { injection } from '@/util/inject'
 
 export default defineComponent({
   components: {
@@ -97,7 +96,9 @@ export default defineComponent({
       copySave({ saveName: save, destInstancePath: instances })
     })
     const dragging = ref(false)
-    const { onDrop } = useDrop((file) => importSave({ path: file.path }))
+    const { onDrop } = useDrop((files) => {
+      files.map(f => ({ path: f.path })).forEach(importSave)
+    })
     function onDropSave(e: DragEvent) {
       if (!e.dataTransfer) return
       if (e.dataTransfer.files.length === 0) return
@@ -164,6 +165,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style>
-</style>