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
.idea/workspace.xml
Generated
+14 -5
View File
@@ -3,8 +3,8 @@
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="89f9fc3a-63ad-41cb-8d25-f07df352eb98" name="Changes" comment=""> <list default="true" id="89f9fc3a-63ad-41cb-8d25-f07df352eb98" name="Changes" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/lib/components/AttachmentPreview.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/AttachmentPreview.svelte" afterDir="false" />
<change beforePath="$PROJECT_DIR$/pnpm-lock.yaml" beforeDir="false" afterPath="$PROJECT_DIR$/pnpm-lock.yaml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/lib/components/ProcessedZipArchiveEditor.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/ProcessedZipArchiveEditor.svelte" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/routes/+page.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/routes/+page.svelte" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/routes/+page.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/routes/+page.svelte" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
@@ -51,7 +51,7 @@
<option name="presentableId" value="Default" /> <option name="presentableId" value="Default" />
<updated>1781169139290</updated> <updated>1781169139290</updated>
<workItem from="1781169141138" duration="309000" /> <workItem from="1781169141138" duration="309000" />
<workItem from="1781251694220" duration="7924000" /> <workItem from="1781251694220" duration="9616000" />
</task> </task>
<task id="LOCAL-00001" summary="adapts styling of rvg.legal"> <task id="LOCAL-00001" summary="adapts styling of rvg.legal">
<option name="closed" value="true" /> <option name="closed" value="true" />
@@ -85,7 +85,15 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1781259433444</updated> <updated>1781259433444</updated>
</task> </task>
<option name="localTasksCounter" value="5" /> <task id="LOCAL-00005" summary="renders preview of zips">
<option name="closed" value="true" />
<created>1781260304085</created>
<option name="number" value="00005" />
<option name="presentableId" value="LOCAL-00005" />
<option name="project" value="LOCAL" />
<updated>1781260304085</updated>
</task>
<option name="localTasksCounter" value="6" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@@ -99,7 +107,8 @@
<MESSAGE value="adds dropzone to add zips" /> <MESSAGE value="adds dropzone to add zips" />
<MESSAGE value="zips are getting extracted" /> <MESSAGE value="zips are getting extracted" />
<MESSAGE value="parses xjustiz and orders attachments" /> <MESSAGE value="parses xjustiz and orders attachments" />
<option name="LAST_COMMIT_MESSAGE" value="parses xjustiz and orders attachments" /> <MESSAGE value="renders preview of zips" />
<option name="LAST_COMMIT_MESSAGE" value="renders preview of zips" />
</component> </component>
<component name="XDebuggerManager"> <component name="XDebuggerManager">
<breakpoint-manager> <breakpoint-manager>
src/lib/components/AttachmentPreview.svelte
+20 -18
View File
@@ -5,9 +5,10 @@
type Props = { type Props = {
attachment: ZipAttachment; attachment: ZipAttachment;
class?: string;
}; };
let {attachment}: Props = $props(); let { attachment, class: className = "" }: Props = $props();
let canvasElement = $state<HTMLCanvasElement | null>(null); let canvasElement = $state<HTMLCanvasElement | null>(null);
let imageUrl = $state<string | null>(null); let imageUrl = $state<string | null>(null);
@@ -17,26 +18,25 @@
let objectUrl: string | null = null; let objectUrl: string | null = null;
let cancelled = false; let cancelled = false;
(async () => { (async () => {
// This prevents the code from running on the server (SSR)
const pdfjsLib = await import("pdfjs-dist"); const pdfjsLib = await import("pdfjs-dist");
const { getDocument, GlobalWorkerOptions } = pdfjsLib; const { getDocument, GlobalWorkerOptions } = pdfjsLib;
// Import the worker URL dynamically as well GlobalWorkerOptions.workerSrc = await import("pdfjs-dist/build/pdf.worker.mjs?url").then((m) => m.default);
const pdfWorkerSrc = await import("pdfjs-dist/build/pdf.worker.mjs?url").then(m => m.default);
GlobalWorkerOptions.workerSrc = pdfWorkerSrc;
const loadPreview = async () => { const loadPreview = async () => {
previewError = null; previewError = null;
if (attachment.kind === "image") { if (attachment.kind === "image") {
objectUrl = URL.createObjectURL(new Blob([attachment.data as unknown as ArrayBuffer])); const imageBuffer = attachment.data.buffer.slice(
attachment.data.byteOffset,
attachment.data.byteOffset + attachment.data.byteLength,
) as ArrayBuffer;
objectUrl = URL.createObjectURL(new Blob([imageBuffer]));
imageUrl = objectUrl; imageUrl = objectUrl;
return; return;
} }
try { try {
// Use the imported getDocument
const loadingTask = getDocument({ data: attachment.data }); const loadingTask = getDocument({ data: attachment.data });
const pdfDocument = await loadingTask.promise; const pdfDocument = await loadingTask.promise;
const page = await pdfDocument.getPage(1); const page = await pdfDocument.getPage(1);
@@ -46,15 +46,12 @@
return; return;
} }
const viewport = page.getViewport({scale: 1.2}); const viewport = page.getViewport({ scale: 0.4 });
canvasElement.width = viewport.width; canvasElement.width = viewport.width;
canvasElement.height = viewport.height; canvasElement.height = viewport.height;
await page.render({ await page.render({ canvas: canvasElement, viewport }).promise;
canvas: canvasElement,
viewport,
}).promise;
await loadingTask.destroy(); await loadingTask.destroy();
} catch (error) { } catch (error) {
@@ -64,26 +61,31 @@
}; };
void loadPreview(); void loadPreview();
}) })();
return () => { return () => {
cancelled = true; cancelled = true;
if (objectUrl) URL.revokeObjectURL(objectUrl); if (objectUrl) {
URL.revokeObjectURL(objectUrl);
}
}; };
}); });
</script> </script>
<div class={className}>
{#if attachment.kind === "image"} {#if attachment.kind === "image"}
{#if imageUrl} {#if imageUrl}
<img <img
alt={attachment.name} alt={attachment.name}
class="max-h-72 w-full rounded-md border border-primary-100 bg-white object-contain" class="block h-full w-full rounded-md border border-primary-100 bg-white object-contain"
src={imageUrl} src={imageUrl}
/> />
{/if} {/if}
{:else if previewError} {:else if previewError}
<div class="flex min-h-48 items-center justify-center rounded-md border border-dashed border-primary-200 bg-primary-50 px-4 py-6 text-sm text-primary-800"> <div class="flex h-full min-h-0 items-center justify-center rounded-md border border-dashed border-primary-200 bg-primary-50 px-3 py-4 text-center text-[12px] text-primary-800">
{previewError} {previewError}
</div> </div>
{:else} {:else}
<canvas bind:this={canvasElement} class="w-full rounded-md border border-primary-100 bg-white"></canvas> <canvas bind:this={canvasElement} class="block rounded-md border border-primary-100 bg-white"></canvas>
{/if} {/if}
</div>
src/lib/components/ProcessedZipArchiveEditor.svelte
+31 -26
View File
@@ -7,29 +7,29 @@
onArchiveChange?: (archive: ProcessedZipArchive) => void; onArchiveChange?: (archive: ProcessedZipArchive) => void;
}; };
let { archive, onArchiveChange = () => {} }: Props = $props(); let {
archive, onArchiveChange = () => {
}
}: Props = $props();
let attachments = $state<ZipAttachment[]>([]); let attachments = $state<ZipAttachment[]>([]);
let archiveName = $state("");
let dragIndex = $state<number | null>(null); let dragIndex = $state<number | null>(null);
let dropIndex = $state<number | null>(null); let dropIndex = $state<number | null>(null);
$effect(() => { $effect(() => {
archiveName = archive.name;
attachments = archive.attachments.map((attachment) => ({...attachment})); attachments = archive.attachments.map((attachment) => ({...attachment}));
}); });
const emitArchiveChange = () => { const emitArchiveChange = () => {
onArchiveChange({ onArchiveChange({
...archive, ...archive,
name: archiveName,
attachments: attachments.map((attachment) => ({...attachment})), 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) => { const moveAttachment = (fromIndex: number, toIndex: number) => {
if ( if (
fromIndex === toIndex || fromIndex === toIndex ||
@@ -87,18 +87,29 @@
<section class="flex flex-col gap-4 rounded-2xl border border-primary-100 bg-white px-4 py-4 shadow-sm"> <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"> <header class="flex flex-wrap items-baseline justify-between gap-2">
<div class="min-w-0"> <div class="min-w-0 flex-1">
<h2 class="truncate text-[16px] font-bold text-primary-900">{archive.name}</h2> <label class="block min-w-0">
<p class="text-[13px] text-primary-700"> <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"} {attachments.length} relevante Datei{attachments.length === 1 ? "" : "en"}
</p> </p>
</div> </div>
</header> </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)} {#each attachments as attachment, index (attachment.path)}
<li <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" dropIndex === index ? "border-primary-400 ring-1 ring-primary-200" : "border-primary-100"
} ${dragIndex === index ? "opacity-60" : ""}`} } ${dragIndex === index ? "opacity-60" : ""}`}
draggable="true" draggable="true"
@@ -107,9 +118,9 @@
ondrop={(event) => handleDrop(index, event)} ondrop={(event) => handleDrop(index, event)}
ondragend={handleDragEnd} 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 <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" 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" draggable="false"
type="button" type="button"
aria-label="Datei verschieben" aria-label="Datei verschieben"
@@ -117,19 +128,13 @@
:: ::
</button> </button>
<label class="min-w-0 flex-1"> <div class="min-w-0 text-[13px] font-medium leading-tight text-primary-900">
<span class="sr-only">Dateiname</span> {attachment.name}
<input </div>
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" </div>
type="text" <div class="shrink-0">
value={attachment.name} <AttachmentPreview {attachment} class="h-full w-full"/>
oninput={(event) =>
updateAttachmentName(index, (event.currentTarget as HTMLInputElement).value)}
/>
</label>
</div> </div>
<AttachmentPreview {attachment} />
</li> </li>
{/each} {/each}
</ul> </ul>
src/routes/+page.svelte
+1 -1
View File
@@ -45,7 +45,7 @@
<h2 class="h1 text-[20px] font-bold text-primary-900">ZIP-Dateien werden verarbeitet</h2> <h2 class="h1 text-[20px] font-bold text-primary-900">ZIP-Dateien werden verarbeitet</h2>
</div> </div>
<div class="mx-auto flex w-full max-w-3xl flex-col gap-3"> <div class="mx-auto flex w-full flex-col gap-3">
<div class="rounded-container bg-primary-50 px-4 py-3 text-[14px] font-medium text-primary-900"> <div class="rounded-container bg-primary-50 px-4 py-3 text-[14px] font-medium text-primary-900">
{#if pendingZipCount > 0} {#if pendingZipCount > 0}
Noch {pendingZipCount} ZIP-Datei{pendingZipCount === 1 ? "" : "en"} in Bearbeitung. Noch {pendingZipCount} ZIP-Datei{pendingZipCount === 1 ? "" : "en"} in Bearbeitung.