4229e952fb
Tags were silently dropped because the metadata object built in save() never included a tagNames field; they never reached the backend. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
274 lines
8.6 KiB
Svelte
274 lines
8.6 KiB
Svelte
<script lang="ts">
|
|
import { SvelteMap } from 'svelte/reactivity';
|
|
import { goto } from '$app/navigation';
|
|
import { onDestroy, untrack } from 'svelte';
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
import BulkDropZone from './BulkDropZone.svelte';
|
|
import FileSwitcherStrip from './FileSwitcherStrip.svelte';
|
|
import type { FileEntry } from './FileSwitcherStrip.svelte';
|
|
import ScopeCard from './ScopeCard.svelte';
|
|
import UploadSaveBar from './UploadSaveBar.svelte';
|
|
import WhoWhenSection from './WhoWhenSection.svelte';
|
|
import DescriptionSection from './DescriptionSection.svelte';
|
|
import PdfViewer from '$lib/components/PdfViewer.svelte';
|
|
import { bulkTitleFromFilename } from '$lib/utils/filename';
|
|
import type { Tag } from '$lib/components/TagInput.svelte';
|
|
import type { components } from '$lib/generated/api';
|
|
|
|
type Person = components['schemas']['Person'];
|
|
|
|
let {
|
|
initialSenderId = '',
|
|
initialSenderName = '',
|
|
initialReceivers = []
|
|
}: {
|
|
initialSenderId?: string;
|
|
initialSenderName?: string;
|
|
initialReceivers?: Person[];
|
|
} = $props();
|
|
|
|
// --- File state ---
|
|
let files = new SvelteMap<string, FileEntry>();
|
|
let activeId = $state<string | null>(null);
|
|
let chunkProgress = $state<{ done: number; total: number } | undefined>(undefined);
|
|
|
|
// --- Shared metadata ---
|
|
let senderId = $state(untrack(() => initialSenderId));
|
|
let selectedReceivers = $state<Person[]>(untrack(() => initialReceivers));
|
|
let dateIso = $state('');
|
|
let tags = $state<Tag[]>([]);
|
|
|
|
// --- Derived ---
|
|
const isMulti = $derived(files.size >= 2);
|
|
const activeFile = $derived(activeId ? files.get(activeId) : null);
|
|
|
|
// --- File management ---
|
|
function addFiles(newFiles: File[]) {
|
|
for (const file of newFiles) {
|
|
const id = crypto.randomUUID();
|
|
const title = bulkTitleFromFilename(file.name);
|
|
const previewUrl = URL.createObjectURL(file);
|
|
files.set(id, { id, file, title, status: 'idle', previewUrl });
|
|
if (!activeId) activeId = id;
|
|
}
|
|
}
|
|
|
|
function removeFile(id: string) {
|
|
const entry = files.get(id);
|
|
if (entry?.previewUrl) URL.revokeObjectURL(entry.previewUrl);
|
|
files.delete(id);
|
|
if (activeId === id) {
|
|
activeId = files.keys().next().value ?? null;
|
|
}
|
|
}
|
|
|
|
function setTitle(id: string, title: string) {
|
|
const entry = files.get(id);
|
|
if (entry) files.set(id, { ...entry, title });
|
|
}
|
|
|
|
function discardAll() {
|
|
for (const entry of files.values()) {
|
|
if (entry.previewUrl) URL.revokeObjectURL(entry.previewUrl);
|
|
}
|
|
files.clear();
|
|
activeId = null;
|
|
chunkProgress = undefined;
|
|
}
|
|
|
|
onDestroy(() => {
|
|
for (const entry of files.values()) {
|
|
if (entry.previewUrl) URL.revokeObjectURL(entry.previewUrl);
|
|
}
|
|
});
|
|
|
|
// --- Save ---
|
|
async function save() {
|
|
const entries = Array.from(files.values());
|
|
const chunkSize = 10;
|
|
const chunks: FileEntry[][] = [];
|
|
for (let i = 0; i < entries.length; i += chunkSize) {
|
|
chunks.push(entries.slice(i, i + chunkSize));
|
|
}
|
|
chunkProgress = { done: 0, total: chunks.length };
|
|
|
|
for (let i = 0; i < chunks.length; i++) {
|
|
const chunk = chunks[i];
|
|
const formData = new FormData();
|
|
chunk.forEach((entry) => formData.append('files', entry.file));
|
|
const metadata = {
|
|
titles: chunk.map((e) => e.title),
|
|
senderId: senderId || null,
|
|
receiverIds: selectedReceivers.map((r) => r.id),
|
|
documentDate: dateIso || null,
|
|
tagNames: tags.map((t) => t.name)
|
|
};
|
|
formData.append('metadata', new Blob([JSON.stringify(metadata)], { type: 'application/json' }));
|
|
const res = await fetch('/api/documents/quick-upload', { method: 'POST', body: formData });
|
|
if (!res.ok) {
|
|
const body = await res.json().catch(() => ({ errors: [] }));
|
|
const errorCount = (body.errors ?? []).length;
|
|
for (let j = 0; j < errorCount && j < chunk.length; j++) {
|
|
const e = files.get(chunk[j].id);
|
|
if (e) files.set(chunk[j].id, { ...e, status: 'error' });
|
|
}
|
|
}
|
|
chunkProgress = { done: i + 1, total: chunks.length };
|
|
}
|
|
goto('/documents');
|
|
}
|
|
</script>
|
|
|
|
<div class="fixed inset-x-0 bottom-0 flex flex-col" style="top: var(--header-height)">
|
|
<!-- Topbar -->
|
|
<div class="flex shrink-0 items-center gap-3 border-b border-line bg-surface px-6 py-3">
|
|
<a
|
|
href="/documents"
|
|
class="flex items-center gap-1.5 text-xs font-bold tracking-widest text-ink-3 uppercase hover:text-ink"
|
|
>
|
|
<svg
|
|
class="h-3.5 w-3.5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M10 19l-7-7m0 0l7-7m-7 7h18"
|
|
/>
|
|
</svg>
|
|
{m.btn_back_to_overview()}
|
|
</a>
|
|
<span class="text-ink-3" aria-hidden="true">·</span>
|
|
<span class="font-serif text-sm font-bold text-ink">
|
|
{isMulti ? 'Neue Dokumente' : 'Neues Dokument'}
|
|
</span>
|
|
{#if isMulti}
|
|
<span class="ml-auto flex items-center gap-3">
|
|
<span class="rounded-[2px] bg-accent px-2 py-0.5 text-xs font-bold text-primary">
|
|
{m.bulk_count_pill({ count: files.size })}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
data-testid="discard-all-btn"
|
|
onclick={discardAll}
|
|
class="text-xs font-medium text-red-600/70 hover:text-red-700"
|
|
>
|
|
{m.bulk_discard_all()}
|
|
</button>
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Split panel -->
|
|
<div class="flex flex-1 overflow-hidden">
|
|
<!-- Left: PDF preview / drop zone (55%) -->
|
|
<div class="relative flex flex-[55] flex-col overflow-hidden border-r border-line bg-pdf-bg">
|
|
{#if files.size === 0}
|
|
<!-- N=0: centred drop-zone box fills the panel -->
|
|
<BulkDropZone onFilesAdded={addFiles} />
|
|
{:else}
|
|
<!-- N≥1: real PDF preview via local blob URL -->
|
|
<div class="relative flex-1 overflow-hidden">
|
|
{#if activeFile}
|
|
<PdfViewer url={activeFile.previewUrl} />
|
|
{/if}
|
|
</div>
|
|
{#if isMulti}
|
|
<!-- File switcher strip pinned to bottom of left panel -->
|
|
<FileSwitcherStrip
|
|
files={Array.from(files.values())}
|
|
activeId={activeId ?? ''}
|
|
onSelect={(id) => (activeId = id)}
|
|
onRemove={removeFile}
|
|
/>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Right: metadata form (45%) -->
|
|
<div class="flex flex-[45] flex-col overflow-hidden">
|
|
<!-- Scrollable form area — greyed out and non-interactive when no files selected -->
|
|
<div
|
|
class="flex-1 space-y-4 overflow-y-auto p-4 transition-opacity"
|
|
class:opacity-60={files.size === 0}
|
|
class:pointer-events-none={files.size === 0}
|
|
>
|
|
{#if isMulti}
|
|
<!-- N≥2: per-file card (title) + shared card (metadata) -->
|
|
<ScopeCard variant="per-file">
|
|
{#if activeFile}
|
|
<label class="block">
|
|
<span class="mb-1 block text-xs font-medium tracking-widest text-ink-2 uppercase">
|
|
{m.form_label_title()} <span class="text-danger">*</span>
|
|
</span>
|
|
<input
|
|
type="text"
|
|
value={activeFile.title}
|
|
oninput={(e) =>
|
|
setTitle(activeId!, (e.currentTarget as HTMLInputElement).value)}
|
|
class="block w-full rounded-sm border border-line bg-surface p-2 text-sm focus:border-accent focus:outline-none"
|
|
/>
|
|
</label>
|
|
{/if}
|
|
</ScopeCard>
|
|
|
|
<ScopeCard variant="shared" count={files.size}>
|
|
<WhoWhenSection
|
|
bind:senderId={senderId}
|
|
bind:selectedReceivers={selectedReceivers}
|
|
bind:dateIso={dateIso}
|
|
initialSenderName={initialSenderName}
|
|
/>
|
|
<DescriptionSection bind:tags={tags} hideTitle />
|
|
</ScopeCard>
|
|
{:else}
|
|
<!-- N=0 (disabled placeholder) or N=1 (active): title + shared form -->
|
|
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
|
|
<label class="block">
|
|
<span class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase">
|
|
{m.form_label_title()} <span class="text-danger">*</span>
|
|
</span>
|
|
{#if activeFile}
|
|
<input
|
|
type="text"
|
|
value={activeFile.title}
|
|
oninput={(e) =>
|
|
setTitle(activeId!, (e.currentTarget as HTMLInputElement).value)}
|
|
class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
|
/>
|
|
{:else}
|
|
<input
|
|
type="text"
|
|
disabled
|
|
placeholder="—"
|
|
class="block w-full rounded border border-line p-2 text-sm text-ink-3 shadow-sm"
|
|
/>
|
|
{/if}
|
|
</label>
|
|
</div>
|
|
|
|
<WhoWhenSection
|
|
bind:senderId={senderId}
|
|
bind:selectedReceivers={selectedReceivers}
|
|
bind:dateIso={dateIso}
|
|
initialSenderName={initialSenderName}
|
|
/>
|
|
<DescriptionSection bind:tags={tags} hideTitle />
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Action bar: always visible at bottom of right panel -->
|
|
<UploadSaveBar
|
|
fileCount={files.size}
|
|
chunkProgress={chunkProgress}
|
|
onSave={save}
|
|
onDiscard={discardAll}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|