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

feat: add create person feature via web interface

Browse Source 
- Backend: new POST /api/persons endpoint in PersonController
- Frontend: new /persons/new route with Vorname/Nachname/Alias form,
  redirects to the new person's detail page on success
- Persons list: subtle '+ Neue Person' link below the page title

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-16 16:23:05 +01:00
parent b583c8489d
commit 0123dffdc4
5 changed files with 323 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
backend/src/main/java/org/raddatz/familienarchiv/controller/PersonController.java
View File

@@ -44,6 +44,21 @@ public class PersonController {
return documentRepository.findBySenderId(id); return documentRepository.findBySenderId(id);
} }
@PostMapping
public ResponseEntity<Person> createPerson(@RequestBody Map<String, String> body) {
String firstName = body.get("firstName");
String lastName = body.get("lastName");
if (firstName == null || firstName.isBlank() || lastName == null || lastName.isBlank()) {
throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Vor- und Nachname sind Pflichtfelder");
}
Person person = Person.builder()
.firstName(firstName.trim())
.lastName(lastName.trim())
.alias(body.get("alias"))
.build();
return ResponseEntity.ok(personRepository.save(person));
}
@PutMapping("/{id}") @PutMapping("/{id}")
public ResponseEntity<Person> updatePerson(@PathVariable UUID id, @RequestBody Map<String, String> body) { public ResponseEntity<Person> updatePerson(@PathVariable UUID id, @RequestBody Map<String, String> body) {
String firstName = body.get("firstName"); String firstName = body.get("firstName");

102
frontend/src/lib/generated/api.ts
View File

@@ -68,6 +68,22 @@ export interface paths {
patch?: never; patch?: never;
trace?: never; trace?: never;
}; };
"/api/persons": {
parameters: {
query?: never;
header?: never;
path?: never;
cookie?: never;
};
get: operations["getPersons"];
put?: never;
post: operations["createPerson"];
delete?: never;
options?: never;
head?: never;
patch?: never;
trace?: never;
};
"/api/persons/{id}/merge": { "/api/persons/{id}/merge": {
parameters: { parameters: {
query?: never; query?: never;
@@ -180,22 +196,6 @@ export interface paths {
patch?: never; patch?: never;
trace?: never; trace?: never;
}; };
"/api/persons": {
parameters: {
query?: never;
header?: never;
path?: never;
cookie?: never;
};
get: operations["getPersons"];
put?: never;
post?: never;
delete?: never;
options?: never;
head?: never;
patch?: never;
trace?: never;
};
"/api/persons/{id}/documents": { "/api/persons/{id}/documents": {
parameters: { parameters: {
query?: never; query?: never;
@@ -581,6 +581,54 @@ export interface operations {
}; };
}; };
}; };
getPersons: {
parameters: {
query?: {
q?: string;
};
header?: never;
path?: never;
cookie?: never;
};
requestBody?: never;
responses: {
/** @description OK */
200: {
headers: {
[name: string]: unknown;
};
content: {
"*/*": components["schemas"]["Person"][];
};
};
};
};
createPerson: {
parameters: {
query?: never;
header?: never;
path?: never;
cookie?: never;
};
requestBody: {
content: {
"application/json": {
[key: string]: string;
};
};
};
responses: {
/** @description OK */
200: {
headers: {
[name: string]: unknown;
};
content: {
"*/*": components["schemas"]["Person"];
};
};
};
};
mergePerson: { mergePerson: {
parameters: { parameters: {
query?: never; query?: never;
@@ -783,28 +831,6 @@ export interface operations {
}; };
}; };
}; };
getPersons: {
parameters: {
query?: {
q?: string;
};
header?: never;
path?: never;
cookie?: never;
};
requestBody?: never;
responses: {
/** @description OK */
200: {
headers: {
[name: string]: unknown;
};
content: {
"*/*": components["schemas"]["Person"][];
};
};
};
};
getPersonDocuments: { getPersonDocuments: {
parameters: { parameters: {
query?: never; query?: never;

192
frontend/src/routes/persons/+page.svelte
View File

@@ -1,84 +1,128 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
export let data; export let data;
let searchTimeout: any; let searchTimeout: any;
// Live-Suche (Debounce) // Live-Suche (Debounce)
function handleSearch(e: Event) { function handleSearch(e: Event) {
const value = (e.target as HTMLInputElement).value; const value = (e.target as HTMLInputElement).value;
clearTimeout(searchTimeout); clearTimeout(searchTimeout);
searchTimeout = setTimeout(() => { searchTimeout = setTimeout(() => {
goto(`/persons?q=${value}`, { keepFocus: true }); goto(`/persons?q=${value}`, { keepFocus: true });
}, 300); }, 300);
} }
</script> </script>
<div class="max-w-7xl mx-auto py-12 sm:px-6 lg:px-8"> <div class="mx-auto max-w-7xl py-12 sm:px-6 lg:px-8">
<!-- Header Area --> <!-- 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
<div> class="mb-10 flex flex-col justify-between gap-6 border-b border-brand-navy/10 pb-6 md:flex-row md:items-end"
<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"> <div>
Durchsuchen Sie den Index aller erfassten Personen im Familienarchiv. <h1 class="font-serif text-3xl font-medium text-brand-navy">Personenverzeichnis</h1>
</p> <p class="mt-2 max-w-xl font-sans text-sm text-brand-navy/60">
</div> Durchsuchen Sie den Index aller erfassten Personen im Familienarchiv.
</p>
<a
href="/persons/new"
class="mt-3 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>
Neue Person
</a>
</div>
<!-- Search Input --> <!-- Search Input -->
<div class="w-full md:w-80"> <div class="w-full md:w-80">
<label for="search" class="sr-only">Suche</label> <label for="search" class="sr-only">Suche</label>
<div class="relative"> <div class="relative">
<input <input
id="search" id="search"
type="text" type="text"
placeholder="Namen suchen..." placeholder="Namen suchen..."
value={data.q || ''} value={data.q || ''}
on:input={handleSearch} on:input={handleSearch}
class="block w-full rounded-sm border border-gray-300 bg-white py-2.5 pr-10 pl-4 text-sm font-sans text-brand-navy shadow-sm placeholder-gray-400 focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none" class="block w-full rounded-sm border border-gray-300 bg-white py-2.5 pr-10 pl-4 font-sans text-sm text-brand-navy placeholder-gray-400 shadow-sm focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none"
/> />
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400"> <div
<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> class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400"
</div> >
</div> <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
</div> ><path
</div> 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} {#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
<div class="w-12 h-12 bg-brand-sand/30 rounded-full flex items-center justify-center mb-3 text-brand-navy"> class="flex flex-col items-center justify-center rounded-lg border border-dashed border-brand-sand bg-white py-16 text-center"
<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> <div
<p class="text-brand-navy font-serif text-lg">Keine Personen gefunden.</p> class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-brand-sand/30 text-brand-navy"
<p class="text-gray-500 font-sans text-sm mt-1">Versuchen Sie einen anderen Suchbegriff.</p> >
</div> <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
{:else} ><path
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> stroke-linecap="round"
{#each data.persons as person} stroke-linejoin="round"
<a href="/persons/{person.id}" class="block group h-full"> stroke-width="2"
<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"> 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="font-serif text-lg text-brand-navy">Keine Personen gefunden.</p>
<p class="mt-1 font-sans text-sm text-gray-500">Versuchen Sie einen anderen Suchbegriff.</p>
</div>
{:else}
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
{#each data.persons as person}
<a href="/persons/{person.id}" class="group block h-full">
<div
class="relative flex h-full items-center gap-4 overflow-hidden rounded border border-brand-sand bg-white p-6 shadow-sm transition-all duration-200 hover:border-brand-navy hover:shadow-md"
>
<!-- Decorative Accent on Hover -->
<div
class="absolute top-0 bottom-0 left-0 w-1 bg-brand-navy opacity-0 transition-opacity group-hover:opacity-100"
></div>
<!-- Decorative Accent on Hover --> <!-- Avatar -->
<div class="absolute left-0 top-0 bottom-0 w-1 bg-brand-navy opacity-0 group-hover:opacity-100 transition-opacity"></div> <div class="flex-shrink-0">
<div
class="flex h-12 w-12 items-center justify-center rounded-full bg-brand-navy font-serif text-lg text-white transition-colors group-hover:bg-brand-mint group-hover:text-brand-navy"
>
{person.firstName[0]}{person.lastName[0]}
</div>
</div>
<!-- Avatar --> <!-- Info -->
<div class="flex-shrink-0"> <div class="min-w-0 flex-1">
<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"> <p
{person.firstName[0]}{person.lastName[0]} class="truncate font-serif text-base font-medium text-brand-navy decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
</div> >
</div> {person.firstName}
{person.lastName}
<!-- Info --> </p>
<div class="flex-1 min-w-0"> {#if person.alias}
<p class="text-base font-serif font-medium text-brand-navy truncate group-hover:underline decoration-brand-mint decoration-2 underline-offset-2"> <p class="mt-0.5 truncate font-sans text-xs text-gray-500">"{person.alias}"</p>
{person.firstName} {person.lastName} {/if}
</p> </div>
{#if person.alias} </div>
<p class="text-xs font-sans text-gray-500 truncate mt-0.5">"{person.alias}"</p> </a>
{/if} {/each}
</div> </div>
</div> {/if}
</a>
{/each}
</div>
{/if}
</div> </div>

26
frontend/src/routes/persons/new/+page.server.ts Normal file
View File

@@ -0,0 +1,26 @@
import { fail, redirect } from '@sveltejs/kit';
import { createApiClient } from '$lib/api.server';
export const actions = {
default: async ({ request, fetch }) => {
const formData = await request.formData();
const firstName = formData.get('firstName')?.toString().trim();
const lastName = formData.get('lastName')?.toString().trim();
const alias = formData.get('alias')?.toString().trim() || undefined;
if (!firstName || !lastName) {
return fail(400, { error: 'Vor- und Nachname sind Pflichtfelder.' });
}
const api = createApiClient(fetch);
const result = await api.POST('/api/persons', {
body: { firstName, lastName, ...(alias ? { alias } : {}) }
});
if (!result.response.ok) {
return fail(result.response.status, { error: 'Person konnte nicht gespeichert werden.' });
}
throw redirect(303, `/persons/${result.data!.id}`);
}
};

100
frontend/src/routes/persons/new/+page.svelte Normal file
View File

@@ -0,0 +1,100 @@
<script lang="ts">
export let form;
</script>
<div class="mx-auto max-w-2xl px-4 py-8">
<!-- Heading -->
<div class="mb-6">
<a
href="/persons"
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">Neue Person</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" class="pb-20">
<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">
Angaben zur Person
</h2>
<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
<div>
<label for="firstName" class="mb-1 block text-sm font-medium text-gray-700"
>Vorname *</label
>
<input
id="firstName"
name="firstName"
type="text"
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>
<div>
<label for="lastName" class="mb-1 block text-sm font-medium text-gray-700"
>Nachname *</label
>
<input
id="lastName"
name="lastName"
type="text"
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>
<div class="md:col-span-2">
<label for="alias" class="mb-1 block text-sm font-medium text-gray-700"
>Rufname / Alias</label
>
<input
id="alias"
name="alias"
type="text"
placeholder="z.B. Oma Frieda, Onkel Karl…"
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
/>
</div>
</div>
</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="/persons"
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>