Fix for #74 and #72

frontend/pages/files/index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, watch, onMounted } from 'vue';
+import {ref, computed, watch, onMounted, onUnmounted} from 'vue';
 import DocumentDisplayModal from "~/components/DocumentDisplayModal.vue";
 import DocumentUploadModal from "~/components/DocumentUploadModal.vue";
 import dayjs from "dayjs";
@@ -72,7 +72,61 @@ const setupPage = async () => {
   }
 }
 
-onMounted(() => setupPage())
+// --- Global Drag & Drop (Auto-Open Upload Modal) ---
+let dragCounter = 0
+
+const handleGlobalDragEnter = (e) => {
+  dragCounter++
+
+  // 1. Abbrechen, wenn wir gerade intern Ordner/Dateien verschieben
+  if (draggedItem.value) return
+
+  // 2. Prüfen ob Files von außen kommen
+  if (e.dataTransfer && e.dataTransfer.types && e.dataTransfer.types.includes('Files')) {
+    // Modal öffnen, falls noch nicht offen (optionaler Check, useModal handhabt das meist selbst)
+    // Wir übergeben den aktuellen Ordner
+    modal.open(DocumentUploadModal, {
+      fileData: {folder: currentFolder.value?.id, typeEnabled: true},
+      onUploadFinished: () => {
+        setupPage()
+        dragCounter = 0
+      }
+    })
+  }
+}
+
+const handleGlobalDragLeave = (e) => {
+  dragCounter--
+}
+
+const handleGlobalDrop = (e) => {
+  dragCounter = 0
+  // Verhindert, dass der Browser die Datei öffnet, falls man neben das Modal droppt
+  e.preventDefault()
+}
+
+const handleGlobalDragOver = (e) => {
+  e.preventDefault()
+}
+
+onMounted(() => {
+  setupPage()
+
+  // Globale Listener registrieren
+  window.addEventListener('dragenter', handleGlobalDragEnter)
+  window.addEventListener('dragleave', handleGlobalDragLeave)
+  window.addEventListener('dragover', handleGlobalDragOver)
+  window.addEventListener('drop', handleGlobalDrop)
+})
+
+onUnmounted(() => {
+  // Aufräumen
+  window.removeEventListener('dragenter', handleGlobalDragEnter)
+  window.removeEventListener('dragleave', handleGlobalDragLeave)
+  window.removeEventListener('dragover', handleGlobalDragOver)
+  window.removeEventListener('drop', handleGlobalDrop)
+})
+
 
 // --- Navigation ---
 const changeFolder = async (folder) => {
@@ -86,7 +140,7 @@ const navigateUp = () => {
   changeFolder(parent || null)
 }
 
-// --- Drag & Drop ---
+// --- Drag & Drop (Internal Sort) ---
 const handleDragStart = (entry) => {
   draggedItem.value = entry
 }
@@ -220,8 +274,12 @@ defineShortcuts({
       else if (entry.type === "up") navigateUp()
     }
   },
-  'arrowdown': () => { if (selectedFileIndex.value < renderedFileList.value.length - 1) selectedFileIndex.value++ },
-  'arrowup': () => { if (selectedFileIndex.value > 0) selectedFileIndex.value-- }
+  'arrowdown': () => {
+    if (selectedFileIndex.value < renderedFileList.value.length - 1) selectedFileIndex.value++
+  },
+  'arrowup': () => {
+    if (selectedFileIndex.value > 0) selectedFileIndex.value--
+  }
 })
 
 const isSyncing = ref(false)
@@ -267,7 +325,8 @@ const syncdokubox = async () => {
           @click="syncdokubox"
           class="mr-2"
       />
-      <UInput id="searchinput" v-model="searchString" icon="i-heroicons-magnifying-glass" placeholder="Suche..." class="w-64" />
+      <UInput id="searchinput" v-model="searchString" icon="i-heroicons-magnifying-glass" placeholder="Suche..."
+              class="w-64"/>
     </template>
   </UDashboardNavbar>
 
@@ -276,21 +335,27 @@ const syncdokubox = async () => {
       <UBreadcrumb :links="breadcrumbLinks"/>
     </template>
     <template #right>
-      <USelectMenu v-model="displayMode" :options="displayModes" value-attribute="key" class="w-32" :ui-menu="{ zIndex: 'z-50' }">
+      <USelectMenu v-model="displayMode" :options="displayModes" value-attribute="key" class="w-32"
+                   :ui-menu="{ zIndex: 'z-50' }">
         <template #label>
           <UIcon :name="displayModes.find(i => i.key === displayMode).icon" class="w-4 h-4"/>
           <span>{{ displayModes.find(i => i.key === displayMode).label }}</span>
         </template>
       </USelectMenu>
       <UButtonGroup size="sm">
-        <UButton icon="i-heroicons-document-plus" color="primary" @click="modal.open(DocumentUploadModal, { fileData: { folder: currentFolder?.id }, onUploadFinished: setupPage })">Datei</UButton>
+        <UButton icon="i-heroicons-document-plus" color="primary"
+                 @click="modal.open(DocumentUploadModal, { fileData: { folder: currentFolder?.id }, onUploadFinished: setupPage })">
+          Datei
+        </UButton>
         <UButton icon="i-heroicons-folder-plus" color="white" @click="createFolderModalOpen = true">Ordner</UButton>
       </UButtonGroup>
     </template>
   </UDashboardToolbar>
 
   <UDashboardPanelContent class="p-0 overflow-y-auto">
-    <div v-if="!loaded" class="p-10 flex justify-center"><UProgress animation="carousel" class="w-1/2" /></div>
+    <div v-if="!loaded" class="p-10 flex justify-center">
+      <UProgress animation="carousel" class="w-1/2"/>
+    </div>
 
     <div v-else>
       <div v-if="displayMode === 'list'">
@@ -327,7 +392,8 @@ const syncdokubox = async () => {
               {{ entry.type !== 'up' ? dayjs(entry.createdAt).format("DD.MM.YY") : '-' }}
             </td>
             <td class="px-3 text-right" @click.stop>
-              <UDropdown v-if="entry.type !== 'up'" :items="[[{ label: 'Umbenennen', icon: 'i-heroicons-pencil-square', click: () => openRenameModal(entry) }]]">
+              <UDropdown v-if="entry.type !== 'up'"
+                         :items="[[{ label: 'Umbenennen', icon: 'i-heroicons-pencil-square', click: () => openRenameModal(entry) }]]">
                 <UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-horizontal"/>
               </UDropdown>
             </td>
@@ -346,7 +412,9 @@ const syncdokubox = async () => {
             class="group relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-4 flex flex-col items-center hover:border-primary-500 transition-all cursor-pointer"
             @click="entry.type === 'folder' ? changeFolder(entry) : (entry.type === 'up' ? navigateUp() : showFile(entry.id))"
         >
-          <UDropdown v-if="entry.type !== 'up'" :items="[[{ label: 'Umbenennen', icon: 'i-heroicons-pencil-square', click: () => openRenameModal(entry) }]]" class="absolute top-1 right-1 opacity-0 group-hover:opacity-100" @click.stop>
+          <UDropdown v-if="entry.type !== 'up'"
+                     :items="[[{ label: 'Umbenennen', icon: 'i-heroicons-pencil-square', click: () => openRenameModal(entry) }]]"
+                     class="absolute top-1 right-1 opacity-0 group-hover:opacity-100" @click.stop>
             <UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-vertical" size="xs"/>
           </UDropdown>
           <UIcon
@@ -363,16 +431,30 @@ const syncdokubox = async () => {
   <UModal v-model="createFolderModalOpen">
     <UCard>
       <template #header><h3 class="font-bold">Ordner erstellen</h3></template>
-      <UFormGroup label="Name" required><UInput v-model="createFolderData.name" autofocus @keyup.enter="createFolder" /></UFormGroup>
-      <template #footer><div class="flex justify-end gap-2"><UButton color="gray" @click="createFolderModalOpen = false">Abbrechen</UButton><UButton color="primary" @click="createFolder">Erstellen</UButton></div></template>
+      <UFormGroup label="Name" required>
+        <UInput v-model="createFolderData.name" autofocus @keyup.enter="createFolder"/>
+      </UFormGroup>
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <UButton color="gray" @click="createFolderModalOpen = false">Abbrechen</UButton>
+          <UButton color="primary" @click="createFolder">Erstellen</UButton>
+        </div>
+      </template>
     </UCard>
   </UModal>
 
   <UModal v-model="renameModalOpen">
     <UCard>
       <template #header><h3 class="font-bold">Umbenennen</h3></template>
-      <UFormGroup label="Neuer Name"><UInput v-model="renameData.name" autofocus @keyup.enter="updateName" /></UFormGroup>
-      <template #footer><div class="flex justify-end gap-2"><UButton color="gray" @click="renameModalOpen = false">Abbrechen</UButton><UButton color="primary" @click="updateName">Speichern</UButton></div></template>
+      <UFormGroup label="Neuer Name">
+        <UInput v-model="renameData.name" autofocus @keyup.enter="updateName"/>
+      </UFormGroup>
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <UButton color="gray" @click="renameModalOpen = false">Abbrechen</UButton>
+          <UButton color="primary" @click="updateName">Speichern</UButton>
+        </div>
+      </template>
     </UCard>
   </UModal>
 </template>