marcel/familienarchiv
1
0
Fork 0
Code Issues 115 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

ui(admin/system): improve mass-import card (loading state, i18n, font size) #569

Merged
marcel merged 10 commits from feat/issue-533-mass-import-ux into main 2026-05-14 17:20:20 +02:00
Conversation 23 Commits 10 Files Changed 12 +24 -32
4 changed files with 24 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0f4c844002 - Show all commits

8
frontend/src/routes/admin/system/+page.svelte
View File

@@ -2,19 +2,13 @@
import { onDestroy } from 'svelte';
import { m } from '$lib/paraglide/messages.js';
import ImportStatusCard from './ImportStatusCard.svelte';
import type { ImportStatus } from './types.js';
let backfillResult: number | null = $state(null);
let backfillLoading = $state(false);
let backfillHashesResult: number | null = $state(null);
let backfillHashesLoading = $state(false);
type ImportStatus = {
state: 'IDLE' | 'RUNNING' | 'DONE' | 'FAILED';
statusCode: string;
processed: number;
startedAt: string | null;
};
type ThumbnailStatus = {
state: 'IDLE' | 'RUNNING' | 'DONE' | 'FAILED';
message: string;

22
frontend/src/routes/admin/system/ImportStatusCard.svelte
View File

@@ -1,12 +1,6 @@
<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
type ImportStatus = {
state: 'IDLE' | 'RUNNING' | 'DONE' | 'FAILED';
statusCode: string;
processed: number;
startedAt: string | null;
};
import type { ImportStatus } from './types.js';
let {
importStatus,
@@ -24,7 +18,9 @@ const failureMessage = $derived(
</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>
<h2 class="mb-5 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
{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'}
@@ -36,16 +32,18 @@ const failureMessage = $derived(
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">
<p data-testid="processed-count" class="text-base font-bold text-ink">
{importStatus.processed}
</p>
<p class="font-sans 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">
<p data-testid="processed-count" class="text-base font-bold">{importStatus.processed}</p>
<p class="font-sans 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>

20
frontend/src/routes/admin/system/ImportStatusCard.svelte.test.ts
View File

@@ -2,13 +2,7 @@ import { describe, expect, it, vi } from 'vitest';
import { render } from 'vitest-browser-svelte';
import { m } from '$lib/paraglide/messages.js';
import ImportStatusCard from './ImportStatusCard.svelte';
type ImportStatus = {
state: 'IDLE' | 'RUNNING' | 'DONE' | 'FAILED';
statusCode: string;
processed: number;
startedAt: string | null;
};
import type { ImportStatus } from './types.js';
const makeStatus = (overrides: Partial<ImportStatus> = {}): ImportStatus => ({
state: 'IDLE',
@@ -20,25 +14,25 @@ const makeStatus = (overrides: Partial<ImportStatus> = {}): ImportStatus => ({
describe('ImportStatusCard', () => {
it('shows spinner while state is RUNNING', async () => {
render(ImportStatusCard, {
const { getByTestId } = render(ImportStatusCard, {
props: {
importStatus: makeStatus({ state: 'RUNNING', statusCode: 'IMPORT_RUNNING', processed: 3 }),
ontrigger: () => {}
}
});
expect(document.querySelector('[data-testid="spinner"]')).not.toBeNull();
await expect.element(getByTestId('spinner')).toBeInTheDocument();
});
it('shows processed count at text-base while RUNNING', async () => {
const { getByText } = render(ImportStatusCard, {
const { getByTestId } = render(ImportStatusCard, {
props: {
importStatus: makeStatus({ state: 'RUNNING', statusCode: 'IMPORT_RUNNING', processed: 7 }),
ontrigger: () => {}
}
});
await expect.element(getByText('7')).toBeVisible();
await expect.element(getByTestId('processed-count')).toHaveTextContent('7');
});
it('shows processed count while DONE', async () => {
@@ -89,11 +83,11 @@ describe('ImportStatusCard', () => {
});
it('shows no spinner when importStatus is null', async () => {
render(ImportStatusCard, {
const { getByTestId } = render(ImportStatusCard, {
props: { importStatus: null, ontrigger: () => {} }
});
expect(document.querySelector('[data-testid="spinner"]')).toBeNull();
await expect.element(getByTestId('spinner')).not.toBeInTheDocument();
});
it('calls ontrigger when retry button is clicked in DONE state', async () => {

6
frontend/src/routes/admin/system/types.ts Normal file
View File

@@ -0,0 +1,6 @@
export type ImportStatus = {
state: 'IDLE' | 'RUNNING' | 'DONE' | 'FAILED';
statusCode: string;
processed: number;
startedAt: string | null;
};