259 lines
8.2 KiB
Svelte
259 lines
8.2 KiB
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
import TranscriptionBlock from './TranscriptionBlock.svelte';
|
|
import OcrTrigger from './OcrTrigger.svelte';
|
|
import TranscribeCoachEmptyState from './TranscribeCoachEmptyState.svelte';
|
|
import type { TranscriptionBlockData } from '$lib/types';
|
|
import { createBlockAutoSave } from '$lib/hooks/useBlockAutoSave.svelte';
|
|
import { createBlockDragDrop } from '$lib/hooks/useBlockDragDrop.svelte';
|
|
|
|
type Props = {
|
|
documentId: string;
|
|
blocks: TranscriptionBlockData[];
|
|
canComment: boolean;
|
|
currentUserId: string | null;
|
|
activeAnnotationId?: string | null;
|
|
storedScriptType?: string;
|
|
canRunOcr?: boolean;
|
|
onBlockFocus: (blockId: string) => void;
|
|
onSaveBlock: (blockId: string, text: string) => Promise<void>;
|
|
onDeleteBlock: (blockId: string) => Promise<void>;
|
|
onReviewToggle: (blockId: string) => Promise<void>;
|
|
onTriggerOcr?: (scriptType: string, useExistingAnnotations: boolean) => void;
|
|
canWrite?: boolean;
|
|
trainingLabels?: string[];
|
|
onToggleTrainingLabel?: (label: string, enrolled: boolean) => Promise<void>;
|
|
};
|
|
|
|
let {
|
|
documentId,
|
|
blocks,
|
|
canComment,
|
|
currentUserId,
|
|
activeAnnotationId = null,
|
|
storedScriptType = '',
|
|
canRunOcr = false,
|
|
onBlockFocus,
|
|
onSaveBlock,
|
|
onDeleteBlock,
|
|
onReviewToggle,
|
|
onTriggerOcr,
|
|
canWrite = false,
|
|
trainingLabels = [],
|
|
onToggleTrainingLabel
|
|
}: Props = $props();
|
|
|
|
let activeBlockId: string | null = $state(null);
|
|
let localLabels: string[] = $derived.by(() => [...trainingLabels]);
|
|
let listEl: HTMLElement | null = $state(null);
|
|
|
|
const sortedBlocks = $derived([...blocks].sort((a, b) => a.sortOrder - b.sortOrder));
|
|
const hasBlocks = $derived(blocks.length > 0);
|
|
const reviewedCount = $derived(blocks.filter((b) => b.reviewed).length);
|
|
const totalCount = $derived(blocks.length);
|
|
const reviewProgress = $derived(totalCount > 0 ? (reviewedCount / totalCount) * 100 : 0);
|
|
|
|
// Sync: when an annotation is clicked on the PDF, activate the corresponding block
|
|
$effect(() => {
|
|
if (!activeAnnotationId) return;
|
|
const block = blocks.find((b) => b.annotationId === activeAnnotationId);
|
|
if (block) activeBlockId = block.id;
|
|
});
|
|
|
|
const autoSave = createBlockAutoSave({ saveFn: onSaveBlock, documentId });
|
|
|
|
const dragDrop = createBlockDragDrop({
|
|
getSortedBlocks: () => sortedBlocks,
|
|
onReorder: reorder
|
|
});
|
|
|
|
// Wire listEl to drag-drop module
|
|
$effect(() => {
|
|
dragDrop.setListElement(listEl);
|
|
});
|
|
|
|
$effect(() => {
|
|
function onBeforeUnload() {
|
|
autoSave.flushOnUnload();
|
|
}
|
|
window.addEventListener('beforeunload', onBeforeUnload);
|
|
return () => {
|
|
window.removeEventListener('beforeunload', onBeforeUnload);
|
|
autoSave.destroy();
|
|
};
|
|
});
|
|
|
|
function handleFocus(blockId: string) {
|
|
activeBlockId = blockId;
|
|
onBlockFocus(blockId);
|
|
}
|
|
|
|
function handleDelete(blockId: string) {
|
|
autoSave.clearBlock(blockId);
|
|
onDeleteBlock(blockId);
|
|
}
|
|
|
|
async function reorder(newOrder: string[]) {
|
|
try {
|
|
const res = await fetch(`/api/documents/${documentId}/transcription-blocks/reorder`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ blockIds: newOrder })
|
|
});
|
|
if (!res.ok) return;
|
|
const updated = await res.json();
|
|
for (const b of updated) {
|
|
const existing = blocks.find((x) => x.id === b.id);
|
|
if (existing) existing.sortOrder = b.sortOrder;
|
|
}
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}
|
|
|
|
function handleMoveUp(blockId: string) {
|
|
const sorted = [...sortedBlocks];
|
|
const idx = sorted.findIndex((b) => b.id === blockId);
|
|
if (idx <= 0) return;
|
|
[sorted[idx - 1], sorted[idx]] = [sorted[idx], sorted[idx - 1]];
|
|
reorder(sorted.map((b) => b.id));
|
|
}
|
|
|
|
function handleMoveDown(blockId: string) {
|
|
const sorted = [...sortedBlocks];
|
|
const idx = sorted.findIndex((b) => b.id === blockId);
|
|
if (idx < 0 || idx >= sorted.length - 1) return;
|
|
[sorted[idx], sorted[idx + 1]] = [sorted[idx + 1], sorted[idx]];
|
|
reorder(sorted.map((b) => b.id));
|
|
}
|
|
|
|
async function handleLabelToggle(label: string) {
|
|
if (!onToggleTrainingLabel) return;
|
|
const enrolled = !localLabels.includes(label);
|
|
if (enrolled) {
|
|
localLabels = [...localLabels, label];
|
|
} else {
|
|
localLabels = localLabels.filter((l) => l !== label);
|
|
}
|
|
try {
|
|
await onToggleTrainingLabel(label, enrolled);
|
|
} catch {
|
|
localLabels = [...trainingLabels];
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="flex h-full flex-col overflow-y-auto bg-surface">
|
|
{#if hasBlocks}
|
|
<!-- Sticky review progress header -->
|
|
<div class="sticky top-0 z-10 border-b border-line bg-surface px-4 pt-3 pb-2">
|
|
<p class="font-sans text-xs text-ink-2">
|
|
<span class="font-semibold text-ink">{reviewedCount} / {totalCount}</span> geprüft
|
|
</p>
|
|
<div class="bg-brand-sand mt-1.5 h-0.5 w-full overflow-hidden rounded-full">
|
|
<div
|
|
class="h-full rounded-full bg-brand-mint transition-all duration-300"
|
|
style="width: {reviewProgress}%"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4">
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div
|
|
class="flex flex-col gap-3"
|
|
bind:this={listEl}
|
|
onpointermove={dragDrop.handlePointerMove}
|
|
onpointerup={dragDrop.handlePointerUp}
|
|
>
|
|
{#each sortedBlocks as block, i (block.id)}
|
|
{#if dragDrop.dropTargetIdx === i}
|
|
<div class="h-1 rounded-full bg-turquoise transition-all"></div>
|
|
{/if}
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div
|
|
data-block-wrapper
|
|
onblur={autoSave.handleBlur}
|
|
onpointerdown={(e) => dragDrop.handleGripDown(e, block.id)}
|
|
class="relative transition-all duration-150 {dragDrop.draggedBlockId === block.id ? 'z-10 rounded-lg shadow-xl ring-2 ring-turquoise/40' : ''}"
|
|
style={dragDrop.draggedBlockId === block.id
|
|
? `transform: translateY(${dragDrop.dragOffsetY}px) scale(1.02); opacity: 0.9;`
|
|
: ''}
|
|
>
|
|
<TranscriptionBlock
|
|
blockId={block.id}
|
|
documentId={documentId}
|
|
blockNumber={i + 1}
|
|
text={block.text}
|
|
label={block.label}
|
|
active={activeBlockId === block.id}
|
|
reviewed={block.reviewed ?? false}
|
|
saveState={autoSave.getSaveState(block.id)}
|
|
canComment={canComment}
|
|
currentUserId={currentUserId}
|
|
onTextChange={(text) => autoSave.handleTextChange(block.id, text)}
|
|
onFocus={() => handleFocus(block.id)}
|
|
onDeleteClick={() => handleDelete(block.id)}
|
|
onRetry={() => autoSave.handleRetry(block.id, block.text)}
|
|
onReviewToggle={() => onReviewToggle(block.id)}
|
|
onMoveUp={() => handleMoveUp(block.id)}
|
|
onMoveDown={() => handleMoveDown(block.id)}
|
|
isFirst={i === 0}
|
|
isLast={i === sortedBlocks.length - 1}
|
|
source={block.source}
|
|
/>
|
|
</div>
|
|
{/each}
|
|
|
|
{#if dragDrop.dropTargetIdx === sortedBlocks.length}
|
|
<div class="h-1 rounded-full bg-turquoise transition-all"></div>
|
|
{/if}
|
|
|
|
<!-- Next block CTA — dashed outline hint -->
|
|
<div
|
|
class="flex items-center justify-center rounded border border-dashed border-line px-4 py-5 text-center font-sans text-sm text-ink-3"
|
|
>
|
|
{m.transcription_next_block_cta({ number: sortedBlocks.length + 1 })}
|
|
</div>
|
|
|
|
{#if canRunOcr && onTriggerOcr}
|
|
<div class="mt-6">
|
|
<p class="mb-3 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
|
{m.ocr_section_heading()}
|
|
</p>
|
|
<div class="max-w-xs">
|
|
<OcrTrigger
|
|
blockCount={blocks.length}
|
|
storedScriptType={storedScriptType}
|
|
onTrigger={onTriggerOcr}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<div class="p-4">
|
|
<TranscribeCoachEmptyState />
|
|
</div>
|
|
{/if}
|
|
|
|
{#if canWrite && hasBlocks}
|
|
<div class="border-t border-line px-4 py-3">
|
|
<p class="mb-2 font-sans text-xs font-medium text-ink-2">Für Training vormerken</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
{#each [{ label: 'KURRENT_RECOGNITION', display: m.training_chip_kurrent() }, { label: 'KURRENT_SEGMENTATION', display: m.training_chip_segmentation() }] as chip (chip.label)}
|
|
<button
|
|
type="button"
|
|
onclick={() => handleLabelToggle(chip.label)}
|
|
class="rounded-full border px-3 py-1 font-sans text-xs font-medium transition-colors {localLabels.includes(chip.label)
|
|
? 'border-brand-mint bg-brand-mint text-brand-navy'
|
|
: 'border-line bg-surface text-ink-3 hover:border-brand-mint hover:text-brand-navy'}"
|
|
>
|
|
{chip.display}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|