Redone Files Index, #16 Added Drag and Drop for Files

frontend/pages/files/index.vue

@@ -1,37 +1,16 @@
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue';
 import DocumentDisplayModal from "~/components/DocumentDisplayModal.vue";
 import DocumentUploadModal from "~/components/DocumentUploadModal.vue";
 import dayjs from "dayjs";
-import arraySort from "array-sort";
-
-// --- Shortcuts ---
-defineShortcuts({
-  '/': () => document.getElementById("searchinput").focus(),
-  '+': () => { uploadModalOpen.value = true },
-  'Enter': {
-    usingInput: true,
-    handler: () => {
-      const entry = renderedFileList.value[selectedFileIndex.value]
-      if (!entry) return
-      if (entry.type === "file") showFile(entry.id)
-      else if (entry.type === "folder") changeFolder(folders.value.find(i => i.id === entry.id))
-    }
-  },
-  'arrowdown': () => {
-    if (selectedFileIndex.value < renderedFileList.value.length - 1) selectedFileIndex.value++
-  },
-  'arrowup': () => {
-    if (selectedFileIndex.value > 0) selectedFileIndex.value--
-  }
-})
 
+// --- Services & Stores ---
 const dataStore = useDataStore()
 const tempStore = useTempStore()
 const router = useRouter()
 const route = useRoute()
 const modal = useModal()
-const auth = useAuthStore()
+const toast = useToast()
 const files = useFiles()
 
 // --- State ---
@@ -51,6 +30,7 @@ const createFolderModalOpen = ref(false)
 const createFolderData = ref({ name: '', standardFiletype: null, standardFiletypeIsOptional: true })
 const selectedFiles = ref({})
 const selectedFileIndex = ref(0)
+const draggedItem = ref(null)
 
 // --- Search & Debounce ---
 const searchString = ref(tempStore.searchStrings["files"] || '')
@@ -79,6 +59,8 @@ const setupPage = async () => {
 
   if (route.query?.folder) {
     currentFolder.value = folders.value.find(i => i.id === route.query.folder) || null
+  } else {
+    currentFolder.value = null
   }
   loadingDocs.value = false
   loaded.value = true
@@ -86,22 +68,23 @@ const setupPage = async () => {
 
 onMounted(() => setupPage())
 
-const currentFolders = computed(() => {
+// --- Navigation & Breadcrumbs ---
-  return folders.value
+const changeFolder = async (folder) => {
-      .filter(i => currentFolder.value ? i.parent === currentFolder.value.id : !i.parent)
+  currentFolder.value = folder
-      .sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }))
+  await router.push(folder ? `/files?folder=${folder.id}` : `/files`)
-})
+}
 
 const breadcrumbLinks = computed(() => {
   const links = [{ label: "Home", icon: "i-heroicons-home", click: () => changeFolder(null) }]
   if (currentFolder.value) {
-    let path = []
+    const path = []
     let curr = currentFolder.value
     while (curr) {
+      const folderObj = curr // Closure Sicherheit
       path.unshift({
-        label: curr.name,
+        label: folderObj.name,
         icon: "i-heroicons-folder",
-        click: () => changeFolder(folders.value.find(f => f.id === curr.id))
+        click: () => changeFolder(folderObj)
       })
       curr = folders.value.find(f => f.id === curr.parent)
     }
@@ -110,22 +93,44 @@ const breadcrumbLinks = computed(() => {
   return links
 })
 
+// --- Drag & Drop ---
+const handleDragStart = (entry) => {
+  draggedItem.value = entry
+}
+
+const handleDrop = async (targetFolder) => {
+  if (!draggedItem.value || draggedItem.value.id === targetFolder.id) return
+
+  // Verhindern, dass Ordner in sich selbst verschoben werden
+  if (draggedItem.value.type === 'folder' && draggedItem.value.id === targetFolder.id) return
+
+  loadingDocs.value = true
+  try {
+    if (draggedItem.value.type === 'file') {
+      await useEntities("files").update(draggedItem.value.id, { folder: targetFolder.id })
+    } else {
+      await useEntities("folders").update(draggedItem.value.id, { parent: targetFolder.id })
+    }
+    toast.add({ title: 'Erfolgreich verschoben', icon: 'i-heroicons-check-circle', color: 'green' })
+    await setupPage()
+  } catch (e) {
+    toast.add({ title: 'Fehler beim Verschieben', color: 'red' })
+  } finally {
+    draggedItem.value = null
+    loadingDocs.value = false
+  }
+}
+
+// --- Data Mapping ---
 const renderedFileList = computed(() => {
-  const folderList = currentFolders.value.map(i => ({
+  const folderList = folders.value
-    label: i.name,
+      .filter(i => currentFolder.value ? i.parent === currentFolder.value.id : !i.parent)
-    id: i.id,
+      .map(i => ({ ...i, label: i.name, type: "folder" }))
-    type: "folder",
+      .sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }))
-    createdAt: i.createdAt
-  }))
 
   const fileList = documents.value
       .filter(i => currentFolder.value ? i.folder === currentFolder.value.id : !i.folder)
-      .map(i => ({
+      .map(i => ({ ...i, label: i.path.split("/").pop(), type: "file" }))
-        label: i.path.split("/").pop(),
-        id: i.id,
-        type: "file",
-        createdAt: i.createdAt
-      }))
       .sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }))
 
   let combined = [...folderList, ...fileList]
@@ -135,11 +140,7 @@ const renderedFileList = computed(() => {
   return combined
 })
 
-const changeFolder = async (folder) => {
+// --- Actions ---
-  currentFolder.value = folder
-  await router.push(folder ? `/files?folder=${folder.id}` : `/files`)
-}
-
 const createFolder = async () => {
   await useEntities("folders").create({
     parent: currentFolder.value?.id,
@@ -159,26 +160,31 @@ const showFile = (fileId) => {
   })
 }
 
-const downloadSelected = async () => {
-  const ids = Object.keys(selectedFiles.value).filter(k => selectedFiles.value[k])
-  await useFiles().downloadFile(undefined, ids)
-}
-
 const clearSearchString = () => {
   searchString.value = ''
   debouncedSearch.value = ''
   tempStore.clearSearchString("files")
 }
 
-const selectAll = (event) => {
+// --- Shortcuts ---
-  if (event.target.checked) {
+defineShortcuts({
-    const obj = {}
+  '/': () => document.getElementById("searchinput").focus(),
-    renderedFileList.value.filter(e => e.type === 'file').forEach(e => obj[e.id] = true)
+  'Enter': {
-    selectedFiles.value = obj
+    usingInput: true,
-  } else {
+    handler: () => {
-    selectedFiles.value = {}
+      const entry = renderedFileList.value[selectedFileIndex.value]
+      if (!entry) return
+      if (entry.type === "file") showFile(entry.id)
+      else if (entry.type === "folder") changeFolder(entry)
     }
+  },
+  'arrowdown': () => {
+    if (selectedFileIndex.value < renderedFileList.value.length - 1) selectedFileIndex.value++
+  },
+  'arrowup': () => {
+    if (selectedFileIndex.value > 0) selectedFileIndex.value--
   }
+})
 </script>
 
 <template>
@@ -210,7 +216,7 @@ const selectAll = (event) => {
     </template>
   </UDashboardNavbar>
 
-  <UDashboardToolbar class="sticky top-0 z-10 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
+  <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" :ui="{ ol: 'gap-x-2', li: 'text-sm' }" />
     </template>
@@ -220,6 +226,7 @@ const selectAll = (event) => {
           :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" />
@@ -232,11 +239,7 @@ const selectAll = (event) => {
             icon="i-heroicons-document-plus"
             color="primary"
             @click="modal.open(DocumentUploadModal, {
-            fileData: {
+          fileData: { folder: currentFolder?.id },
-              folder: currentFolder?.id,
-              type: currentFolder?.standardFiletype,
-              typeEnabled: currentFolder?.standardFiletypeIsOptional
-            },
           onUploadFinished: () => setupPage()
         })"
         >Datei</UButton>
@@ -246,14 +249,6 @@ const selectAll = (event) => {
             @click="createFolderModalOpen = true"
         >Ordner</UButton>
       </UButtonGroup>
-
-      <UButton
-          v-if="Object.values(selectedFiles).some(Boolean)"
-          icon="i-heroicons-cloud-arrow-down"
-          color="gray"
-          variant="solid"
-          @click="downloadSelected"
-      >Download</UButton>
     </template>
   </UDashboardToolbar>
 
@@ -263,13 +258,10 @@ const selectAll = (event) => {
     </div>
 
     <UDashboardPanelContent v-else class="p-0 overflow-y-auto">
-      <div v-if="displayMode === 'list'" class="min-w-full inline-block align-middle">
+      <div v-if="displayMode === 'list'" class="min-w-full">
         <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
           <thead class="bg-gray-50 dark:bg-gray-800 sticky top-0 z-20">
           <tr>
-            <th scope="col" class="py-3.5 pl-4 pr-3 sm:pl-6 w-10">
-              <UCheckbox @change="selectAll" />
-            </th>
             <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-white sm:pl-6">Name</th>
             <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white">Erstellt am</th>
           </tr>
@@ -278,13 +270,14 @@ const selectAll = (event) => {
           <tr
               v-for="(entry, index) in renderedFileList"
               :key="entry.id"
+              draggable="true"
+              @dragstart="handleDragStart(entry)"
+              @dragover.prevent
+              @drop="entry.type === 'folder' ? handleDrop(entry) : null"
               class="hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer transition-colors"
               :class="{'bg-primary-50 dark:bg-primary-900/10': index === selectedFileIndex}"
               @click="entry.type === 'folder' ? changeFolder(entry) : showFile(entry.id)"
           >
-            <td class="relative w-12 px-6 sm:w-16 sm:px-8" @click.stop>
-              <UCheckbox v-if="entry.type === 'file'" v-model="selectedFiles[entry.id]" />
-            </td>
             <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
               <div class="flex items-center">
                 <UIcon
@@ -292,9 +285,7 @@ const selectAll = (event) => {
                     class="flex-shrink-0 h-5 w-5 mr-3"
                     :class="entry.type === 'folder' ? 'text-primary-500' : 'text-gray-400'"
                 />
-                <span class="font-medium text-gray-900 dark:text-white truncate max-w-md">
+                <span class="font-medium text-gray-900 dark:text-white truncate max-w-md">{{ entry.label }}</span>
-                    {{ entry.label }}
-                  </span>
               </div>
             </td>
             <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
@@ -308,24 +299,21 @@ const selectAll = (event) => {
       <div v-else class="p-6">
         <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
           <div
-              v-for="folder in currentFolders"
+              v-for="entry in renderedFileList"
-              :key="folder.id"
+              :key="entry.id"
+              draggable="true"
+              @dragstart="handleDragStart(entry)"
+              @dragover.prevent
+              @drop="entry.type === 'folder' ? handleDrop(entry) : null"
               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="changeFolder(folder)"
+              @click="entry.type === 'folder' ? changeFolder(entry) : showFile(entry.id)"
           >
-            <UIcon name="i-heroicons-folder-solid" class="w-12 h-12 text-primary-500 mb-2 group-hover:scale-110 transition-transform" />
+            <UIcon
-            <span class="text-sm font-medium text-center truncate w-full">{{ folder.name }}</span>
+                :name="entry.type === 'folder' ? 'i-heroicons-folder-solid' : 'i-heroicons-document-text'"
-          </div>
+                class="w-12 h-12 mb-2 group-hover:scale-110 transition-transform"
-
+                :class="entry.type === 'folder' ? 'text-primary-500' : 'text-gray-400'"
-          <div
+            />
-              v-for="doc in renderedFileList.filter(e => e.type === 'file')"
+            <span class="text-sm font-medium text-center truncate w-full">{{ entry.label }}</span>
-              :key="doc.id"
-              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="showFile(doc.id)"
-          >
-            <UCheckbox v-model="selectedFiles[doc.id]" class="absolute top-2 left-2 opacity-0 group-hover:opacity-100 transition-opacity" @click.stop />
-            <UIcon name="i-heroicons-document-text" class="w-12 h-12 text-gray-400 mb-2 group-hover:scale-110 transition-transform" />
-            <span class="text-sm font-medium text-center truncate w-full">{{ doc.label }}</span>
           </div>
         </div>
       </div>
@@ -340,12 +328,10 @@ const selectAll = (event) => {
           <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark" @click="createFolderModalOpen = false" />
         </div>
       </template>
-
       <div class="space-y-4">
         <UFormGroup label="Name" required>
           <UInput v-model="createFolderData.name" placeholder="Name eingeben..." autofocus @keyup.enter="createFolder" />
         </UFormGroup>
-
         <UFormGroup label="Standard-Dateityp">
           <USelectMenu
               v-model="createFolderData.standardFiletype"
@@ -355,14 +341,12 @@ const selectAll = (event) => {
               placeholder="Kein Standard"
           />
         </UFormGroup>
-
         <UCheckbox
             v-if="createFolderData.standardFiletype"
             v-model="createFolderData.standardFiletypeIsOptional"
             label="Typ ist optional"
         />
       </div>
-
       <template #footer>
         <div class="flex justify-end gap-2">
           <UButton color="gray" variant="soft" @click="createFolderModalOpen = false">Abbrechen</UButton>
@@ -374,19 +358,11 @@ const selectAll = (event) => {
 </template>
 
 <style scoped>
-#drop_zone::after {
+/* Drag & Drop Visuals */
-  content: 'Datei hierher ziehen';
+[draggable="true"] {
-  @apply absolute inset-0 flex items-center justify-center bg-primary-500/10 border-4 border-dashed border-primary-500 opacity-0 pointer-events-none transition-opacity z-50 rounded-xl m-4;
+  user-select: none;
 }
-
+.bg-primary-50 {
-#drop_zone:hover::after {
+  transition: background-color 0.2s ease;
-  /* In der setupPage Logik wird das Modal getriggert,
-     dieser Style dient nur der visuellen Hilfe */
-}
-
-/* Custom Table Shadows & Borders */
-table {
-  border-collapse: separate;
-  border-spacing: 0;
 }
 </style>