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
18
frontend/src/routes/persons/+page.server.ts
Normal file
18
frontend/src/routes/persons/+page.server.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { env } from '$env/dynamic/private';
|
||||
|
||||
export async function load({ url, fetch }) {
|
||||
const q = url.searchParams.get('q') || '';
|
||||
const baseUrl = env.API_INTERNAL_URL || 'http://localhost:8080';
|
||||
|
||||
// Query Parameter an Backend durchreichen
|
||||
const apiUrl = new URL(`${baseUrl}/api/persons`);
|
||||
if (q) apiUrl.searchParams.set('q', q);
|
||||
|
||||
const res = await fetch(apiUrl.toString());
|
||||
|
||||
if (!res.ok) return { persons: [] };
|
||||
|
||||
const persons = await res.json();
|
||||
return { persons, q };
|
||||
}
|
||||
84
frontend/src/routes/persons/+page.svelte
Normal file
84
frontend/src/routes/persons/+page.svelte
Normal file
@@ -0,0 +1,84 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
export let data;
|
||||
|
||||
let searchTimeout: any;
|
||||
|
||||
// Live-Suche (Debounce)
|
||||
function handleSearch(e: Event) {
|
||||
const value = (e.target as HTMLInputElement).value;
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => {
|
||||
goto(`/persons?q=${value}`, { keepFocus: true });
|
||||
}, 300);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="max-w-7xl mx-auto py-12 sm:px-6 lg:px-8">
|
||||
<!-- Header Area -->
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-10 border-b border-brand-navy/10 pb-6">
|
||||
<div>
|
||||
<h1 class="text-3xl font-serif font-medium text-brand-navy">Personenverzeichnis</h1>
|
||||
<p class="text-brand-navy/60 font-sans text-sm mt-2 max-w-xl">
|
||||
Durchsuchen Sie den Index aller erfassten Personen im Familienarchiv.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Search Input -->
|
||||
<div class="w-full md:w-72">
|
||||
<label for="search" class="sr-only">Suche</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
id="search"
|
||||
type="text"
|
||||
placeholder="Namen suchen..."
|
||||
value={data.q || ''}
|
||||
on:input={handleSearch}
|
||||
class="block w-full border-gray-300 shadow-sm focus:border-brand-navy focus:ring-brand-navy placeholder-gray-400 py-2 pl-3 pr-10 text-sm font-sans"
|
||||
/>
|
||||
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400">
|
||||
<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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if data.persons.length === 0}
|
||||
<div class="flex flex-col items-center justify-center py-16 bg-white border border-brand-sand border-dashed rounded-lg text-center">
|
||||
<div class="w-12 h-12 bg-brand-sand/30 rounded-full flex items-center justify-center mb-3 text-brand-navy">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
|
||||
</div>
|
||||
<p class="text-brand-navy font-serif text-lg">Keine Personen gefunden.</p>
|
||||
<p class="text-gray-500 font-sans text-sm mt-1">Versuchen Sie einen anderen Suchbegriff.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
{#each data.persons as person}
|
||||
<a href="/persons/{person.id}" class="block group h-full">
|
||||
<div class="h-full bg-white rounded shadow-sm border border-brand-sand p-6 flex items-center gap-4 hover:border-brand-navy hover:shadow-md transition-all duration-200 relative overflow-hidden">
|
||||
|
||||
<!-- Decorative Accent on Hover -->
|
||||
<div class="absolute left-0 top-0 bottom-0 w-1 bg-brand-navy opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
|
||||
<!-- Avatar -->
|
||||
<div class="flex-shrink-0">
|
||||
<div class="h-12 w-12 rounded-full bg-brand-navy text-white flex items-center justify-center font-serif text-lg group-hover:bg-brand-mint group-hover:text-brand-navy transition-colors">
|
||||
{person.firstName[0]}{person.lastName[0]}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-base font-serif font-medium text-brand-navy truncate group-hover:underline decoration-brand-mint decoration-2 underline-offset-2">
|
||||
{person.firstName} {person.lastName}
|
||||
</p>
|
||||
{#if person.alias}
|
||||
<p class="text-xs font-sans text-gray-500 truncate mt-0.5">"{person.alias}"</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
27
frontend/src/routes/persons/[id]/+page.server.ts
Normal file
27
frontend/src/routes/persons/[id]/+page.server.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { error, } 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 {
|
||||
// Parallel Fetching: Person Infos + Ihre Dokumente
|
||||
const [personRes, docsRes] = await Promise.all([
|
||||
fetch(`${baseUrl}/api/persons/${id}`),
|
||||
fetch(`${baseUrl}/api/persons/${id}/documents`)
|
||||
]);
|
||||
|
||||
if (personRes.status === 404) throw error(404, 'Person nicht gefunden');
|
||||
|
||||
return {
|
||||
person: await personRes.json(),
|
||||
documents: await docsRes.json()
|
||||
};
|
||||
} catch (e) {
|
||||
if (e.status) throw e;
|
||||
throw error(500, 'Ladefehler');
|
||||
}
|
||||
}
|
||||
126
frontend/src/routes/persons/[id]/+page.svelte
Normal file
126
frontend/src/routes/persons/[id]/+page.svelte
Normal file
@@ -0,0 +1,126 @@
|
||||
<script lang="ts">
|
||||
export let data;
|
||||
const { person, documents } = data;
|
||||
</script>
|
||||
|
||||
<div class="max-w-4xl mx-auto py-10 px-4">
|
||||
|
||||
<!-- Back Link -->
|
||||
<div class="mb-6">
|
||||
<a href="/persons" class="inline-flex items-center text-xs font-bold uppercase tracking-widest text-gray-500 hover:text-brand-navy transition-colors group">
|
||||
<svg class="w-4 h-4 mr-2 transform group-hover:-translate-x-1 transition-transform" 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>
|
||||
</div>
|
||||
|
||||
<!-- Header / Metadata Card -->
|
||||
<div class="bg-white shadow-sm border border-brand-sand rounded-sm overflow-hidden mb-10">
|
||||
<!-- Blue Top Border accent -->
|
||||
<div class="h-2 bg-brand-navy w-full"></div>
|
||||
|
||||
<div class="p-8 md:p-10">
|
||||
<div class="flex flex-col md:flex-row gap-8 items-start">
|
||||
|
||||
<!-- Big Avatar / Icon -->
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-24 h-24 rounded-full bg-brand-sand/30 flex items-center justify-center text-brand-navy border border-brand-sand">
|
||||
<span class="font-serif text-3xl">{person.firstName[0]}{person.lastName[0]}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Grid -->
|
||||
<div class="flex-1 w-full">
|
||||
<h1 class="text-4xl font-serif text-brand-navy mb-8 border-b border-gray-100 pb-4">
|
||||
{person.firstName} {person.lastName}
|
||||
</h1>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<span class="block text-xs font-bold font-sans text-gray-400 uppercase tracking-widest mb-1">Voller Name</span>
|
||||
<span class="block text-lg font-serif text-brand-navy">{person.firstName} {person.lastName}</span>
|
||||
</div>
|
||||
|
||||
{#if person.alias}
|
||||
<div>
|
||||
<span class="block text-xs font-bold font-sans text-gray-400 uppercase tracking-widest mb-1">Rufname / Alias</span>
|
||||
<span class="block text-lg font-serif text-brand-navy italic">"{person.alias}"</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if person.birthDate}
|
||||
<div>
|
||||
<span class="block text-xs font-bold font-sans text-gray-400 uppercase tracking-widest mb-1">Geburtsdatum</span>
|
||||
<span class="block text-lg font-serif text-brand-navy">{person.birthDate}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Empty slot or Placeholder for bio/notes -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Linked Documents Section -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-6 border-b border-brand-navy/10 pb-2">
|
||||
<h2 class="text-xl font-serif text-brand-navy">
|
||||
Gesendete Dokumente
|
||||
</h2>
|
||||
<span class="bg-brand-navy text-white text-xs font-bold px-2 py-1 rounded-full">
|
||||
{documents.length}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{#if documents.length === 0}
|
||||
<div class="p-12 text-center bg-white border border-brand-sand border-dashed rounded-sm">
|
||||
<p class="text-gray-500 font-sans">Diese Person ist noch nicht als Absender verknüpft.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<ul class="space-y-3">
|
||||
{#each documents as doc}
|
||||
<li class="group">
|
||||
<a href="/documents/{doc.id}" class="block bg-white border border-brand-sand p-4 hover:border-brand-navy hover:shadow-md transition-all duration-200">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4 overflow-hidden">
|
||||
<!-- Icon Box -->
|
||||
<div class="flex-shrink-0 h-10 w-10 bg-brand-sand/20 text-brand-navy rounded flex items-center justify-center group-hover:bg-brand-mint group-hover:text-brand-navy transition-colors">
|
||||
<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="M9 12h6m-6 4h6m2 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"></path></svg>
|
||||
</div>
|
||||
|
||||
<!-- Text Info -->
|
||||
<div class="min-w-0">
|
||||
<div class="font-serif text-base font-medium text-brand-navy truncate group-hover:underline decoration-brand-mint decoration-2 underline-offset-2">
|
||||
{doc.title || doc.originalFilename}
|
||||
</div>
|
||||
<div class="flex items-center text-xs font-sans text-gray-500 mt-0.5 space-x-2">
|
||||
<span>{doc.documentDate || 'Kein Datum'}</span>
|
||||
{#if doc.location}
|
||||
<span class="text-brand-mint">•</span>
|
||||
<span>{doc.location}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status & Arrow -->
|
||||
<div class="flex items-center flex-shrink-0 pl-4">
|
||||
<span class="hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide border
|
||||
{doc.status === 'UPLOADED'
|
||||
? 'bg-brand-mint/20 text-brand-navy border-brand-mint/50'
|
||||
: 'bg-yellow-50 text-yellow-800 border-yellow-200'}">
|
||||
{doc.status}
|
||||
</span>
|
||||
<svg class="h-5 w-5 text-gray-300 ml-4 group-hover:text-brand-navy transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user