Features/shadcn #1
Generated
+14
-4
@@ -3,7 +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$/src/lib/zip-processing.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/zip-processing.ts" 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/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" />
|
||||||
@@ -50,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="7259000" />
|
<workItem from="1781251694220" duration="7924000" />
|
||||||
</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" />
|
||||||
@@ -76,7 +77,15 @@
|
|||||||
<option name="project" value="LOCAL" />
|
<option name="project" value="LOCAL" />
|
||||||
<updated>1781258303003</updated>
|
<updated>1781258303003</updated>
|
||||||
</task>
|
</task>
|
||||||
<option name="localTasksCounter" value="4" />
|
<task id="LOCAL-00004" summary="parses xjustiz and orders attachments">
|
||||||
|
<option name="closed" value="true" />
|
||||||
|
<created>1781259433444</created>
|
||||||
|
<option name="number" value="00004" />
|
||||||
|
<option name="presentableId" value="LOCAL-00004" />
|
||||||
|
<option name="project" value="LOCAL" />
|
||||||
|
<updated>1781259433444</updated>
|
||||||
|
</task>
|
||||||
|
<option name="localTasksCounter" value="5" />
|
||||||
<servers />
|
<servers />
|
||||||
</component>
|
</component>
|
||||||
<component name="TypeScriptGeneratedFilesManager">
|
<component name="TypeScriptGeneratedFilesManager">
|
||||||
@@ -89,7 +98,8 @@
|
|||||||
<MESSAGE value="adapts styling of rvg.legal" />
|
<MESSAGE value="adapts styling of rvg.legal" />
|
||||||
<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" />
|
||||||
<option name="LAST_COMMIT_MESSAGE" value="zips are getting extracted" />
|
<MESSAGE value="parses xjustiz and orders attachments" />
|
||||||
|
<option name="LAST_COMMIT_MESSAGE" value="parses xjustiz and orders attachments" />
|
||||||
</component>
|
</component>
|
||||||
<component name="XDebuggerManager">
|
<component name="XDebuggerManager">
|
||||||
<breakpoint-manager>
|
<breakpoint-manager>
|
||||||
|
|||||||
+2
-1
@@ -32,6 +32,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@skeletonlabs/skeleton": "^4.15.2",
|
"@skeletonlabs/skeleton": "^4.15.2",
|
||||||
"@skeletonlabs/skeleton-svelte": "^4.15.2",
|
"@skeletonlabs/skeleton-svelte": "^4.15.2",
|
||||||
"fflate": "^0.8.3"
|
"fflate": "^0.8.3",
|
||||||
|
"pdfjs-dist": "^6.0.227"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Generated
+134
@@ -17,6 +17,9 @@ importers:
|
|||||||
fflate:
|
fflate:
|
||||||
specifier: ^0.8.3
|
specifier: ^0.8.3
|
||||||
version: 0.8.3
|
version: 0.8.3
|
||||||
|
pdfjs-dist:
|
||||||
|
specifier: ^6.0.227
|
||||||
|
version: 6.0.227
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@sveltejs/adapter-auto':
|
'@sveltejs/adapter-auto':
|
||||||
specifier: ^7.0.1
|
specifier: ^7.0.1
|
||||||
@@ -100,6 +103,81 @@ packages:
|
|||||||
'@jridgewell/trace-mapping@0.3.31':
|
'@jridgewell/trace-mapping@0.3.31':
|
||||||
resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
|
resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
|
||||||
|
|
||||||
|
'@napi-rs/canvas-android-arm64@1.0.0':
|
||||||
|
resolution: {integrity: sha512-3hNKJObUK7JsCF9aJlVCs1J0/KE/gGfZNeK8MO1ge6bB3aicr5walGme9t9No1f/oyk9GgvdAT/rjSdsx3gbIw==}
|
||||||
|
engines: {node: '>= 10'}
|
||||||
|
cpu: [arm64]
|
||||||
|
os: [android]
|
||||||
|
|
||||||
|
'@napi-rs/canvas-darwin-arm64@1.0.0':
|
||||||
|
resolution: {integrity: sha512-ZIja19/BiGz2puhki+WUYSRriwFeFJ8Mi9eK3hZdSS85w4Y60cuEAJVhMCfKwswQkKkUtrnzdKMBuO7TupvexA==}
|
||||||
|
engines: {node: '>= 10'}
|
||||||
|
cpu: [arm64]
|
||||||
|
os: [darwin]
|
||||||
|
|
||||||
|
'@napi-rs/canvas-darwin-x64@1.0.0':
|
||||||
|
resolution: {integrity: sha512-hImggWc82jqZVpEsFR9S7PE9OQYjq/H/D7vwCGB6X1jRH+UVBP1+1niJTPBOat1B154T6GKK7/kcFtoWgjgFzQ==}
|
||||||
|
engines: {node: '>= 10'}
|
||||||
|
cpu: [x64]
|
||||||
|
os: [darwin]
|
||||||
|
|
||||||
|
'@napi-rs/canvas-linux-arm-gnueabihf@1.0.0':
|
||||||
|
resolution: {integrity: sha512-hlJRy6d+kWLKVOG/+1rEvNQVURZ0DxxRPJsLmEWwhwiXZUJc0BF5o9esALHSEP4CoJK4wChRtj3hnyBgVx2oWA==}
|
||||||
|
engines: {node: '>= 10'}
|
||||||
|
cpu: [arm]
|
||||||
|
os: [linux]
|
||||||
|
|
||||||
|
'@napi-rs/canvas-linux-arm64-gnu@1.0.0':
|
||||||
|
resolution: {integrity: sha512-5Hru4T3RXkosRQafcjelv7AUzw9mXqmGYsxnzeDDOWveFCJyEPMSJltvGCM+jfH98seOCbfwm9KyFg6Jm5FhAA==}
|
||||||
|
engines: {node: '>= 10'}
|
||||||
|
cpu: [arm64]
|
||||||
|
os: [linux]
|
||||||
|
libc: [glibc]
|
||||||
|
|
||||||
|
'@napi-rs/canvas-linux-arm64-musl@1.0.0':
|
||||||
|
resolution: {integrity: sha512-LTUl9jS8WsLSUGaxQZKQkxfluOJRpgvBuxxdM4pYcjib+di8AU4OzQc6+L6SzGMLcKc9H0RAjojRatBhTMqYdg==}
|
||||||
|
engines: {node: '>= 10'}
|
||||||
|
cpu: [arm64]
|
||||||
|
os: [linux]
|
||||||
|
libc: [musl]
|
||||||
|
|
||||||
|
'@napi-rs/canvas-linux-riscv64-gnu@1.0.0':
|
||||||
|
resolution: {integrity: sha512-Iz931SAZf+WVDzpjk52Q3ffW3zw0YflFwEZMgs036Wfu1kX/LrwT9wGjsuSqyduqefUkl91/vTdAjn8hQu5ezA==}
|
||||||
|
engines: {node: '>= 10'}
|
||||||
|
cpu: [riscv64]
|
||||||
|
os: [linux]
|
||||||
|
libc: [glibc]
|
||||||
|
|
||||||
|
'@napi-rs/canvas-linux-x64-gnu@1.0.0':
|
||||||
|
resolution: {integrity: sha512-pFEQ5eFK4JusgN1K6KkO9DKP/Hi1WMJOkF8Ch03/khTc4bFbCKkCCsJG4YcOMOW9bI4XbT2/eMAWxhO0xaWgPA==}
|
||||||
|
engines: {node: '>= 10'}
|
||||||
|
cpu: [x64]
|
||||||
|
os: [linux]
|
||||||
|
libc: [glibc]
|
||||||
|
|
||||||
|
'@napi-rs/canvas-linux-x64-musl@1.0.0':
|
||||||
|
resolution: {integrity: sha512-jnvr8NrLHiZ3NCiOKWqDbkI4Ah+QDrqtZ+sddPZBltEb1mQ2coSvCSJYfict+oAwcm0c970oTmVySpjKP/lnaA==}
|
||||||
|
engines: {node: '>= 10'}
|
||||||
|
cpu: [x64]
|
||||||
|
os: [linux]
|
||||||
|
libc: [musl]
|
||||||
|
|
||||||
|
'@napi-rs/canvas-win32-arm64-msvc@1.0.0':
|
||||||
|
resolution: {integrity: sha512-y2j9/Gfd5joqiqxdP/L1smqjQ+uAx3C4N0EC7bDHrnZEEH8ToM/OC5p3uHvtj4Lq591aHj+ArL01UDLNwT5HgQ==}
|
||||||
|
engines: {node: '>= 10'}
|
||||||
|
cpu: [arm64]
|
||||||
|
os: [win32]
|
||||||
|
|
||||||
|
'@napi-rs/canvas-win32-x64-msvc@1.0.0':
|
||||||
|
resolution: {integrity: sha512-qwdhh9N6Gge/hC4pL9S1tQp0iKwhSl/dYjg7+RGp9k26iRGRi5MqqUyKGOXIWli0zOcuy5Y2wIH/jk2ry6i/jA==}
|
||||||
|
engines: {node: '>= 10'}
|
||||||
|
cpu: [x64]
|
||||||
|
os: [win32]
|
||||||
|
|
||||||
|
'@napi-rs/canvas@1.0.0':
|
||||||
|
resolution: {integrity: sha512-Jqxcy1XOIqj+lH9sl1GT+il6GR3uQv13vI2mrwubP3uT8Olak2ClDrK2RnxlQKjwv8BRr4b3ug0YR7c6hBX8wg==}
|
||||||
|
engines: {node: '>= 10'}
|
||||||
|
|
||||||
'@napi-rs/wasm-runtime@1.1.5':
|
'@napi-rs/wasm-runtime@1.1.5':
|
||||||
resolution: {integrity: sha512-AWPoBRJ9tsnVhor4sjO7rkni+7p+2IAEFj6cx06UgP10jkQHqay/36uRV/bFkgrh18D9vb4cr8Q0Pthskgzy+Q==}
|
resolution: {integrity: sha512-AWPoBRJ9tsnVhor4sjO7rkni+7p+2IAEFj6cx06UgP10jkQHqay/36uRV/bFkgrh18D9vb4cr8Q0Pthskgzy+Q==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
@@ -720,6 +798,10 @@ packages:
|
|||||||
resolution: {integrity: sha512-AWGB9WFcRXOQs48Z/udjI5ZcZMHXwX8XPByNpOydgcGsDLIzjGizhoMWJyKAWze7AVW/2W1i+/gPX4YtKe5cyg==}
|
resolution: {integrity: sha512-AWGB9WFcRXOQs48Z/udjI5ZcZMHXwX8XPByNpOydgcGsDLIzjGizhoMWJyKAWze7AVW/2W1i+/gPX4YtKe5cyg==}
|
||||||
engines: {node: '>=12.20.0'}
|
engines: {node: '>=12.20.0'}
|
||||||
|
|
||||||
|
pdfjs-dist@6.0.227:
|
||||||
|
resolution: {integrity: sha512-/P6M4SXw+70waMVLUM7rdRtvo+dEzqE1t6W/zQNvBETo2MaRa5rrvCcAYdfWGiUzadTgM0lJmRApUrW0d9zgKg==}
|
||||||
|
engines: {node: '>=22.13.0 || >=24'}
|
||||||
|
|
||||||
picocolors@1.1.1:
|
picocolors@1.1.1:
|
||||||
resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
|
resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
|
||||||
|
|
||||||
@@ -973,6 +1055,54 @@ snapshots:
|
|||||||
'@jridgewell/resolve-uri': 3.1.2
|
'@jridgewell/resolve-uri': 3.1.2
|
||||||
'@jridgewell/sourcemap-codec': 1.5.5
|
'@jridgewell/sourcemap-codec': 1.5.5
|
||||||
|
|
||||||
|
'@napi-rs/canvas-android-arm64@1.0.0':
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
'@napi-rs/canvas-darwin-arm64@1.0.0':
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
'@napi-rs/canvas-darwin-x64@1.0.0':
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
'@napi-rs/canvas-linux-arm-gnueabihf@1.0.0':
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
'@napi-rs/canvas-linux-arm64-gnu@1.0.0':
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
'@napi-rs/canvas-linux-arm64-musl@1.0.0':
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
'@napi-rs/canvas-linux-riscv64-gnu@1.0.0':
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
'@napi-rs/canvas-linux-x64-gnu@1.0.0':
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
'@napi-rs/canvas-linux-x64-musl@1.0.0':
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
'@napi-rs/canvas-win32-arm64-msvc@1.0.0':
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
'@napi-rs/canvas-win32-x64-msvc@1.0.0':
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
'@napi-rs/canvas@1.0.0':
|
||||||
|
optionalDependencies:
|
||||||
|
'@napi-rs/canvas-android-arm64': 1.0.0
|
||||||
|
'@napi-rs/canvas-darwin-arm64': 1.0.0
|
||||||
|
'@napi-rs/canvas-darwin-x64': 1.0.0
|
||||||
|
'@napi-rs/canvas-linux-arm-gnueabihf': 1.0.0
|
||||||
|
'@napi-rs/canvas-linux-arm64-gnu': 1.0.0
|
||||||
|
'@napi-rs/canvas-linux-arm64-musl': 1.0.0
|
||||||
|
'@napi-rs/canvas-linux-riscv64-gnu': 1.0.0
|
||||||
|
'@napi-rs/canvas-linux-x64-gnu': 1.0.0
|
||||||
|
'@napi-rs/canvas-linux-x64-musl': 1.0.0
|
||||||
|
'@napi-rs/canvas-win32-arm64-msvc': 1.0.0
|
||||||
|
'@napi-rs/canvas-win32-x64-msvc': 1.0.0
|
||||||
|
optional: true
|
||||||
|
|
||||||
'@napi-rs/wasm-runtime@1.1.5(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
|
'@napi-rs/wasm-runtime@1.1.5(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@emnapi/core': 1.10.0
|
'@emnapi/core': 1.10.0
|
||||||
@@ -1656,6 +1786,10 @@ snapshots:
|
|||||||
|
|
||||||
obug@2.1.2: {}
|
obug@2.1.2: {}
|
||||||
|
|
||||||
|
pdfjs-dist@6.0.227:
|
||||||
|
optionalDependencies:
|
||||||
|
'@napi-rs/canvas': 1.0.0
|
||||||
|
|
||||||
picocolors@1.1.1: {}
|
picocolors@1.1.1: {}
|
||||||
|
|
||||||
picomatch@4.0.4: {}
|
picomatch@4.0.4: {}
|
||||||
|
|||||||
@@ -0,0 +1,89 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import {onMount} from "svelte";
|
||||||
|
|
||||||
|
import type {ZipAttachment} from "$lib/zip-processing";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
attachment: ZipAttachment;
|
||||||
|
};
|
||||||
|
|
||||||
|
let {attachment}: Props = $props();
|
||||||
|
|
||||||
|
let canvasElement = $state<HTMLCanvasElement | null>(null);
|
||||||
|
let imageUrl = $state<string | null>(null);
|
||||||
|
let previewError = $state<string | null>(null);
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
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;
|
||||||
|
|
||||||
|
|
||||||
|
const loadPreview = async () => {
|
||||||
|
previewError = null;
|
||||||
|
|
||||||
|
if (attachment.kind === "image") {
|
||||||
|
objectUrl = URL.createObjectURL(new Blob([attachment.data as unknown as ArrayBuffer]));
|
||||||
|
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);
|
||||||
|
|
||||||
|
if (cancelled || !canvasElement) {
|
||||||
|
void loadingTask.destroy();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const viewport = page.getViewport({scale: 1.2});
|
||||||
|
|
||||||
|
canvasElement.width = viewport.width;
|
||||||
|
canvasElement.height = viewport.height;
|
||||||
|
|
||||||
|
await page.render({
|
||||||
|
canvas: canvasElement,
|
||||||
|
viewport,
|
||||||
|
}).promise;
|
||||||
|
|
||||||
|
await loadingTask.destroy();
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Failed to render preview for ${attachment.path}`, error);
|
||||||
|
previewError = "PDF-Vorschau konnte nicht geladen werden.";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
void loadPreview();
|
||||||
|
})
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
if (objectUrl) URL.revokeObjectURL(objectUrl);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#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"
|
||||||
|
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">
|
||||||
|
{previewError}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<canvas bind:this={canvasElement} class="w-full rounded-md border border-primary-100 bg-white"></canvas>
|
||||||
|
{/if}
|
||||||
@@ -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>
|
||||||
+14
-6
@@ -1,5 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Card from "$lib/components/Card.svelte";
|
import Card from "$lib/components/Card.svelte";
|
||||||
|
import ProcessedZipArchiveEditor from "$lib/components/ProcessedZipArchiveEditor.svelte";
|
||||||
import ZipDropzone from "$lib/components/ZipDropzone.svelte";
|
import ZipDropzone from "$lib/components/ZipDropzone.svelte";
|
||||||
import { extractZipArchive, type ProcessedZipArchive } from "$lib/zip-processing";
|
import { extractZipArchive, type ProcessedZipArchive } from "$lib/zip-processing";
|
||||||
|
|
||||||
@@ -27,6 +28,12 @@
|
|||||||
pendingZipCount -= 1;
|
pendingZipCount -= 1;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const updateProcessedZipFile = (index: number, archive: ProcessedZipArchive) => {
|
||||||
|
processedZipFiles = processedZipFiles.map((existingArchive, existingIndex) =>
|
||||||
|
existingIndex === index ? archive : existingArchive,
|
||||||
|
);
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#snippet content()}
|
{#snippet content()}
|
||||||
@@ -48,13 +55,14 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if processedZipFiles.length > 0}
|
{#if processedZipFiles.length > 0}
|
||||||
<ul class="space-y-2">
|
<div class="flex flex-col gap-4">
|
||||||
{#each processedZipFiles as file}
|
{#each processedZipFiles as file, index}
|
||||||
<li class="rounded-container bg-primary-50 px-4 py-3 text-[14px] font-medium text-primary-900">
|
<ProcessedZipArchiveEditor
|
||||||
{file.name} - {file.attachments.length} relevante Datei{file.attachments.length === 1 ? "" : "en"}
|
archive={file}
|
||||||
</li>
|
onArchiveChange={(updatedArchive) => updateProcessedZipFile(index, updatedArchive)}
|
||||||
|
/>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user