marcel/familienarchiv
1
0
Fork 0
Code Issues 120 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: add create document feature via web interface

Browse Source 
- 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>
This commit is contained in:
Marcel
2026-03-16 16:04:56 +01:00
parent c4806474df
commit 6fcff3355d
6 changed files with 476 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
frontend/src/routes/+page.svelte
View File

@@ -1,89 +1,86 @@
<script lang="ts">
import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
import { goto } from '$app/navigation';
import TagInput from '$lib/components/TagInput.svelte';
import { slide } from 'svelte/transition';
import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
import { goto } from '$app/navigation';
import TagInput from '$lib/components/TagInput.svelte';
import { slide } from 'svelte/transition';
export let data;
export let data;
// Local state variables
let q = data.filters?.q || '';
let from = data.filters?.from || '';
let to = data.filters?.to || '';
let senderId = data.filters?.senderId || '';
let receiverId = data.filters?.receiverId || '';
let tagNames = data.filters?.tags || [];
// Local state variables
let q = data.filters?.q || '';
let from = data.filters?.from || '';
let to = data.filters?.to || '';
let senderId = data.filters?.senderId || '';
let receiverId = data.filters?.receiverId || '';
let tagNames = data.filters?.tags || [];
// Debounce Timer
let searchTimer: any;
// Debounce Timer
let searchTimer: any;
let showAdvanced = false;
let showAdvanced = false;
function triggerSearch() {
const params = new URLSearchParams();
function triggerSearch() {
const params = new URLSearchParams();
if (q) params.set('q', q);
if (from) params.set('from', from);
if (to) params.set('to', to);
if (senderId) params.set('senderId', senderId);
if (receiverId) params.set('receiverId', receiverId);
if(tagNames) tagNames.forEach(tag => params.append('tag', tag));
if (q) params.set('q', q);
if (from) params.set('from', from);
if (to) params.set('to', to);
if (senderId) params.set('senderId', senderId);
if (receiverId) params.set('receiverId', receiverId);
if (tagNames) tagNames.forEach((tag) => params.append('tag', tag));
goto(`/?${params.toString()}`, {
keepFocus: true,
noScroll: true
});
}
goto(`/?${params.toString()}`, {
keepFocus: true,
noScroll: true
});
}
function handleTextSearch() {
clearTimeout(searchTimer);
searchTimer = setTimeout(() => {
triggerSearch();
}, 500);
}
function handleTextSearch() {
clearTimeout(searchTimer);
searchTimer = setTimeout(() => {
triggerSearch();
}, 500);
}
let previousTags = tagNames.join(',');
$: {
const currentTags = tagNames.join(',');
if (currentTags !== previousTags) {
previousTags = currentTags;
triggerSearch();
}
}
let previousTags = tagNames.join(',');
$: {
const currentTags = tagNames.join(',');
if (currentTags !== previousTags) {
previousTags = currentTags;
triggerSearch();
}
}
function toggleAdvanced() {
showAdvanced = !showAdvanced;
}
function toggleAdvanced() {
showAdvanced = !showAdvanced;
}
// Sync with server data (e.g. after reset)
$: {
q = data.filters?.q || '';
from = data.filters?.from || '';
to = data.filters?.to || '';
senderId = data.filters?.senderId || '';
receiverId = data.filters?.receiverId || '';
}
// Sync with server data (e.g. after reset)
$: {
q = data.filters?.q || '';
from = data.filters?.from || '';
to = data.filters?.to || '';
senderId = data.filters?.senderId || '';
receiverId = data.filters?.receiverId || '';
}
</script>
<!-- Outer Container: Matches the 'Sand' background of the layout -->
<main class="max-w-7xl mx-auto py-8 sm:px-6 lg:px-8 font-sans">
<main class="mx-auto max-w-7xl py-8 font-sans sm:px-6 lg:px-8">
<!-- SEARCH & FILTER CARD -->
<div class="bg-white p-6 shadow-sm border border-brand-sand mb-8 rounded-sm">
<div class="mb-8 rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<!-- ROW 1: Main Search (One Line) -->
<div class="flex gap-4 items-center">
<div class="flex items-center gap-4">
<!-- Full Text Search -->
<div class="flex-1 relative">
<div class="relative flex-1">
<input
type="text"
bind:value={q}
on:input={handleTextSearch}
placeholder="Suche in Titel, Inhalt, Ort..."
class="block w-full border-gray-300 shadow-sm focus:border-brand-navy focus:ring-brand-navy placeholder-gray-400 py-2.5 pl-3 pr-10"
class="block w-full border-gray-300 py-2.5 pr-10 pl-3 placeholder-gray-400 shadow-sm focus:border-brand-navy focus:ring-brand-navy"
/>
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><path
stroke-linecap="round"
@@ -98,10 +95,10 @@
<!-- Toggle Advanced Button -->
<button
on:click={toggleAdvanced}
class="flex items-center gap-2 px-4 py-2.5 border border-gray-300 bg-gray-50 text-gray-600 text-sm font-bold uppercase tracking-wide hover:bg-gray-100 hover:text-brand-navy transition"
class="flex items-center gap-2 border border-gray-300 bg-gray-50 px-4 py-2.5 text-sm font-bold tracking-wide text-gray-600 uppercase transition hover:bg-gray-100 hover:text-brand-navy"
>
<svg
class="w-4 h-4 transform transition-transform duration-200 {showAdvanced
class="h-4 w-4 transform transition-transform duration-200 {showAdvanced
? 'rotate-180'
: ''}"
fill="none"
@@ -121,10 +118,10 @@
<!-- Reset Button -->
<a
href="/"
class="flex items-center justify-center px-3 py-2.5 border border-transparent text-gray-400 hover:text-red-500 transition"
class="flex items-center justify-center border border-transparent px-3 py-2.5 text-gray-400 transition hover:text-red-500"
title="Filter zurücksetzen"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
@@ -139,18 +136,20 @@
{#if showAdvanced}
<div
transition:slide
class="mt-6 pt-6 border-t border-gray-100 grid grid-cols-1 md:grid-cols-12 gap-6"
class="mt-6 grid grid-cols-1 gap-6 border-t border-gray-100 pt-6 md:grid-cols-12"
>
<!-- Tag Filter -->
<div class="md:col-span-12">
<p class="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-2">Schlagworte</p>
<p class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase">
Schlagworte
</p>
<TagInput bind:tags={tagNames} allowCreation={false} on:change={triggerSearch} />
</div>
<!-- Sender -->
<div class="md:col-span-3">
<div
class="[&_label]:text-xs [&_label]:font-bold [&_label]:uppercase [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:mb-2 [&_input]:py-2.5 [&_input]:border-gray-300"
class="[&_input]:border-gray-300 [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:uppercase"
>
<PersonTypeahead
name="senderId"
@@ -165,7 +164,7 @@
<!-- Receiver -->
<div class="md:col-span-3">
<div
class="[&_label]:text-xs [&_label]:font-bold [&_label]:uppercase [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:mb-2 [&_input]:py-2.5 [&_input]:border-gray-300"
class="[&_input]:border-gray-300 [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:uppercase"
>
<PersonTypeahead
name="receiverId"
@@ -178,11 +177,11 @@
</div>
<!-- Dates -->
<div class="md:col-span-6 grid grid-cols-2 gap-4">
<div class="grid grid-cols-2 gap-4 md:col-span-6">
<div>
<label
for="from"
class="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-2"
class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase"
>Von</label
>
<input
@@ -190,13 +189,13 @@
id="from"
bind:value={from}
on:change={triggerSearch}
class="block w-full border-gray-300 shadow-sm text-sm py-2.5"
class="block w-full border-gray-300 py-2.5 text-sm shadow-sm"
/>
</div>
<div>
<label
for="to"
class="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-2"
class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase"
>Bis</label
>
<input
@@ -204,7 +203,7 @@
id="to"
bind:value={to}
on:change={triggerSearch}
class="block w-full border-gray-300 shadow-sm text-sm py-2.5"
class="block w-full border-gray-300 py-2.5 text-sm shadow-sm"
/>
</div>
</div>
@@ -212,42 +211,55 @@
{/if}
</div>
<!-- DOCUMENT LIST HEADER -->
<div class="mb-2 flex justify-end">
<a
href="/documents/new"
class="inline-flex items-center gap-1 text-sm font-medium text-brand-navy/60 transition-colors hover:text-brand-navy"
>
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
Neues Dokument
</a>
</div>
<!-- DOCUMENT LIST -->
<div class="bg-white shadow-sm border border-brand-sand">
<div class="border border-brand-sand bg-white shadow-sm">
{#if data.error}
<div class="p-8 text-center text-red-600 bg-red-50">
<div class="bg-red-50 p-8 text-center text-red-600">
{data.error}
</div>
{:else if data.documents && data.documents.length > 0}
<ul class="divide-y divide-gray-100">
{#each data.documents as doc}
<li class="group hover:bg-brand-sand/10 transition-colors duration-200">
<li class="group transition-colors duration-200 hover:bg-brand-sand/10">
<!-- LINK TO DETAIL PAGE -->
<a href="/documents/{doc.id}" class="block p-6">
<div class="flex flex-col sm:flex-row gap-6">
<div class="flex flex-col gap-6 sm:flex-row">
<!-- Main Info -->
<div class="flex-1">
<div class="flex items-baseline justify-between mb-2">
<div class="mb-2 flex items-baseline justify-between">
<!-- Title: Serif & Brand Navy -->
<h3
class="text-xl font-serif font-medium text-brand-navy group-hover:underline decoration-brand-mint decoration-2 underline-offset-4"
class="font-serif text-xl font-medium text-brand-navy decoration-brand-mint decoration-2 underline-offset-4 group-hover:underline"
>
{doc.title || doc.originalFilename}
</h3>
<!-- Status Badge -->
<span
class="ml-3 inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide border
class="ml-3 inline-flex items-center rounded-full border px-2.5 py-0.5 text-[10px] font-bold tracking-wide uppercase
{doc.status === 'UPLOADED'
? 'bg-brand-mint/20 text-brand-navy border-brand-mint/50'
: 'bg-yellow-50 text-yellow-700 border-yellow-200'}"
? 'border-brand-mint/50 bg-brand-mint/20 text-brand-navy'
: 'border-yellow-200 bg-yellow-50 text-yellow-700'}"
>
{doc.status}
</span>
</div>
<!-- Metadata Row -->
<div class="flex flex-wrap gap-6 text-sm text-gray-500 mb-4 font-sans">
<div class="mb-4 flex flex-wrap gap-6 font-sans text-sm text-gray-500">
<div class="flex items-center">
<svg
class="mr-1.5 h-4 w-4 text-brand-mint"
@@ -288,10 +300,10 @@
</div>
<!-- Sender/Receiver Info -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm font-serif">
<div class="grid grid-cols-1 gap-4 font-serif text-sm sm:grid-cols-2">
<div class="flex items-baseline">
<span
class="w-10 text-xs font-sans font-bold text-gray-400 uppercase tracking-wide"
class="w-10 font-sans text-xs font-bold tracking-wide text-gray-400 uppercase"
>Von</span
>
{#if doc.sender}
@@ -304,7 +316,7 @@
</div>
<div class="flex items-baseline">
<span
class="w-10 text-xs font-sans font-bold text-gray-400 uppercase tracking-wide"
class="w-10 font-sans text-xs font-bold tracking-wide text-gray-400 uppercase"
>An</span
>
{#if doc.receivers && doc.receivers.length > 0}
@@ -319,11 +331,11 @@
<!-- NEW: Tags Display -->
{#if doc.tags && doc.tags.length > 0}
<div class="flex flex-wrap gap-2 mt-4 pt-3">
<div class="mt-4 flex flex-wrap gap-2 pt-3">
{#each doc.tags as tag}
<button
type="button"
class="inline-flex items-center px-2 py-1 rounded text-[10px] font-bold uppercase tracking-widest bg-brand-sand/30 text-brand-navy hover:bg-brand-navy hover:text-white transition-colors relative z-10"
class="relative z-10 inline-flex items-center rounded bg-brand-sand/30 px-2 py-1 text-[10px] font-bold tracking-widest text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
on:click|preventDefault|stopPropagation={() =>
goto(`/?tag=${encodeURIComponent(tag.name)}`)}
>
@@ -336,7 +348,7 @@
<!-- Arrow Icon -->
<div
class="hidden sm:flex items-center text-gray-300 group-hover:text-brand-mint transition-colors"
class="hidden items-center text-gray-300 transition-colors group-hover:text-brand-mint sm:flex"
>
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
@@ -356,9 +368,9 @@
<!-- Empty State -->
<div class="p-16 text-center">
<div
class="mx-auto w-12 h-12 bg-brand-sand/30 rounded-full flex items-center justify-center mb-4"
class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-brand-sand/30"
>
<svg class="w-6 h-6 text-brand-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24"
<svg class="h-6 w-6 text-brand-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
@@ -367,13 +379,13 @@
/></svg
>
</div>
<h3 class="text-lg font-serif font-medium text-brand-navy">Keine Dokumente gefunden</h3>
<p class="text-gray-500 mt-1 font-sans text-sm">
<h3 class="font-serif text-lg font-medium text-brand-navy">Keine Dokumente gefunden</h3>
<p class="mt-1 font-sans text-sm text-gray-500">
Versuchen Sie, die Filter anzupassen oder den Suchbegriff zu ändern.
</p>
<button
on:click={() => goto('/')}
class="mt-6 text-brand-mint font-bold text-sm uppercase tracking-wide hover:text-brand-navy transition"
class="mt-6 text-sm font-bold tracking-wide text-brand-mint uppercase transition hover:text-brand-navy"
>
Alle Filter löschen
</button>