feat(frontend): replace all name concatenation with displayName

- Add displayName default method to PersonSummaryDTO
- Update native SQL queries to include title, person_type columns
- Add getInitials() utility to personFormat.ts
- Update abbreviateName/abbreviateCompact for nullable firstName
- Replace firstName+lastName concatenation with displayName in all
  person-displaying components and server load files
- Regenerate API types with displayName on Person and PersonSummaryDTO

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-08 12:22:30 +02:00
parent 0ce803c7f1
commit f11d8a38ed
32 changed files with 117 additions and 77 deletions

View File

@@ -9,11 +9,21 @@ import java.util.UUID;
*/
public interface PersonSummaryDTO {
UUID getId();
String getTitle();
String getFirstName();
String getLastName();
String getPersonType();
String getAlias();
Integer getBirthYear();
Integer getDeathYear();
String getNotes();
long getDocumentCount();
default String getDisplayName() {
StringBuilder sb = new StringBuilder();
if (getTitle() != null) sb.append(getTitle()).append(" ");
if (getFirstName() != null) sb.append(getFirstName()).append(" ");
sb.append(getLastName());
return sb.toString().trim();
}
}

View File

@@ -35,7 +35,8 @@ public interface PersonRepository extends JpaRepository<Person, UUID> {
// --- PersonSummaryDTO with document count ---
@Query(value = """
SELECT p.id, p.first_name AS firstName, p.last_name AS lastName,
SELECT p.id, p.title, p.first_name AS firstName, p.last_name AS lastName,
p.person_type AS personType,
p.alias, p.birth_year AS birthYear, p.death_year AS deathYear, p.notes,
(SELECT COUNT(*) FROM documents d WHERE d.sender_id = p.id)
+ (SELECT COUNT(*) FROM document_receivers dr WHERE dr.person_id = p.id) AS documentCount
@@ -46,7 +47,8 @@ public interface PersonRepository extends JpaRepository<Person, UUID> {
List<PersonSummaryDTO> findAllWithDocumentCount();
@Query(value = """
SELECT p.id, p.first_name AS firstName, p.last_name AS lastName,
SELECT p.id, p.title, p.first_name AS firstName, p.last_name AS lastName,
p.person_type AS personType,
p.alias, p.birth_year AS birthYear, p.death_year AS deathYear, p.notes,
(SELECT COUNT(*) FROM documents d WHERE d.sender_id = p.id)
+ (SELECT COUNT(*) FROM document_receivers dr WHERE dr.person_id = p.id) AS documentCount
@@ -56,7 +58,7 @@ public interface PersonRepository extends JpaRepository<Person, UUID> {
OR LOWER(CONCAT(p.last_name,' ',COALESCE(p.first_name,''))) LIKE LOWER(CONCAT('%',:query,'%'))
OR LOWER(p.alias) LIKE LOWER(CONCAT('%',:query,'%'))
OR LOWER(a.last_name) LIKE LOWER(CONCAT('%',:query,'%'))
GROUP BY p.id, p.first_name, p.last_name, p.alias, p.birth_year, p.death_year, p.notes
GROUP BY p.id, p.title, p.first_name, p.last_name, p.person_type, p.alias, p.birth_year, p.death_year, p.notes
ORDER BY p.last_name ASC, p.first_name ASC
""",
nativeQuery = true)

View File

@@ -73,8 +73,10 @@ class PersonControllerTest {
private PersonSummaryDTO mockPersonSummary(String firstName, String lastName) {
return new PersonSummaryDTO() {
public java.util.UUID getId() { return UUID.randomUUID(); }
public String getTitle() { return null; }
public String getFirstName() { return firstName; }
public String getLastName() { return lastName; }
public String getPersonType() { return "PERSON"; }
public String getAlias() { return null; }
public Integer getBirthYear() { return null; }
public Integer getDeathYear() { return null; }

View File

@@ -7,7 +7,7 @@ type Document = {
id: string;
title: string;
updatedAt?: string;
sender?: { id: string; firstName: string; lastName: string };
sender?: { id: string; firstName?: string | null; lastName: string; displayName: string };
};
type StatsDTO = components['schemas']['StatsDTO'];

View File

@@ -2,9 +2,9 @@
import { m } from '$lib/paraglide/messages.js';
import { formatDate } from '$lib/utils/date';
import { formatDocumentStatus } from '$lib/utils/documentStatusLabel';
import { personAvatarColor } from '$lib/utils/personFormat';
import { getInitials as calcInitials, personAvatarColor } from '$lib/utils/personFormat';
type Person = { id: string; firstName: string; lastName: string };
type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
type Tag = { id: string; name: string };
type Props = {
@@ -33,11 +33,11 @@ let showAllReceivers = $state(false);
const displayedReceivers = $derived(showAllReceivers ? receivers : visibleReceivers);
function getInitials(person: Person): string {
return `${person.firstName.charAt(0)}${person.lastName.charAt(0)}`.toUpperCase();
return calcInitials(person);
}
function getFullName(person: Person): string {
return `${person.firstName} ${person.lastName}`;
return person.displayName;
}
</script>

View File

@@ -7,7 +7,7 @@ import PersonChipRow from './PersonChipRow.svelte';
import OverflowPillButton from './OverflowPillButton.svelte';
import DocumentMetadataDrawer from './DocumentMetadataDrawer.svelte';
type Person = { id: string; firstName: string; lastName: string };
type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
type Tag = { id: string; name: string };
type Doc = {

View File

@@ -3,7 +3,7 @@ import { tick } from 'svelte';
import { m } from '$lib/paraglide/messages.js';
import { clickOutside } from '$lib/actions/clickOutside';
type Person = { id: string; firstName: string; lastName: string };
type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
type Props = {
extraCount: number;
@@ -67,8 +67,7 @@ function handleKeydown(e: KeyboardEvent) {
href="/persons/{person.id}"
class="block py-0.5 text-[18px] text-ink hover:text-primary focus-visible:ring-2 focus-visible:ring-primary"
>
{person.firstName}
{person.lastName}
{person.displayName}
</a>
</div>
{/each}

View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { abbreviateName, personAvatarColor } from '$lib/utils/personFormat';
import { abbreviateName, getInitials, personAvatarColor } from '$lib/utils/personFormat';
type Person = { id: string; firstName: string; lastName: string };
type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
type Props = {
person: Person;
@@ -10,13 +10,9 @@ type Props = {
let { person, abbreviated }: Props = $props();
const displayName = $derived(
abbreviated ? abbreviateName(person) : `${person.firstName} ${person.lastName}`
);
const name = $derived(abbreviated ? abbreviateName(person) : person.displayName);
const avatarColor = $derived(personAvatarColor(person.id));
const initials = $derived(
`${person.firstName.charAt(0)}${person.lastName.charAt(0)}`.toUpperCase()
);
const initials = $derived(getInitials(person));
</script>
<a
@@ -30,5 +26,5 @@ const initials = $derived(
>
{initials}
</span>
<span class="text-[14px] font-semibold text-ink">{displayName}</span>
<span class="text-[14px] font-semibold text-ink">{name}</span>
</a>

View File

@@ -2,7 +2,7 @@
import PersonChip from './PersonChip.svelte';
import OverflowPillDisplay from './OverflowPillDisplay.svelte';
type Person = { id: string; firstName: string; lastName: string };
type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
type Props = {
sender: Person | null | undefined;

View File

@@ -73,8 +73,7 @@ function removePerson(id: string | undefined) {
<span
class="inline-flex items-center gap-1 rounded bg-muted px-2 py-1 text-sm font-medium text-ink"
>
{person.firstName}
{person.lastName}
{person.displayName}
<button
type="button"
onclick={() => removePerson(person.id)}
@@ -121,7 +120,7 @@ function removePerson(id: string | undefined) {
role="button"
tabindex="0"
>
{person.lastName}, {person.firstName}
{person.displayName}
</div>
{/each}
{/if}

View File

@@ -117,7 +117,7 @@ function handleFocus() {
function selectPerson(person: Person) {
value = person.id!;
searchTerm = `${person.firstName} ${person.lastName}`;
searchTerm = person.displayName;
showDropdown = false;
onchange?.(person.id!);
}
@@ -166,7 +166,7 @@ function selectPerson(person: Person) {
>
<div class="flex items-center">
<span class="block truncate font-medium">
{person.lastName}, {person.firstName}
{person.displayName}
</span>
</div>
</div>

View File

@@ -1206,8 +1206,10 @@ export interface components {
totalDocuments?: number;
};
PersonSummaryDTO: {
title?: string;
/** Format: uuid */
id?: string;
displayName?: string;
firstName?: string;
lastName?: string;
/** Format: int32 */
@@ -1216,6 +1218,7 @@ export interface components {
deathYear?: number;
alias?: string;
notes?: string;
personType?: string;
/** Format: int64 */
documentCount?: number;
};
@@ -1231,10 +1234,10 @@ export interface components {
/** Format: int32 */
number?: number;
sort?: components["schemas"]["SortObject"];
first?: boolean;
last?: boolean;
/** Format: int32 */
numberOfElements?: number;
first?: boolean;
last?: boolean;
empty?: boolean;
};
PageableObject: {

View File

@@ -1,6 +1,6 @@
import { formatDocumentStatus } from './documentStatusLabel';
type Person = { firstName: string; lastName: string };
type Person = { firstName?: string | null; lastName: string; displayName: string };
type DocumentStatus = 'PLACEHOLDER' | 'UPLOADED' | 'TRANSCRIBED' | 'REVIEWED' | 'ARCHIVED';
type DocForMeta = {
sender?: Person | null;
@@ -18,7 +18,13 @@ function djb2(str: string): number {
return Math.abs(hash);
}
export function getInitials(person: Person): string {
if (person.firstName) return `${person.firstName[0]}${person.lastName[0]}`.toUpperCase();
return person.lastName.substring(0, 2).toUpperCase();
}
export function abbreviateName(person: Person): string {
if (!person.firstName) return person.lastName;
const first = person.firstName.trim();
const last = person.lastName.trim();
if (!last) return first;
@@ -26,6 +32,7 @@ export function abbreviateName(person: Person): string {
}
function abbreviateCompact(person: Person): string {
if (!person.firstName) return person.lastName;
const first = person.firstName.trim();
const last = person.lastName.trim();
if (!last) return first;

View File

@@ -93,8 +93,8 @@ export async function load({ url, fetch }) {
incompleteDocs,
recentDocs,
initialValues: {
senderName: senderObj ? `${senderObj.firstName} ${senderObj.lastName}` : '',
receiverName: receiverObj ? `${receiverObj.firstName} ${receiverObj.lastName}` : ''
senderName: senderObj?.displayName ?? '',
receiverName: receiverObj?.displayName ?? ''
},
filters: { q, from, to, senderId, receiverId, tags, sort, dir, tagQ },
error: null as string | null

View File

@@ -16,8 +16,8 @@ let {
originalFilename: string;
documentDate?: string | null;
location?: string | null;
sender?: { firstName: string; lastName: string } | null;
receivers?: { firstName: string; lastName: string }[];
sender?: { firstName?: string | null; lastName: string; displayName: string } | null;
receivers?: { firstName?: string | null; lastName: string; displayName: string }[];
tags?: { id: string; name: string }[];
}[];
canWrite: boolean;
@@ -102,7 +102,7 @@ let {
>{m.docs_list_from()}</span
>
{#if doc.sender}
<span class="text-ink">{doc.sender.firstName} {doc.sender.lastName}</span>
<span class="text-ink">{doc.sender.displayName}</span>
{:else}
<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>
{/if}
@@ -114,7 +114,7 @@ let {
>
{#if doc.receivers && doc.receivers.length > 0}
<span class="text-ink">
{doc.receivers.map((p) => p.firstName + ' ' + p.lastName).join(', ')}
{doc.receivers.map((p) => p.displayName).join(', ')}
</span>
{:else}
<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>

View File

@@ -52,8 +52,8 @@ export async function load({ url, fetch, locals }) {
const code = (result.error as unknown as { code?: string })?.code;
throw error(result.response.status, getErrorMessage(code));
}
const p = result.data as { firstName: string; lastName: string } | undefined;
if (p) senderName = `${p.firstName} ${p.lastName}`;
const p = result.data as { displayName: string } | undefined;
if (p) senderName = p.displayName;
})
);
}
@@ -65,8 +65,8 @@ export async function load({ url, fetch, locals }) {
const code = (result.error as unknown as { code?: string })?.code;
throw error(result.response.status, getErrorMessage(code));
}
const p = result.data as { firstName: string; lastName: string } | undefined;
if (p) receiverName = `${p.firstName} ${p.lastName}`;
const p = result.data as { displayName: string } | undefined;
if (p) receiverName = p.displayName;
})
);
}

View File

@@ -10,8 +10,13 @@ interface Props {
documentDate?: string;
location?: string;
status: string;
sender?: { id: string; firstName: string; lastName: string } | null;
receivers?: { id: string; firstName: string; lastName: string }[];
sender?: {
id: string;
firstName?: string | null;
lastName: string;
displayName: string;
} | null;
receivers?: { id: string; firstName?: string | null; lastName: string; displayName: string }[];
}[];
senderId: string;
receiverId?: string;
@@ -67,9 +72,9 @@ function statusDotClass(status: string): string {
function otherPartyName(doc: (typeof documents)[number]): string {
if (doc.sender?.id === senderId) {
const r = doc.receivers?.[0];
return r ? `${r.firstName} ${r.lastName}` : m.conv_no_party();
return r ? r.displayName : m.conv_no_party();
}
return doc.sender ? `${doc.sender.firstName} ${doc.sender.lastName}` : m.conv_no_party();
return doc.sender ? doc.sender.displayName : m.conv_no_party();
}
const newDocUrl = $derived(

View File

@@ -4,8 +4,9 @@ import { clickOutside } from '$lib/actions/clickOutside';
interface Correspondent {
id: string;
firstName: string;
firstName?: string | null;
lastName: string;
displayName: string;
}
interface Props {
@@ -41,7 +42,9 @@ function handleKeydown(event: KeyboardEvent, container: HTMLElement) {
}
function getInitials(person: Correspondent): string {
return `${person.firstName.charAt(0)}${person.lastName.charAt(0)}`.toUpperCase();
if (person.firstName)
return `${person.firstName.charAt(0)}${person.lastName.charAt(0)}`.toUpperCase();
return person.lastName.substring(0, 2).toUpperCase();
}
</script>
@@ -78,7 +81,7 @@ function getInitials(person: Correspondent): string {
{getInitials(person)}
</span>
<!-- Svelte auto-escapes — do not use {@html} here. -->
{person.lastName}, {person.firstName}
{person.displayName}
</div>
{/each}
{/if}

View File

@@ -39,8 +39,8 @@ export async function load({ url, fetch }) {
if (senderId) {
requests.push(
api.GET('/api/persons/{id}', { params: { path: { id: senderId } } }).then(({ data }) => {
const p = data as { firstName: string; lastName: string } | undefined;
if (p) senderName = `${p.firstName} ${p.lastName}`;
const p = data as { displayName: string } | undefined;
if (p) senderName = p.displayName;
})
);
}
@@ -48,8 +48,8 @@ export async function load({ url, fetch }) {
if (receiverId) {
requests.push(
api.GET('/api/persons/{id}', { params: { path: { id: receiverId } } }).then(({ data }) => {
const p = data as { firstName: string; lastName: string } | undefined;
if (p) receiverName = `${p.firstName} ${p.lastName}`;
const p = data as { displayName: string } | undefined;
if (p) receiverName = p.displayName;
})
);
}

View File

@@ -15,7 +15,12 @@ let {
documentDate?: string;
location?: string;
status: string;
sender?: { id: string; firstName: string; lastName: string } | null;
sender?: {
id: string;
firstName?: string | null;
lastName: string;
displayName: string;
} | null;
}[];
senderId: string;
receiverId: string;
@@ -106,7 +111,7 @@ const enrichedDocuments = $derived(
: 'border-line bg-surface text-ink'}"
>
{#if doc.sender}
{doc.sender.firstName[0]}{doc.sender.lastName[0]}
{doc.sender.firstName ? doc.sender.firstName[0] : doc.sender.lastName[0]}{doc.sender.lastName[0]}
{:else}
?
{/if}

View File

@@ -54,7 +54,7 @@ let selectedReceivers = $state(doc.receivers ?? []);
bind:selectedReceivers={selectedReceivers}
initialDateIso={doc.documentDate ?? ''}
initialLocation={doc.location ?? ''}
initialSenderName={doc.sender ? `${doc.sender.firstName} ${doc.sender.lastName}` : ''}
initialSenderName={doc.sender ? doc.sender.displayName : ''}
/>
<DescriptionSection
bind:tags={tags}

View File

@@ -24,14 +24,19 @@ export async function load({
const api = createApiClient(fetch);
let initialSenderName = '';
let initialReceivers: { id: string; firstName: string; lastName: string }[] = [];
let initialReceivers: {
id: string;
firstName?: string;
lastName: string;
displayName: string;
}[] = [];
const requests: Promise<void>[] = [];
if (senderId) {
requests.push(
api.GET('/api/persons/{id}', { params: { path: { id: senderId } } }).then(({ data }) => {
if (data) initialSenderName = `${data.firstName} ${data.lastName}`;
if (data) initialSenderName = data.displayName;
})
);
}
@@ -40,7 +45,14 @@ export async function load({
requests.push(
api.GET('/api/persons/{id}', { params: { path: { id: receiverId } } }).then(({ data }) => {
if (data)
initialReceivers = [{ id: data.id!, firstName: data.firstName, lastName: data.lastName }];
initialReceivers = [
{
id: data.id!,
firstName: data.firstName,
lastName: data.lastName,
displayName: data.displayName
}
];
})
);
}

View File

@@ -12,9 +12,8 @@ let { data, form } = $props();
let tags: string[] = $state([]);
let senderId = $state(untrack(() => data.initialSenderId));
let selectedReceivers: { id: string; firstName: string; lastName: string }[] = $state(
untrack(() => data.initialReceivers)
);
let selectedReceivers: { id: string; firstName?: string; lastName: string; displayName: string }[] =
$state(untrack(() => data.initialReceivers));
let parsedSuggestion = $state<FilenameParseResult>({});

View File

@@ -120,7 +120,7 @@ let selectedReceivers = $state(untrack(() => doc.receivers ?? []));
initialDateIso={doc.documentDate ?? ''}
initialLocation={doc.location ?? ''}
initialSenderName={doc.sender
? `${doc.sender.firstName} ${doc.sender.lastName}`
? doc.sender.displayName
: ''}
/>
<DescriptionSection bind:tags={tags} initialTitle={doc.title ?? ''} titleRequired={true} />

View File

@@ -99,13 +99,12 @@ function handleSearch() {
<div
class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-primary font-serif text-base font-bold text-primary-fg transition-colors"
>
{person.firstName?.[0]}{person.lastName?.[0]}
{person.firstName ? person.firstName[0] : person.lastName[0]}{person.lastName[0]}
</div>
<!-- Name -->
<p class="font-serif text-sm font-bold text-ink group-hover:underline">
{person.firstName}
{person.lastName}
{person.displayName}
</p>
<!-- Alias -->

View File

@@ -23,7 +23,7 @@ const coCorrespondents = $derived.by(() => {
else
freq.set(key, {
id: receiver.id,
name: `${receiver.firstName} ${receiver.lastName}`,
name: receiver.displayName,
count: 1
});
}
@@ -37,7 +37,7 @@ const coCorrespondents = $derived.by(() => {
else
freq.set(key, {
id: doc.sender.id,
name: `${doc.sender.firstName} ${doc.sender.lastName}`,
name: doc.sender.displayName,
count: 1
});
}

View File

@@ -9,7 +9,7 @@ interface Props {
type: string;
sortOrder: number;
}>;
personFirstName: string;
personFirstName?: string | null;
}
let { aliases, personFirstName }: Props = $props();

View File

@@ -8,8 +8,9 @@ let {
}: {
person: {
id: string;
firstName: string;
firstName?: string | null;
lastName: string;
displayName: string;
alias?: string | null;
birthYear?: number | null;
deathYear?: number | null;
@@ -29,14 +30,13 @@ let {
<div
class="flex h-16 w-16 items-center justify-center rounded-full bg-primary font-serif text-xl font-bold text-primary-fg"
>
{person.firstName[0]}{person.lastName[0]}
{person.firstName ? person.firstName[0] : person.lastName[0]}{person.lastName[0]}
</div>
</div>
<!-- Name — centered, serif -->
<h1 class="mb-1 text-center font-serif text-xl font-bold text-ink">
{person.firstName}
{person.lastName}
{person.displayName}
</h1>
<!-- Alias — centered, italic -->

View File

@@ -7,7 +7,7 @@ let {
person,
form
}: {
person: { firstName: string; lastName: string };
person: { displayName: string };
form?: { mergeError?: string } | null;
} = $props();
@@ -74,7 +74,7 @@ let showMergeConfirm = $state(false);
{#if showMergeConfirm}
<p class="mt-3 rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
{m.person_merge_warning()} <strong>{person.firstName} {person.lastName}</strong>
{m.person_merge_warning()} <strong>{person.displayName}</strong>
{m.person_merge_will_be_deleted()}
</p>
{/if}

View File

@@ -30,8 +30,7 @@ const person = $derived(data.person);
d="M10 19l-7-7m0 0l7-7m-7 7h18"
/>
</svg>
{person.firstName}
{person.lastName}
{person.displayName}
</a>
<h1 class="font-serif text-3xl text-ink">{m.person_edit_heading()}</h1>
</div>

View File

@@ -6,7 +6,7 @@ let {
person,
form
}: {
person: { id: string; firstName: string; lastName: string };
person: { id: string; firstName?: string | null; lastName: string; displayName: string };
form?: { mergeError?: string } | null;
} = $props();

View File

@@ -5,7 +5,7 @@ let {
person
}: {
person: {
firstName: string;
firstName?: string | null;
lastName: string;
alias?: string | null;
birthYear?: number | null;