flfeders/FEDEO
2
1
Fork 0
Code Issues 63 Pull Requests Actions Packages Projects 21 Releases Wiki Activity

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

Browse Source
This commit is contained in:
florianfederspiel
2026-01-17 12:36:28 +01:00
parent 4f72919269
commit 5ab90830a0
1 changed files with 97 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
frontend/pages/files/index.vue
View File

@@ -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(() => {
return folders.value
.filter(i => currentFolder.value ? i.parent === currentFolder.value.id : !i.parent)
.sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }))
})
// --- Navigation & Breadcrumbs ---
const changeFolder = async (folder) => {
currentFolder.value = folder
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 => ({
label: i.name,
id: i.id,
type: "folder",
createdAt: i.createdAt
}))
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' }))
const fileList = documents.value
.filter(i => currentFolder.value ? i.folder === currentFolder.value.id : !i.folder)
.map(i => ({
label: i.path.split("/").pop(),
id: i.id,
type: "file",
createdAt: i.createdAt
}))
.map(i => ({ ...i, label: i.path.split("/").pop(), type: "file" }))
.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) => {
currentFolder.value = folder
await router.push(folder ? `/files?folder=${folder.id}` : `/files`)
}
// --- Actions ---
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) => {
if (event.target.checked) {
const obj = {}
renderedFileList.value.filter(e => e.type === 'file').forEach(e => obj[e.id] = true)
selectedFiles.value = obj
} else {
selectedFiles.value = {}
// --- Shortcuts ---
defineShortcuts({
'/': () => document.getElementById("searchinput").focus(),
'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(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,13 +239,9 @@ const selectAll = (event) => {
icon="i-heroicons-document-plus"
color="primary"
@click="modal.open(DocumentUploadModal, {
fileData: {
folder: currentFolder?.id,
type: currentFolder?.standardFiletype,
typeEnabled: currentFolder?.standardFiletypeIsOptional
},
onUploadFinished: () => setupPage()
})"
fileData: { folder: currentFolder?.id },
onUploadFinished: () => setupPage()
})"
>Datei</UButton>
<UButton
icon="i-heroicons-folder-plus"
@@ -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">
{{ entry.label }}
</span>
<span class="font-medium text-gray-900 dark:text-white truncate max-w-md">{{ 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"
:key="folder.id"
v-for="entry in renderedFileList"
: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" />
<span class="text-sm font-medium text-center truncate w-full">{{ folder.name }}</span>
</div>
<div
v-for="doc in renderedFileList.filter(e => e.type === 'file')"
: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>
<UIcon
:name="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="entry.type === 'folder' ? 'text-primary-500' : 'text-gray-400'"
/>
<span class="text-sm font-medium text-center truncate w-full">{{ entry.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 {
content: 'Datei hierher ziehen';
@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;
/* Drag & Drop Visuals */
[draggable="true"] {
user-select: none;
}
#drop_zone:hover::after {
/* 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;
.bg-primary-50 {
transition: background-color 0.2s ease;
}
</style>