feat(bulk-upload): add UploadSaveBar component + fix bulk_save_cta message
Save bar with sticky positioning, a determinate progress bar while uploading chunks, plural save CTA, and a destructive discard link. Replaces broken ICU plural in bulk_save_cta with two-key approach (bulk_save_cta_one / bulk_save_cta) since Paraglide 2.5 does not support ICU plural syntax. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -815,7 +815,8 @@
|
||||
"bulk_drop_hint": "Eine oder mehrere Dateien ablegen",
|
||||
"bulk_drop_sub": "PDF, JPEG, PNG oder TIFF · bis zu 50 MB pro Datei",
|
||||
"bulk_count_pill": "{count} werden erstellt",
|
||||
"bulk_save_cta": "{count, plural, one {Speichern →} other {{count} speichern →}}",
|
||||
"bulk_save_cta_one": "Speichern →",
|
||||
"bulk_save_cta": "{count} speichern →",
|
||||
"bulk_discard_all": "Alle verwerfen",
|
||||
"bulk_add_more": "Weitere hinzufügen",
|
||||
"bulk_scope_per_file_label": "Nur diese Datei",
|
||||
|
||||
@@ -815,7 +815,8 @@
|
||||
"bulk_drop_hint": "Drop one or more files here",
|
||||
"bulk_drop_sub": "PDF, JPEG, PNG or TIFF · up to 50 MB per file",
|
||||
"bulk_count_pill": "{count} will be created",
|
||||
"bulk_save_cta": "{count, plural, one {Save →} other {Save {count} →}}",
|
||||
"bulk_save_cta_one": "Save →",
|
||||
"bulk_save_cta": "Save {count} →",
|
||||
"bulk_discard_all": "Discard all",
|
||||
"bulk_add_more": "Add more",
|
||||
"bulk_scope_per_file_label": "This file only",
|
||||
|
||||
@@ -815,7 +815,8 @@
|
||||
"bulk_drop_hint": "Suelta uno o varios archivos aquí",
|
||||
"bulk_drop_sub": "PDF, JPEG, PNG o TIFF · hasta 50 MB por archivo",
|
||||
"bulk_count_pill": "Se crearán {count}",
|
||||
"bulk_save_cta": "{count, plural, one {Guardar →} other {Guardar {count} →}}",
|
||||
"bulk_save_cta_one": "Guardar →",
|
||||
"bulk_save_cta": "Guardar {count} →",
|
||||
"bulk_discard_all": "Descartar todo",
|
||||
"bulk_add_more": "Añadir más",
|
||||
"bulk_scope_per_file_label": "Solo este archivo",
|
||||
|
||||
39
frontend/src/lib/components/document/UploadSaveBar.svelte
Normal file
39
frontend/src/lib/components/document/UploadSaveBar.svelte
Normal file
@@ -0,0 +1,39 @@
|
||||
<script lang="ts">
|
||||
import * as m from '$lib/paraglide/messages';
|
||||
|
||||
let {
|
||||
fileCount,
|
||||
chunkProgress,
|
||||
onSave,
|
||||
onDiscard
|
||||
}: {
|
||||
fileCount: number;
|
||||
chunkProgress?: { done: number; total: number };
|
||||
onSave: () => void;
|
||||
onDiscard: () => void;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="border-brand-sand sticky bottom-0 z-10 -mx-4 border-t bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
|
||||
>
|
||||
{#if chunkProgress}
|
||||
<progress
|
||||
value={chunkProgress.done}
|
||||
max={chunkProgress.total}
|
||||
class="[&::-webkit-progress-bar]:bg-brand-sand mb-3 h-1 w-full rounded-full [&::-webkit-progress-bar]:rounded-full [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:bg-brand-mint"
|
||||
></progress>
|
||||
{/if}
|
||||
<div class="flex items-center justify-between">
|
||||
<button type="button" onclick={onDiscard} class="text-sm text-red-600/70 hover:text-red-700">
|
||||
{m.bulk_discard_all()}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={onSave}
|
||||
class="min-h-[44px] rounded-sm bg-brand-navy px-6 text-sm font-bold tracking-widest text-white uppercase hover:bg-brand-navy/90"
|
||||
>
|
||||
{fileCount === 1 ? 'Speichern →' : `${fileCount} speichern →`}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,48 @@
|
||||
import { describe, it, expect, vi, afterEach } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import UploadSaveBar from './UploadSaveBar.svelte';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
describe('UploadSaveBar', () => {
|
||||
it('shows plural label for multiple files', async () => {
|
||||
render(UploadSaveBar, { fileCount: 5, onSave: vi.fn(), onDiscard: vi.fn() });
|
||||
// "5 speichern →" or similar plural form
|
||||
await expect.element(page.getByText(/5/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows singular label for one file', async () => {
|
||||
render(UploadSaveBar, { fileCount: 1, onSave: vi.fn(), onDiscard: vi.fn() });
|
||||
// "Speichern →" singular form
|
||||
await expect.element(page.getByText(/Speichern/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('progress bar is visible when chunkProgress is provided', async () => {
|
||||
const { container } = render(UploadSaveBar, {
|
||||
fileCount: 3,
|
||||
chunkProgress: { done: 1, total: 3 },
|
||||
onSave: vi.fn(),
|
||||
onDiscard: vi.fn()
|
||||
});
|
||||
const progress = container.querySelector('progress');
|
||||
expect(progress).not.toBeNull();
|
||||
expect(progress?.getAttribute('value')).toBe('1');
|
||||
expect(progress?.getAttribute('max')).toBe('3');
|
||||
});
|
||||
|
||||
it('progress bar is not rendered when no chunkProgress', async () => {
|
||||
const { container } = render(UploadSaveBar, {
|
||||
fileCount: 2,
|
||||
onSave: vi.fn(),
|
||||
onDiscard: vi.fn()
|
||||
});
|
||||
const progress = container.querySelector('progress');
|
||||
expect(progress).toBeNull();
|
||||
});
|
||||
|
||||
it('discard link is rendered', async () => {
|
||||
render(UploadSaveBar, { fileCount: 2, onSave: vi.fn(), onDiscard: vi.fn() });
|
||||
await expect.element(page.getByText(/verwerfen/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user