design anpassungen
This commit is contained in:
Generated
+14
-5
@@ -3,8 +3,8 @@
|
||||
<component name="ChangeListManager">
|
||||
<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$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" 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/AttachmentPreview.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/AttachmentPreview.svelte" 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" />
|
||||
</list>
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
@@ -51,7 +51,7 @@
|
||||
<option name="presentableId" value="Default" />
|
||||
<updated>1781169139290</updated>
|
||||
<workItem from="1781169141138" duration="309000" />
|
||||
<workItem from="1781251694220" duration="7924000" />
|
||||
<workItem from="1781251694220" duration="9616000" />
|
||||
</task>
|
||||
<task id="LOCAL-00001" summary="adapts styling of rvg.legal">
|
||||
<option name="closed" value="true" />
|
||||
@@ -85,7 +85,15 @@
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1781259433444</updated>
|
||||
</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 />
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
@@ -99,7 +107,8 @@
|
||||
<MESSAGE value="adds dropzone to add zips" />
|
||||
<MESSAGE value="zips are getting extracted" />
|
||||
<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 name="XDebuggerManager">
|
||||
<breakpoint-manager>
|
||||
|
||||
@@ -5,9 +5,10 @@
|
||||
|
||||
type Props = {
|
||||
attachment: ZipAttachment;
|
||||
class?: string;
|
||||
};
|
||||
|
||||
let {attachment}: Props = $props();
|
||||
let { attachment, class: className = "" }: Props = $props();
|
||||
|
||||
let canvasElement = $state<HTMLCanvasElement | null>(null);
|
||||
let imageUrl = $state<string | null>(null);
|
||||
@@ -17,26 +18,25 @@
|
||||
let objectUrl: string | null = null;
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
// This prevents the code from running on the server (SSR)
|
||||
const pdfjsLib = await import("pdfjs-dist");
|
||||
const { getDocument, GlobalWorkerOptions } = pdfjsLib;
|
||||
|
||||
// Import the worker URL dynamically as well
|
||||
const pdfWorkerSrc = await import("pdfjs-dist/build/pdf.worker.mjs?url").then(m => m.default);
|
||||
GlobalWorkerOptions.workerSrc = pdfWorkerSrc;
|
||||
|
||||
GlobalWorkerOptions.workerSrc = await import("pdfjs-dist/build/pdf.worker.mjs?url").then((m) => m.default);
|
||||
|
||||
const loadPreview = async () => {
|
||||
previewError = null;
|
||||
|
||||
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;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Use the imported getDocument
|
||||
const loadingTask = getDocument({ data: attachment.data });
|
||||
const pdfDocument = await loadingTask.promise;
|
||||
const page = await pdfDocument.getPage(1);
|
||||
@@ -46,15 +46,12 @@
|
||||
return;
|
||||
}
|
||||
|
||||
const viewport = page.getViewport({scale: 1.2});
|
||||
const viewport = page.getViewport({ scale: 0.4 });
|
||||
|
||||
canvasElement.width = viewport.width;
|
||||
canvasElement.height = viewport.height;
|
||||
|
||||
await page.render({
|
||||
canvas: canvasElement,
|
||||
viewport,
|
||||
}).promise;
|
||||
await page.render({ canvas: canvasElement, viewport }).promise;
|
||||
|
||||
await loadingTask.destroy();
|
||||
} catch (error) {
|
||||
@@ -64,26 +61,31 @@
|
||||
};
|
||||
|
||||
void loadPreview();
|
||||
})
|
||||
})();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
if (objectUrl) URL.revokeObjectURL(objectUrl);
|
||||
if (objectUrl) {
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class={className}>
|
||||
{#if attachment.kind === "image"}
|
||||
{#if imageUrl}
|
||||
<img
|
||||
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}
|
||||
/>
|
||||
{/if}
|
||||
{: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}
|
||||
</div>
|
||||
{: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}
|
||||
</div>
|
||||
|
||||
@@ -7,29 +7,29 @@
|
||||
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(() => {
|
||||
archiveName = archive.name;
|
||||
attachments = archive.attachments.map((attachment) => ({...attachment}));
|
||||
});
|
||||
|
||||
const emitArchiveChange = () => {
|
||||
onArchiveChange({
|
||||
...archive,
|
||||
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,18 +87,29 @@
|
||||
|
||||
<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"
|
||||
@@ -107,9 +118,9 @@
|
||||
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"
|
||||
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"
|
||||
@@ -117,19 +128,13 @@
|
||||
::
|
||||
</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>
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
<h2 class="h1 text-[20px] font-bold text-primary-900">ZIP-Dateien werden verarbeitet</h2>
|
||||
</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">
|
||||
{#if pendingZipCount > 0}
|
||||
Noch {pendingZipCount} ZIP-Datei{pendingZipCount === 1 ? "" : "en"} in Bearbeitung.
|
||||
|
||||
Reference in New Issue
Block a user