0db68da00c
Some checks failed
CI / Backend Unit Tests (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
CI / Unit & Component Tests (push) Has been cancelled
CI / Backend Unit Tests (pull_request) Has been cancelled
CI / E2E Tests (pull_request) Has been cancelled
CI / Unit & Component Tests (pull_request) Has been cancelled
Split the 610-line person detail page into four focused co-located components:
- PersonCard: view/edit card with inline form (owns editMode)
- PersonMergePanel: merge target typeahead + two-step confirm (state reset via {#key})
- CoCorrespondentsList: frequency-ranked correspondent chips linking to conversations
- PersonDocumentList: reusable sorted/paginated document list (used for sent + received)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
247 lines
7.5 KiB
Svelte
247 lines
7.5 KiB
Svelte
<script lang="ts">
|
|
import { enhance } from '$app/forms';
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
|
|
let {
|
|
person,
|
|
canWrite,
|
|
form
|
|
}: {
|
|
person: {
|
|
firstName: string;
|
|
lastName: string;
|
|
alias?: string | null;
|
|
birthYear?: number | null;
|
|
deathYear?: number | null;
|
|
notes?: string | null;
|
|
};
|
|
canWrite: boolean;
|
|
form?: { updated?: boolean; updateError?: string } | null;
|
|
} = $props();
|
|
|
|
let editMode = $state(false);
|
|
|
|
$effect(() => {
|
|
if (form?.updated) editMode = false;
|
|
});
|
|
</script>
|
|
|
|
<div class="mb-10 overflow-hidden rounded-sm border border-line bg-surface shadow-sm">
|
|
<div class="h-2 w-full bg-primary"></div>
|
|
|
|
<div class="p-8 md:p-10">
|
|
{#if editMode && canWrite}
|
|
<!-- Edit Form -->
|
|
<form method="POST" action="?/update" use:enhance>
|
|
<div class="flex flex-col gap-6">
|
|
<h2 class="border-b border-line-2 pb-3 font-serif text-xl text-ink">
|
|
{m.person_edit_heading()}
|
|
</h2>
|
|
|
|
{#if form?.updateError}
|
|
<p class="rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
|
|
{form.updateError}
|
|
</p>
|
|
{/if}
|
|
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<div>
|
|
<label
|
|
for="firstName"
|
|
class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
|
|
>{m.form_label_first_name()} *</label
|
|
>
|
|
<input
|
|
id="firstName"
|
|
name="firstName"
|
|
type="text"
|
|
required
|
|
value={person.firstName}
|
|
class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label
|
|
for="lastName"
|
|
class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
|
|
>{m.form_label_last_name()} *</label
|
|
>
|
|
<input
|
|
id="lastName"
|
|
name="lastName"
|
|
type="text"
|
|
required
|
|
value={person.lastName}
|
|
class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
|
|
/>
|
|
</div>
|
|
<div class="md:col-span-2">
|
|
<label
|
|
for="alias"
|
|
class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
|
|
>{m.form_label_alias()}</label
|
|
>
|
|
<input
|
|
id="alias"
|
|
name="alias"
|
|
type="text"
|
|
value={person.alias ?? ''}
|
|
class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label
|
|
for="birthYear"
|
|
class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
|
|
>{m.person_label_birth_year()}</label
|
|
>
|
|
<input
|
|
id="birthYear"
|
|
name="birthYear"
|
|
type="number"
|
|
min="1"
|
|
max="2100"
|
|
placeholder={m.person_placeholder_year()}
|
|
value={person.birthYear ?? ''}
|
|
class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label
|
|
for="deathYear"
|
|
class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
|
|
>{m.person_label_death_year()}</label
|
|
>
|
|
<input
|
|
id="deathYear"
|
|
name="deathYear"
|
|
type="number"
|
|
min="1"
|
|
max="2100"
|
|
placeholder={m.person_placeholder_year()}
|
|
value={person.deathYear ?? ''}
|
|
class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
|
|
/>
|
|
</div>
|
|
<div class="md:col-span-2">
|
|
<label
|
|
for="notes"
|
|
class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
|
|
>{m.person_label_notes()}</label
|
|
>
|
|
<textarea
|
|
id="notes"
|
|
name="notes"
|
|
rows="4"
|
|
placeholder={m.person_placeholder_notes()}
|
|
class="block w-full resize-y rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
|
|
>{person.notes ?? ''}</textarea
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-3">
|
|
<button
|
|
type="submit"
|
|
class="rounded bg-primary px-5 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/80"
|
|
>
|
|
{m.btn_save()}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onclick={() => (editMode = false)}
|
|
class="rounded border border-line px-5 py-2 text-sm font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted"
|
|
>
|
|
{m.btn_cancel()}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{:else}
|
|
<!-- View Mode -->
|
|
<div class="flex flex-col items-start gap-8 md:flex-row">
|
|
<div class="flex-shrink-0">
|
|
<div
|
|
class="flex h-24 w-24 items-center justify-center rounded-full border border-line bg-muted text-ink"
|
|
>
|
|
<span class="font-serif text-3xl">{person.firstName[0]}{person.lastName[0]}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full flex-1">
|
|
<div class="mb-8 flex items-start justify-between border-b border-line-2 pb-4">
|
|
<h1 class="font-serif text-4xl text-ink">
|
|
{person.firstName}
|
|
{person.lastName}
|
|
</h1>
|
|
<div class="ml-4 flex flex-shrink-0 items-center gap-2">
|
|
{#if canWrite}
|
|
<button
|
|
onclick={() => (editMode = true)}
|
|
class="inline-flex items-center gap-1.5 rounded border border-line px-3 py-1.5 text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:border-primary hover:text-ink"
|
|
>
|
|
<img
|
|
src="/degruyter-icons/Simple/Small-16px/SVG/Action/Edit-Content-SM.svg"
|
|
alt=""
|
|
aria-hidden="true"
|
|
class="h-3.5 w-3.5"
|
|
/>
|
|
{m.btn_edit()}
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
|
|
<div>
|
|
<span
|
|
class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
|
|
>{m.person_label_full_name()}</span
|
|
>
|
|
<span class="block font-serif text-lg text-ink"
|
|
>{person.firstName} {person.lastName}</span
|
|
>
|
|
</div>
|
|
|
|
{#if person.alias}
|
|
<div>
|
|
<span
|
|
class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
|
|
>{m.form_label_alias()}</span
|
|
>
|
|
<span class="block font-serif text-lg text-ink italic">"{person.alias}"</span>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if person.birthYear || person.deathYear}
|
|
<div>
|
|
<span
|
|
class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
|
|
>
|
|
{#if person.birthYear && person.deathYear}{m.person_label_birth_year()} / {m.person_label_death_year()}{:else if person.birthYear}{m.person_label_birth_year()}{:else}{m.person_label_death_year()}{/if}
|
|
</span>
|
|
<span class="block font-serif text-lg text-ink">
|
|
{#if person.birthYear}* {person.birthYear}{/if}{#if person.birthYear && person.deathYear}
|
|
{/if}{#if person.deathYear}† {person.deathYear}{/if}
|
|
</span>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if person.notes}
|
|
<div class="md:col-span-2">
|
|
<span
|
|
class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
|
|
>{m.person_label_notes()}</span
|
|
>
|
|
<p class="font-serif text-base whitespace-pre-wrap text-ink">
|
|
{person.notes}
|
|
</p>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|