rehlert/bea-edit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design anpassungen

Browse Source
This commit is contained in:
rehlert
2026-06-12 12:59:46 +02:00
parent d00a7e2783
commit 0cbbc6f46d
4 changed files with 89 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/ProcessedZipArchiveEditor.svelte
+42 -37
View File
@@ -1,35 +1,35 @@
<script lang="ts">
import AttachmentPreview from "$lib/components/AttachmentPreview.svelte";
import type { ProcessedZipArchive, ZipAttachment } from "$lib/zip-processing";
import type {ProcessedZipArchive, ZipAttachment} from "$lib/zip-processing";
type Props = {
archive: ProcessedZipArchive;
onArchiveChange?: (archive: ProcessedZipArchive) => void;
};
let { archive, onArchiveChange = () => {} }: Props = $props();
let {
archive, onArchiveChange = () => {
}
}: Props = $props();
let attachments = $state<ZipAttachment[]>([]);
let archiveName = $state("");
let dragIndex = $state<number | null>(null);
let dropIndex = $state<number | null>(null);
$effect(() => {
attachments = archive.attachments.map((attachment) => ({ ...attachment }));
archiveName = archive.name;
attachments = archive.attachments.map((attachment) => ({...attachment}));
});
const emitArchiveChange = () => {
onArchiveChange({
...archive,
attachments: attachments.map((attachment) => ({ ...attachment })),
name: archiveName,
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 ||
@@ -87,49 +87,54 @@
<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">
<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 flex-col gap-3">
<ul class="flex gap-3 overflow-x-auto pb-1">
{#each attachments as attachment, index (attachment.path)}
<li
class={`flex flex-col gap-3 rounded-xl border bg-primary-50 p-3 ${
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" : ""}`}
draggable="true"
ondragstart={(event) => handleDragStart(index, event)}
ondragover={(event) => handleDragOver(index, event)}
ondrop={(event) => handleDrop(index, event)}
ondragend={handleDragEnd}
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">
<div class="flex min-w-0 flex-1 flex-row gap-2 py-1 items-baseline">
<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"
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>
<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 class="min-w-0 text-[13px] font-medium leading-tight text-primary-900">
{attachment.name}
</div>
</div>
<div class="shrink-0">
<AttachmentPreview {attachment} class="h-full w-full"/>
</div>
<AttachmentPreview {attachment} />
</li>
{/each}
</ul>