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
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:
@@ -41,10 +41,10 @@ let {
|
|||||||
<tbody>
|
<tbody>
|
||||||
{#each senderModels as model (model.id)}
|
{#each senderModels as model (model.id)}
|
||||||
<tr>
|
<tr>
|
||||||
<td class="border-brand-sand/50 border-b py-3">
|
<td class="border-brand-sand/50 border-b">
|
||||||
<a
|
<a
|
||||||
href="/admin/ocr/{model.personId}"
|
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}
|
{personNames[model.personId] ?? model.personId}
|
||||||
</a>
|
</a>
|
||||||
@@ -58,10 +58,10 @@ let {
|
|||||||
<td class="border-brand-sand/50 border-b py-3">
|
<td class="border-brand-sand/50 border-b py-3">
|
||||||
{model.correctedLinesAtTraining}
|
{model.correctedLinesAtTraining}
|
||||||
</td>
|
</td>
|
||||||
<td class="border-brand-sand/50 border-b py-3">
|
<td class="border-brand-sand/50 border-b">
|
||||||
<a
|
<a
|
||||||
href="/admin/ocr/{model.personId}"
|
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
|
>{m.ocr_table_details()}</a
|
||||||
>
|
>
|
||||||
</td>
|
</td>
|
||||||
|
|||||||
@@ -14,5 +14,5 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
|
|||||||
throw error(result.response.status, getErrorMessage(code));
|
throw error(result.response.status, getErrorMessage(code));
|
||||||
}
|
}
|
||||||
|
|
||||||
return { history: result.data! };
|
return { history: result.data!, personId: params.personId };
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -3,8 +3,8 @@ import type { PageData } from './$types';
|
|||||||
import TrainingHistory from '$lib/components/TrainingHistory.svelte';
|
import TrainingHistory from '$lib/components/TrainingHistory.svelte';
|
||||||
import * as m from '$lib/paraglide/messages.js';
|
import * as m from '$lib/paraglide/messages.js';
|
||||||
|
|
||||||
let { data, params }: { data: PageData; params: { personId: string } } = $props();
|
let { data }: { data: PageData } = $props();
|
||||||
const personName = $derived(data.history.personNames?.[params.personId] ?? 'Unknown');
|
const personName = $derived(data.history.personNames?.[data.personId] ?? 'Unknown');
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex flex-col gap-6 p-6">
|
<div class="flex flex-col gap-6 p-6">
|
||||||
|
|||||||
36
frontend/src/routes/admin/ocr/[personId]/page.svelte.spec.ts
Normal file
36
frontend/src/routes/admin/ocr/[personId]/page.svelte.spec.ts
Normal 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');
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user