feat(edit): unify edit page with enrich split-panel layout
Extract DocumentEditLayout shared component for the PDF+form split-panel UI, replacing the old scrolling layout on /documents/[id]/edit with the same fixed-panel structure used by /enrich/[id]. Removes TranscriptionSection and FileSectionEdit from the edit page; file upload/replace is now handled by the shared layout. Delete SaveBar and FileSectionEdit as dead code. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
221
frontend/src/lib/components/document/DocumentEditLayout.svelte
Normal file
221
frontend/src/lib/components/document/DocumentEditLayout.svelte
Normal file
@@ -0,0 +1,221 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { invalidate } from '$app/navigation';
|
||||
import { onMount, onDestroy, untrack } from 'svelte';
|
||||
import type { Snippet } from 'svelte';
|
||||
import { createFileLoader } from '$lib/hooks/useFileLoader.svelte';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import { countRequiredFilled } from '$lib/utils/requiredFields';
|
||||
import DocumentViewer from '$lib/components/DocumentViewer.svelte';
|
||||
import UploadZone from '$lib/components/document/UploadZone.svelte';
|
||||
import WhoWhenSection from '$lib/components/document/WhoWhenSection.svelte';
|
||||
import DescriptionSection from '$lib/components/document/DescriptionSection.svelte';
|
||||
import type { Tag } from '$lib/components/TagInput.svelte';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type Person = components['schemas']['Person'];
|
||||
|
||||
let {
|
||||
doc,
|
||||
formId,
|
||||
formAction,
|
||||
formError = null,
|
||||
tags = $bindable<Tag[]>([]),
|
||||
senderId = $bindable(''),
|
||||
selectedReceivers = $bindable<Person[]>([]),
|
||||
dateIso = $bindable(''),
|
||||
currentTitle = $bindable(''),
|
||||
topbar,
|
||||
actionbar
|
||||
}: {
|
||||
doc: {
|
||||
id: string;
|
||||
filePath?: string | null;
|
||||
originalFilename?: string | null;
|
||||
title?: string | null;
|
||||
documentDate?: string | null;
|
||||
location?: string | null;
|
||||
documentLocation?: string | null;
|
||||
summary?: string | null;
|
||||
sender?: { id: string; displayName: string } | null;
|
||||
receivers?: Person[] | null;
|
||||
tags?: Tag[] | null;
|
||||
};
|
||||
formId: string;
|
||||
formAction: string;
|
||||
formError?: string | null;
|
||||
tags?: Tag[];
|
||||
senderId?: string;
|
||||
selectedReceivers?: Person[];
|
||||
dateIso?: string;
|
||||
currentTitle?: string;
|
||||
topbar: Snippet;
|
||||
actionbar: Snippet;
|
||||
} = $props();
|
||||
|
||||
tags = untrack(() => (doc.tags as Tag[]) ?? []);
|
||||
senderId = untrack(() => doc.sender?.id ?? '');
|
||||
selectedReceivers = untrack(() => (doc.receivers as Person[]) ?? []);
|
||||
dateIso = untrack(() => doc.documentDate ?? '');
|
||||
currentTitle = untrack(() => doc.title ?? '');
|
||||
|
||||
const fileLoader = createFileLoader();
|
||||
let navHeight = $state(0);
|
||||
onMount(() => {
|
||||
navHeight = document.querySelector('header')?.getBoundingClientRect().height ?? 0;
|
||||
});
|
||||
let activeAnnotationId = $state<string | null>(null);
|
||||
|
||||
$effect(() => {
|
||||
if (doc?.id && doc?.filePath) {
|
||||
fileLoader.loadFile(`/api/documents/${doc.id}/file`);
|
||||
}
|
||||
});
|
||||
onDestroy(() => fileLoader.destroy());
|
||||
|
||||
const requiredFilled = $derived(countRequiredFilled(currentTitle, dateIso, senderId));
|
||||
const requiredPct = $derived((requiredFilled / 3) * 100);
|
||||
|
||||
let isUploading = $state(false);
|
||||
let isDragging = $state(false);
|
||||
let uploadError = $state<string | null>(null);
|
||||
let abortController = $state<AbortController | null>(null);
|
||||
|
||||
async function handleFile(file: File) {
|
||||
uploadError = null;
|
||||
isUploading = true;
|
||||
const controller = new AbortController();
|
||||
abortController = controller;
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
const res = await fetch(`/api/documents/${doc.id}/file`, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
signal: controller.signal
|
||||
});
|
||||
if (!res.ok) throw new Error('Upload fehlgeschlagen');
|
||||
await invalidate('app:document');
|
||||
} catch (e) {
|
||||
if ((e as Error).name === 'AbortError') return;
|
||||
uploadError = m.error_file_upload_failed();
|
||||
} finally {
|
||||
isUploading = false;
|
||||
abortController = null;
|
||||
}
|
||||
}
|
||||
|
||||
function cancelUpload() {
|
||||
abortController?.abort();
|
||||
isUploading = false;
|
||||
}
|
||||
|
||||
async function handleReplaceFile(e: Event) {
|
||||
const file = (e.currentTarget as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
await handleFile(file);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="fixed inset-x-0 bottom-0 flex flex-col" style="top: {navHeight}px">
|
||||
<!-- Top bar — caller-supplied via snippet -->
|
||||
<div class="flex items-center justify-between border-b border-line bg-surface px-6 py-3">
|
||||
{@render topbar()}
|
||||
</div>
|
||||
|
||||
<!-- Required-fields progress bar -->
|
||||
<div class="flex items-center gap-3 border-b border-line bg-surface px-6 py-1.5">
|
||||
<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">Pflichtfelder</span>
|
||||
<div
|
||||
class="h-0.5 flex-1 rounded-full bg-line"
|
||||
role="progressbar"
|
||||
aria-valuenow={requiredFilled}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={3}
|
||||
aria-label="Pflichtfelder"
|
||||
>
|
||||
<div
|
||||
class="h-full rounded-full bg-brand-navy transition-all duration-300"
|
||||
style="width:{requiredPct}%"
|
||||
></div>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-brand-navy">{requiredFilled} / 3</span>
|
||||
</div>
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="flex flex-1 overflow-hidden">
|
||||
<!-- Left: PDF preview / upload zone (60%) -->
|
||||
<div class="relative flex flex-[6] flex-col overflow-hidden border-r border-line">
|
||||
{#if !doc.filePath}
|
||||
<UploadZone
|
||||
filename={doc.originalFilename ?? ''}
|
||||
isUploading={isUploading}
|
||||
bind:isDragging={isDragging}
|
||||
error={uploadError}
|
||||
onFile={handleFile}
|
||||
onCancel={cancelUpload}
|
||||
/>
|
||||
{:else}
|
||||
<!-- Datei ersetzen toolbar -->
|
||||
<div class="flex shrink-0 items-center border-b border-white/10 bg-pdf-bg px-4 py-1.5">
|
||||
<label
|
||||
class="ml-auto flex min-h-[44px] cursor-pointer items-center text-xs font-bold tracking-widest text-white/40 uppercase transition-colors hover:text-white/70"
|
||||
>
|
||||
Datei ersetzen
|
||||
<input type="file" class="sr-only" onchange={handleReplaceFile} />
|
||||
</label>
|
||||
</div>
|
||||
<div class="relative flex-1 overflow-hidden">
|
||||
<DocumentViewer
|
||||
doc={doc}
|
||||
fileUrl={fileLoader.fileUrl}
|
||||
isLoading={fileLoader.isLoading}
|
||||
error={fileLoader.fileError}
|
||||
bind:activeAnnotationId={activeAnnotationId}
|
||||
onAnnotationClick={() => {}}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Right: form (40%) -->
|
||||
<div class="flex flex-[4] flex-col overflow-hidden">
|
||||
{#if formError}
|
||||
<div class="border-b border-red-200 bg-red-50 px-6 py-3 text-sm text-red-700">
|
||||
{formError}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form
|
||||
id={formId}
|
||||
method="POST"
|
||||
action={formAction}
|
||||
enctype="multipart/form-data"
|
||||
use:enhance
|
||||
class="flex-1 space-y-5 overflow-y-auto p-6"
|
||||
>
|
||||
<WhoWhenSection
|
||||
bind:senderId={senderId}
|
||||
bind:selectedReceivers={selectedReceivers}
|
||||
bind:dateIso={dateIso}
|
||||
initialDateIso={doc.documentDate ?? ''}
|
||||
initialLocation={doc.location ?? ''}
|
||||
initialSenderName={doc.sender?.displayName ?? ''}
|
||||
/>
|
||||
<DescriptionSection
|
||||
bind:tags={tags}
|
||||
bind:currentTitle={currentTitle}
|
||||
initialTitle={doc.title ?? ''}
|
||||
initialDocumentLocation={doc.documentLocation ?? ''}
|
||||
initialSummary={doc.summary ?? ''}
|
||||
titleRequired={true}
|
||||
/>
|
||||
</form>
|
||||
|
||||
<!-- Action bar — caller-supplied via snippet -->
|
||||
<div class="flex items-center justify-between gap-3 border-t border-line bg-surface p-4">
|
||||
{@render actionbar()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -4,12 +4,9 @@ import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
|
||||
import PersonMultiSelect from '$lib/components/PersonMultiSelect.svelte';
|
||||
import { isoToGerman, handleGermanDateInput } from '$lib/utils/date';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
interface Person {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
}
|
||||
type Person = components['schemas']['Person'];
|
||||
|
||||
let {
|
||||
senderId = $bindable(''),
|
||||
|
||||
@@ -6,12 +6,15 @@ import { parseBackendError, getErrorMessage } from '$lib/errors';
|
||||
export async function load({
|
||||
params,
|
||||
fetch,
|
||||
locals
|
||||
locals,
|
||||
depends
|
||||
}: {
|
||||
params: { id: string };
|
||||
fetch: typeof globalThis.fetch;
|
||||
locals: App.Locals;
|
||||
depends: (dep: string) => void;
|
||||
}) {
|
||||
depends('app:document');
|
||||
const canWrite =
|
||||
locals.user?.groups?.some((g: { permissions: string[] }) =>
|
||||
g.permissions.includes('WRITE_ALL')
|
||||
|
||||
@@ -1,27 +1,34 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { untrack } from 'svelte';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import WhoWhenSection from '$lib/components/document/WhoWhenSection.svelte';
|
||||
import DescriptionSection from '$lib/components/document/DescriptionSection.svelte';
|
||||
import TranscriptionSection from '$lib/components/document/TranscriptionSection.svelte';
|
||||
import FileSectionEdit from './FileSectionEdit.svelte';
|
||||
import SaveBar from './SaveBar.svelte';
|
||||
import { getConfirmService } from '$lib/services/confirm.svelte.js';
|
||||
import DocumentEditLayout from '$lib/components/document/DocumentEditLayout.svelte';
|
||||
|
||||
let { data, form } = $props();
|
||||
|
||||
let { document: doc } = untrack(() => data);
|
||||
let tags = $state(doc.tags ?? []);
|
||||
let senderId = $state(doc.sender?.id ?? '');
|
||||
let selectedReceivers = $state(doc.receivers ?? []);
|
||||
const doc = $derived(data.document);
|
||||
const { confirm } = getConfirmService();
|
||||
|
||||
async function handleDelete() {
|
||||
const confirmed = await confirm({
|
||||
title: m.doc_delete_confirm(),
|
||||
destructive: true
|
||||
});
|
||||
if (confirmed) {
|
||||
(document.getElementById('delete-form') as HTMLFormElement | null)?.requestSubmit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mx-auto max-w-4xl px-4 py-8">
|
||||
<!-- Heading -->
|
||||
<div class="mb-6">
|
||||
<svelte:head>
|
||||
<title>{doc.title || doc.originalFilename || 'Dokument'} — {m.doc_edit_heading()}</title>
|
||||
</svelte:head>
|
||||
|
||||
<DocumentEditLayout doc={doc} formId="update-form" formAction="?/update" formError={form?.error}>
|
||||
{#snippet topbar()}
|
||||
<a
|
||||
href="/documents/{doc.id}"
|
||||
class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
|
||||
class="group inline-flex items-center font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
|
||||
>
|
||||
<img
|
||||
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
|
||||
@@ -31,43 +38,65 @@ let selectedReceivers = $state(doc.receivers ?? []);
|
||||
/>
|
||||
{m.btn_back_to_document()}
|
||||
</a>
|
||||
<h1 class="font-serif text-3xl text-ink">
|
||||
{m.doc_edit_heading()} —
|
||||
<span class="text-ink/70">{doc.title || doc.originalFilename}</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{#if form?.error}
|
||||
<div class="mb-6 rounded border border-red-200 bg-red-50 p-4 text-red-700">{form.error}</div>
|
||||
{/if}
|
||||
<p class="max-w-sm truncate text-center font-serif text-sm font-medium text-ink">
|
||||
{doc.title || doc.originalFilename}
|
||||
</p>
|
||||
|
||||
<form
|
||||
id="update-form"
|
||||
method="POST"
|
||||
action="?/update"
|
||||
enctype="multipart/form-data"
|
||||
use:enhance
|
||||
class="space-y-6 pb-20"
|
||||
>
|
||||
<WhoWhenSection
|
||||
bind:senderId={senderId}
|
||||
bind:selectedReceivers={selectedReceivers}
|
||||
initialDateIso={doc.documentDate ?? ''}
|
||||
initialLocation={doc.location ?? ''}
|
||||
initialSenderName={doc.sender ? doc.sender.displayName : ''}
|
||||
/>
|
||||
<DescriptionSection
|
||||
bind:tags={tags}
|
||||
initialTitle={doc.title ?? ''}
|
||||
initialDocumentLocation={doc.documentLocation ?? ''}
|
||||
initialSummary={doc.summary ?? ''}
|
||||
titleRequired={true}
|
||||
/>
|
||||
<TranscriptionSection initialTranscription={doc.transcription ?? ''} />
|
||||
<FileSectionEdit originalFilename={doc.originalFilename} />
|
||||
<SaveBar docId={doc.id} />
|
||||
</form>
|
||||
<div class="w-40"></div>
|
||||
{/snippet}
|
||||
|
||||
<form id="mark-for-review-form" method="POST" action="?/markForReview" use:enhance></form>
|
||||
<form id="delete-form" method="POST" action="?/delete" use:enhance></form>
|
||||
</div>
|
||||
{#snippet actionbar()}
|
||||
<button
|
||||
type="button"
|
||||
onclick={handleDelete}
|
||||
class="flex items-center gap-1.5 rounded border border-red-300 px-4 py-1.5 font-sans text-xs font-bold text-red-600 transition-colors hover:border-red-600 hover:bg-red-50"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<polyline points="3 6 5 6 21 6" />
|
||||
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
|
||||
<path d="M10 11v6M14 11v6" />
|
||||
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
|
||||
</svg>
|
||||
{m.btn_delete()}
|
||||
</button>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<a
|
||||
href="/documents/{doc.id}"
|
||||
class="font-sans text-sm font-medium text-ink-2 transition-colors hover:text-ink"
|
||||
>
|
||||
{m.btn_cancel()}
|
||||
</a>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
form="mark-for-review-form"
|
||||
class="rounded-sm border border-gray-300 px-5 py-2 font-sans text-xs font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-gray-50"
|
||||
>
|
||||
{m.btn_mark_for_review()}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
form="update-form"
|
||||
class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
|
||||
>
|
||||
{m.btn_save()}
|
||||
</button>
|
||||
</div>
|
||||
{/snippet}
|
||||
</DocumentEditLayout>
|
||||
|
||||
<form id="mark-for-review-form" method="POST" action="?/markForReview" use:enhance></form>
|
||||
<form id="delete-form" method="POST" action="?/delete" use:enhance></form>
|
||||
|
||||
@@ -1,62 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
let { originalFilename }: { originalFilename: string } = $props();
|
||||
|
||||
let selectedFilename = $state<string | null>(null);
|
||||
|
||||
function handleFileChange(e: Event) {
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
selectedFilename = file?.name ?? null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="rounded-sm border border-line bg-surface shadow-sm">
|
||||
<div class="border-b border-line px-6 py-4">
|
||||
<h2 class="text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.doc_section_file()}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Current file -->
|
||||
<div class="flex items-center gap-3 border-b border-line px-6 py-3 text-sm text-ink-2">
|
||||
<img
|
||||
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="h-4 w-4 flex-shrink-0"
|
||||
/>
|
||||
<span
|
||||
>{m.doc_current_file_label()}
|
||||
<strong class="font-medium text-ink">{originalFilename}</strong></span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Replace file upload zone -->
|
||||
<label
|
||||
for="file-upload"
|
||||
class="flex cursor-pointer flex-col items-center gap-3 px-6 py-8 transition-colors hover:bg-muted/40"
|
||||
>
|
||||
<svg
|
||||
class="h-8 w-8 text-ink-3"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
|
||||
/>
|
||||
</svg>
|
||||
{#if selectedFilename}
|
||||
<span class="text-sm font-medium text-ink">{selectedFilename}</span>
|
||||
{:else}
|
||||
<span class="text-sm font-medium text-ink-2">{m.doc_file_replace_label()}</span>
|
||||
<span class="text-xs text-ink-3">{m.doc_file_replace_note()}</span>
|
||||
{/if}
|
||||
</label>
|
||||
<input id="file-upload" type="file" name="file" onchange={handleFileChange} class="sr-only" />
|
||||
</div>
|
||||
@@ -1,76 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import { getConfirmService } from '$lib/services/confirm.svelte.js';
|
||||
|
||||
let { docId }: { docId: string } = $props();
|
||||
|
||||
const { confirm } = getConfirmService();
|
||||
|
||||
async function handleDelete() {
|
||||
const confirmed = await confirm({
|
||||
title: m.doc_delete_confirm(),
|
||||
destructive: true
|
||||
});
|
||||
if (confirmed) {
|
||||
(document.getElementById('delete-form') as HTMLFormElement | null)?.requestSubmit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="sticky bottom-0 z-10 -mx-4 border-t border-line bg-surface px-4 py-3 shadow-[0_-2px_8px_rgba(0,0,0,0.06)] sm:px-6 sm:py-4"
|
||||
>
|
||||
<!-- Desktop: delete left, cancel+buttons right -->
|
||||
<!-- Mobile: action buttons stacked full-width, delete+cancel row at bottom -->
|
||||
<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<!-- Primary actions first (top on mobile, right on desktop) -->
|
||||
<div class="flex flex-col gap-2 sm:order-last sm:flex-row sm:items-center sm:gap-4">
|
||||
<button
|
||||
type="submit"
|
||||
form="mark-for-review-form"
|
||||
class="w-full rounded-sm border border-line px-4 py-2.5 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted sm:w-auto sm:py-2"
|
||||
>
|
||||
{m.btn_mark_for_review()}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full rounded bg-primary px-6 py-2.5 font-sans text-sm font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/80 sm:w-auto sm:py-2"
|
||||
>
|
||||
{m.btn_save()}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Secondary: delete + cancel -->
|
||||
<div class="flex items-center justify-between sm:justify-start sm:gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onclick={handleDelete}
|
||||
class="flex items-center gap-1.5 rounded border border-red-300 px-4 py-1.5 text-sm font-bold text-red-600 transition-colors hover:border-red-600 hover:bg-red-50"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<polyline points="3 6 5 6 21 6" />
|
||||
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
|
||||
<path d="M10 11v6M14 11v6" />
|
||||
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
|
||||
</svg>
|
||||
{m.btn_delete()}
|
||||
</button>
|
||||
<a
|
||||
href="/documents/{docId}"
|
||||
class="text-sm font-medium text-ink-2 transition-colors hover:text-ink"
|
||||
>
|
||||
{m.btn_cancel()}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,92 +0,0 @@
|
||||
import { describe, it, expect, vi, afterEach } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import SaveBar from './SaveBar.svelte';
|
||||
import { createConfirmService, CONFIRM_KEY } from '$lib/services/confirm.svelte.js';
|
||||
|
||||
let appendedForms: HTMLFormElement[] = [];
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
appendedForms.forEach((f) => f.remove());
|
||||
appendedForms = [];
|
||||
});
|
||||
|
||||
function renderSaveBar(docId = 'doc-1') {
|
||||
const service = createConfirmService();
|
||||
|
||||
// Mount a dummy delete form so SaveBar can find it via document.getElementById
|
||||
const deleteForm = document.createElement('form');
|
||||
deleteForm.id = 'delete-form';
|
||||
document.body.appendChild(deleteForm);
|
||||
appendedForms.push(deleteForm);
|
||||
|
||||
const result = render(SaveBar, {
|
||||
props: { docId },
|
||||
context: new Map([[CONFIRM_KEY, service]])
|
||||
});
|
||||
|
||||
return { ...result, service, deleteForm };
|
||||
}
|
||||
|
||||
// ─── Rendering ────────────────────────────────────────────────────────────────
|
||||
|
||||
describe('SaveBar — rendering', () => {
|
||||
it('renders save button', async () => {
|
||||
renderSaveBar();
|
||||
await expect.element(page.getByRole('button', { name: /Speichern/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders delete button', async () => {
|
||||
renderSaveBar();
|
||||
// The delete button should be type="button" (async confirm flow)
|
||||
const deleteBtn = document.querySelector('button[type="button"]');
|
||||
expect(deleteBtn).not.toBeNull();
|
||||
});
|
||||
|
||||
it('renders cancel link pointing to /documents/doc-1', async () => {
|
||||
renderSaveBar();
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: /Abbrechen/i }))
|
||||
.toHaveAttribute('href', '/documents/doc-1');
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Delete confirmation ──────────────────────────────────────────────────────
|
||||
|
||||
describe('SaveBar — delete confirmation', () => {
|
||||
it('opens confirm dialog when delete button is clicked', async () => {
|
||||
const { service } = renderSaveBar();
|
||||
const deleteBtn = document.querySelectorAll<HTMLButtonElement>('button[type="button"]')[0];
|
||||
deleteBtn.click();
|
||||
await vi.waitFor(() => expect(service.options).not.toBeNull());
|
||||
expect(service.options?.destructive).toBe(true);
|
||||
service.settle(false);
|
||||
});
|
||||
|
||||
it('submits delete form when user confirms', async () => {
|
||||
const { service, deleteForm } = renderSaveBar();
|
||||
const requestSubmit = vi.spyOn(deleteForm, 'requestSubmit').mockImplementation(() => {});
|
||||
|
||||
const deleteBtn = document.querySelectorAll<HTMLButtonElement>('button[type="button"]')[0];
|
||||
deleteBtn.click();
|
||||
await vi.waitFor(() => expect(service.options).not.toBeNull());
|
||||
service.settle(true);
|
||||
await vi.waitFor(() => expect(service.options).toBeNull());
|
||||
|
||||
expect(requestSubmit).toHaveBeenCalledOnce();
|
||||
});
|
||||
|
||||
it('does not submit delete form when user cancels', async () => {
|
||||
const { service, deleteForm } = renderSaveBar();
|
||||
const requestSubmit = vi.spyOn(deleteForm, 'requestSubmit').mockImplementation(() => {});
|
||||
|
||||
const deleteBtn = document.querySelectorAll<HTMLButtonElement>('button[type="button"]')[0];
|
||||
deleteBtn.click();
|
||||
await vi.waitFor(() => expect(service.options).not.toBeNull());
|
||||
service.settle(false);
|
||||
await vi.waitFor(() => expect(service.options).toBeNull());
|
||||
|
||||
expect(requestSubmit).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -1,101 +1,19 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { invalidate } from '$app/navigation';
|
||||
import { onMount, onDestroy, untrack } from 'svelte';
|
||||
import { createFileLoader } from '$lib/hooks/useFileLoader.svelte';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import { countRequiredFilled } from '$lib/utils/requiredFields';
|
||||
import DocumentViewer from '$lib/components/DocumentViewer.svelte';
|
||||
import UploadZone from '$lib/components/document/UploadZone.svelte';
|
||||
import WhoWhenSection from '$lib/components/document/WhoWhenSection.svelte';
|
||||
import DescriptionSection from '$lib/components/document/DescriptionSection.svelte';
|
||||
import DocumentEditLayout from '$lib/components/document/DocumentEditLayout.svelte';
|
||||
|
||||
let { data, form } = $props();
|
||||
|
||||
const doc = $derived(data.document);
|
||||
|
||||
// File preview state
|
||||
const fileLoader = createFileLoader();
|
||||
|
||||
let navHeight = $state(0);
|
||||
onMount(() => {
|
||||
navHeight = document.querySelector('header')?.getBoundingClientRect().height ?? 0;
|
||||
});
|
||||
|
||||
// Dummy bindable state required by DocumentViewer
|
||||
let annotateMode = $state(false);
|
||||
let activeAnnotationId = $state<string | null>(null);
|
||||
let activeAnnotationPage = $state<number | null>(null);
|
||||
|
||||
$effect(() => {
|
||||
if (doc?.id && doc?.filePath) {
|
||||
fileLoader.loadFile(`/api/documents/${doc.id}/file`);
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(() => fileLoader.destroy());
|
||||
|
||||
// Form state
|
||||
let tags = $state(untrack(() => doc.tags ?? []));
|
||||
let senderId = $state(untrack(() => doc.sender?.id ?? ''));
|
||||
let selectedReceivers = $state(untrack(() => doc.receivers ?? []));
|
||||
|
||||
// Progress bar state — bound from child components
|
||||
let dateIso = $state(untrack(() => doc.documentDate ?? ''));
|
||||
let currentTitle = $state(untrack(() => doc.title ?? ''));
|
||||
|
||||
const requiredFilled = $derived(countRequiredFilled(currentTitle, dateIso, senderId));
|
||||
const requiredPct = $derived((requiredFilled / 3) * 100);
|
||||
|
||||
// Upload state machine
|
||||
let isUploading = $state(false);
|
||||
let isDragging = $state(false);
|
||||
let uploadError = $state<string | null>(null);
|
||||
let abortController = $state<AbortController | null>(null);
|
||||
|
||||
async function handleFile(file: File) {
|
||||
uploadError = null;
|
||||
isUploading = true;
|
||||
const controller = new AbortController();
|
||||
abortController = controller;
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
const res = await fetch(`/api/documents/${doc.id}/file`, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
signal: controller.signal
|
||||
});
|
||||
if (!res.ok) throw new Error('Upload fehlgeschlagen');
|
||||
await invalidate('app:document');
|
||||
} catch (e) {
|
||||
if ((e as Error).name === 'AbortError') return;
|
||||
uploadError = m.error_file_upload_failed();
|
||||
} finally {
|
||||
isUploading = false;
|
||||
abortController = null;
|
||||
}
|
||||
}
|
||||
|
||||
function cancelUpload() {
|
||||
abortController?.abort();
|
||||
isUploading = false;
|
||||
}
|
||||
|
||||
async function handleReplaceFile(e: Event) {
|
||||
const file = (e.currentTarget as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
await handleFile(file);
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{doc.title || doc.originalFilename || 'Dokument'} — Anreicherung</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="fixed inset-x-0 bottom-0 flex flex-col" style="top: {navHeight}px">
|
||||
<!-- Top bar -->
|
||||
<div class="flex items-center justify-between border-b border-line bg-surface px-6 py-3">
|
||||
<DocumentEditLayout doc={doc} formId="save-form" formAction="?/save" formError={form?.error}>
|
||||
{#snippet topbar()}
|
||||
<a
|
||||
href="/enrich"
|
||||
class="group inline-flex items-center font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
|
||||
@@ -116,133 +34,37 @@ async function handleReplaceFile(e: Event) {
|
||||
<p class="font-sans text-xs text-ink-3">
|
||||
{m.enrich_progress({ count: data.incompleteCount })}
|
||||
</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
<!-- Required-fields progress bar -->
|
||||
<div class="flex items-center gap-3 border-b border-line bg-surface px-6 py-1.5">
|
||||
<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">Pflichtfelder</span>
|
||||
<div
|
||||
class="h-0.5 flex-1 rounded-full bg-line"
|
||||
role="progressbar"
|
||||
aria-valuenow={requiredFilled}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={3}
|
||||
aria-label="Pflichtfelder"
|
||||
{#snippet actionbar()}
|
||||
<button
|
||||
type="submit"
|
||||
form="skip-form"
|
||||
class="font-sans text-sm font-medium text-ink-2 transition-colors hover:text-ink"
|
||||
>
|
||||
<div
|
||||
class="h-full rounded-full bg-brand-navy transition-all duration-300"
|
||||
style="width:{requiredPct}%"
|
||||
></div>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-brand-navy">{requiredFilled} / 3</span>
|
||||
</div>
|
||||
{m.enrich_skip()}
|
||||
</button>
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="flex flex-1 overflow-hidden">
|
||||
<!-- Left: PDF preview / upload zone (60%) -->
|
||||
<div class="relative flex flex-[6] flex-col overflow-hidden border-r border-line">
|
||||
{#if !doc.filePath}
|
||||
<UploadZone
|
||||
filename={doc.originalFilename}
|
||||
isUploading={isUploading}
|
||||
bind:isDragging={isDragging}
|
||||
error={uploadError}
|
||||
onFile={handleFile}
|
||||
onCancel={cancelUpload}
|
||||
/>
|
||||
{:else}
|
||||
<!-- Datei ersetzen toolbar (ghost button above PDF) -->
|
||||
<div class="flex shrink-0 items-center border-b border-white/10 bg-pdf-bg px-4 py-1.5">
|
||||
<label
|
||||
class="ml-auto flex min-h-[44px] cursor-pointer items-center text-xs font-bold tracking-widest text-white/40 uppercase transition-colors hover:text-white/70"
|
||||
>
|
||||
Datei ersetzen
|
||||
<input type="file" class="sr-only" onchange={handleReplaceFile} />
|
||||
</label>
|
||||
</div>
|
||||
<div class="relative flex-1 overflow-hidden">
|
||||
<DocumentViewer
|
||||
doc={doc}
|
||||
fileUrl={fileLoader.fileUrl}
|
||||
isLoading={fileLoader.isLoading}
|
||||
error={fileLoader.fileError}
|
||||
bind:annotateMode={annotateMode}
|
||||
bind:activeAnnotationId={activeAnnotationId}
|
||||
bind:activeAnnotationPage={activeAnnotationPage}
|
||||
onAnnotationClick={() => {}}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Right: form (40%) -->
|
||||
<div class="flex flex-[4] flex-col overflow-hidden">
|
||||
{#if form?.error}
|
||||
<div class="border-b border-red-200 bg-red-50 px-6 py-3 text-sm text-red-700">
|
||||
{form.error}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form
|
||||
id="save-form"
|
||||
method="POST"
|
||||
action="?/save"
|
||||
enctype="multipart/form-data"
|
||||
use:enhance
|
||||
class="flex-1 space-y-5 overflow-y-auto p-6"
|
||||
<div class="flex items-center gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
form="save-form"
|
||||
formaction="?/save"
|
||||
class="rounded-sm border border-gray-300 px-5 py-2 font-sans text-xs font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-gray-50"
|
||||
>
|
||||
<WhoWhenSection
|
||||
bind:senderId={senderId}
|
||||
bind:selectedReceivers={selectedReceivers}
|
||||
bind:dateIso={dateIso}
|
||||
initialDateIso={doc.documentDate ?? ''}
|
||||
initialLocation={doc.location ?? ''}
|
||||
initialSenderName={doc.sender ? doc.sender.displayName : ''}
|
||||
/>
|
||||
<DescriptionSection
|
||||
bind:tags={tags}
|
||||
bind:currentTitle={currentTitle}
|
||||
initialTitle={doc.title ?? ''}
|
||||
titleRequired={true}
|
||||
/>
|
||||
</form>
|
||||
{m.btn_save()}
|
||||
</button>
|
||||
|
||||
<!-- Skip form (outside main form to avoid nesting) -->
|
||||
<form id="skip-form" method="POST" action="?/skip" use:enhance></form>
|
||||
|
||||
<!-- Action bar -->
|
||||
<div class="flex items-center justify-between gap-3 border-t border-line bg-surface p-4">
|
||||
<!-- Skip button linked to skip-form -->
|
||||
<button
|
||||
type="submit"
|
||||
form="skip-form"
|
||||
class="font-sans text-sm font-medium text-ink-2 transition-colors hover:text-ink"
|
||||
>
|
||||
{m.enrich_skip()}
|
||||
</button>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Save -->
|
||||
<button
|
||||
type="submit"
|
||||
form="save-form"
|
||||
formaction="?/save"
|
||||
class="rounded-sm border border-gray-300 px-5 py-2 font-sans text-xs font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-gray-50"
|
||||
>
|
||||
{m.btn_save()}
|
||||
</button>
|
||||
|
||||
<!-- Save & mark as reviewed -->
|
||||
<button
|
||||
type="submit"
|
||||
form="save-form"
|
||||
formaction="?/saveAndReview"
|
||||
class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
|
||||
>
|
||||
{m.btn_save_and_mark_reviewed()}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
form="save-form"
|
||||
formaction="?/saveAndReview"
|
||||
class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
|
||||
>
|
||||
{m.btn_save_and_mark_reviewed()}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</DocumentEditLayout>
|
||||
|
||||
<form id="skip-form" method="POST" action="?/skip" use:enhance></form>
|
||||
|
||||
Reference in New Issue
Block a user