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";
@@ -11,7 +11,7 @@ const router = useRouter()
 const route = useRoute()
 const modal = useModal()
 const toast = useToast()
-const { $api } = useNuxtApp()
+const {$api} = useNuxtApp()
 const files = useFiles()
 
 // --- State ---
@@ -23,14 +23,14 @@ const loadingDocs = ref(true)
 const loaded = ref(false)
 const displayMode = ref("list")
 const displayModes = [
-  { label: 'Liste', key: 'list', icon: 'i-heroicons-list-bullet' },
-  { label: 'Kacheln', key: 'rectangles', icon: 'i-heroicons-squares-2x2' }
+  {label: 'Liste', key: 'list', icon: 'i-heroicons-list-bullet'},
+  {label: 'Kacheln', key: 'rectangles', icon: 'i-heroicons-squares-2x2'}
 ]
 
 const createFolderModalOpen = ref(false)
-const createFolderData = ref({ name: '', standardFiletype: null, standardFiletypeIsOptional: true })
+const createFolderData = ref({name: '', standardFiletype: null, standardFiletypeIsOptional: true})
 const renameModalOpen = ref(false)
-const renameData = ref({ id: null, name: '', type: '' })
+const renameData = ref({id: null, name: '', type: ''})
 
 const selectedFileIndex = ref(0)
 const draggedItem = ref(null)
@@ -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
 }
@@ -99,14 +153,14 @@ const handleDrop = async (targetFolderId) => {
   loadingDocs.value = true
   try {
     if (draggedItem.value.type === 'file') {
-      await useEntities("files").update(draggedItem.value.id, { folder: targetFolderId })
+      await useEntities("files").update(draggedItem.value.id, {folder: targetFolderId})
     } else {
-      await useEntities("folders").update(draggedItem.value.id, { parent: targetFolderId })
+      await useEntities("folders").update(draggedItem.value.id, {parent: targetFolderId})
     }
-    toast.add({ title: 'Erfolgreich verschoben', icon: 'i-heroicons-check-circle', color: 'green' })
+    toast.add({title: 'Erfolgreich verschoben', icon: 'i-heroicons-check-circle', color: 'green'})
     await setupPage()
   } catch (e) {
-    toast.add({ title: 'Fehler beim Verschieben', color: 'red' })
+    toast.add({title: 'Fehler beim Verschieben', color: 'red'})
   } finally {
     draggedItem.value = null
     loadingDocs.value = false
@@ -115,7 +169,7 @@ const handleDrop = async (targetFolderId) => {
 
 // --- Breadcrumbs ---
 const breadcrumbLinks = computed(() => {
-  const links = [{ label: "Home", icon: "i-heroicons-home", click: () => changeFolder(null) }]
+  const links = [{label: "Home", icon: "i-heroicons-home", click: () => changeFolder(null)}]
   if (currentFolder.value) {
     const path = []
     let curr = currentFolder.value
@@ -138,13 +192,13 @@ const renderedFileList = computed(() => {
   // 1. Aktuelle Ordner filtern
   const folderList = folders.value
       .filter(i => currentFolder.value ? i.parent === currentFolder.value.id : !i.parent)
-      .map(i => ({ ...i, label: i.name, type: "folder" }))
+      .map(i => ({...i, label: i.name, type: "folder"}))
       .sort((a, b) => a.label.localeCompare(b.label))
 
   // 2. Aktuelle Dateien filtern
   const fileList = documents.value
       .filter(i => currentFolder.value ? i.folder === currentFolder.value.id : !i.folder)
-      .map(i => ({ ...i, label: i.path.split("/").pop(), type: "file" }))
+      .map(i => ({...i, label: i.path.split("/").pop(), type: "file"}))
       .sort((a, b) => a.label.localeCompare(b.label))
 
   let combined = [...folderList, ...fileList]
@@ -172,12 +226,12 @@ const createFolder = async () => {
     name: createFolderData.value.name
   })
   createFolderModalOpen.value = false
-  createFolderData.value = { name: '' }
+  createFolderData.value = {name: ''}
   setupPage()
 }
 
 const openRenameModal = (entry) => {
-  renameData.value = { id: entry.id, name: entry.label, type: entry.type }
+  renameData.value = {id: entry.id, name: entry.label, type: entry.type}
   renameModalOpen.value = true
 }
 
@@ -186,14 +240,14 @@ const updateName = async () => {
   loadingDocs.value = true
   try {
     if (renameData.value.type === 'folder') {
-      await useEntities("folders").update(renameData.value.id, { name: renameData.value.name })
+      await useEntities("folders").update(renameData.value.id, {name: renameData.value.name})
     } else {
       const file = documents.value.find(d => d.id === renameData.value.id)
       const pathParts = file.path.split('/')
       pathParts[pathParts.length - 1] = renameData.value.name
-      await useEntities("files").update(renameData.value.id, { path: pathParts.join('/') })
+      await useEntities("files").update(renameData.value.id, {path: pathParts.join('/')})
     }
-    toast.add({ title: 'Umbenannt', color: 'green' })
+    toast.add({title: 'Umbenannt', color: 'green'})
     setupPage()
   } finally {
     renameModalOpen.value = false
@@ -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)
@@ -229,7 +287,7 @@ const isSyncing = ref(false)
 const syncdokubox = async () => {
   isSyncing.value = true
   try {
-    await $api('/api/functions/services/syncdokubox', { method: 'POST' })
+    await $api('/api/functions/services/syncdokubox', {method: 'POST'})
 
     toast.add({
       title: 'Erfolg',
@@ -267,30 +325,37 @@ 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>
 
   <UDashboardToolbar class="sticky top-0 z-30 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
     <template #left>
-      <UBreadcrumb :links="breadcrumbLinks" />
+      <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" />
+          <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,8 +392,9 @@ 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) }]]">
-                <UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-horizontal" />
+              <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>
           </tr>
@@ -346,8 +412,10 @@ 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>
-            <UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-vertical" size="xs" />
+          <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
               :name="entry.type === 'up' ? 'i-heroicons-arrow-uturn-left' : (entry.type === 'folder' ? 'i-heroicons-folder-solid' : 'i-heroicons-document-text')"
@@ -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>