125 lines
3.1 KiB
Svelte
125 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import { untrack } from 'svelte';
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
import PersonTypeSelector from '$lib/person/PersonTypeSelector.svelte';
|
|
import {
|
|
PERSON_TYPES as TYPES,
|
|
type PersonType,
|
|
type PersonFormData
|
|
} from '$lib/person/person-validation';
|
|
|
|
let { person }: { person: PersonFormData } = $props();
|
|
|
|
let selectedType = $state<PersonType>(
|
|
untrack(() =>
|
|
TYPES.includes(person.personType as PersonType) ? (person.personType as PersonType) : 'PERSON'
|
|
)
|
|
);
|
|
|
|
const isPerson = $derived(selectedType === 'PERSON');
|
|
const lastNameLabel = $derived(
|
|
selectedType === 'INSTITUTION' || selectedType === 'GROUP'
|
|
? m.form_label_name()
|
|
: m.form_label_last_name()
|
|
);
|
|
|
|
const labelCls = 'mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase';
|
|
const inputCls =
|
|
'block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring';
|
|
</script>
|
|
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<div class="md:col-span-2">
|
|
<p class={labelCls}>
|
|
{m.form_label_person_type()}
|
|
</p>
|
|
<PersonTypeSelector
|
|
value={selectedType}
|
|
name="personType"
|
|
onchange={(type: PersonType) => (selectedType = type)}
|
|
/>
|
|
</div>
|
|
|
|
{#if isPerson}
|
|
<div>
|
|
<label for="title" class={labelCls}>{m.form_label_title()}</label>
|
|
<input
|
|
id="title"
|
|
name="title"
|
|
type="text"
|
|
maxlength="50"
|
|
value={person.title ?? ''}
|
|
class={inputCls}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="firstName" class={labelCls}>{m.form_label_first_name()} *</label>
|
|
<input
|
|
id="firstName"
|
|
name="firstName"
|
|
type="text"
|
|
required
|
|
value={person.firstName ?? ''}
|
|
class={inputCls}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class={!isPerson ? 'md:col-span-2' : ''}>
|
|
<label for="lastName" class={labelCls}>{lastNameLabel} *</label>
|
|
<input
|
|
id="lastName"
|
|
name="lastName"
|
|
type="text"
|
|
required
|
|
value={person.lastName}
|
|
class={inputCls}
|
|
/>
|
|
</div>
|
|
|
|
{#if isPerson}
|
|
<div class="md:col-span-2">
|
|
<label for="alias" class={labelCls}>{m.form_label_alias()}</label>
|
|
<input id="alias" name="alias" type="text" value={person.alias ?? ''} class={inputCls} />
|
|
</div>
|
|
<div>
|
|
<label for="birthYear" class={labelCls}>{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={inputCls}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="deathYear" class={labelCls}>{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={inputCls}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="md:col-span-2">
|
|
<label for="notes" class={labelCls}>{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:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
|
>{person.notes ?? ''}</textarea
|
|
>
|
|
</div>
|
|
</div>
|