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 PersonMultiSelect from '$lib/components/PersonMultiSelect.svelte';
|
||||||
import { isoToGerman, handleGermanDateInput } from '$lib/utils/date';
|
import { isoToGerman, handleGermanDateInput } from '$lib/utils/date';
|
||||||
import { m } from '$lib/paraglide/messages.js';
|
import { m } from '$lib/paraglide/messages.js';
|
||||||
|
import type { components } from '$lib/generated/api';
|
||||||
|
|
||||||
interface Person {
|
type Person = components['schemas']['Person'];
|
||||||
id: string;
|
|
||||||
firstName: string;
|
|
||||||
lastName: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
let {
|
let {
|
||||||
senderId = $bindable(''),
|
senderId = $bindable(''),
|
||||||
|
|||||||
@@ -6,12 +6,15 @@ import { parseBackendError, getErrorMessage } from '$lib/errors';
|
|||||||
export async function load({
|
export async function load({
|
||||||
params,
|
params,
|
||||||
fetch,
|
fetch,
|
||||||
locals
|
locals,
|
||||||
|
depends
|
||||||
}: {
|
}: {
|
||||||
params: { id: string };
|
params: { id: string };
|
||||||
fetch: typeof globalThis.fetch;
|
fetch: typeof globalThis.fetch;
|
||||||
locals: App.Locals;
|
locals: App.Locals;
|
||||||
|
depends: (dep: string) => void;
|
||||||
}) {
|
}) {
|
||||||
|
depends('app:document');
|
||||||
const canWrite =
|
const canWrite =
|
||||||
locals.user?.groups?.some((g: { permissions: string[] }) =>
|
locals.user?.groups?.some((g: { permissions: string[] }) =>
|
||||||
g.permissions.includes('WRITE_ALL')
|
g.permissions.includes('WRITE_ALL')
|
||||||
|
|||||||
@@ -1,27 +1,34 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { enhance } from '$app/forms';
|
import { enhance } from '$app/forms';
|
||||||
import { untrack } from 'svelte';
|
|
||||||
import { m } from '$lib/paraglide/messages.js';
|
import { m } from '$lib/paraglide/messages.js';
|
||||||
import WhoWhenSection from '$lib/components/document/WhoWhenSection.svelte';
|
import { getConfirmService } from '$lib/services/confirm.svelte.js';
|
||||||
import DescriptionSection from '$lib/components/document/DescriptionSection.svelte';
|
import DocumentEditLayout from '$lib/components/document/DocumentEditLayout.svelte';
|
||||||
import TranscriptionSection from '$lib/components/document/TranscriptionSection.svelte';
|
|
||||||
import FileSectionEdit from './FileSectionEdit.svelte';
|
|
||||||
import SaveBar from './SaveBar.svelte';
|
|
||||||
|
|
||||||
let { data, form } = $props();
|
let { data, form } = $props();
|
||||||
|
|
||||||
let { document: doc } = untrack(() => data);
|
const doc = $derived(data.document);
|
||||||
let tags = $state(doc.tags ?? []);
|
const { confirm } = getConfirmService();
|
||||||
let senderId = $state(doc.sender?.id ?? '');
|
|
||||||
let selectedReceivers = $state(doc.receivers ?? []);
|
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>
|
</script>
|
||||||
|
|
||||||
<div class="mx-auto max-w-4xl px-4 py-8">
|
<svelte:head>
|
||||||
<!-- Heading -->
|
<title>{doc.title || doc.originalFilename || 'Dokument'} — {m.doc_edit_heading()}</title>
|
||||||
<div class="mb-6">
|
</svelte:head>
|
||||||
|
|
||||||
|
<DocumentEditLayout doc={doc} formId="update-form" formAction="?/update" formError={form?.error}>
|
||||||
|
{#snippet topbar()}
|
||||||
<a
|
<a
|
||||||
href="/documents/{doc.id}"
|
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
|
<img
|
||||||
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
|
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()}
|
{m.btn_back_to_document()}
|
||||||
</a>
|
</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}
|
<p class="max-w-sm truncate text-center font-serif text-sm font-medium text-ink">
|
||||||
<div class="mb-6 rounded border border-red-200 bg-red-50 p-4 text-red-700">{form.error}</div>
|
{doc.title || doc.originalFilename}
|
||||||
{/if}
|
</p>
|
||||||
|
|
||||||
<form
|
<div class="w-40"></div>
|
||||||
id="update-form"
|
{/snippet}
|
||||||
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>
|
|
||||||
|
|
||||||
<form id="mark-for-review-form" method="POST" action="?/markForReview" use:enhance></form>
|
{#snippet actionbar()}
|
||||||
<form id="delete-form" method="POST" action="?/delete" use:enhance></form>
|
<button
|
||||||
</div>
|
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">
|
<script lang="ts">
|
||||||
import { enhance } from '$app/forms';
|
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 { m } from '$lib/paraglide/messages.js';
|
||||||
import { countRequiredFilled } from '$lib/utils/requiredFields';
|
import DocumentEditLayout from '$lib/components/document/DocumentEditLayout.svelte';
|
||||||
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';
|
|
||||||
|
|
||||||
let { data, form } = $props();
|
let { data, form } = $props();
|
||||||
|
|
||||||
const doc = $derived(data.document);
|
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>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>{doc.title || doc.originalFilename || 'Dokument'} — Anreicherung</title>
|
<title>{doc.title || doc.originalFilename || 'Dokument'} — Anreicherung</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<div class="fixed inset-x-0 bottom-0 flex flex-col" style="top: {navHeight}px">
|
<DocumentEditLayout doc={doc} formId="save-form" formAction="?/save" formError={form?.error}>
|
||||||
<!-- Top bar -->
|
{#snippet topbar()}
|
||||||
<div class="flex items-center justify-between border-b border-line bg-surface px-6 py-3">
|
|
||||||
<a
|
<a
|
||||||
href="/enrich"
|
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"
|
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">
|
<p class="font-sans text-xs text-ink-3">
|
||||||
{m.enrich_progress({ count: data.incompleteCount })}
|
{m.enrich_progress({ count: data.incompleteCount })}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
{/snippet}
|
||||||
|
|
||||||
<!-- Required-fields progress bar -->
|
{#snippet actionbar()}
|
||||||
<div class="flex items-center gap-3 border-b border-line bg-surface px-6 py-1.5">
|
<button
|
||||||
<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">Pflichtfelder</span>
|
type="submit"
|
||||||
<div
|
form="skip-form"
|
||||||
class="h-0.5 flex-1 rounded-full bg-line"
|
class="font-sans text-sm font-medium text-ink-2 transition-colors hover:text-ink"
|
||||||
role="progressbar"
|
|
||||||
aria-valuenow={requiredFilled}
|
|
||||||
aria-valuemin={0}
|
|
||||||
aria-valuemax={3}
|
|
||||||
aria-label="Pflichtfelder"
|
|
||||||
>
|
>
|
||||||
<div
|
{m.enrich_skip()}
|
||||||
class="h-full rounded-full bg-brand-navy transition-all duration-300"
|
</button>
|
||||||
style="width:{requiredPct}%"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<span class="text-xs font-bold text-brand-navy">{requiredFilled} / 3</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Main content -->
|
<div class="flex items-center gap-3">
|
||||||
<div class="flex flex-1 overflow-hidden">
|
<button
|
||||||
<!-- Left: PDF preview / upload zone (60%) -->
|
type="submit"
|
||||||
<div class="relative flex flex-[6] flex-col overflow-hidden border-r border-line">
|
form="save-form"
|
||||||
{#if !doc.filePath}
|
formaction="?/save"
|
||||||
<UploadZone
|
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"
|
||||||
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"
|
|
||||||
>
|
>
|
||||||
<WhoWhenSection
|
{m.btn_save()}
|
||||||
bind:senderId={senderId}
|
</button>
|
||||||
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>
|
|
||||||
|
|
||||||
<!-- Skip form (outside main form to avoid nesting) -->
|
<button
|
||||||
<form id="skip-form" method="POST" action="?/skip" use:enhance></form>
|
type="submit"
|
||||||
|
form="save-form"
|
||||||
<!-- Action bar -->
|
formaction="?/saveAndReview"
|
||||||
<div class="flex items-center justify-between gap-3 border-t border-line bg-surface p-4">
|
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"
|
||||||
<!-- Skip button linked to skip-form -->
|
>
|
||||||
<button
|
{m.btn_save_and_mark_reviewed()}
|
||||||
type="submit"
|
</button>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{/snippet}
|
||||||
</div>
|
</DocumentEditLayout>
|
||||||
|
|
||||||
|
<form id="skip-form" method="POST" action="?/skip" use:enhance></form>
|
||||||
|
|||||||
Reference in New Issue
Block a user