feat: add create document feature via web interface

- Backend: new POST /api/documents endpoint with DocumentService.createDocument() reusing DocumentUpdateDTO; handles file upload, tags, sender, receivers - Frontend: new /documents/new route with same four-section form as edit page (Wer & Wann, Beschreibung, Transkription, Datei) but with empty fields - Home page: subtle '+ Neues Dokument' link above the document list Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-16 16:04:56 +01:00
parent c4806474df
commit 6fcff3355d
6 changed files with 476 additions and 96 deletions
--- a/frontend/src/routes/documents/new/+page.server.ts
+++ b/frontend/src/routes/documents/new/+page.server.ts
@@ -0,0 +1,35 @@
+import { fail, redirect } from '@sveltejs/kit';
+import { env } from '$env/dynamic/private';
+import { createApiClient } from '$lib/api.server';
+import { parseBackendError, getErrorMessage } from '$lib/errors';
+
+export async function load({ fetch }) {
+	const api = createApiClient(fetch);
+	const personsResult = await api.GET('/api/persons');
+
+	if (!personsResult.response.ok) {
+		return { persons: [] };
+	}
+
+	return { persons: personsResult.data };
+}
+
+export const actions = {
+	default: async ({ request, fetch }) => {
+		const baseUrl = env.API_INTERNAL_URL || 'http://localhost:8080';
+		const formData = await request.formData();
+
+		const res = await fetch(`${baseUrl}/api/documents`, {
+			method: 'POST',
+			body: formData
+		});
+
+		if (!res.ok) {
+			const backendError = await parseBackendError(res);
+			return fail(res.status, { error: getErrorMessage(backendError?.code) });
+		}
+
+		const created = await res.json();
+		throw redirect(303, `/documents/${created.id}`);
+	}
+};
--- a/frontend/src/routes/documents/new/+page.svelte
+++ b/frontend/src/routes/documents/new/+page.svelte
@@ -0,0 +1,229 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import TagInput from '$lib/components/TagInput.svelte';
+import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
+import PersonMultiSelect from '$lib/components/PersonMultiSelect.svelte';
+
+export let form;
+
+let tags: string[] = [];
+let senderId = '';
+let selectedReceivers: { id: string; firstName: string; lastName: string }[] = [];
+
+let dateDisplay = '';
+let dateIso = '';
+let dateDirty = false;
+
+function germanToIso(german: string): string {
+	const match = german.match(/^(\d{2})\.(\d{2})\.(\d{4})$/);
+	if (!match) return '';
+	const [, d, m, y] = match;
+	return `${y}-${m}-${d}`;
+}
+
+function handleDateInput(e: Event) {
+	const input = e.target as HTMLInputElement;
+	const digits = input.value.replace(/\D/g, '').slice(0, 8);
+	let formatted: string;
+	if (digits.length <= 2) {
+		formatted = digits;
+	} else if (digits.length <= 4) {
+		formatted = `${digits.slice(0, 2)}.${digits.slice(2)}`;
+	} else {
+		formatted = `${digits.slice(0, 2)}.${digits.slice(2, 4)}.${digits.slice(4)}`;
+	}
+	input.value = formatted;
+	dateDisplay = formatted;
+	dateIso = germanToIso(formatted);
+	dateDirty = true;
+}
+
+$: dateInvalid = dateDirty && dateDisplay.length > 0 && dateIso === '';
+</script>
+
+<div class="mx-auto max-w-4xl px-4 py-8">
+	<!-- Heading -->
+	<div class="mb-6">
+		<a
+			href="/"
+			class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
+		>
+			<svg
+				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
+				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>
+			Zurück zur Übersicht
+		</a>
+		<h1 class="font-serif text-3xl text-brand-navy">Neues Dokument</h1>
+	</div>
+
+	{#if form?.error}
+		<div class="mb-6 rounded border border-red-200 bg-red-50 p-4 text-red-700">{form.error}</div>
+	{/if}
+
+	<form method="POST" enctype="multipart/form-data" use:enhance class="space-y-6 pb-20">
+		<!-- ── Section 1: Wer & Wann ── -->
+		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">Wer &amp; Wann</h2>
+
+			<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
+				<!-- Datum -->
+				<div>
+					<label for="documentDate" class="mb-1 block text-sm font-medium text-gray-700"
+						>Datum</label
+					>
+					<input
+						id="documentDate"
+						type="text"
+						inputmode="numeric"
+						value={dateDisplay}
+						on:input={handleDateInput}
+						placeholder="TT.MM.JJJJ"
+						maxlength="10"
+						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm
+                               {dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-brand-navy focus:ring-brand-navy'}"
+						aria-describedby={dateInvalid ? 'date-error' : undefined}
+					/>
+					<input type="hidden" name="documentDate" value={dateIso} />
+					{#if dateInvalid}
+						<p id="date-error" class="mt-1 text-xs text-red-600">
+							Bitte im Format TT.MM.JJJJ eingeben, z.B. 20.12.2026
+						</p>
+					{/if}
+				</div>
+
+				<!-- Ort -->
+				<div>
+					<label for="location" class="mb-1 block text-sm font-medium text-gray-700">Ort</label>
+					<input
+						id="location"
+						type="text"
+						name="location"
+						placeholder="z.B. Berlin, Wien…"
+						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+					/>
+				</div>
+
+				<!-- Absender -->
+				<div>
+					<PersonTypeahead name="senderId" label="Absender" bind:value={senderId} />
+				</div>
+
+				<!-- Empfänger -->
+				<div>
+					<p class="mb-1 block text-sm font-medium text-gray-700">Empfänger</p>
+					<PersonMultiSelect bind:selectedPersons={selectedReceivers} />
+				</div>
+			</div>
+		</div>
+
+		<!-- ── Section 2: Beschreibung ── -->
+		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">Beschreibung</h2>
+
+			<div class="space-y-5">
+				<!-- Titel -->
+				<div>
+					<label for="title" class="mb-1 block text-sm font-medium text-gray-700">Titel *</label>
+					<input
+						id="title"
+						type="text"
+						name="title"
+						required
+						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+					/>
+				</div>
+
+				<!-- Aufbewahrungsort -->
+				<div>
+					<label for="documentLocation" class="mb-1 block text-sm font-medium text-gray-700"
+						>Aufbewahrungsort</label
+					>
+					<input
+						id="documentLocation"
+						type="text"
+						name="documentLocation"
+						placeholder="z.B. Schrank 3, Mappe B"
+						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+					/>
+					<p class="mt-1 text-xs text-gray-400">Wo befindet sich das Originaldokument?</p>
+				</div>
+
+				<!-- Schlagworte -->
+				<div>
+					<p class="mb-1 block text-sm font-medium text-gray-700">Schlagworte</p>
+					<TagInput bind:tags={tags} />
+					<input type="hidden" name="tags" value={tags.join(',')} />
+				</div>
+
+				<!-- Inhalt -->
+				<div>
+					<label for="summary" class="mb-1 block text-sm font-medium text-gray-700">Inhalt</label>
+					<textarea
+						id="summary"
+						name="summary"
+						rows="5"
+						placeholder="Kurze Beschreibung des Inhalts…"
+						class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+					></textarea>
+				</div>
+			</div>
+		</div>
+
+		<!-- ── Section 3: Transkription ── -->
+		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">Transkription</h2>
+			<textarea
+				id="transcription"
+				name="transcription"
+				rows="12"
+				placeholder="Vollständiger Text des Dokuments…"
+				class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+			></textarea>
+		</div>
+
+		<!-- ── Section 4: Datei ── -->
+		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">Datei</h2>
+
+			<label for="file-upload" class="mb-1 block text-sm font-medium text-gray-700">
+				Datei hochladen <span class="font-normal text-gray-400">(optional)</span>
+			</label>
+			<input
+				id="file-upload"
+				type="file"
+				name="file"
+				class="block w-full cursor-pointer text-sm
+                       text-gray-500 file:mr-4 file:rounded
+                       file:border-0 file:bg-brand-sand/40
+                       file:px-4 file:py-2
+                       file:text-sm file:font-semibold
+                       file:text-brand-navy hover:file:bg-brand-sand/60"
+			/>
+		</div>
+
+		<!-- ── Sticky Save Bar ── -->
+		<div
+			class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-brand-sand bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
+		>
+			<a href="/" class="text-sm font-medium text-gray-500 transition-colors hover:text-brand-navy">
+				Abbrechen
+			</a>
+			<button
+				type="submit"
+				class="rounded bg-brand-navy px-6 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/80"
+			>
+				Speichern
+			</button>
+		</div>
+	</form>
+</div>