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
@@ -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();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user