loading screen

src/routes/tools/bea/+page.svelte

@@ -3,6 +3,9 @@
 	import Button from '$lib/components/ui/button.svelte';
 	import ProcessedZipArchiveEditor from '$lib/components/ProcessedZipArchiveEditor.svelte';
 	import ZipDropzone from '$lib/components/ZipDropzone.svelte';
+	import BeaArchiveProcessing, {
+		type ZipProcessingJob
+	} from '$lib/components/BeaArchiveProcessing.svelte';
 	import {
 		extractZipArchives,
 		mergeProcessedZipArchive,
@@ -16,7 +19,9 @@
 
 	let selectedZipFiles: File[] = $state([]);
 	let processedZipFiles: ProcessedZipArchive[] = $state([]);
-	let pendingZipCount = $state(0);
+	let zipJobs: ZipProcessingJob[] = $state([]);
+	let pendingZipCount = $derived(zipJobs.filter((job) => job.status === 'processing').length);
+	let failedZipCount = $derived(zipJobs.filter((job) => job.status === 'error').length);
 	let thumbnailWidth = $state(200);
 	let thumbnailWidthHydrated = $state(false);
 	let archiveGeneration = 0;
@@ -48,34 +53,67 @@
 		localStorage.setItem(THUMBNAIL_WIDTH_STORAGE_KEY, String(thumbnailWidth));
 	});
 
+	const updateZipJob = (jobId: string, update: Partial<ZipProcessingJob>) => {
+		zipJobs = zipJobs.map((job) => (job.id === jobId ? { ...job, ...update } : job));
+	};
+
 	const handleFilesSelected = (files: File[]) => {
 		selectedZipFiles = [...selectedZipFiles, ...files];
 
-		for (const file of files) {
-			void processZipFile(file, archiveGeneration);
+		const jobs = files.map((file) => ({
+			id: crypto.randomUUID(),
+			file,
+			status: 'processing' as const
+		}));
+		zipJobs = [...zipJobs, ...jobs];
+
+		for (const job of jobs) {
+			void processZipFile(job.id, job.file, archiveGeneration);
 		}
 	};
 
-	const processZipFile = async (file: File, generation: number) => {
-		pendingZipCount += 1;
+	const processZipFile = async (jobId: string, file: File, generation: number) => {
+		updateZipJob(jobId, { status: 'processing', error: undefined, archiveCount: undefined });
 
 		try {
 			const processedZipArchives = await extractZipArchives(file);
 
-			if (generation !== archiveGeneration) {
+			if (generation !== archiveGeneration || !zipJobs.some((job) => job.id === jobId)) {
 				return;
 			}
 
 			processedZipFiles = [...processedZipFiles, ...processedZipArchives];
+			updateZipJob(jobId, {
+				status: 'complete',
+				archiveCount: processedZipArchives.length
+			});
 		} catch (error) {
 			console.error(`Failed to process ${file.name}`, error);
-		} finally {
-			if (generation === archiveGeneration) {
-				pendingZipCount -= 1;
+
+			if (generation === archiveGeneration && zipJobs.some((job) => job.id === jobId)) {
+				updateZipJob(jobId, {
+					status: 'error',
+					error: 'Prüfen Sie, ob die Datei ein gültiges beA-ZIP-Archiv ist.'
+				});
 			}
 		}
 	};
 
+	const retryZipFile = (jobId: string) => {
+		const job = zipJobs.find((candidate) => candidate.id === jobId);
+		if (!job || job.status === 'processing') return;
+
+		void processZipFile(job.id, job.file, archiveGeneration);
+	};
+
+	const removeZipFile = (jobId: string) => {
+		const job = zipJobs.find((candidate) => candidate.id === jobId);
+		if (!job || job.status === 'processing') return;
+
+		zipJobs = zipJobs.filter((candidate) => candidate.id !== jobId);
+		selectedZipFiles = selectedZipFiles.filter((file) => file !== job.file);
+	};
+
 	const updateProcessedZipFile = (index: number, archive: ProcessedZipArchive) => {
 		processedZipFiles = processedZipFiles.map((existingArchive, existingIndex) =>
 			existingIndex === index ? archive : existingArchive
@@ -97,7 +135,7 @@
 		archiveGeneration += 1;
 		selectedZipFiles = [];
 		processedZipFiles = [];
-		pendingZipCount = 0;
+		zipJobs = [];
 	};
 </script>
 
@@ -166,12 +204,15 @@
 			class="flex min-h-[calc(-180px+100vh)] w-full grow flex-col justify-center gap-4 px-4 py-6"
 		>
 			<div class="mx-auto flex w-full flex-col gap-3">
-				{#if pendingZipCount > 0}
-					<div
-						class="rounded-container bg-primary-50 px-4 py-3 text-[14px] font-medium text-primary-900"
-					>
-						Noch {pendingZipCount} ZIP-Datei{pendingZipCount === 1 ? '' : 'en'} in Bearbeitung.
-					</div>
+				{#if processedZipFiles.length === 0}
+					<BeaArchiveProcessing jobs={zipJobs} onRetry={retryZipFile} onRemove={removeZipFile} />
+				{:else if pendingZipCount > 0 || failedZipCount > 0}
+					<BeaArchiveProcessing
+						jobs={zipJobs}
+						compact
+						onRetry={retryZipFile}
+						onRemove={removeZipFile}
+					/>
 				{/if}
 
 				{#if processedZipFiles.length > 0}