restructure: flatten workspace nesting, move devcontainer to root
- backend/workspaces/backend/ → backend/ - backend/workspaces/frontend/ → frontend/ - backend/.devcontainer/ + .vscode/ → repo root (where VS Code expects them) - loose scripts/SQL files → scripts/ - replace nested git repo with single repo at project root - update docker-compose.yml build context and devcontainer.json path - add root .gitignore Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
37
frontend/src/routes/documents/[id]/+page.server.ts
Normal file
37
frontend/src/routes/documents/[id]/+page.server.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { error, redirect } from '@sveltejs/kit';
|
||||
import { env } from '$env/dynamic/private';
|
||||
|
||||
export async function load({ params, fetch }) {
|
||||
const { id } = params;
|
||||
|
||||
|
||||
const baseUrl = env.API_INTERNAL_URL || 'http://localhost:8080';
|
||||
|
||||
try {
|
||||
const res = await fetch(`${baseUrl}/api/documents/${id}`);
|
||||
|
||||
if (res.status === 404) {
|
||||
throw error(404, 'Dokument nicht gefunden');
|
||||
}
|
||||
|
||||
if (res.status === 401) {
|
||||
throw redirect(302, '/login');
|
||||
}
|
||||
|
||||
if (!res.ok) {
|
||||
console.error(`Backend Fehler (${res.status}):`, res.statusText);
|
||||
throw error(500, 'Fehler beim Laden des Dokuments');
|
||||
}
|
||||
|
||||
const document = await res.json();
|
||||
|
||||
return {
|
||||
document
|
||||
};
|
||||
} catch (e) {
|
||||
// Fehlerbehandlung
|
||||
if (e.status) throw e; // Redirects und HttpErrors durchlassen
|
||||
console.error("Ladefehler:", e);
|
||||
throw error(500, 'Verbindung zum Server fehlgeschlagen');
|
||||
}
|
||||
}
|
||||
447
frontend/src/routes/documents/[id]/+page.svelte
Normal file
447
frontend/src/routes/documents/[id]/+page.svelte
Normal file
@@ -0,0 +1,447 @@
|
||||
<script lang="ts">
|
||||
export let data;
|
||||
$: doc = data.document;
|
||||
|
||||
// Instead of a direct link, we use a reactive variable for the Blob URL
|
||||
let fileUrl = '';
|
||||
let isLoading = false;
|
||||
let error = '';
|
||||
|
||||
// Reactive statement: Whenever the document ID changes, load the file
|
||||
$: if (doc?.id && doc?.filePath) {
|
||||
loadFile(doc.id);
|
||||
}
|
||||
|
||||
async function loadFile(id) {
|
||||
isLoading = true;
|
||||
error = '';
|
||||
fileUrl = ''; // Reset previous URL
|
||||
|
||||
try {
|
||||
// 1. Fetch with current authentication
|
||||
const response = await fetch(`/api/documents/${id}/file`);
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 401) throw new Error('Nicht eingeloggt');
|
||||
throw new Error('Fehler beim Laden der Datei');
|
||||
}
|
||||
|
||||
// 2. Create a Blob from the data
|
||||
const blob = await response.blob();
|
||||
|
||||
// 3. Create a temporary URL for this Blob
|
||||
fileUrl = URL.createObjectURL(blob);
|
||||
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
error = 'Vorschau konnte nicht geladen werden.';
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="h-screen flex flex-col bg-brand-sand">
|
||||
<!-- Top Bar -->
|
||||
<div
|
||||
class="bg-white border-b border-brand-sand px-6 py-4 flex items-center justify-between z-10 shadow-sm"
|
||||
>
|
||||
<div class="flex items-center gap-6 overflow-hidden">
|
||||
<a
|
||||
href="/"
|
||||
class="group flex-shrink-0 flex items-center gap-2 text-sm font-sans font-medium text-gray-500 hover:text-brand-navy transition-colors"
|
||||
>
|
||||
<div
|
||||
class="w-8 h-8 rounded-full bg-brand-sand group-hover:bg-brand-mint flex items-center justify-center transition-colors"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4 text-brand-navy"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 19l-7-7m0 0l7-7m-7 7h18"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span>Zurück</span>
|
||||
</a>
|
||||
|
||||
<div class="flex items-center gap-4 overflow-hidden border-l border-gray-200 pl-6">
|
||||
<h1 class="text-xl font-serif text-brand-navy truncate" title={doc.title}>
|
||||
{doc.title || doc.originalFilename}
|
||||
</h1>
|
||||
<span
|
||||
class="flex-shrink-0 px-3 py-1 rounded-full text-xs font-sans font-bold tracking-wide uppercase
|
||||
{doc.status === 'UPLOADED'
|
||||
? 'bg-brand-mint/30 text-brand-navy border border-brand-mint'
|
||||
: 'bg-yellow-100 text-yellow-800 border border-yellow-200'}"
|
||||
>
|
||||
{doc.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3 flex-shrink-0 ml-4 font-sans">
|
||||
<a
|
||||
href="/documents/{doc.id}/edit"
|
||||
class="text-brand-navy bg-transparent border border-brand-navy hover:bg-brand-navy hover:text-white px-4 py-2 rounded text-sm font-medium transition flex items-center gap-2"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
|
||||
/>
|
||||
</svg>
|
||||
Bearbeiten
|
||||
</a>
|
||||
|
||||
{#if doc.filePath}
|
||||
<a
|
||||
href={fileUrl}
|
||||
download={doc.originalFilename}
|
||||
class="text-brand-navy bg-brand-sand/50 hover:bg-brand-mint border border-transparent p-2 rounded transition"
|
||||
title="Download"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Area -->
|
||||
<div class="flex-1 flex overflow-hidden">
|
||||
<!-- LEFT SIDEBAR: METADATA -->
|
||||
<aside
|
||||
class="w-96 bg-white border-r border-brand-sand overflow-y-auto p-8 flex-shrink-0 custom-scrollbar"
|
||||
>
|
||||
<div class="space-y-10">
|
||||
<!-- 1. DETAILS GROUP -->
|
||||
<div>
|
||||
<h3
|
||||
class="text-xs font-sans font-bold text-brand-navy uppercase tracking-widest mb-4 border-b border-brand-sand pb-2"
|
||||
>
|
||||
Details
|
||||
</h3>
|
||||
<div class="space-y-5">
|
||||
<!-- Date -->
|
||||
<div class="flex items-start group">
|
||||
<span class="text-brand-mint w-8 mt-0.5">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
><path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
/></svg
|
||||
>
|
||||
</span>
|
||||
<div>
|
||||
<span class="block font-serif text-lg text-brand-navy">
|
||||
{doc.documentDate ? doc.documentDate : '—'}
|
||||
</span>
|
||||
<span class="text-xs font-sans text-gray-500">Dokumentendatum</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Creation Location -->
|
||||
<div class="flex items-start group">
|
||||
<span class="text-brand-mint w-8 mt-0.5">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
><path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
|
||||
/><path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/></svg
|
||||
>
|
||||
</span>
|
||||
<div>
|
||||
<span class="block font-serif text-lg text-brand-navy">
|
||||
{doc.location ? doc.location : '—'}
|
||||
</span>
|
||||
<span class="text-xs font-sans text-gray-500">Erstellungsort</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Physical Archive Location -->
|
||||
{#if doc.documentLocation}
|
||||
<div class="flex items-start group">
|
||||
<span class="text-brand-mint w-8 mt-0.5">
|
||||
<!-- Archive Box Icon -->
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div>
|
||||
<span class="block font-serif text-lg text-brand-navy">
|
||||
{doc.documentLocation}
|
||||
</span>
|
||||
<span class="text-xs font-sans text-gray-500">Aufbewahrungsort (Original)</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- TAGS / SCHLAGWORTE -->
|
||||
{#if doc.tags && doc.tags.length > 0}
|
||||
<div class="flex items-start group">
|
||||
<span class="text-brand-mint w-8 mt-0.5">
|
||||
<!-- Tag Icon -->
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 8V3c0-1.105.895-2 2-2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div class="flex-1">
|
||||
<div class="flex flex-wrap gap-2 mb-1">
|
||||
{#each doc.tags as tag}
|
||||
<a
|
||||
href="/?tag={encodeURIComponent(tag.name)}"
|
||||
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold uppercase tracking-wide bg-brand-sand/50 text-brand-navy hover:bg-brand-navy hover:text-white transition-colors"
|
||||
title="Nach '{tag.name}' filtern"
|
||||
>
|
||||
{tag.name}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
<span class="text-xs font-sans text-gray-500">Schlagworte</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. PERSONEN GROUP -->
|
||||
<div>
|
||||
<h3
|
||||
class="text-xs font-sans font-bold text-brand-navy uppercase tracking-widest mb-4 border-b border-brand-sand pb-2"
|
||||
>
|
||||
Personen
|
||||
</h3>
|
||||
|
||||
<div class="mb-6">
|
||||
<span class="text-xs font-sans text-gray-400 block mb-2 uppercase">Absender</span>
|
||||
{#if doc.sender}
|
||||
<a
|
||||
href="/persons/{doc.sender.id}"
|
||||
class="block p-3 rounded border border-brand-sand bg-brand-sand/20 hover:border-brand-mint hover:bg-brand-mint/10 transition group"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-8 h-8 rounded-full bg-brand-navy text-white flex items-center justify-center font-serif text-sm"
|
||||
>
|
||||
{doc.sender.firstName[0]}{doc.sender.lastName[0]}
|
||||
</div>
|
||||
<div>
|
||||
<p
|
||||
class="font-serif text-brand-navy group-hover:underline decoration-brand-mint underline-offset-2"
|
||||
>
|
||||
{doc.sender.firstName}
|
||||
{doc.sender.lastName}
|
||||
</p>
|
||||
{#if doc.sender.alias}
|
||||
<p class="text-xs font-sans text-gray-500">{doc.sender.alias}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{:else}
|
||||
<span class="text-sm font-serif text-gray-400 italic">Nicht angegeben</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="text-xs font-sans text-gray-400 block mb-2 uppercase">Empfänger</span>
|
||||
{#if doc.receivers && doc.receivers.length > 0}
|
||||
<div class="space-y-2">
|
||||
{#each doc.receivers as receiver}
|
||||
<div
|
||||
class="flex items-center justify-between p-3 rounded border border-brand-sand bg-white hover:border-brand-navy transition group"
|
||||
>
|
||||
<a href="/persons/{receiver.id}" class="flex items-center gap-3 flex-1 min-w-0">
|
||||
<div
|
||||
class="w-6 h-6 rounded-full bg-gray-100 text-gray-500 flex items-center justify-center text-xs font-serif"
|
||||
>
|
||||
{receiver.firstName[0]}{receiver.lastName[0]}
|
||||
</div>
|
||||
<span
|
||||
class="font-serif text-sm text-brand-navy group-hover:text-brand-navy truncate"
|
||||
>
|
||||
{receiver.firstName}
|
||||
{receiver.lastName}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
{#if doc.sender}
|
||||
<a
|
||||
href="/conversations?senderId={doc.sender.id}&receiverId={receiver.id}"
|
||||
class="text-gray-300 hover:text-brand-mint transition"
|
||||
title="Konversation anzeigen"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<span class="text-sm font-serif text-gray-400 italic">Keine Empfänger</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. INHALT GROUP (Merged Summary & Transcription) -->
|
||||
{#if doc.summary || doc.transcription}
|
||||
<div>
|
||||
<h3
|
||||
class="text-xs font-sans font-bold text-brand-navy uppercase tracking-widest mb-4 border-b border-brand-sand pb-2"
|
||||
>
|
||||
Inhalt
|
||||
</h3>
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- Summary Sub-Section -->
|
||||
{#if doc.summary}
|
||||
<div>
|
||||
<span class="text-xs font-sans text-gray-400 block mb-2 uppercase"
|
||||
>Zusammenfassung</span
|
||||
>
|
||||
<div
|
||||
class="bg-brand-sand/30 p-5 rounded border border-brand-sand text-sm font-serif text-brand-navy leading-relaxed whitespace-pre-wrap"
|
||||
>
|
||||
{doc.summary}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Transcription Sub-Section -->
|
||||
{#if doc.transcription}
|
||||
<div>
|
||||
<span class="text-xs font-sans text-gray-400 block mb-2 uppercase"
|
||||
>Transkription</span
|
||||
>
|
||||
<div
|
||||
class="bg-brand-sand/30 p-5 rounded border border-brand-sand text-sm font-serif text-brand-navy leading-relaxed whitespace-pre-wrap"
|
||||
>
|
||||
{doc.transcription}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="pt-4 border-t border-brand-sand text-[10px] font-sans text-gray-400">
|
||||
<p class="truncate">ID: {doc.id}</p>
|
||||
<p class="truncate mt-1">{doc.originalFilename}</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- RIGHT: PREVIEW AREA -->
|
||||
<main class="flex-1 bg-[#2A2A2A] relative flex flex-col items-center justify-center">
|
||||
{#if isLoading}
|
||||
<!-- Loading Spinner -->
|
||||
<div class="text-brand-mint flex flex-col items-center">
|
||||
<svg
|
||||
class="animate-spin h-8 w-8 mb-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
<span class="font-sans text-sm tracking-wide">Lade Dokument...</span>
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="text-gray-400 text-center px-4">
|
||||
<p class="font-serif mb-2">{error}</p>
|
||||
{#if doc.filePath}
|
||||
<!-- Direct link as fallback -->
|
||||
<a
|
||||
href={`/api/documents/${doc.id}/file`}
|
||||
target="_blank"
|
||||
class="underline hover:text-white text-sm"
|
||||
>
|
||||
Direkter Download versuchen
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if !doc.filePath}
|
||||
<!-- No File State -->
|
||||
<div class="flex flex-col items-center text-gray-400">
|
||||
<div class="bg-white/5 p-8 rounded-full mb-6">
|
||||
<!-- Icon... -->
|
||||
<svg class="w-12 h-12 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
><path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
<p class="font-sans text-sm tracking-wide uppercase">Kein Scan vorhanden</p>
|
||||
</div>
|
||||
{:else if fileUrl && doc.originalFilename.toLowerCase().endsWith('.pdf')}
|
||||
<!-- PDF Iframe with Blob URL -->
|
||||
<iframe
|
||||
src={fileUrl}
|
||||
title="Document Preview"
|
||||
class="w-full h-full border-none bg-white"
|
||||
type="application/pdf"
|
||||
></iframe>
|
||||
{:else if fileUrl}
|
||||
<!-- Image with Blob URL -->
|
||||
<div class="w-full h-full flex items-center justify-center overflow-auto p-8">
|
||||
<img
|
||||
src={fileUrl}
|
||||
alt="Original Scan"
|
||||
class="max-w-full max-h-full object-contain shadow-2xl"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
49
frontend/src/routes/documents/[id]/edit/+page.server.ts
Normal file
49
frontend/src/routes/documents/[id]/edit/+page.server.ts
Normal file
@@ -0,0 +1,49 @@
|
||||
import { error, redirect } from '@sveltejs/kit';
|
||||
import { env } from '$env/dynamic/private';
|
||||
|
||||
export async function load({ params, fetch }) {
|
||||
const { id } = params;
|
||||
|
||||
|
||||
const baseUrl = 'http://localhost:8080';
|
||||
|
||||
try {
|
||||
// Parallel Dokument und Personen laden
|
||||
const [docRes, personsRes] = await Promise.all([
|
||||
fetch(`${baseUrl}/api/documents/${id}`),
|
||||
fetch(`${baseUrl}/api/persons`)
|
||||
]);
|
||||
|
||||
if (!docRes.ok) throw error(docRes.status, 'Dokument nicht gefunden');
|
||||
if (!personsRes.ok) throw error(personsRes.status, 'Personen konnten nicht geladen werden');
|
||||
|
||||
return {
|
||||
document: await docRes.json(),
|
||||
persons: await personsRes.json()
|
||||
};
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
throw error(500, 'Ladefehler');
|
||||
}
|
||||
}
|
||||
|
||||
export const actions = {
|
||||
default: async ({ request, params, fetch }) => {
|
||||
const baseUrl = env.API_INTERNAL_URL || 'http://localhost:8080';
|
||||
|
||||
const formData = await request.formData();
|
||||
|
||||
// Sende den FormData Request direkt an das Spring Backend weiter
|
||||
// (Spring kann Multipart verarbeiten)
|
||||
const res = await fetch(`${baseUrl}/api/documents/${params.id}`, {
|
||||
method: "PUT",
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
return { success: false, message: 'Speichern fehlgeschlagen' };
|
||||
}
|
||||
|
||||
throw redirect(303, `/documents/${params.id}`);
|
||||
}
|
||||
};
|
||||
190
frontend/src/routes/documents/[id]/edit/+page.svelte
Normal file
190
frontend/src/routes/documents/[id]/edit/+page.svelte
Normal file
@@ -0,0 +1,190 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import TagInput from '$lib/components/TagInput.svelte';
|
||||
export let data;
|
||||
export let form; // Rückgabe der Action (Fehler etc.)
|
||||
|
||||
let { document: doc, persons } = data;
|
||||
let tags = doc.tags ? doc.tags.map(t => t.name) : [];
|
||||
</script>
|
||||
|
||||
<div class="max-w-4xl mx-auto p-6 bg-white shadow mt-10 rounded-lg">
|
||||
<h1 class="text-2xl font-bold mb-6">Dokument bearbeiten</h1>
|
||||
|
||||
{#if form?.message}
|
||||
<div class="bg-red-100 text-red-700 p-3 rounded mb-4">{form.message}</div>
|
||||
{/if}
|
||||
|
||||
<form method="POST" enctype="multipart/form-data" use:enhance class="space-y-6">
|
||||
<!-- Datei Austausch -->
|
||||
<div class="bg-blue-50 p-4 rounded border border-blue-100">
|
||||
<label for="file-upload" class="block text-sm font-medium text-gray-700 mb-2"
|
||||
>Datei ersetzen (optional)</label
|
||||
>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-xs text-gray-500">Aktuell: {doc.originalFilename}</span>
|
||||
<!-- ID hinzugefügt -->
|
||||
<input
|
||||
id="file-upload"
|
||||
type="file"
|
||||
name="file"
|
||||
class="block w-full text-sm text-gray-500
|
||||
file:mr-4 file:py-2 file:px-4
|
||||
file:rounded-full file:border-0
|
||||
file:text-sm file:font-semibold
|
||||
file:bg-blue-50 file:text-blue-700
|
||||
hover:file:bg-blue-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Titel -->
|
||||
<div>
|
||||
<label for="title" class="block text-sm font-medium text-gray-700">Titel</label>
|
||||
<!-- ID hinzugefügt -->
|
||||
<input
|
||||
id="title"
|
||||
type="text"
|
||||
name="title"
|
||||
value={doc.title || ''}
|
||||
required
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="documentLocation" class="block text-sm font-medium text-gray-700"
|
||||
>Dokumentenort</label
|
||||
>
|
||||
<!-- ID hinzugefügt -->
|
||||
<input
|
||||
id="documentLocation"
|
||||
type="text"
|
||||
name="documentLocation"
|
||||
value={doc.documentLocation || ''}
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Datum -->
|
||||
<div>
|
||||
<label for="documentDate" class="block text-sm font-medium text-gray-700">Datum</label>
|
||||
<!-- ID hinzugefügt -->
|
||||
<input
|
||||
id="documentDate"
|
||||
type="text"
|
||||
name="documentDate"
|
||||
value={doc.documentDate || ''}
|
||||
placeholder="YYYY-MM-DD"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Ort -->
|
||||
<div>
|
||||
<label for="location" class="block text-sm font-medium text-gray-700">Ort</label>
|
||||
<!-- ID hinzugefügt -->
|
||||
<input
|
||||
id="location"
|
||||
type="text"
|
||||
name="location"
|
||||
value={doc.location || ''}
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sender -->
|
||||
<div>
|
||||
<label for="senderId" class="block text-sm font-medium text-gray-700">Absender</label>
|
||||
<!-- ID hinzugefügt -->
|
||||
<select
|
||||
id="senderId"
|
||||
name="senderId"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
|
||||
>
|
||||
<option value="">-- Unbekannt --</option>
|
||||
{#each persons as person}
|
||||
<option value={person.id} selected={doc.sender?.id === person.id}>
|
||||
{person.firstName}
|
||||
{person.lastName}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Empfänger (Multi-Select) -->
|
||||
<div>
|
||||
<label for="receiverIds" class="block text-sm font-medium text-gray-700"
|
||||
>Empfänger (Strg+Klick für mehrere)</label
|
||||
>
|
||||
<!-- ID hinzugefügt -->
|
||||
<select
|
||||
id="receiverIds"
|
||||
name="receiverIds"
|
||||
multiple
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm h-32"
|
||||
>
|
||||
{#each persons as person}
|
||||
<option value={person.id} selected={doc.receivers?.some((r) => r.id === person.id)}>
|
||||
{person.firstName}
|
||||
{person.lastName}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-brand-navy uppercase tracking-widest mb-2">
|
||||
Schlagworte
|
||||
</label>
|
||||
<TagInput bind:tags />
|
||||
<input type="hidden" name="tags" value={tags.join(',')} />
|
||||
</div>
|
||||
|
||||
<!-- Inhalt -->
|
||||
<div>
|
||||
<label for="summary" class="block text-sm font-medium text-gray-700">Inhalt</label>
|
||||
<!-- ID hinzugefügt -->
|
||||
<textarea
|
||||
id="summary"
|
||||
name="summary"
|
||||
rows="2"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm font-serif"
|
||||
>{doc.summary || ''}</textarea
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Transkription -->
|
||||
<div>
|
||||
<label for="transcription" class="block text-sm font-medium text-gray-700"
|
||||
>Transkription</label
|
||||
>
|
||||
<!-- ID hinzugefügt -->
|
||||
<textarea
|
||||
id="transcription"
|
||||
name="transcription"
|
||||
rows="10"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm font-serif"
|
||||
>{doc.transcription || ''}</textarea
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="flex justify-end gap-4">
|
||||
<a
|
||||
href="/documents/{doc.id}"
|
||||
class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
Abbrechen
|
||||
</a>
|
||||
<button
|
||||
type="submit"
|
||||
class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
Reference in New Issue
Block a user