feat(frontend): add admin card to generate thumbnails with polling
Fourth card on /admin/system mirrors the mass-import pattern: - POST /api/admin/generate-thumbnails to trigger - 2000 ms polling on /api/admin/thumbnail-status while RUNNING - processed / skipped / failed counters in the DONE message - standalone pollInterval so import and thumbnail polling don't interfere with each other Paraglide keys added in de/en/es, mirroring admin_system_import_*. Refs #307 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
@@ -338,6 +338,13 @@
|
||||
"admin_system_import_status_running": "Import läuft…",
|
||||
"admin_system_import_status_done": "Import abgeschlossen – {count} Dokumente verarbeitet.",
|
||||
"admin_system_import_status_failed": "Fehler: {message}",
|
||||
"admin_system_thumbnails_heading": "Thumbnails erzeugen",
|
||||
"admin_system_thumbnails_description": "Erzeugt Vorschaubilder für Dokumente ohne Thumbnail (z. B. nach dem Massenimport).",
|
||||
"admin_system_thumbnails_btn_start": "Thumbnails erzeugen",
|
||||
"admin_system_thumbnails_btn_retry": "Erneut starten",
|
||||
"admin_system_thumbnails_status_running": "Thumbnail-Generierung läuft…",
|
||||
"admin_system_thumbnails_status_done": "Fertig – {processed} erzeugt, {skipped} übersprungen, {failed} fehlgeschlagen.",
|
||||
"admin_system_thumbnails_status_failed": "Fehler: {message}",
|
||||
"comp_expandable_show_more": "Mehr anzeigen",
|
||||
"comp_expandable_show_less": "Weniger anzeigen",
|
||||
"error_comment_not_found": "Der Kommentar wurde nicht gefunden.",
|
||||
|
||||
@@ -338,6 +338,13 @@
|
||||
"admin_system_import_status_running": "Import running…",
|
||||
"admin_system_import_status_done": "Import complete – {count} documents processed.",
|
||||
"admin_system_import_status_failed": "Error: {message}",
|
||||
"admin_system_thumbnails_heading": "Generate thumbnails",
|
||||
"admin_system_thumbnails_description": "Generates preview images for documents without a thumbnail (e.g. after the mass import).",
|
||||
"admin_system_thumbnails_btn_start": "Generate thumbnails",
|
||||
"admin_system_thumbnails_btn_retry": "Run again",
|
||||
"admin_system_thumbnails_status_running": "Thumbnail generation running…",
|
||||
"admin_system_thumbnails_status_done": "Done — {processed} generated, {skipped} skipped, {failed} failed.",
|
||||
"admin_system_thumbnails_status_failed": "Error: {message}",
|
||||
"comp_expandable_show_more": "Show more",
|
||||
"comp_expandable_show_less": "Show less",
|
||||
"error_comment_not_found": "The comment could not be found.",
|
||||
|
||||
@@ -338,6 +338,13 @@
|
||||
"admin_system_import_status_running": "Importación en curso…",
|
||||
"admin_system_import_status_done": "Importación completada – {count} documentos procesados.",
|
||||
"admin_system_import_status_failed": "Error: {message}",
|
||||
"admin_system_thumbnails_heading": "Generar miniaturas",
|
||||
"admin_system_thumbnails_description": "Genera imágenes de vista previa para documentos sin miniatura (p. ej. tras la importación masiva).",
|
||||
"admin_system_thumbnails_btn_start": "Generar miniaturas",
|
||||
"admin_system_thumbnails_btn_retry": "Reiniciar",
|
||||
"admin_system_thumbnails_status_running": "Generación de miniaturas en curso…",
|
||||
"admin_system_thumbnails_status_done": "Listo — {processed} generadas, {skipped} omitidas, {failed} fallidas.",
|
||||
"admin_system_thumbnails_status_failed": "Error: {message}",
|
||||
"comp_expandable_show_more": "Mostrar más",
|
||||
"comp_expandable_show_less": "Mostrar menos",
|
||||
"error_comment_not_found": "El comentario no pudo encontrarse.",
|
||||
|
||||
@@ -14,8 +14,20 @@ type ImportStatus = {
|
||||
startedAt: string | null;
|
||||
};
|
||||
|
||||
type ThumbnailStatus = {
|
||||
state: 'IDLE' | 'RUNNING' | 'DONE' | 'FAILED';
|
||||
message: string;
|
||||
total: number;
|
||||
processed: number;
|
||||
skipped: number;
|
||||
failed: number;
|
||||
startedAt: string | null;
|
||||
};
|
||||
|
||||
let importStatus: ImportStatus | null = $state(null);
|
||||
let thumbnailStatus: ThumbnailStatus | null = $state(null);
|
||||
let pollInterval: ReturnType<typeof setInterval> | null = null;
|
||||
let thumbnailPollInterval: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
function startPolling() {
|
||||
if (pollInterval) return;
|
||||
@@ -29,6 +41,18 @@ function stopPolling() {
|
||||
}
|
||||
}
|
||||
|
||||
function startThumbnailPolling() {
|
||||
if (thumbnailPollInterval) return;
|
||||
thumbnailPollInterval = setInterval(fetchThumbnailStatus, 2000);
|
||||
}
|
||||
|
||||
function stopThumbnailPolling() {
|
||||
if (thumbnailPollInterval) {
|
||||
clearInterval(thumbnailPollInterval);
|
||||
thumbnailPollInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchImportStatus() {
|
||||
const res = await fetch('/api/admin/import-status');
|
||||
if (res.ok) {
|
||||
@@ -51,11 +75,37 @@ async function triggerImport() {
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchThumbnailStatus() {
|
||||
const res = await fetch('/api/admin/thumbnail-status');
|
||||
if (res.ok) {
|
||||
thumbnailStatus = await res.json();
|
||||
if (thumbnailStatus!.state === 'RUNNING') {
|
||||
startThumbnailPolling();
|
||||
} else {
|
||||
stopThumbnailPolling();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function triggerThumbnails() {
|
||||
const res = await fetch('/api/admin/generate-thumbnails', { method: 'POST' });
|
||||
if (res.ok) {
|
||||
thumbnailStatus = await res.json();
|
||||
if (thumbnailStatus!.state === 'RUNNING') {
|
||||
startThumbnailPolling();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
fetchImportStatus();
|
||||
fetchThumbnailStatus();
|
||||
});
|
||||
|
||||
onDestroy(() => stopPolling());
|
||||
onDestroy(() => {
|
||||
stopPolling();
|
||||
stopThumbnailPolling();
|
||||
});
|
||||
|
||||
async function backfillVersions() {
|
||||
backfillLoading = true;
|
||||
@@ -168,5 +218,62 @@ async function backfillFileHashes() {
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Thumbnail backfill -->
|
||||
<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_thumbnails_heading()}
|
||||
</h2>
|
||||
<p class="mb-4 text-sm text-ink-2">{m.admin_system_thumbnails_description()}</p>
|
||||
|
||||
{#if thumbnailStatus?.state === 'RUNNING'}
|
||||
<p class="text-sm text-ink-2">
|
||||
{m.admin_system_thumbnails_status_running()}
|
||||
{#if thumbnailStatus.total > 0}
|
||||
<span class="text-ink-3">
|
||||
({thumbnailStatus.processed + thumbnailStatus.skipped + thumbnailStatus.failed} /
|
||||
{thumbnailStatus.total})
|
||||
</span>
|
||||
{/if}
|
||||
</p>
|
||||
{:else if thumbnailStatus?.state === 'DONE'}
|
||||
<p
|
||||
data-testid="thumbnails-status-done"
|
||||
class="mb-4 rounded-sm border border-green-200 bg-green-50 p-3 text-sm text-green-700"
|
||||
>
|
||||
{m.admin_system_thumbnails_status_done({
|
||||
processed: thumbnailStatus.processed,
|
||||
skipped: thumbnailStatus.skipped,
|
||||
failed: thumbnailStatus.failed
|
||||
})}
|
||||
</p>
|
||||
<button
|
||||
data-thumbnails-trigger
|
||||
onclick={triggerThumbnails}
|
||||
class="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_thumbnails_btn_retry()}
|
||||
</button>
|
||||
{:else if thumbnailStatus?.state === 'FAILED'}
|
||||
<p class="mb-4 rounded-sm border border-red-200 bg-red-50 p-3 text-sm text-red-700">
|
||||
{m.admin_system_thumbnails_status_failed({ message: thumbnailStatus.message })}
|
||||
</p>
|
||||
<button
|
||||
data-thumbnails-trigger
|
||||
onclick={triggerThumbnails}
|
||||
class="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_thumbnails_btn_retry()}
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
data-thumbnails-trigger
|
||||
onclick={triggerThumbnails}
|
||||
class="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_thumbnails_btn_start()}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user