#16 Added Move Up

frontend/pages/files/index.vue

@@ -28,7 +28,9 @@ const displayModes = [
 
 const createFolderModalOpen = ref(false)
 const createFolderData = ref({ name: '', standardFiletype: null, standardFiletypeIsOptional: true })
-const selectedFiles = ref({})
+const renameModalOpen = ref(false)
+const renameData = ref({ id: null, name: '', type: '' })
+
 const selectedFileIndex = ref(0)
 const draggedItem = ref(null)
 
@@ -45,42 +47,79 @@ watch(searchString, (val) => {
   }, 300)
 })
 
-// --- Logic ---
+// --- Data Fetching ---
 const setupPage = async () => {
   loadingDocs.value = true
+  try {
     const [fRes, dRes, tRes] = await Promise.all([
       useEntities("folders").select(),
       files.selectDocuments(),
       useEntities("filetags").select()
     ])
-  folders.value = fRes
+    folders.value = fRes || []
-  documents.value = dRes
+    documents.value = dRes || []
-  filetags.value = tRes
+    filetags.value = tRes || []
 
     if (route.query?.folder) {
       currentFolder.value = folders.value.find(i => i.id === route.query.folder) || null
     } else {
       currentFolder.value = null
     }
+  } finally {
     loadingDocs.value = false
     loaded.value = true
+  }
 }
 
 onMounted(() => setupPage())
 
-// --- Navigation & Breadcrumbs ---
+// --- Navigation ---
 const changeFolder = async (folder) => {
   currentFolder.value = folder
   await router.push(folder ? `/files?folder=${folder.id}` : `/files`)
 }
 
+const navigateUp = () => {
+  if (!currentFolder.value) return
+  const parent = folders.value.find(f => f.id === currentFolder.value.parent)
+  changeFolder(parent || null)
+}
+
+// --- Drag & Drop ---
+const handleDragStart = (entry) => {
+  draggedItem.value = entry
+}
+
+const handleDrop = async (targetFolderId) => {
+  // targetFolderId kann null sein (Root)
+  if (!draggedItem.value) return
+  if (draggedItem.value.id === targetFolderId) return
+
+  loadingDocs.value = true
+  try {
+    if (draggedItem.value.type === 'file') {
+      await useEntities("files").update(draggedItem.value.id, { folder: targetFolderId })
+    } else {
+      await useEntities("folders").update(draggedItem.value.id, { parent: targetFolderId })
+    }
+    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
+  }
+}
+
+// --- Breadcrumbs ---
 const breadcrumbLinks = computed(() => {
   const links = [{ label: "Home", icon: "i-heroicons-home", click: () => changeFolder(null) }]
   if (currentFolder.value) {
     const path = []
     let curr = currentFolder.value
     while (curr) {
-      const folderObj = curr // Closure Sicherheit
+      const folderObj = curr
       path.unshift({
         label: folderObj.name,
         icon: "i-heroicons-folder",
@@ -93,50 +132,35 @@ 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(() => {
+  // 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" }))
-      .sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }))
+      .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" }))
-      .sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }))
+      .sort((a, b) => a.label.localeCompare(b.label))
 
   let combined = [...folderList, ...fileList]
   if (debouncedSearch.value) {
     combined = useSearch(debouncedSearch.value, combined)
   }
+
+  // 3. "Nach oben" (..) einfügen, wenn wir nicht im Root sind und nicht suchen
+  if (currentFolder.value && !debouncedSearch.value) {
+    combined.unshift({
+      id: 'go-up',
+      label: '..',
+      type: 'up',
+      parentId: currentFolder.value.parent || null
+    })
+  }
+
   return combined
 })
 
@@ -144,15 +168,38 @@ const renderedFileList = computed(() => {
 const createFolder = async () => {
   await useEntities("folders").create({
     parent: currentFolder.value?.id,
-    name: createFolderData.value.name,
+    name: createFolderData.value.name
-    standardFiletype: createFolderData.value.standardFiletype,
-    standardFiletypeIsOptional: createFolderData.value.standardFiletypeIsOptional
   })
   createFolderModalOpen.value = false
-  createFolderData.value = { name: '', standardFiletype: null, standardFiletypeIsOptional: true }
+  createFolderData.value = { name: '' }
   setupPage()
 }
 
+const openRenameModal = (entry) => {
+  renameData.value = { id: entry.id, name: entry.label, type: entry.type }
+  renameModalOpen.value = true
+}
+
+const updateName = async () => {
+  if (!renameData.value.name) return
+  loadingDocs.value = true
+  try {
+    if (renameData.value.type === 'folder') {
+      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('/') })
+    }
+    toast.add({ title: 'Umbenannt', color: 'green' })
+    setupPage()
+  } finally {
+    renameModalOpen.value = false
+    loadingDocs.value = false
+  }
+}
+
 const showFile = (fileId) => {
   modal.open(DocumentDisplayModal, {
     documentData: documents.value.find(i => i.id === fileId),
@@ -160,15 +207,8 @@ const showFile = (fileId) => {
   })
 }
 
-const clearSearchString = () => {
-  searchString.value = ''
-  debouncedSearch.value = ''
-  tempStore.clearSearchString("files")
-}
-
-// --- Shortcuts ---
 defineShortcuts({
-  '/': () => document.getElementById("searchinput").focus(),
+  '/': () => document.getElementById("searchinput")?.focus(),
   'Enter': {
     usingInput: true,
     handler: () => {
@@ -176,193 +216,123 @@ defineShortcuts({
       if (!entry) return
       if (entry.type === "file") showFile(entry.id)
       else if (entry.type === "folder") changeFolder(entry)
+      else if (entry.type === "up") navigateUp()
     }
   },
-  'arrowdown': () => {
+  'arrowdown': () => { if (selectedFileIndex.value < renderedFileList.value.length - 1) selectedFileIndex.value++ },
-    if (selectedFileIndex.value < renderedFileList.value.length - 1) selectedFileIndex.value++
+  'arrowup': () => { if (selectedFileIndex.value > 0) selectedFileIndex.value-- }
-  },
-  'arrowup': () => {
-    if (selectedFileIndex.value > 0) selectedFileIndex.value--
-  }
 })
 </script>
 
 <template>
   <UDashboardNavbar title="Dateien">
     <template #right>
-      <UInput
+      <UInput id="searchinput" v-model="searchString" icon="i-heroicons-magnifying-glass" placeholder="Suche..." class="w-64" />
-          id="searchinput"
-          v-model="searchString"
-          icon="i-heroicons-magnifying-glass"
-          autocomplete="off"
-          placeholder="Suche..."
-          class="hidden lg:block w-64"
-          @keydown.esc="$event.target.blur()"
-      >
-        <template #trailing>
-          <div class="flex items-center gap-1">
-            <UKbd value="/" />
-            <UButton
-                v-if="searchString.length > 0"
-                icon="i-heroicons-x-mark"
-                variant="ghost"
-                color="gray"
-                size="xs"
-                @click="clearSearchString"
-            />
-          </div>
-        </template>
-      </UInput>
     </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" :ui="{ ol: 'gap-x-2', li: 'text-sm' }" />
+      <UBreadcrumb :links="breadcrumbLinks" />
     </template>
     <template #right>
-      <USelectMenu
+      <USelectMenu v-model="displayMode" :options="displayModes" value-attribute="key" class="w-32" :ui-menu="{ zIndex: 'z-50' }">
-          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
+        <UButton icon="i-heroicons-document-plus" color="primary" @click="modal.open(DocumentUploadModal, { fileData: { folder: currentFolder?.id }, onUploadFinished: setupPage })">Datei</UButton>
-            icon="i-heroicons-document-plus"
+        <UButton icon="i-heroicons-folder-plus" color="white" @click="createFolderModalOpen = true">Ordner</UButton>
-            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>
 
-  <div id="drop_zone" class="flex-1 overflow-hidden flex flex-col relative">
+  <UDashboardPanelContent class="p-0 overflow-y-auto">
-    <div v-if="!loaded" class="p-10 flex justify-center">
+    <div v-if="!loaded" class="p-10 flex justify-center"><UProgress animation="carousel" class="w-1/2" /></div>
-      <UProgress animation="carousel" class="w-1/2" />
-    </div>
 
-    <UDashboardPanelContent v-else class="p-0 overflow-y-auto">
+    <div v-else>
-      <div v-if="displayMode === 'list'" class="min-w-full">
+      <div v-if="displayMode === 'list'">
-        <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
+        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
           <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 text-left text-sm font-semibold text-gray-900 dark:text-white sm:pl-6">Name</th>
+            <th class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold 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>
+            <th class="px-3 py-3.5 text-left text-sm font-semibold">Erstellt</th>
+            <th class="relative py-3.5 pl-3 pr-4 sm:pr-6"></th>
           </tr>
           </thead>
           <tbody class="divide-y divide-gray-200 dark:divide-gray-800 bg-white dark:bg-gray-900">
           <tr
-              v-for="(entry, index) in renderedFileList"
+              v-for="(entry, index) in renderedFileList" :key="entry.id"
-              :key="entry.id"
+              :draggable="entry.type !== 'up'"
-              draggable="true"
               @dragstart="handleDragStart(entry)"
               @dragover.prevent
-              @drop="entry.type === 'folder' ? handleDrop(entry) : null"
+              @drop="entry.type === 'folder' ? handleDrop(entry.id) : (entry.type === 'up' ? handleDrop(entry.parentId) : 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)"
+              @click="entry.type === 'folder' ? changeFolder(entry) : (entry.type === 'up' ? navigateUp() : showFile(entry.id))"
           >
             <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
-              <div class="flex items-center">
+              <div class="flex items-center font-medium">
                 <UIcon
-                    :name="entry.type === 'folder' ? 'i-heroicons-folder-solid' : 'i-heroicons-document-text'"
+                    :name="entry.type === 'up' ? 'i-heroicons-arrow-uturn-left' : (entry.type === 'folder' ? 'i-heroicons-folder-solid' : 'i-heroicons-document-text')"
-                    class="flex-shrink-0 h-5 w-5 mr-3"
+                    class="h-5 w-5 mr-3"
-                    :class="entry.type === 'folder' ? 'text-primary-500' : 'text-gray-400'"
+                    :class="entry.type === 'up' ? 'text-orange-500' : (entry.type === 'folder' ? 'text-primary-500' : 'text-gray-400')"
                 />
-                <span class="font-medium text-gray-900 dark:text-white truncate max-w-md">{{ entry.label }}</span>
+                {{ entry.label }}
               </div>
             </td>
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-              {{ dayjs(entry.createdAt).format("DD.MM.YY · HH:mm") }}
+              {{ 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>
             </td>
           </tr>
           </tbody>
         </table>
       </div>
 
-      <div v-else class="p-6">
+      <div v-else class="p-6 grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-4">
-        <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="entry in renderedFileList"
+            v-for="entry in renderedFileList" :key="entry.id"
-              :key="entry.id"
+            :draggable="entry.type !== 'up'"
-              draggable="true"
             @dragstart="handleDragStart(entry)"
             @dragover.prevent
-              @drop="entry.type === 'folder' ? handleDrop(entry) : null"
+            @drop="entry.type === 'folder' ? handleDrop(entry.id) : (entry.type === 'up' ? handleDrop(entry.parentId) : 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="entry.type === 'folder' ? changeFolder(entry) : showFile(entry.id)"
+            @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>
           <UIcon
-                :name="entry.type === 'folder' ? 'i-heroicons-folder-solid' : 'i-heroicons-document-text'"
+              :name="entry.type === 'up' ? 'i-heroicons-arrow-uturn-left' : (entry.type === 'folder' ? 'i-heroicons-folder-solid' : 'i-heroicons-document-text')"
-                class="w-12 h-12 mb-2 group-hover:scale-110 transition-transform"
+              class="w-12 h-12 mb-2"
-                :class="entry.type === 'folder' ? 'text-primary-500' : 'text-gray-400'"
+              :class="entry.type === 'up' ? 'text-orange-500' : (entry.type === 'folder' ? 'text-primary-500' : 'text-gray-400')"
           />
-            <span class="text-sm font-medium text-center truncate w-full">{{ entry.label }}</span>
+          <span class="text-xs font-medium text-center truncate w-full">{{ entry.label }}</span>
         </div>
       </div>
     </div>
   </UDashboardPanelContent>
-  </div>
 
   <UModal v-model="createFolderModalOpen">
     <UCard>
-      <template #header>
+      <template #header><h3 class="font-bold">Ordner erstellen</h3></template>
-        <div class="flex items-center justify-between">
+      <UFormGroup label="Name" required><UInput v-model="createFolderData.name" autofocus @keyup.enter="createFolder" /></UFormGroup>
-          <h3 class="text-lg font-bold">Ordner erstellen</h3>
+      <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>
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark" @click="createFolderModalOpen = false" />
+    </UCard>
-        </div>
+  </UModal>
-      </template>
+
-      <div class="space-y-4">
+  <UModal v-model="renameModalOpen">
-        <UFormGroup label="Name" required>
+    <UCard>
-          <UInput v-model="createFolderData.name" placeholder="Name eingeben..." autofocus @keyup.enter="createFolder" />
+      <template #header><h3 class="font-bold">Umbenennen</h3></template>
-        </UFormGroup>
+      <UFormGroup label="Neuer Name"><UInput v-model="renameData.name" autofocus @keyup.enter="updateName" /></UFormGroup>
-        <UFormGroup label="Standard-Dateityp">
+      <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>
-          <USelectMenu
-              v-model="createFolderData.standardFiletype"
-              :options="filetags"
-              option-attribute="name"
-              value-attribute="id"
-              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>
-          <UButton color="primary" :disabled="!createFolderData.name" @click="createFolder">Erstellen</UButton>
-        </div>
-      </template>
     </UCard>
   </UModal>
 </template>
-
-<style scoped>
-/* Drag & Drop Visuals */
-[draggable="true"] {
-  user-select: none;
-}
-.bg-primary-50 {
-  transition: background-color 0.2s ease;
-}
-</style>