fix(admin): pass personId through load fn instead of params prop; widen touch targets in table rows
Some checks failed
CI / Unit & Component Tests (push) Failing after 2m33s
CI / OCR Service Tests (push) Successful in 35s
CI / Backend Unit Tests (push) Failing after 2m43s
CI / Unit & Component Tests (pull_request) Failing after 2m35s
CI / OCR Service Tests (pull_request) Successful in 41s
CI / Backend Unit Tests (pull_request) Failing after 2m44s

SvelteKit page components receive only data/form as props; accessing params
directly caused a TypeError and personName always fell back to 'Unknown'.
Also moves py-3 padding from <td> to <a> in OcrModelsTable to give
keyboard/touch users a full-height 44px target (WCAG 2.5.5).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-18 09:46:47 +02:00
parent 2466553216
commit fc892f0f59
4 changed files with 43 additions and 7 deletions

View File

@@ -41,10 +41,10 @@ let {
<tbody>
{#each senderModels as model (model.id)}
<tr>
<td class="border-brand-sand/50 border-b py-3">
<td class="border-brand-sand/50 border-b">
<a
href="/admin/ocr/{model.personId}"
class="text-brand-navy hover:underline focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
class="inline-block py-3 text-brand-navy hover:underline focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
>
{personNames[model.personId] ?? model.personId}
</a>
@@ -58,10 +58,10 @@ let {
<td class="border-brand-sand/50 border-b py-3">
{model.correctedLinesAtTraining}
</td>
<td class="border-brand-sand/50 border-b py-3">
<td class="border-brand-sand/50 border-b">
<a
href="/admin/ocr/{model.personId}"
class="font-medium text-brand-navy hover:underline focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
class="inline-block py-3 font-medium text-brand-navy hover:underline focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
>{m.ocr_table_details()}</a
>
</td>

View File

@@ -14,5 +14,5 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
throw error(result.response.status, getErrorMessage(code));
}
return { history: result.data! };
return { history: result.data!, personId: params.personId };
};

View File

@@ -3,8 +3,8 @@ import type { PageData } from './$types';
import TrainingHistory from '$lib/components/TrainingHistory.svelte';
import * as m from '$lib/paraglide/messages.js';
let { data, params }: { data: PageData; params: { personId: string } } = $props();
const personName = $derived(data.history.personNames?.[params.personId] ?? 'Unknown');
let { data }: { data: PageData } = $props();
const personName = $derived(data.history.personNames?.[data.personId] ?? 'Unknown');
</script>
<div class="flex flex-col gap-6 p-6">

View File

@@ -0,0 +1,36 @@
import { afterEach, describe, it, expect } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import Page from './+page.svelte';
afterEach(cleanup);
describe('[personId] page', () => {
it('shows person name from personNames map', async () => {
const personId = '123e4567-e89b-12d3-a456-426614174000';
render(Page, {
data: {
personId,
history: {
runs: [],
personNames: { [personId]: 'Anna Müller' }
}
}
});
await expect.element(page.getByRole('heading', { level: 1 })).toHaveTextContent('Anna Müller');
});
it('falls back to Unknown when person name is missing', async () => {
const personId = '123e4567-e89b-12d3-a456-426614174000';
render(Page, {
data: {
personId,
history: {
runs: [],
personNames: {}
}
}
});
await expect.element(page.getByRole('heading', { level: 1 })).toHaveTextContent('Unknown');
});
});