renders preview of zips

2026-06-12 12:31:44 +02:00
parent 15a3fc5877
commit d00a7e2783
6 changed files with 389 additions and 11 deletions
@@ -0,0 +1,136 @@
+<script lang="ts">
+    import AttachmentPreview from "$lib/components/AttachmentPreview.svelte";
+    import type { ProcessedZipArchive, ZipAttachment } from "$lib/zip-processing";
+
+    type Props = {
+        archive: ProcessedZipArchive;
+        onArchiveChange?: (archive: ProcessedZipArchive) => void;
+    };
+
+    let { archive, onArchiveChange = () => {} }: Props = $props();
+
+    let attachments = $state<ZipAttachment[]>([]);
+    let dragIndex = $state<number | null>(null);
+    let dropIndex = $state<number | null>(null);
+
+    $effect(() => {
+        attachments = archive.attachments.map((attachment) => ({ ...attachment }));
+    });
+
+    const emitArchiveChange = () => {
+        onArchiveChange({
+            ...archive,
+            attachments: attachments.map((attachment) => ({ ...attachment })),
+        });
+    };
+
+    const updateAttachmentName = (index: number, name: string) => {
+        attachments[index] = { ...attachments[index], name };
+        attachments = [...attachments];
+        emitArchiveChange();
+    };
+
+    const moveAttachment = (fromIndex: number, toIndex: number) => {
+        if (
+            fromIndex === toIndex ||
+            fromIndex < 0 ||
+            toIndex < 0 ||
+            fromIndex >= attachments.length ||
+            toIndex >= attachments.length
+        ) {
+            return;
+        }
+
+        const nextAttachments = [...attachments];
+        const [movedAttachment] = nextAttachments.splice(fromIndex, 1);
+        nextAttachments.splice(toIndex, 0, movedAttachment);
+
+        attachments = nextAttachments;
+        emitArchiveChange();
+    };
+
+    const handleDragStart = (index: number, event: DragEvent) => {
+        dragIndex = index;
+        dropIndex = index;
+
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = "move";
+            event.dataTransfer.setData("text/plain", String(index));
+        }
+    };
+
+    const handleDragOver = (index: number, event: DragEvent) => {
+        event.preventDefault();
+        dropIndex = index;
+    };
+
+    const handleDrop = (index: number, event: DragEvent) => {
+        event.preventDefault();
+
+        const dataTransferIndex = Number(event.dataTransfer?.getData("text/plain"));
+        const fromIndex = Number.isFinite(dataTransferIndex) ? dataTransferIndex : dragIndex;
+
+        if (fromIndex === null) {
+            return;
+        }
+
+        moveAttachment(fromIndex, index);
+        dragIndex = null;
+        dropIndex = null;
+    };
+
+    const handleDragEnd = () => {
+        dragIndex = null;
+        dropIndex = null;
+    };
+</script>
+
+<section class="flex flex-col gap-4 rounded-2xl border border-primary-100 bg-white px-4 py-4 shadow-sm">
+    <header class="flex flex-wrap items-baseline justify-between gap-2">
+        <div class="min-w-0">
+            <h2 class="truncate text-[16px] font-bold text-primary-900">{archive.name}</h2>
+            <p class="text-[13px] text-primary-700">
+                {attachments.length} relevante Datei{attachments.length === 1 ? "" : "en"}
+            </p>
+        </div>
+    </header>
+
+    <ul class="flex flex-col gap-3">
+        {#each attachments as attachment, index (attachment.path)}
+            <li
+                class={`flex flex-col gap-3 rounded-xl border bg-primary-50 p-3 ${
+                    dropIndex === index ? "border-primary-400 ring-1 ring-primary-200" : "border-primary-100"
+                } ${dragIndex === index ? "opacity-60" : ""}`}
+                draggable="true"
+                ondragstart={(event) => handleDragStart(index, event)}
+                ondragover={(event) => handleDragOver(index, event)}
+                ondrop={(event) => handleDrop(index, event)}
+                ondragend={handleDragEnd}
+            >
+                <div class="flex items-center gap-3">
+                    <button
+                        class="cursor-grab rounded-md border border-primary-200 bg-white px-2 py-1 text-sm font-semibold text-primary-700 active:cursor-grabbing"
+                        draggable="false"
+                        type="button"
+                        aria-label="Datei verschieben"
+                    >
+                        ::
+                    </button>
+
+                    <label class="min-w-0 flex-1">
+                        <span class="sr-only">Dateiname</span>
+                        <input
+                            class="w-full rounded-md border border-primary-200 bg-white px-3 py-2 text-[14px] text-primary-900 outline-none transition focus:border-primary-400 focus:ring-2 focus:ring-primary-200"
+                            type="text"
+                            value={attachment.name}
+                            oninput={(event) =>
+                                updateAttachmentName(index, (event.currentTarget as HTMLInputElement).value)}
+                        />
+                    </label>
+                </div>
+
+                <AttachmentPreview {attachment} />
+            </li>
+        {/each}
+    </ul>
+</section>