b7744667f2
- Remove dead `message` field from both frontend ImportStatus types (field is now @JsonIgnore'd on the backend) - Extract failure message ternary into `$derived` — business logic off the template (Felix) - Add motion-reduce:animate-none to spinner — WCAG 2.1 SC 2.3.3 (Leonie) - Replace text-green-600 with text-green-800 — WCAG AA contrast 6.1:1 on bg-green-50 (Leonie) - Add min-h-[44px] to all three buttons — WCAG 2.2 44px touch target (Leonie) - Add 6 missing tests: IMPORT_FAILED_INTERNAL path, IDLE state text, null importStatus, ontrigger called on DONE/FAILED/IDLE buttons (Sara) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
84 lines
2.8 KiB
Svelte
84 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
|
|
type ImportStatus = {
|
|
state: 'IDLE' | 'RUNNING' | 'DONE' | 'FAILED';
|
|
statusCode: string;
|
|
processed: number;
|
|
startedAt: string | null;
|
|
};
|
|
|
|
let {
|
|
importStatus,
|
|
ontrigger
|
|
}: {
|
|
importStatus: ImportStatus | null;
|
|
ontrigger: () => void;
|
|
} = $props();
|
|
|
|
const failureMessage = $derived(
|
|
importStatus?.statusCode === 'IMPORT_FAILED_NO_SPREADSHEET'
|
|
? m.admin_system_import_failed_no_spreadsheet()
|
|
: m.admin_system_import_failed_internal()
|
|
);
|
|
</script>
|
|
|
|
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
|
|
<h2 class="mb-1 font-sans text-sm font-bold text-ink">{m.admin_system_import_heading()}</h2>
|
|
<p class="mb-4 text-sm text-ink-2">{m.admin_system_import_description()}</p>
|
|
|
|
{#if importStatus?.state === 'RUNNING'}
|
|
<div class="mb-4 flex items-center gap-3">
|
|
<span
|
|
data-testid="spinner"
|
|
role="status"
|
|
aria-label={m.admin_system_import_status_running()}
|
|
class="inline-block h-5 w-5 animate-spin rounded-full border-2 border-ink-3 border-t-brand-mint motion-reduce:animate-none"
|
|
></span>
|
|
<div>
|
|
<p class="text-base font-bold text-ink">{importStatus.processed}</p>
|
|
<p class="text-xs font-bold tracking-widest text-ink-3 uppercase">
|
|
{m.admin_system_import_status_running()}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{:else if importStatus?.state === 'DONE'}
|
|
<div class="mb-4 rounded-sm border border-green-200 bg-green-50 p-4 text-green-700">
|
|
<p class="text-base font-bold">{importStatus.processed}</p>
|
|
<p class="text-xs font-bold tracking-widest text-green-800 uppercase">
|
|
{m.admin_system_import_status_done_label()}
|
|
</p>
|
|
<p class="mt-1 text-xs text-green-800">{m.admin_system_import_status_done()}</p>
|
|
</div>
|
|
<button
|
|
data-import-trigger
|
|
onclick={ontrigger}
|
|
class="min-h-[44px] rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
|
|
>
|
|
{m.admin_system_import_btn_retry()}
|
|
</button>
|
|
{:else if importStatus?.state === 'FAILED'}
|
|
<p class="mb-4 rounded-sm border border-red-200 bg-red-50 p-3 text-sm text-red-700">
|
|
{failureMessage}
|
|
</p>
|
|
<button
|
|
data-import-trigger
|
|
onclick={ontrigger}
|
|
class="min-h-[44px] rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
|
|
>
|
|
{m.admin_system_import_btn_retry()}
|
|
</button>
|
|
{:else}
|
|
{#if importStatus !== null}
|
|
<p class="mb-4 text-sm text-ink-2">{m.admin_system_import_status_idle()}</p>
|
|
{/if}
|
|
<button
|
|
data-import-trigger
|
|
onclick={ontrigger}
|
|
class="min-h-[44px] rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
|
|
>
|
|
{m.admin_system_import_btn_start()}
|
|
</button>
|
|
{/if}
|
|
</div>
|