This commit is contained in:
@@ -0,0 +1,332 @@
|
||||
<script lang="ts" module>
|
||||
export type ZipProcessingJobStatus = 'processing' | 'complete' | 'error';
|
||||
|
||||
export type ZipProcessingJob = {
|
||||
id: string;
|
||||
file: File;
|
||||
status: ZipProcessingJobStatus;
|
||||
archiveCount?: number;
|
||||
error?: string;
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { Check, CircleDashed, TriangleAlert } from '@lucide/svelte';
|
||||
import Button from '$lib/components/ui/button.svelte';
|
||||
import * as Card from '$lib/components/ui/card/index';
|
||||
|
||||
type Props = {
|
||||
jobs: ZipProcessingJob[];
|
||||
compact?: boolean;
|
||||
onRetry: (jobId: string) => void;
|
||||
onRemove: (jobId: string) => void;
|
||||
};
|
||||
|
||||
let { jobs, compact = false, onRetry, onRemove }: Props = $props();
|
||||
|
||||
let processingCount = $derived(jobs.filter((job) => job.status === 'processing').length);
|
||||
let completedCount = $derived(jobs.filter((job) => job.status === 'complete').length);
|
||||
let failedJobs = $derived(jobs.filter((job) => job.status === 'error'));
|
||||
let completionPercent = $derived(jobs.length === 0 ? 0 : (completedCount / jobs.length) * 100);
|
||||
|
||||
const formatFileSize = (size: number) => {
|
||||
if (size < 1024 * 1024) return `${Math.max(1, Math.round(size / 1024))} KB`;
|
||||
return `${(size / (1024 * 1024)).toFixed(1)} MB`;
|
||||
};
|
||||
|
||||
const archiveCountLabel = (count: number | undefined) => {
|
||||
if (count === undefined) return 'Bereit';
|
||||
return `${count} Archiv${count === 1 ? '' : 'e'} bereit`;
|
||||
};
|
||||
</script>
|
||||
|
||||
{#if compact}
|
||||
<Card.Root size="sm" class="border-l-4 border-l-secondary">
|
||||
<p class="sr-only" role="status" aria-live="polite">
|
||||
{completedCount} von {jobs.length} Dateien bereit, {processingCount} in Bearbeitung,
|
||||
{failedJobs.length} fehlgeschlagen.
|
||||
</p>
|
||||
<Card.Content class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
<div class="relative grid size-10 shrink-0 place-items-center" aria-hidden="true">
|
||||
<div class="compact-folder"></div>
|
||||
{#if processingCount > 0}
|
||||
<CircleDashed
|
||||
class="absolute -right-0.5 -bottom-0.5 size-4 animate-spin text-secondary"
|
||||
/>
|
||||
{:else}
|
||||
<TriangleAlert class="absolute -right-0.5 -bottom-0.5 size-4 text-destructive" />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<p class="font-bold text-primary-900">
|
||||
{#if processingCount > 0}
|
||||
{processingCount} ZIP-Datei{processingCount === 1 ? '' : 'en'}
|
||||
{processingCount === 1 ? ' wird' : ' werden'} noch geöffnet
|
||||
{:else}
|
||||
{failedJobs.length} ZIP-Datei{failedJobs.length === 1 ? '' : 'en'} konnte{failedJobs.length ===
|
||||
1
|
||||
? ''
|
||||
: 'n'} nicht geöffnet werden
|
||||
{/if}
|
||||
</p>
|
||||
<p class="truncate text-[13px] text-primary-700">
|
||||
{jobs
|
||||
.filter((job) =>
|
||||
processingCount > 0 ? job.status === 'processing' : job.status === 'error'
|
||||
)
|
||||
.map((job) => job.file.name)
|
||||
.join(', ')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="shrink-0 text-[12px] font-medium text-primary-700">
|
||||
Verarbeitung nur in Ihrem Browser
|
||||
</p>
|
||||
</Card.Content>
|
||||
|
||||
{#if failedJobs.length > 0}
|
||||
<Card.Footer class="flex flex-col items-stretch gap-2">
|
||||
{#each failedJobs as job (job.id)}
|
||||
<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p class="min-w-0 text-[13px] font-medium text-destructive">
|
||||
<span class="font-bold">{job.file.name}</span> konnte nicht geöffnet werden.
|
||||
</p>
|
||||
<div class="flex shrink-0 gap-1">
|
||||
<Button variant="tertiary" class="h-8 min-w-0 px-3" onclick={() => onRetry(job.id)}
|
||||
>Erneut versuchen</Button
|
||||
>
|
||||
<Button variant="tertiary" class="h-8 min-w-0 px-3" onclick={() => onRemove(job.id)}
|
||||
>Entfernen</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</Card.Footer>
|
||||
{/if}
|
||||
</Card.Root>
|
||||
{:else}
|
||||
<Card.Root class="mx-auto w-full max-w-2xl shadow-sm">
|
||||
<p class="sr-only" role="status" aria-live="polite">
|
||||
{completedCount} von {jobs.length} Dateien bereit, {processingCount} in Bearbeitung,
|
||||
{failedJobs.length} fehlgeschlagen.
|
||||
</p>
|
||||
<Card.Header class="place-items-center px-6 pt-4 text-center sm:px-10">
|
||||
<div class="case-intake" aria-hidden="true">
|
||||
<div class="folder-back"></div>
|
||||
<div class="document-sheet">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="folder-front"></div>
|
||||
</div>
|
||||
|
||||
<Card.Title class="mt-3 text-[22px] font-extrabold text-primary-900">
|
||||
{#if processingCount > 0}
|
||||
beA-Archive werden vorbereitet
|
||||
{:else if failedJobs.length > 0 && completedCount === 0}
|
||||
Archive konnten nicht vorbereitet werden
|
||||
{:else}
|
||||
Archive sind bereit
|
||||
{/if}
|
||||
</Card.Title>
|
||||
<Card.Description class="max-w-md font-medium text-primary-700">
|
||||
Die Dateien werden ausschließlich in Ihrem Browser geöffnet und nicht hochgeladen.
|
||||
</Card.Description>
|
||||
</Card.Header>
|
||||
|
||||
<Card.Content class="flex flex-col gap-4 px-6 sm:px-10">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between gap-4 text-[13px] font-bold text-primary-900">
|
||||
<span>{completedCount} von {jobs.length} Dateien bereit</span>
|
||||
{#if processingCount > 0}
|
||||
<span class="font-medium text-primary-700">Bitte kurz warten</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div
|
||||
class="h-1.5 overflow-hidden rounded-full bg-primary-100"
|
||||
role="progressbar"
|
||||
aria-label="Vorbereitete ZIP-Dateien"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax={jobs.length}
|
||||
aria-valuenow={completedCount}
|
||||
>
|
||||
<div
|
||||
class="h-full rounded-full bg-success transition-[width] duration-500"
|
||||
style:width={`${completionPercent}%`}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="flex flex-col gap-2" aria-label="Status der ZIP-Dateien">
|
||||
{#each jobs as job (job.id)}
|
||||
<li
|
||||
class="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-3 rounded-xl border bg-background/55 px-3 py-3 sm:grid-cols-[auto_minmax(0,1fr)_auto]"
|
||||
>
|
||||
<div class="grid size-8 place-items-center rounded-full bg-card" aria-hidden="true">
|
||||
{#if job.status === 'processing'}
|
||||
<CircleDashed class="size-5 animate-spin text-secondary" />
|
||||
{:else if job.status === 'complete'}
|
||||
<Check class="size-5 text-success" />
|
||||
{:else}
|
||||
<TriangleAlert class="size-5 text-destructive" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="min-w-0">
|
||||
<p class="truncate text-[14px] font-bold text-primary-900">{job.file.name}</p>
|
||||
<p class="job-meta text-[12px] text-primary-700">{formatFileSize(job.file.size)}</p>
|
||||
{#if job.status === 'error'}
|
||||
<p class="mt-1 text-[12px] leading-snug text-destructive">
|
||||
<span class="font-bold">Konnte nicht geöffnet werden.</span>
|
||||
<span class="block">
|
||||
{job.error ?? 'Prüfen Sie, ob die Datei ein gültiges beA-ZIP-Archiv ist.'}
|
||||
</span>
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col-start-2 flex flex-wrap items-center gap-1 sm:col-start-3 sm:row-start-1"
|
||||
>
|
||||
{#if job.status === 'processing'}
|
||||
<span class="text-[12px] font-bold text-secondary">Wird geöffnet</span>
|
||||
{:else if job.status === 'complete'}
|
||||
<span class="text-[12px] font-bold text-success">
|
||||
{archiveCountLabel(job.archiveCount)}
|
||||
</span>
|
||||
{:else}
|
||||
<Button variant="tertiary" class="h-8 min-w-0 px-3" onclick={() => onRetry(job.id)}
|
||||
>Erneut versuchen</Button
|
||||
>
|
||||
<Button variant="tertiary" class="h-8 min-w-0 px-3" onclick={() => onRemove(job.id)}
|
||||
>Entfernen</Button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.job-meta {
|
||||
font-family: 'Geist Variable', ui-monospace, monospace;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.case-intake {
|
||||
position: relative;
|
||||
width: 7rem;
|
||||
height: 5.5rem;
|
||||
}
|
||||
|
||||
.folder-back,
|
||||
.folder-front,
|
||||
.compact-folder {
|
||||
position: absolute;
|
||||
background: color-mix(in srgb, var(--primary) 12%, white);
|
||||
border: 2px solid var(--primary);
|
||||
}
|
||||
|
||||
.folder-back {
|
||||
inset: 1.55rem 0 0;
|
||||
border-radius: 0.65rem 0.65rem 0.8rem 0.8rem;
|
||||
}
|
||||
|
||||
.folder-back::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -0.8rem;
|
||||
width: 3.4rem;
|
||||
height: 1rem;
|
||||
border: 2px solid var(--primary);
|
||||
border-bottom: 0;
|
||||
border-radius: 0.55rem 0.55rem 0 0;
|
||||
background: color-mix(in srgb, var(--primary) 12%, white);
|
||||
}
|
||||
|
||||
.document-sheet {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
top: 0.2rem;
|
||||
display: flex;
|
||||
width: 3.7rem;
|
||||
height: 4.6rem;
|
||||
transform: translateX(-50%);
|
||||
flex-direction: column;
|
||||
gap: 0.42rem;
|
||||
border: 2px solid var(--primary);
|
||||
border-radius: 0.35rem;
|
||||
background: var(--card);
|
||||
padding: 0.8rem 0.65rem;
|
||||
box-shadow: 0 0.4rem 1rem rgb(18 47 98 / 12%);
|
||||
animation: file-intake 1.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.document-sheet span {
|
||||
display: block;
|
||||
height: 0.18rem;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--primary) 30%, transparent);
|
||||
}
|
||||
|
||||
.document-sheet span:nth-child(2) {
|
||||
width: 72%;
|
||||
}
|
||||
|
||||
.document-sheet span:nth-child(3) {
|
||||
width: 88%;
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
.folder-front {
|
||||
z-index: 2;
|
||||
inset: 2.7rem 0 0;
|
||||
border-radius: 0.45rem 0.45rem 0.8rem 0.8rem;
|
||||
background: color-mix(in srgb, var(--primary) 18%, white);
|
||||
transform: perspective(8rem) rotateX(-5deg);
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
.compact-folder {
|
||||
inset: 0.65rem 0.2rem 0.25rem;
|
||||
border-radius: 0.35rem;
|
||||
}
|
||||
|
||||
.compact-folder::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -0.4rem;
|
||||
width: 1rem;
|
||||
height: 0.5rem;
|
||||
border: 2px solid var(--primary);
|
||||
border-bottom: 0;
|
||||
border-radius: 0.25rem 0.25rem 0 0;
|
||||
background: color-mix(in srgb, var(--primary) 12%, white);
|
||||
}
|
||||
|
||||
@keyframes file-intake {
|
||||
0%,
|
||||
18% {
|
||||
transform: translate(-50%, -0.45rem);
|
||||
}
|
||||
55%,
|
||||
100% {
|
||||
transform: translate(-50%, 0.65rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.document-sheet,
|
||||
:global(.animate-spin) {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user