flfeders/FEDEO
2
1
Fork 0
Code Issues 116 Pull Requests Actions Packages Projects 23 Releases 20 Wiki Activity

feat(documents): add inbox document preview modal

Browse Source
This commit is contained in:
Florian Federspiel
2026-10-01 17:54:04 +02:00
parent f359bfb579
commit 07adca417e
2 changed files with 71 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/pages/organisation/dokumentenablage.vue
View File

@@ -26,6 +26,8 @@ const password = ref("")
const confirmReset = ref(false)
const scannerPath = ref("/scanner-inbox/")
const origin = ref("")
const previewOpen = ref(false)
const previewDocument = ref<InboxDocument | null>(null)
const filingOpen = ref(false)
const filingDocument = ref<InboxDocument | null>(null)
const filingLoading = ref(false)
@@ -101,6 +103,18 @@ const load = async (silent = false) => {
}
}
const openPreview = (entry: InboxDocument) => {
previewDocument.value = entry
previewOpen.value = true
}
const filePreviewDocument = () => {
const entry = previewDocument.value
if (!entry) return
previewOpen.value = false
openFiling(entry)
}
const openFiling = async (entry: InboxDocument) => {
filingOpen.value = true
filingDocument.value = entry
@@ -231,6 +245,9 @@ watch(search, () => {
watch(setupOpen, open => {
if (!open) { setupVersion++; password.value = ""; confirmReset.value = false }
})
watch(previewOpen, open => {
if (!open) previewDocument.value = null
})
watch(filingFolder, () => {
const defaultType = selectedFolder.value?.standardFiletype
if (defaultType) filingType.value = defaultType
@@ -250,6 +267,8 @@ watch(() => auth.activeTenant, () => {
requestVersion++
setupVersion++
filingVersion++
previewOpen.value = false
previewDocument.value = null
filingOpen.value = false
clearTimeout(searchTimer)
clearTimeout(pollTimer)
@@ -305,10 +324,10 @@ onBeforeUnmount(() => {
</thead>
<tbody class="divide-y divide-default">
<tr v-for="entry in documents" :key="entry.id" class="hover:bg-elevated/30">
<td class="max-w-sm px-4 py-4"><button class="flex items-center gap-3 text-left font-medium text-highlighted hover:text-primary" @click="fileAction(entry, false)"><UIcon name="i-heroicons-document-text" class="h-5 w-5 shrink-0 text-muted" /><span class="break-all">{{ entry.name }}</span></button></td>
<td class="max-w-sm px-4 py-4"><button class="flex items-center gap-3 text-left font-medium text-highlighted hover:text-primary" :aria-label="`${entry.name} als Vorschau anzeigen`" @click="openPreview(entry)"><UIcon name="i-heroicons-document-text" class="h-5 w-5 shrink-0 text-muted" /><span class="break-all">{{ entry.name }}</span></button></td>
<td class="whitespace-nowrap px-4 py-4 text-muted">{{ dayjs(entry.receivedAt).format('DD.MM.YYYY HH:mm') }}</td>
<td class="whitespace-nowrap px-4 py-4 text-muted">{{ formatSize(entry.size) }}</td>
<td class="px-4 py-4"><div class="flex justify-end gap-1"><UButton icon="i-heroicons-folder-arrow-down" variant="soft" :aria-label="`${entry.name} ablegen`" @click="openFiling(entry)">Ablegen</UButton><UButton icon="i-heroicons-arrow-top-right-on-square" color="neutral" variant="ghost" :aria-label="`${entry.name} öffnen`" @click="fileAction(entry, false)" /><UButton icon="i-heroicons-arrow-down-tray" color="neutral" variant="ghost" :aria-label="`${entry.name} herunterladen`" @click="fileAction(entry, true)" /></div></td>
<td class="px-4 py-4"><div class="flex justify-end gap-1"><UButton icon="i-heroicons-folder-arrow-down" variant="soft" :aria-label="`${entry.name} ablegen`" @click="openFiling(entry)">Ablegen</UButton><UButton icon="i-heroicons-eye" color="neutral" variant="ghost" :aria-label="`${entry.name} als Vorschau anzeigen`" @click="openPreview(entry)">Vorschau</UButton><UButton icon="i-heroicons-arrow-down-tray" color="neutral" variant="ghost" :aria-label="`${entry.name} herunterladen`" @click="fileAction(entry, true)" /></div></td>
</tr>
</tbody>
</table>
@@ -323,12 +342,31 @@ onBeforeUnmount(() => {
</div>
</UDashboardPanelContent>
<UModal v-model:open="previewOpen" :title="previewDocument?.name || 'Dokumentvorschau'" description="Vorschau des eingegangenen Dokuments" :ui="{ content: 'w-[calc(100vw-2rem)] max-w-6xl h-[90dvh]', body: 'min-h-0 flex-1 overflow-hidden p-0 sm:p-0', title: 'break-all pr-8', footer: 'flex-wrap justify-end' }">
<template #body>
<AuthenticatedFilePreview
v-if="previewOpen && previewDocument"
:key="previewDocument.id"
:file-id="previewDocument.id"
:path="previewDocument.name"
interactive
/>
</template>
<template #footer>
<template v-if="previewDocument">
<UButton icon="i-heroicons-arrow-top-right-on-square" color="neutral" variant="ghost" @click="fileAction(previewDocument, false)">In neuem Tab öffnen</UButton>
<UButton icon="i-heroicons-arrow-down-tray" color="neutral" variant="outline" @click="fileAction(previewDocument, true)">Herunterladen</UButton>
<UButton v-if="!filingOpen" icon="i-heroicons-folder-arrow-down" @click="filePreviewDocument">In Dateien ablegen</UButton>
</template>
</template>
</UModal>
<UModal v-model:open="filingOpen" title="In Dateien ablegen" description="Wähle den Zielordner und klassifiziere das Dokument." :dismissible="!filingSaving" :close="!filingSaving">
<template #body>
<form class="space-y-5" @submit.prevent="fileDocument">
<div v-if="filingDocument" class="flex items-center justify-between gap-3 rounded-lg bg-elevated/50 p-3">
<span class="break-all text-sm font-medium">{{ filingDocument.name }}</span>
<UButton icon="i-heroicons-arrow-top-right-on-square" color="neutral" variant="ghost" aria-label="Dokument öffnen" @click="fileAction(filingDocument, false)" />
<UButton icon="i-heroicons-eye" color="neutral" variant="ghost" aria-label="Dokumentvorschau öffnen" @click="openPreview(filingDocument)" />
</div>
<UAlert v-if="filingError" :title="filingError" color="error" variant="subtle" />
<USkeleton v-if="filingLoading" class="h-32 w-full" />