bea-edit/src/lib/components/ProcessedZipArchiveEditor.svelte

<script lang="ts">
    import AttachmentPreview from "$lib/components/AttachmentPreview.svelte";
    import type {ProcessedZipArchive, ZipAttachment} from "$lib/zip-processing";

    type Props = {
        archive: ProcessedZipArchive;
        thumbnailWidth: number;
        onArchiveChange?: (archive: ProcessedZipArchive) => void;
    };

    let {
        archive,
        thumbnailWidth = 200,
        onArchiveChange = () => {
        }
    }: Props = $props();

    let attachments = $state<ZipAttachment[]>([]);
    let archiveName = $state("");
    let dragIndex = $state<number | null>(null);
    let dropIndex = $state<number | null>(null);

    $effect(() => {
        archiveName = archive.name;
        attachments = archive.attachments.map((attachment) => ({...attachment}));
    });

    const emitArchiveChange = () => {
        onArchiveChange({
            ...archive,
            name: archiveName,
            attachments: attachments.map((attachment) => ({...attachment})),
        });
    };

    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 flex-1">
            <label class="block min-w-0">
                <span class="sr-only">Archivname</span>
                <input
                        class="w-full max-w-xl rounded-md border border-primary-200 bg-white px-3 py-2 text-[16px] font-bold text-primary-900 outline-none transition focus:border-primary-400 focus:ring-2 focus:ring-primary-200"
                        type="text"
                        value={archiveName}
                        oninput={(event) => {
                        archiveName = (event.currentTarget as HTMLInputElement).value;
                        emitArchiveChange();
                    }}
                />
            </label>
            <p class="mt-1 text-[13px] text-primary-700">
                {attachments.length} relevante Datei{attachments.length === 1 ? "" : "en"}
            </p>
        </div>
    </header>

    <ul class="flex gap-3 overflow-x-auto pb-1">
        {#each attachments as attachment, index (attachment.path)}
            <li
                    class={`flex flex-col shrink-0 items-stretch gap-2 rounded-xl border bg-primary-50 p-2 ${
                    dropIndex === index ? "border-primary-400 ring-1 ring-primary-200" : "border-primary-100"
                } ${dragIndex === index ? "opacity-60" : ""}`}
                    style={`width: ${thumbnailWidth}px;`}
                    draggable="true"
                    ondragstart={(event) => handleDragStart(index, event)}
                    ondragover={(event) => handleDragOver(index, event)}
                    ondrop={(event) => handleDrop(index, event)}
                    ondragend={handleDragEnd}
            >
                <div class="flex min-w-0 flex-1 flex-row gap-2 py-1 items-baseline">
                    <button
                            class="w-fit cursor-grab rounded-md border border-primary-200 bg-white px-2 py-1 text-sm font-semibold leading-none text-primary-700 active:cursor-grabbing"
                            draggable="false"
                            type="button"
                            aria-label="Datei verschieben"
                    >
                        ::
                    </button>

                    <div
                            class="truncate text-[13px] font-medium leading-tight text-primary-900"
                            title={attachment.name}
                    >
                        {attachment.name}
                    </div>
                </div>
                <AttachmentPreview {attachment} />
            </li>
        {/each}
    </ul>
</section>