fix(bulk-edit): pluralization, edit-mode CTA, error UI, real loading state
Elicit C1+C3 — bulk-selection count uses ICU-style plural keys
(bulk_edit_n_selected_one / _other) so n=1 reads as "1 Dokument" instead
of "1 Dokumente". Save CTA in edit mode reads "Anwenden" via the existing
bulk_edit_save_button key; UploadSaveBar grew an editMode prop. Multi-
chunk progress text is now visible (not aria-only).
Felix C2 — bulk-edit page wires the backend error code through
parseBackendError + getErrorMessage instead of falling back to a generic
internal_error.
Felix C5 — editAllMatching no longer swallows fetch failures: the button
shows an inline error with the backend-mapped message (e.g. when the
filter cap is exceeded).
Leonie C8 — replace the literal "…" loading glyph on /documents/bulk-edit
with a spinner + role=status + aria-live=polite + visible "Loading
documents…" text.
Leonie C9 — partial-failure card and bulk-edit page error card now use
the design-system `text-danger` / `bg-danger/10` / `border-danger/40`
tokens (dark-mode safe) instead of raw red palette values.
Leonie C10 + C13 — German plural fixed; EN badges retensed
("+ added" → "+ will be added", "replaced" → "will replace") to match
the future-tense intent of DE/ES.
Refs #225, PR #331
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -875,7 +875,8 @@
|
|||||||
"bulk_title_single": "Neues Dokument",
|
"bulk_title_single": "Neues Dokument",
|
||||||
"bulk_title_multi": "Neue Dokumente",
|
"bulk_title_multi": "Neue Dokumente",
|
||||||
"bulk_edit_button": "Massenbearbeitung",
|
"bulk_edit_button": "Massenbearbeitung",
|
||||||
"bulk_edit_n_selected": "{count} Dokumente ausgewählt",
|
"bulk_edit_n_selected_one": "1 Dokument ausgewählt",
|
||||||
|
"bulk_edit_n_selected_other": "{count} Dokumente ausgewählt",
|
||||||
"bulk_edit_clear_all": "Alles aufheben",
|
"bulk_edit_clear_all": "Alles aufheben",
|
||||||
"bulk_edit_all_x": "Alle {count} editieren",
|
"bulk_edit_all_x": "Alle {count} editieren",
|
||||||
"bulk_edit_select_document": "Dokument {title} auswählen",
|
"bulk_edit_select_document": "Dokument {title} auswählen",
|
||||||
@@ -893,5 +894,7 @@
|
|||||||
"form_label_archive_folder": "Mappe",
|
"form_label_archive_folder": "Mappe",
|
||||||
"form_helper_archive_folder": "Welche Mappe innerhalb des Kartons?",
|
"form_helper_archive_folder": "Welche Mappe innerhalb des Kartons?",
|
||||||
"bulk_edit_clear_selection": "Auswahl aufheben",
|
"bulk_edit_clear_selection": "Auswahl aufheben",
|
||||||
"bulk_edit_clear_hint_keyboard": "Esc: Auswahl aufheben"
|
"bulk_edit_clear_hint_keyboard": "Esc: Auswahl aufheben",
|
||||||
|
"bulk_edit_loading": "Dokumente werden geladen…",
|
||||||
|
"bulk_edit_all_x_failed": "Filter konnte nicht abgerufen werden — bitte erneut versuchen."
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -875,13 +875,14 @@
|
|||||||
"bulk_title_single": "New Document",
|
"bulk_title_single": "New Document",
|
||||||
"bulk_title_multi": "New Documents",
|
"bulk_title_multi": "New Documents",
|
||||||
"bulk_edit_button": "Bulk edit",
|
"bulk_edit_button": "Bulk edit",
|
||||||
"bulk_edit_n_selected": "{count} documents selected",
|
"bulk_edit_n_selected_one": "1 document selected",
|
||||||
|
"bulk_edit_n_selected_other": "{count} documents selected",
|
||||||
"bulk_edit_clear_all": "Clear all",
|
"bulk_edit_clear_all": "Clear all",
|
||||||
"bulk_edit_all_x": "Edit all {count}",
|
"bulk_edit_all_x": "Edit all {count}",
|
||||||
"bulk_edit_select_document": "Select document {title}",
|
"bulk_edit_select_document": "Select document {title}",
|
||||||
"bulk_edit_hint": "Only filled fields are applied. Tags and receivers are added, not replaced.",
|
"bulk_edit_hint": "Only filled fields are applied. Tags and receivers are added, not replaced.",
|
||||||
"bulk_edit_badge_additive": "+ added",
|
"bulk_edit_badge_additive": "+ will be added",
|
||||||
"bulk_edit_badge_replace": "replaced",
|
"bulk_edit_badge_replace": "will replace",
|
||||||
"bulk_edit_save_progress": "Batch {done} of {total} processed",
|
"bulk_edit_save_progress": "Batch {done} of {total} processed",
|
||||||
"bulk_edit_save_partial": "{done} of {total} saved",
|
"bulk_edit_save_partial": "{done} of {total} saved",
|
||||||
"bulk_edit_retry": "Retry",
|
"bulk_edit_retry": "Retry",
|
||||||
@@ -893,5 +894,7 @@
|
|||||||
"form_label_archive_folder": "Folder",
|
"form_label_archive_folder": "Folder",
|
||||||
"form_helper_archive_folder": "Which folder inside the box?",
|
"form_helper_archive_folder": "Which folder inside the box?",
|
||||||
"bulk_edit_clear_selection": "Clear selection",
|
"bulk_edit_clear_selection": "Clear selection",
|
||||||
"bulk_edit_clear_hint_keyboard": "Esc: clear selection"
|
"bulk_edit_clear_hint_keyboard": "Esc: clear selection",
|
||||||
|
"bulk_edit_loading": "Loading documents…",
|
||||||
|
"bulk_edit_all_x_failed": "Could not load filter results — please retry."
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -875,7 +875,8 @@
|
|||||||
"bulk_title_single": "Nuevo Documento",
|
"bulk_title_single": "Nuevo Documento",
|
||||||
"bulk_title_multi": "Nuevos Documentos",
|
"bulk_title_multi": "Nuevos Documentos",
|
||||||
"bulk_edit_button": "Edición masiva",
|
"bulk_edit_button": "Edición masiva",
|
||||||
"bulk_edit_n_selected": "{count} documentos seleccionados",
|
"bulk_edit_n_selected_one": "1 documento seleccionado",
|
||||||
|
"bulk_edit_n_selected_other": "{count} documentos seleccionados",
|
||||||
"bulk_edit_clear_all": "Limpiar todo",
|
"bulk_edit_clear_all": "Limpiar todo",
|
||||||
"bulk_edit_all_x": "Editar los {count}",
|
"bulk_edit_all_x": "Editar los {count}",
|
||||||
"bulk_edit_select_document": "Seleccionar documento {title}",
|
"bulk_edit_select_document": "Seleccionar documento {title}",
|
||||||
@@ -893,5 +894,7 @@
|
|||||||
"form_label_archive_folder": "Carpeta",
|
"form_label_archive_folder": "Carpeta",
|
||||||
"form_helper_archive_folder": "¿Qué carpeta dentro de la caja?",
|
"form_helper_archive_folder": "¿Qué carpeta dentro de la caja?",
|
||||||
"bulk_edit_clear_selection": "Limpiar selección",
|
"bulk_edit_clear_selection": "Limpiar selección",
|
||||||
"bulk_edit_clear_hint_keyboard": "Esc: limpiar selección"
|
"bulk_edit_clear_hint_keyboard": "Esc: limpiar selección",
|
||||||
|
"bulk_edit_loading": "Cargando documentos…",
|
||||||
|
"bulk_edit_all_x_failed": "No se pudieron cargar los resultados del filtro; vuelve a intentarlo."
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -495,7 +495,7 @@ async function retrySave() {
|
|||||||
<div
|
<div
|
||||||
role="alert"
|
role="alert"
|
||||||
data-testid="bulk-edit-partial-failure"
|
data-testid="bulk-edit-partial-failure"
|
||||||
class="rounded-sm border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700"
|
class="rounded-sm border border-danger/40 bg-danger/10 px-4 py-3 text-sm text-danger"
|
||||||
>
|
>
|
||||||
<p class="font-medium">
|
<p class="font-medium">
|
||||||
{m.bulk_edit_save_partial({
|
{m.bulk_edit_save_partial({
|
||||||
@@ -521,6 +521,7 @@ async function retrySave() {
|
|||||||
onSave={save}
|
onSave={save}
|
||||||
onDiscard={handleDiscard}
|
onDiscard={handleDiscard}
|
||||||
disabled={saving}
|
disabled={saving}
|
||||||
|
editMode={mode === 'edit'}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -40,7 +40,7 @@ function onEscape(e: KeyboardEvent) {
|
|||||||
aria-live="polite"
|
aria-live="polite"
|
||||||
aria-atomic="true"
|
aria-atomic="true"
|
||||||
>
|
>
|
||||||
{m.bulk_edit_n_selected({ count })}
|
{count === 1 ? m.bulk_edit_n_selected_one() : m.bulk_edit_n_selected_other({ count })}
|
||||||
</span>
|
</span>
|
||||||
<span class="hidden font-sans text-xs text-ink-3 sm:inline">
|
<span class="hidden font-sans text-xs text-ink-3 sm:inline">
|
||||||
{m.bulk_edit_clear_hint_keyboard()}
|
{m.bulk_edit_clear_hint_keyboard()}
|
||||||
|
|||||||
@@ -6,14 +6,21 @@ let {
|
|||||||
chunkProgress,
|
chunkProgress,
|
||||||
onSave,
|
onSave,
|
||||||
onDiscard,
|
onDiscard,
|
||||||
disabled = false
|
disabled = false,
|
||||||
|
editMode = false
|
||||||
}: {
|
}: {
|
||||||
fileCount: number;
|
fileCount: number;
|
||||||
chunkProgress?: { done: number; total: number };
|
chunkProgress?: { done: number; total: number };
|
||||||
onSave: () => void;
|
onSave: () => void;
|
||||||
onDiscard: () => void | Promise<void>;
|
onDiscard: () => void | Promise<void>;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
|
editMode?: boolean;
|
||||||
} = $props();
|
} = $props();
|
||||||
|
|
||||||
|
const saveCta = $derived.by(() => {
|
||||||
|
if (editMode) return m.bulk_edit_save_button();
|
||||||
|
return fileCount === 1 ? m.bulk_save_cta_one() : m.bulk_save_cta({ count: fileCount });
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="shrink-0 border-t border-line bg-surface px-4 py-3">
|
<div class="shrink-0 border-t border-line bg-surface px-4 py-3">
|
||||||
@@ -24,9 +31,22 @@ let {
|
|||||||
aria-valuenow={chunkProgress.done}
|
aria-valuenow={chunkProgress.done}
|
||||||
aria-valuemin={0}
|
aria-valuemin={0}
|
||||||
aria-valuemax={chunkProgress.total}
|
aria-valuemax={chunkProgress.total}
|
||||||
aria-label={m.bulk_upload_progress({ done: chunkProgress.done, total: chunkProgress.total })}
|
aria-label={editMode
|
||||||
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-accent"
|
? m.bulk_edit_save_progress({ done: chunkProgress.done, total: chunkProgress.total })
|
||||||
|
: m.bulk_upload_progress({ done: chunkProgress.done, total: chunkProgress.total })}
|
||||||
|
class="[&::-webkit-progress-bar]:bg-brand-sand mb-2 h-1 w-full rounded-full [&::-webkit-progress-bar]:rounded-full [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:bg-accent"
|
||||||
></progress>
|
></progress>
|
||||||
|
{#if editMode && chunkProgress.total > 1}
|
||||||
|
<!-- Visible progress text for sighted users on multi-chunk PATCH
|
||||||
|
(Elicit S3 — the unitless bar isn't enough for a 30-second op). -->
|
||||||
|
<p
|
||||||
|
class="mb-2 font-sans text-xs text-ink-2"
|
||||||
|
aria-live="polite"
|
||||||
|
data-testid="bulk-edit-chunk-progress-text"
|
||||||
|
>
|
||||||
|
{m.bulk_edit_save_progress({ done: chunkProgress.done, total: chunkProgress.total })}
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
<div class="flex items-center justify-between gap-3">
|
<div class="flex items-center justify-between gap-3">
|
||||||
<button
|
<button
|
||||||
@@ -43,7 +63,7 @@ let {
|
|||||||
onclick={onSave}
|
onclick={onSave}
|
||||||
class="min-h-[44px] rounded-sm bg-primary px-6 text-sm font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-90 disabled:opacity-40"
|
class="min-h-[44px] rounded-sm bg-primary px-6 text-sm font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-90 disabled:opacity-40"
|
||||||
>
|
>
|
||||||
{fileCount === 1 ? m.bulk_save_cta_one() : m.bulk_save_cta({ count: fileCount })}
|
{saveCta}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ import DocumentList from '../DocumentList.svelte';
|
|||||||
import Pagination from '$lib/components/Pagination.svelte';
|
import Pagination from '$lib/components/Pagination.svelte';
|
||||||
import BulkSelectionBar from '$lib/components/document/BulkSelectionBar.svelte';
|
import BulkSelectionBar from '$lib/components/document/BulkSelectionBar.svelte';
|
||||||
import { bulkSelectionStore } from '$lib/stores/bulkSelection.svelte';
|
import { bulkSelectionStore } from '$lib/stores/bulkSelection.svelte';
|
||||||
|
import { getErrorMessage, parseBackendError } from '$lib/errors';
|
||||||
import * as m from '$lib/paraglide/messages.js';
|
import * as m from '$lib/paraglide/messages.js';
|
||||||
|
|
||||||
let { data } = $props();
|
let { data } = $props();
|
||||||
@@ -141,16 +142,18 @@ $effect(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
let editingAll = $state(false);
|
let editingAll = $state(false);
|
||||||
|
let editAllError = $state<string | null>(null);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Fast path: replace the current selection with every document matching the
|
* Fast path: replace the current selection with every document matching the
|
||||||
* active filter (across all pages) and jump to the bulk-edit screen. The
|
* active filter (across all pages) and jump to the bulk-edit screen. The
|
||||||
* /api/documents/ids endpoint is uncapped — chunking happens at PATCH time
|
* /api/documents/ids endpoint is hard-capped (5000 results); on cap overflow
|
||||||
* inside the bulk-edit page's save handler.
|
* the backend returns BULK_EDIT_TOO_MANY_IDS, which we surface inline.
|
||||||
*/
|
*/
|
||||||
async function editAllMatching() {
|
async function editAllMatching() {
|
||||||
if (editingAll) return;
|
if (editingAll) return;
|
||||||
editingAll = true;
|
editingAll = true;
|
||||||
|
editAllError = null;
|
||||||
try {
|
try {
|
||||||
const params = buildSearchParams({
|
const params = buildSearchParams({
|
||||||
q: data.q || '',
|
q: data.q || '',
|
||||||
@@ -168,12 +171,15 @@ async function editAllMatching() {
|
|||||||
params.delete('dir');
|
params.delete('dir');
|
||||||
const res = await fetch(`/api/documents/ids?${params.toString()}`);
|
const res = await fetch(`/api/documents/ids?${params.toString()}`);
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
editingAll = false;
|
const backend = await parseBackendError(res);
|
||||||
|
editAllError = getErrorMessage(backend?.code);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const ids: string[] = await res.json();
|
const ids: string[] = await res.json();
|
||||||
bulkSelectionStore.setAll(ids);
|
bulkSelectionStore.setAll(ids);
|
||||||
await goto('/documents/bulk-edit');
|
await goto('/documents/bulk-edit');
|
||||||
|
} catch {
|
||||||
|
editAllError = m.bulk_edit_all_x_failed();
|
||||||
} finally {
|
} finally {
|
||||||
editingAll = false;
|
editingAll = false;
|
||||||
}
|
}
|
||||||
@@ -229,7 +235,7 @@ $effect(() => {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
{#if data.canWrite && data.totalElements > 0}
|
{#if data.canWrite && data.totalElements > 0}
|
||||||
<div class="mb-2 flex justify-end">
|
<div class="mb-2 flex flex-col items-end gap-1">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onclick={editAllMatching}
|
onclick={editAllMatching}
|
||||||
@@ -239,6 +245,11 @@ $effect(() => {
|
|||||||
>
|
>
|
||||||
{m.bulk_edit_all_x({ count: data.totalElements })}
|
{m.bulk_edit_all_x({ count: data.totalElements })}
|
||||||
</button>
|
</button>
|
||||||
|
{#if editAllError}
|
||||||
|
<p role="alert" class="text-xs text-danger" data-testid="bulk-edit-all-x-error">
|
||||||
|
{editAllError}
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import { bulkSelectionStore } from '$lib/stores/bulkSelection.svelte';
|
|||||||
import BulkDocumentEditLayout, {
|
import BulkDocumentEditLayout, {
|
||||||
type BulkEditEntry
|
type BulkEditEntry
|
||||||
} from '$lib/components/document/BulkDocumentEditLayout.svelte';
|
} from '$lib/components/document/BulkDocumentEditLayout.svelte';
|
||||||
|
import { getErrorMessage, parseBackendError } from '$lib/errors';
|
||||||
import { m } from '$lib/paraglide/messages.js';
|
import { m } from '$lib/paraglide/messages.js';
|
||||||
|
|
||||||
let entries = $state<BulkEditEntry[]>([]);
|
let entries = $state<BulkEditEntry[]>([]);
|
||||||
@@ -14,6 +15,9 @@ let error = $state<string | null>(null);
|
|||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
const ids = Array.from(bulkSelectionStore.ids);
|
const ids = Array.from(bulkSelectionStore.ids);
|
||||||
if (ids.length === 0) {
|
if (ids.length === 0) {
|
||||||
|
// Skip the loading flash on the empty-store redirect path — the user
|
||||||
|
// is bouncing back to /documents in the next tick.
|
||||||
|
loading = false;
|
||||||
await goto('/documents');
|
await goto('/documents');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -24,14 +28,15 @@ onMount(async () => {
|
|||||||
body: JSON.stringify({ ids })
|
body: JSON.stringify({ ids })
|
||||||
});
|
});
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
error = m.error_internal_error();
|
const backend = await parseBackendError(res);
|
||||||
|
error = getErrorMessage(backend?.code);
|
||||||
loading = false;
|
loading = false;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const summaries = (await res.json()) as BulkEditEntry[];
|
const summaries = (await res.json()) as BulkEditEntry[];
|
||||||
entries = summaries;
|
entries = summaries;
|
||||||
} catch {
|
} catch {
|
||||||
error = m.error_internal_error();
|
error = getErrorMessage(undefined);
|
||||||
} finally {
|
} finally {
|
||||||
loading = false;
|
loading = false;
|
||||||
}
|
}
|
||||||
@@ -43,9 +48,35 @@ onMount(async () => {
|
|||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
{#if loading}
|
{#if loading}
|
||||||
<div class="flex h-full items-center justify-center p-12 text-sm text-ink-2">…</div>
|
<div
|
||||||
|
class="flex h-full items-center justify-center gap-3 p-12 text-sm text-ink-2"
|
||||||
|
role="status"
|
||||||
|
aria-live="polite"
|
||||||
|
data-testid="bulk-edit-loading"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="h-5 w-5 animate-spin text-ink-3"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
|
||||||
|
></circle>
|
||||||
|
<path
|
||||||
|
class="opacity-75"
|
||||||
|
fill="currentColor"
|
||||||
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
<span>{m.bulk_edit_loading()}</span>
|
||||||
|
</div>
|
||||||
{:else if error}
|
{:else if error}
|
||||||
<div class="m-6 rounded-sm border border-red-300 bg-red-50 p-4 text-sm text-red-700">
|
<div
|
||||||
|
role="alert"
|
||||||
|
class="m-6 rounded-sm border border-danger/40 bg-danger/10 p-4 text-sm text-danger"
|
||||||
|
data-testid="bulk-edit-page-error"
|
||||||
|
>
|
||||||
{error}
|
{error}
|
||||||
</div>
|
</div>
|
||||||
{:else if entries.length > 0}
|
{:else if entries.length > 0}
|
||||||
|
|||||||
Reference in New Issue
Block a user