refactor(home): extract SearchFilterBar, DropZone, and DocumentList
Split the 580-line home page into three focused co-located components: - SearchFilterBar: full-text search + collapsible advanced filters - DropZone: drag-and-drop / click-to-upload with progress and messages - DocumentList: document list with new-doc link and empty state Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
@@ -1,13 +1,10 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
|
import { goto } from '$app/navigation';
|
||||||
import { goto, invalidateAll } from '$app/navigation';
|
|
||||||
import TagInput from '$lib/components/TagInput.svelte';
|
|
||||||
import { slide } from 'svelte/transition';
|
|
||||||
import { untrack } from 'svelte';
|
import { untrack } from 'svelte';
|
||||||
import { SvelteURLSearchParams } from 'svelte/reactivity';
|
import { SvelteURLSearchParams } from 'svelte/reactivity';
|
||||||
import { m } from '$lib/paraglide/messages.js';
|
import SearchFilterBar from './SearchFilterBar.svelte';
|
||||||
import { formatDate } from '$lib/utils/date';
|
import DropZone from './DropZone.svelte';
|
||||||
import { getErrorMessage } from '$lib/errors';
|
import DocumentList from './DocumentList.svelte';
|
||||||
|
|
||||||
let { data } = $props();
|
let { data } = $props();
|
||||||
|
|
||||||
@@ -19,18 +16,6 @@ let senderId = $state(untrack(() => data.filters?.senderId || ''));
|
|||||||
let receiverId = $state(untrack(() => data.filters?.receiverId || ''));
|
let receiverId = $state(untrack(() => data.filters?.receiverId || ''));
|
||||||
let tagNames = $state<string[]>(untrack(() => data.filters?.tags || []));
|
let tagNames = $state<string[]>(untrack(() => data.filters?.tags || []));
|
||||||
|
|
||||||
const ACCEPTED_TYPES = ['application/pdf', 'image/jpeg', 'image/png', 'image/tiff'];
|
|
||||||
|
|
||||||
let isDragging = $state(false);
|
|
||||||
let windowDragging = $state(false);
|
|
||||||
let dragCounter = 0;
|
|
||||||
let isUploading = $state(false);
|
|
||||||
let uploadProgress = $state(0);
|
|
||||||
let uploadMessages = $state<{ text: string; isError: boolean; link?: string }[]>([]);
|
|
||||||
let fileInput: HTMLInputElement;
|
|
||||||
|
|
||||||
let searchTimer: ReturnType<typeof setTimeout>;
|
|
||||||
|
|
||||||
const hasAdvancedFilters = (filters: typeof data.filters) =>
|
const hasAdvancedFilters = (filters: typeof data.filters) =>
|
||||||
(filters?.tags?.length ?? 0) > 0 ||
|
(filters?.tags?.length ?? 0) > 0 ||
|
||||||
!!filters?.senderId ||
|
!!filters?.senderId ||
|
||||||
@@ -40,122 +25,22 @@ const hasAdvancedFilters = (filters: typeof data.filters) =>
|
|||||||
|
|
||||||
let showAdvanced = $state(untrack(() => hasAdvancedFilters(data.filters)));
|
let showAdvanced = $state(untrack(() => hasAdvancedFilters(data.filters)));
|
||||||
|
|
||||||
function handleDragOver(e: DragEvent) {
|
let searchTimer: ReturnType<typeof setTimeout>;
|
||||||
e.preventDefault();
|
|
||||||
isDragging = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleDragLeave() {
|
|
||||||
isDragging = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleDrop(e: DragEvent) {
|
|
||||||
e.preventDefault();
|
|
||||||
isDragging = false;
|
|
||||||
windowDragging = false;
|
|
||||||
dragCounter = 0;
|
|
||||||
const files = Array.from(e.dataTransfer?.files ?? []);
|
|
||||||
await uploadFiles(files);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleFileSelect(e: Event) {
|
|
||||||
const input = e.target as HTMLInputElement;
|
|
||||||
const files = Array.from(input.files ?? []);
|
|
||||||
input.value = '';
|
|
||||||
await uploadFiles(files);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function uploadFiles(files: File[]) {
|
|
||||||
if (files.length === 0) return;
|
|
||||||
|
|
||||||
const messages: { text: string; isError: boolean; link?: string }[] = [];
|
|
||||||
|
|
||||||
// Client-side type validation
|
|
||||||
const valid: File[] = [];
|
|
||||||
for (const file of files) {
|
|
||||||
if (!ACCEPTED_TYPES.includes(file.type)) {
|
|
||||||
messages.push({ text: m.upload_invalid_type({ filename: file.name }), isError: true });
|
|
||||||
} else {
|
|
||||||
valid.push(file);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (valid.length === 0) {
|
|
||||||
uploadMessages = messages;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
isUploading = true;
|
|
||||||
uploadProgress = 0;
|
|
||||||
try {
|
|
||||||
const formData = new FormData();
|
|
||||||
for (const file of valid) {
|
|
||||||
formData.append('files', file);
|
|
||||||
}
|
|
||||||
|
|
||||||
const { ok, body } = await new Promise<{ ok: boolean; body: string }>((resolve, reject) => {
|
|
||||||
const xhr = new XMLHttpRequest();
|
|
||||||
xhr.open('POST', '/api/documents/quick-upload');
|
|
||||||
xhr.upload.addEventListener('progress', (e) => {
|
|
||||||
if (e.lengthComputable) uploadProgress = Math.round((e.loaded / e.total) * 100);
|
|
||||||
});
|
|
||||||
xhr.addEventListener('load', () => resolve({ ok: xhr.status < 300, body: xhr.responseText }));
|
|
||||||
xhr.addEventListener('error', () => reject(new Error('Network error')));
|
|
||||||
xhr.send(formData);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (ok) {
|
|
||||||
const result = JSON.parse(body);
|
|
||||||
if (result.created?.length > 0) {
|
|
||||||
messages.push({ text: m.upload_success({ count: result.created.length }), isError: false });
|
|
||||||
}
|
|
||||||
for (const doc of result.updated ?? []) {
|
|
||||||
messages.push({
|
|
||||||
text: m.upload_duplicate({ filename: doc.originalFilename }),
|
|
||||||
isError: false,
|
|
||||||
link: `/documents/${doc.id}`
|
|
||||||
});
|
|
||||||
}
|
|
||||||
for (const err of result.errors ?? []) {
|
|
||||||
messages.push({
|
|
||||||
text: `${err.filename}: ${getErrorMessage(err.code)}`,
|
|
||||||
isError: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
await invalidateAll();
|
|
||||||
} else {
|
|
||||||
for (const file of valid) {
|
|
||||||
messages.push({ text: m.upload_error({ filename: file.name }), isError: true });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
isUploading = false;
|
|
||||||
uploadProgress = 0;
|
|
||||||
uploadMessages = messages;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function triggerSearch() {
|
function triggerSearch() {
|
||||||
const params = new SvelteURLSearchParams();
|
const params = new SvelteURLSearchParams();
|
||||||
|
|
||||||
if (q) params.set('q', q);
|
if (q) params.set('q', q);
|
||||||
if (from) params.set('from', from);
|
if (from) params.set('from', from);
|
||||||
if (to) params.set('to', to);
|
if (to) params.set('to', to);
|
||||||
if (senderId) params.set('senderId', senderId);
|
if (senderId) params.set('senderId', senderId);
|
||||||
if (receiverId) params.set('receiverId', receiverId);
|
if (receiverId) params.set('receiverId', receiverId);
|
||||||
if (tagNames) tagNames.forEach((tag) => params.append('tag', tag));
|
if (tagNames) tagNames.forEach((tag) => params.append('tag', tag));
|
||||||
|
goto(`/?${params.toString()}`, { keepFocus: true, noScroll: true });
|
||||||
goto(`/?${params.toString()}`, {
|
|
||||||
keepFocus: true,
|
|
||||||
noScroll: true
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleTextSearch() {
|
function handleTextSearch() {
|
||||||
clearTimeout(searchTimer);
|
clearTimeout(searchTimer);
|
||||||
searchTimer = setTimeout(() => {
|
searchTimer = setTimeout(() => triggerSearch(), 500);
|
||||||
triggerSearch();
|
|
||||||
}, 500);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Trigger search when tags change
|
// Trigger search when tags change
|
||||||
@@ -168,40 +53,6 @@ $effect(() => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Expand drop zone whenever a file is dragged anywhere over the browser window
|
|
||||||
$effect(() => {
|
|
||||||
if (!data.canWrite) return;
|
|
||||||
|
|
||||||
function onWindowDragEnter(e: DragEvent) {
|
|
||||||
if (!e.dataTransfer?.types.includes('Files')) return;
|
|
||||||
dragCounter++;
|
|
||||||
windowDragging = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function onWindowDragLeave() {
|
|
||||||
dragCounter--;
|
|
||||||
if (dragCounter <= 0) {
|
|
||||||
dragCounter = 0;
|
|
||||||
windowDragging = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function onWindowDrop() {
|
|
||||||
dragCounter = 0;
|
|
||||||
windowDragging = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('dragenter', onWindowDragEnter);
|
|
||||||
window.addEventListener('dragleave', onWindowDragLeave);
|
|
||||||
window.addEventListener('drop', onWindowDrop);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener('dragenter', onWindowDragEnter);
|
|
||||||
window.removeEventListener('dragleave', onWindowDragLeave);
|
|
||||||
window.removeEventListener('drop', onWindowDrop);
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
// Sync local state with server data after navigation.
|
// Sync local state with server data after navigation.
|
||||||
// Guard q: skip overwrite while the user is actively typing in the search field.
|
// Guard q: skip overwrite while the user is actively typing in the search field.
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
@@ -215,365 +66,25 @@ $effect(() => {
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Outer Container: Matches the 'Sand' background of the layout -->
|
|
||||||
<main class="mx-auto max-w-7xl py-8 font-sans sm:px-6 lg:px-8">
|
<main class="mx-auto max-w-7xl py-8 font-sans sm:px-6 lg:px-8">
|
||||||
<!-- SEARCH & FILTER CARD -->
|
<SearchFilterBar
|
||||||
<div class="mb-8 rounded-sm border border-line bg-surface p-6 shadow-sm">
|
bind:q={q}
|
||||||
<!-- ROW 1: Main Search (One Line) -->
|
bind:from={from}
|
||||||
<div class="flex items-center gap-4">
|
bind:to={to}
|
||||||
<!-- Full Text Search -->
|
bind:senderId={senderId}
|
||||||
<div class="relative flex-1">
|
bind:receiverId={receiverId}
|
||||||
<input
|
bind:tagNames={tagNames}
|
||||||
type="text"
|
bind:showAdvanced={showAdvanced}
|
||||||
bind:value={q}
|
initialSenderName={data.initialValues?.senderName}
|
||||||
oninput={handleTextSearch}
|
initialReceiverName={data.initialValues?.receiverName}
|
||||||
onfocus={() => (qFocused = true)}
|
onSearch={handleTextSearch}
|
||||||
onblur={() => (qFocused = false)}
|
onfocus={() => (qFocused = true)}
|
||||||
placeholder={m.docs_search_placeholder()}
|
onblur={() => (qFocused = false)}
|
||||||
class="block w-full border-line py-2.5 pr-10 pl-3 placeholder-ink-3 shadow-sm focus:border-ink focus:ring-ink"
|
/>
|
||||||
/>
|
|
||||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
|
||||||
<img
|
|
||||||
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
|
|
||||||
alt=""
|
|
||||||
aria-hidden="true"
|
|
||||||
class="h-4 w-4 opacity-40"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Toggle Advanced Button -->
|
|
||||||
<button
|
|
||||||
onclick={() => (showAdvanced = !showAdvanced)}
|
|
||||||
class="flex items-center gap-2 border border-line bg-muted px-4 py-2.5 text-sm font-bold tracking-wide text-ink-2 uppercase transition hover:bg-muted hover:text-ink"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/degruyter-icons/Simple/Small-16px/SVG/Action/Chevron/Chevron-Down-SM.svg"
|
|
||||||
alt=""
|
|
||||||
aria-hidden="true"
|
|
||||||
class="h-4 w-4 transform transition-transform duration-200 {showAdvanced ? 'rotate-180' : ''}"
|
|
||||||
/>
|
|
||||||
{m.docs_btn_filter()}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Reset Button -->
|
|
||||||
<a
|
|
||||||
href="/"
|
|
||||||
class="flex items-center justify-center border border-transparent px-3 py-2.5 text-ink-3 transition hover:text-red-500"
|
|
||||||
title={m.docs_btn_reset_title()}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Close-MD.svg"
|
|
||||||
alt=""
|
|
||||||
aria-hidden="true"
|
|
||||||
class="h-5 w-5 opacity-40"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ROW 2: Advanced Filters (Collapsible) -->
|
|
||||||
{#if showAdvanced}
|
|
||||||
<div
|
|
||||||
transition:slide
|
|
||||||
class="mt-6 grid grid-cols-1 gap-6 border-t border-line-2 pt-6 md:grid-cols-12"
|
|
||||||
>
|
|
||||||
<!-- Tag Filter -->
|
|
||||||
<div class="md:col-span-12">
|
|
||||||
<p class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase">
|
|
||||||
{m.docs_filter_label_tags()}
|
|
||||||
</p>
|
|
||||||
<TagInput bind:tags={tagNames} allowCreation={false} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Sender -->
|
|
||||||
<div class="md:col-span-3">
|
|
||||||
<div
|
|
||||||
class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
|
|
||||||
>
|
|
||||||
<PersonTypeahead
|
|
||||||
name="senderId"
|
|
||||||
label={m.docs_filter_label_sender()}
|
|
||||||
bind:value={senderId}
|
|
||||||
initialName={data.initialValues?.senderName}
|
|
||||||
onchange={triggerSearch}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Receiver -->
|
|
||||||
<div class="md:col-span-3">
|
|
||||||
<div
|
|
||||||
class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
|
|
||||||
>
|
|
||||||
<PersonTypeahead
|
|
||||||
name="receiverId"
|
|
||||||
label={m.docs_filter_label_receivers()}
|
|
||||||
bind:value={receiverId}
|
|
||||||
initialName={data.initialValues?.receiverName}
|
|
||||||
onchange={triggerSearch}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dates -->
|
|
||||||
<div class="grid grid-cols-2 gap-4 md:col-span-6">
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
for="from"
|
|
||||||
class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
|
|
||||||
>{m.docs_filter_label_from()}</label
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="date"
|
|
||||||
id="from"
|
|
||||||
bind:value={from}
|
|
||||||
onchange={triggerSearch}
|
|
||||||
class="block w-full border-line py-2.5 text-sm shadow-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
for="to"
|
|
||||||
class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
|
|
||||||
>{m.docs_filter_label_to()}</label
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="date"
|
|
||||||
id="to"
|
|
||||||
bind:value={to}
|
|
||||||
onchange={triggerSearch}
|
|
||||||
class="block w-full border-line py-2.5 text-sm shadow-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if data.canWrite}
|
{#if data.canWrite}
|
||||||
<!-- UPLOAD DROP ZONE -->
|
<DropZone />
|
||||||
<div
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
class="mb-4 flex cursor-pointer items-center justify-center gap-3 border border-dashed px-6 text-sm transition-all duration-200 {isDragging
|
|
||||||
? 'border-primary bg-accent-bg py-10 text-primary'
|
|
||||||
: windowDragging
|
|
||||||
? 'border-primary/60 bg-accent-bg/50 py-10 text-primary/80'
|
|
||||||
: 'border-ink/20 py-3 text-ink-3 hover:border-primary hover:text-primary'}"
|
|
||||||
ondragover={handleDragOver}
|
|
||||||
ondragleave={handleDragLeave}
|
|
||||||
ondrop={handleDrop}
|
|
||||||
onclick={() => fileInput.click()}
|
|
||||||
onkeydown={(e) => e.key === 'Enter' && fileInput.click()}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
class="h-4 w-4 shrink-0 opacity-50"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
|
||||||
<polyline points="17 8 12 3 7 8" />
|
|
||||||
<line x1="12" y1="3" x2="12" y2="15" />
|
|
||||||
</svg>
|
|
||||||
{#if isUploading}
|
|
||||||
<div class="flex w-48 flex-col items-center gap-1">
|
|
||||||
<div class="h-1.5 w-full overflow-hidden rounded-full bg-ink/10">
|
|
||||||
<div
|
|
||||||
class="h-full rounded-full bg-primary transition-all duration-200"
|
|
||||||
style="width: {uploadProgress}%"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<span class="font-sans text-xs text-ink-3">{uploadProgress}%</span>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<span class="font-sans font-medium">{m.upload_drop_hint()}</span>
|
|
||||||
<span class="font-sans text-xs text-ink-3">{m.upload_accepted_types()}</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if uploadMessages.length > 0}
|
|
||||||
<div class="mb-4 flex flex-col gap-1">
|
|
||||||
{#each uploadMessages as msg, i (i)}
|
|
||||||
<p
|
|
||||||
class="font-sans text-sm {msg.isError
|
|
||||||
? 'text-red-600'
|
|
||||||
: msg.link
|
|
||||||
? 'text-amber-700'
|
|
||||||
: 'text-green-700'}"
|
|
||||||
>
|
|
||||||
{msg.text}
|
|
||||||
{#if msg.link}
|
|
||||||
<a href={msg.link} class="underline hover:no-underline">{m.upload_duplicate_link()}</a
|
|
||||||
>
|
|
||||||
{/if}
|
|
||||||
</p>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- DOCUMENT LIST HEADER -->
|
<DocumentList documents={data.documents ?? []} canWrite={data.canWrite} error={data.error} />
|
||||||
<div class="mb-2 flex justify-end">
|
|
||||||
{#if data.canWrite}
|
|
||||||
<a
|
|
||||||
href="/documents/new"
|
|
||||||
class="inline-flex items-center gap-1 text-sm font-medium text-ink/60 transition-colors hover:text-ink"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
|
|
||||||
alt=""
|
|
||||||
aria-hidden="true"
|
|
||||||
class="h-4 w-4"
|
|
||||||
/>
|
|
||||||
{m.docs_btn_new()}
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- DOCUMENT LIST -->
|
|
||||||
<div class="border border-line bg-surface shadow-sm">
|
|
||||||
{#if data.error}
|
|
||||||
<div class="bg-red-50 p-8 text-center text-red-600">
|
|
||||||
{data.error}
|
|
||||||
</div>
|
|
||||||
{:else if data.documents && data.documents.length > 0}
|
|
||||||
<ul class="divide-y divide-line-2">
|
|
||||||
{#each data.documents as doc (doc.id)}
|
|
||||||
<li class="group transition-colors duration-200 hover:bg-muted/50">
|
|
||||||
<!-- LINK TO DETAIL PAGE -->
|
|
||||||
<a href="/documents/{doc.id}" class="block p-6">
|
|
||||||
<div class="flex flex-col gap-6 sm:flex-row">
|
|
||||||
<!-- Main Info -->
|
|
||||||
<div class="flex-1">
|
|
||||||
<div class="mb-2 flex items-baseline justify-between">
|
|
||||||
<!-- Title: Serif & Brand Navy -->
|
|
||||||
<h3
|
|
||||||
class="font-serif text-xl font-medium text-ink decoration-brand-mint decoration-2 underline-offset-4 group-hover:underline"
|
|
||||||
>
|
|
||||||
{doc.title || doc.originalFilename}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Metadata Row -->
|
|
||||||
<div class="mb-4 flex flex-wrap gap-6 font-sans text-sm text-ink-2">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<img
|
|
||||||
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Calendar/Calendar-Add-MD.svg"
|
|
||||||
alt=""
|
|
||||||
aria-hidden="true"
|
|
||||||
class="mr-1.5 h-4 w-4"
|
|
||||||
/>
|
|
||||||
{doc.documentDate ? formatDate(doc.documentDate) : '—'}
|
|
||||||
</div>
|
|
||||||
{#if doc.location}
|
|
||||||
<div class="flex items-center">
|
|
||||||
<img
|
|
||||||
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Location-MD.svg"
|
|
||||||
alt=""
|
|
||||||
aria-hidden="true"
|
|
||||||
class="mr-1.5 h-4 w-4"
|
|
||||||
/>
|
|
||||||
{doc.location}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Sender/Receiver Info -->
|
|
||||||
<div class="grid grid-cols-1 gap-4 font-serif text-sm sm:grid-cols-2">
|
|
||||||
<div class="flex items-baseline">
|
|
||||||
<span
|
|
||||||
class="w-10 font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
|
|
||||||
>{m.docs_list_from()}</span
|
|
||||||
>
|
|
||||||
{#if doc.sender}
|
|
||||||
<span class="text-ink">{doc.sender.firstName} {doc.sender.lastName}</span>
|
|
||||||
{:else}
|
|
||||||
<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<div class="flex items-baseline">
|
|
||||||
<span
|
|
||||||
class="w-10 font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
|
|
||||||
>{m.docs_list_to()}</span
|
|
||||||
>
|
|
||||||
{#if doc.receivers && doc.receivers.length > 0}
|
|
||||||
<span class="text-ink">
|
|
||||||
{doc.receivers.map((p) => p.firstName + ' ' + p.lastName).join(', ')}
|
|
||||||
</span>
|
|
||||||
{:else}
|
|
||||||
<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Tags Display -->
|
|
||||||
{#if doc.tags && doc.tags.length > 0}
|
|
||||||
<div class="mt-4 flex flex-wrap gap-2 pt-3">
|
|
||||||
{#each doc.tags as tag (tag.id)}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="relative z-10 inline-flex cursor-pointer items-center rounded bg-muted px-2 py-1 text-[10px] font-bold tracking-widest text-ink uppercase transition-colors hover:bg-primary hover:text-white"
|
|
||||||
onclick={(e) => { e.preventDefault(); e.stopPropagation(); goto(`/?tag=${encodeURIComponent(tag.name)}`); }}
|
|
||||||
>
|
|
||||||
{tag.name}
|
|
||||||
</button>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Arrow Icon -->
|
|
||||||
<div
|
|
||||||
class="hidden items-center text-ink-3 transition-colors group-hover:text-accent sm:flex"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg"
|
|
||||||
alt=""
|
|
||||||
aria-hidden="true"
|
|
||||||
class="h-6 w-6"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
{:else}
|
|
||||||
<!-- Empty State -->
|
|
||||||
<div class="p-16 text-center">
|
|
||||||
<div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
|
|
||||||
<img
|
|
||||||
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
|
|
||||||
alt=""
|
|
||||||
aria-hidden="true"
|
|
||||||
class="h-6 w-6"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<h3 class="font-serif text-lg font-medium text-ink">{m.docs_empty_heading()}</h3>
|
|
||||||
<p class="mt-1 font-sans text-sm text-ink-2">
|
|
||||||
{m.docs_empty_text()}
|
|
||||||
</p>
|
|
||||||
<button
|
|
||||||
onclick={() => goto('/')}
|
|
||||||
class="mt-6 text-sm font-bold tracking-wide text-accent uppercase transition hover:text-ink"
|
|
||||||
>
|
|
||||||
{m.docs_empty_btn_clear()}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
bind:this={fileInput}
|
|
||||||
type="file"
|
|
||||||
multiple
|
|
||||||
accept=".pdf,.jpg,.jpeg,.png,.tif,.tiff"
|
|
||||||
class="sr-only"
|
|
||||||
onchange={handleFileSelect}
|
|
||||||
/>
|
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
177
frontend/src/routes/DocumentList.svelte
Normal file
177
frontend/src/routes/DocumentList.svelte
Normal file
@@ -0,0 +1,177 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
|
import { m } from '$lib/paraglide/messages.js';
|
||||||
|
import { formatDate } from '$lib/utils/date';
|
||||||
|
|
||||||
|
let {
|
||||||
|
documents,
|
||||||
|
canWrite,
|
||||||
|
error
|
||||||
|
}: {
|
||||||
|
documents: {
|
||||||
|
id: string;
|
||||||
|
title?: string | null;
|
||||||
|
originalFilename: string;
|
||||||
|
documentDate?: string | null;
|
||||||
|
location?: string | null;
|
||||||
|
sender?: { firstName: string; lastName: string } | null;
|
||||||
|
receivers?: { firstName: string; lastName: string }[];
|
||||||
|
tags?: { id: string; name: string }[];
|
||||||
|
}[];
|
||||||
|
canWrite: boolean;
|
||||||
|
error?: string | null;
|
||||||
|
} = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- DOCUMENT LIST HEADER -->
|
||||||
|
<div class="mb-2 flex justify-end">
|
||||||
|
{#if canWrite}
|
||||||
|
<a
|
||||||
|
href="/documents/new"
|
||||||
|
class="inline-flex items-center gap-1 text-sm font-medium text-ink/60 transition-colors hover:text-ink"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
|
||||||
|
alt=""
|
||||||
|
aria-hidden="true"
|
||||||
|
class="h-4 w-4"
|
||||||
|
/>
|
||||||
|
{m.docs_btn_new()}
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- DOCUMENT LIST -->
|
||||||
|
<div class="border border-line bg-surface shadow-sm">
|
||||||
|
{#if error}
|
||||||
|
<div class="bg-red-50 p-8 text-center text-red-600">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
{:else if documents.length > 0}
|
||||||
|
<ul class="divide-y divide-line-2">
|
||||||
|
{#each documents as doc (doc.id)}
|
||||||
|
<li class="group transition-colors duration-200 hover:bg-muted/50">
|
||||||
|
<a href="/documents/{doc.id}" class="block p-6">
|
||||||
|
<div class="flex flex-col gap-6 sm:flex-row">
|
||||||
|
<!-- Main Info -->
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="mb-2 flex items-baseline justify-between">
|
||||||
|
<h3
|
||||||
|
class="font-serif text-xl font-medium text-ink decoration-brand-mint decoration-2 underline-offset-4 group-hover:underline"
|
||||||
|
>
|
||||||
|
{doc.title || doc.originalFilename}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Metadata Row -->
|
||||||
|
<div class="mb-4 flex flex-wrap gap-6 font-sans text-sm text-ink-2">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<img
|
||||||
|
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Calendar/Calendar-Add-MD.svg"
|
||||||
|
alt=""
|
||||||
|
aria-hidden="true"
|
||||||
|
class="mr-1.5 h-4 w-4"
|
||||||
|
/>
|
||||||
|
{doc.documentDate ? formatDate(doc.documentDate) : '—'}
|
||||||
|
</div>
|
||||||
|
{#if doc.location}
|
||||||
|
<div class="flex items-center">
|
||||||
|
<img
|
||||||
|
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Location-MD.svg"
|
||||||
|
alt=""
|
||||||
|
aria-hidden="true"
|
||||||
|
class="mr-1.5 h-4 w-4"
|
||||||
|
/>
|
||||||
|
{doc.location}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sender/Receiver Info -->
|
||||||
|
<div class="grid grid-cols-1 gap-4 font-serif text-sm sm:grid-cols-2">
|
||||||
|
<div class="flex items-baseline">
|
||||||
|
<span
|
||||||
|
class="w-10 font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
|
||||||
|
>{m.docs_list_from()}</span
|
||||||
|
>
|
||||||
|
{#if doc.sender}
|
||||||
|
<span class="text-ink">{doc.sender.firstName} {doc.sender.lastName}</span>
|
||||||
|
{:else}
|
||||||
|
<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<div class="flex items-baseline">
|
||||||
|
<span
|
||||||
|
class="w-10 font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
|
||||||
|
>{m.docs_list_to()}</span
|
||||||
|
>
|
||||||
|
{#if doc.receivers && doc.receivers.length > 0}
|
||||||
|
<span class="text-ink">
|
||||||
|
{doc.receivers.map((p) => p.firstName + ' ' + p.lastName).join(', ')}
|
||||||
|
</span>
|
||||||
|
{:else}
|
||||||
|
<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tags Display -->
|
||||||
|
{#if doc.tags && doc.tags.length > 0}
|
||||||
|
<div class="mt-4 flex flex-wrap gap-2 pt-3">
|
||||||
|
{#each doc.tags as tag (tag.id)}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="relative z-10 inline-flex cursor-pointer items-center rounded bg-muted px-2 py-1 text-[10px] font-bold tracking-widest text-ink uppercase transition-colors hover:bg-primary hover:text-white"
|
||||||
|
onclick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
goto(`/?tag=${encodeURIComponent(tag.name)}`);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{tag.name}
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Arrow Icon -->
|
||||||
|
<div
|
||||||
|
class="hidden items-center text-ink-3 transition-colors group-hover:text-accent sm:flex"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg"
|
||||||
|
alt=""
|
||||||
|
aria-hidden="true"
|
||||||
|
class="h-6 w-6"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
{:else}
|
||||||
|
<!-- Empty State -->
|
||||||
|
<div class="p-16 text-center">
|
||||||
|
<div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
|
||||||
|
<img
|
||||||
|
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
|
||||||
|
alt=""
|
||||||
|
aria-hidden="true"
|
||||||
|
class="h-6 w-6"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-serif text-lg font-medium text-ink">{m.docs_empty_heading()}</h3>
|
||||||
|
<p class="mt-1 font-sans text-sm text-ink-2">
|
||||||
|
{m.docs_empty_text()}
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onclick={() => goto('/')}
|
||||||
|
class="mt-6 text-sm font-bold tracking-wide text-accent uppercase transition hover:text-ink"
|
||||||
|
>
|
||||||
|
{m.docs_empty_btn_clear()}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
213
frontend/src/routes/DropZone.svelte
Normal file
213
frontend/src/routes/DropZone.svelte
Normal file
@@ -0,0 +1,213 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { invalidateAll } from '$app/navigation';
|
||||||
|
import { m } from '$lib/paraglide/messages.js';
|
||||||
|
import { getErrorMessage } from '$lib/errors';
|
||||||
|
|
||||||
|
const ACCEPTED_TYPES = ['application/pdf', 'image/jpeg', 'image/png', 'image/tiff'];
|
||||||
|
|
||||||
|
let isDragging = $state(false);
|
||||||
|
let windowDragging = $state(false);
|
||||||
|
let dragCounter = 0;
|
||||||
|
let isUploading = $state(false);
|
||||||
|
let uploadProgress = $state(0);
|
||||||
|
let uploadMessages = $state<{ text: string; isError: boolean; link?: string }[]>([]);
|
||||||
|
let fileInput: HTMLInputElement;
|
||||||
|
|
||||||
|
function handleDragOver(e: DragEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
isDragging = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDragLeave() {
|
||||||
|
isDragging = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleDrop(e: DragEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
isDragging = false;
|
||||||
|
windowDragging = false;
|
||||||
|
dragCounter = 0;
|
||||||
|
const files = Array.from(e.dataTransfer?.files ?? []);
|
||||||
|
await uploadFiles(files);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleFileSelect(e: Event) {
|
||||||
|
const input = e.target as HTMLInputElement;
|
||||||
|
const files = Array.from(input.files ?? []);
|
||||||
|
input.value = '';
|
||||||
|
await uploadFiles(files);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function uploadFiles(files: File[]) {
|
||||||
|
if (files.length === 0) return;
|
||||||
|
|
||||||
|
const messages: { text: string; isError: boolean; link?: string }[] = [];
|
||||||
|
|
||||||
|
const valid: File[] = [];
|
||||||
|
for (const file of files) {
|
||||||
|
if (!ACCEPTED_TYPES.includes(file.type)) {
|
||||||
|
messages.push({ text: m.upload_invalid_type({ filename: file.name }), isError: true });
|
||||||
|
} else {
|
||||||
|
valid.push(file);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (valid.length === 0) {
|
||||||
|
uploadMessages = messages;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
isUploading = true;
|
||||||
|
uploadProgress = 0;
|
||||||
|
try {
|
||||||
|
const formData = new FormData();
|
||||||
|
for (const file of valid) {
|
||||||
|
formData.append('files', file);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { ok, body } = await new Promise<{ ok: boolean; body: string }>((resolve, reject) => {
|
||||||
|
const xhr = new XMLHttpRequest();
|
||||||
|
xhr.open('POST', '/api/documents/quick-upload');
|
||||||
|
xhr.upload.addEventListener('progress', (e) => {
|
||||||
|
if (e.lengthComputable) uploadProgress = Math.round((e.loaded / e.total) * 100);
|
||||||
|
});
|
||||||
|
xhr.addEventListener('load', () => resolve({ ok: xhr.status < 300, body: xhr.responseText }));
|
||||||
|
xhr.addEventListener('error', () => reject(new Error('Network error')));
|
||||||
|
xhr.send(formData);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (ok) {
|
||||||
|
const result = JSON.parse(body);
|
||||||
|
if (result.created?.length > 0) {
|
||||||
|
messages.push({ text: m.upload_success({ count: result.created.length }), isError: false });
|
||||||
|
}
|
||||||
|
for (const doc of result.updated ?? []) {
|
||||||
|
messages.push({
|
||||||
|
text: m.upload_duplicate({ filename: doc.originalFilename }),
|
||||||
|
isError: false,
|
||||||
|
link: `/documents/${doc.id}`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
for (const err of result.errors ?? []) {
|
||||||
|
messages.push({
|
||||||
|
text: `${err.filename}: ${getErrorMessage(err.code)}`,
|
||||||
|
isError: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
await invalidateAll();
|
||||||
|
} else {
|
||||||
|
for (const file of valid) {
|
||||||
|
messages.push({ text: m.upload_error({ filename: file.name }), isError: true });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
isUploading = false;
|
||||||
|
uploadProgress = 0;
|
||||||
|
uploadMessages = messages;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
function onWindowDragEnter(e: DragEvent) {
|
||||||
|
if (!e.dataTransfer?.types.includes('Files')) return;
|
||||||
|
dragCounter++;
|
||||||
|
windowDragging = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onWindowDragLeave() {
|
||||||
|
dragCounter--;
|
||||||
|
if (dragCounter <= 0) {
|
||||||
|
dragCounter = 0;
|
||||||
|
windowDragging = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onWindowDrop() {
|
||||||
|
dragCounter = 0;
|
||||||
|
windowDragging = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('dragenter', onWindowDragEnter);
|
||||||
|
window.addEventListener('dragleave', onWindowDragLeave);
|
||||||
|
window.addEventListener('drop', onWindowDrop);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('dragenter', onWindowDragEnter);
|
||||||
|
window.removeEventListener('dragleave', onWindowDragLeave);
|
||||||
|
window.removeEventListener('drop', onWindowDrop);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
class="mb-4 flex cursor-pointer items-center justify-center gap-3 border border-dashed px-6 text-sm transition-all duration-200 {isDragging
|
||||||
|
? 'border-primary bg-accent-bg py-10 text-primary'
|
||||||
|
: windowDragging
|
||||||
|
? 'border-primary/60 bg-accent-bg/50 py-10 text-primary/80'
|
||||||
|
: 'border-ink/20 py-3 text-ink-3 hover:border-primary hover:text-primary'}"
|
||||||
|
ondragover={handleDragOver}
|
||||||
|
ondragleave={handleDragLeave}
|
||||||
|
ondrop={handleDrop}
|
||||||
|
onclick={() => fileInput.click()}
|
||||||
|
onkeydown={(e) => e.key === 'Enter' && fileInput.click()}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="h-4 w-4 shrink-0 opacity-50"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
||||||
|
<polyline points="17 8 12 3 7 8" />
|
||||||
|
<line x1="12" y1="3" x2="12" y2="15" />
|
||||||
|
</svg>
|
||||||
|
{#if isUploading}
|
||||||
|
<div class="flex w-48 flex-col items-center gap-1">
|
||||||
|
<div class="h-1.5 w-full overflow-hidden rounded-full bg-ink/10">
|
||||||
|
<div
|
||||||
|
class="h-full rounded-full bg-primary transition-all duration-200"
|
||||||
|
style="width: {uploadProgress}%"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<span class="font-sans text-xs text-ink-3">{uploadProgress}%</span>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<span class="font-sans font-medium">{m.upload_drop_hint()}</span>
|
||||||
|
<span class="font-sans text-xs text-ink-3">{m.upload_accepted_types()}</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if uploadMessages.length > 0}
|
||||||
|
<div class="mb-4 flex flex-col gap-1">
|
||||||
|
{#each uploadMessages as msg, i (i)}
|
||||||
|
<p
|
||||||
|
class="font-sans text-sm {msg.isError
|
||||||
|
? 'text-red-600'
|
||||||
|
: msg.link
|
||||||
|
? 'text-amber-700'
|
||||||
|
: 'text-green-700'}"
|
||||||
|
>
|
||||||
|
{msg.text}
|
||||||
|
{#if msg.link}
|
||||||
|
<a href={msg.link} class="underline hover:no-underline">{m.upload_duplicate_link()}</a>
|
||||||
|
{/if}
|
||||||
|
</p>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<input
|
||||||
|
bind:this={fileInput}
|
||||||
|
type="file"
|
||||||
|
multiple
|
||||||
|
accept=".pdf,.jpg,.jpeg,.png,.tif,.tiff"
|
||||||
|
class="sr-only"
|
||||||
|
onchange={handleFileSelect}
|
||||||
|
/>
|
||||||
164
frontend/src/routes/SearchFilterBar.svelte
Normal file
164
frontend/src/routes/SearchFilterBar.svelte
Normal file
@@ -0,0 +1,164 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
|
||||||
|
import TagInput from '$lib/components/TagInput.svelte';
|
||||||
|
import { slide } from 'svelte/transition';
|
||||||
|
import { m } from '$lib/paraglide/messages.js';
|
||||||
|
|
||||||
|
let {
|
||||||
|
q = $bindable(''),
|
||||||
|
from = $bindable(''),
|
||||||
|
to = $bindable(''),
|
||||||
|
senderId = $bindable(''),
|
||||||
|
receiverId = $bindable(''),
|
||||||
|
tagNames = $bindable<string[]>([]),
|
||||||
|
showAdvanced = $bindable(false),
|
||||||
|
initialSenderName = '',
|
||||||
|
initialReceiverName = '',
|
||||||
|
onSearch,
|
||||||
|
onfocus,
|
||||||
|
onblur
|
||||||
|
}: {
|
||||||
|
q?: string;
|
||||||
|
from?: string;
|
||||||
|
to?: string;
|
||||||
|
senderId?: string;
|
||||||
|
receiverId?: string;
|
||||||
|
tagNames?: string[];
|
||||||
|
showAdvanced?: boolean;
|
||||||
|
initialSenderName?: string;
|
||||||
|
initialReceiverName?: string;
|
||||||
|
onSearch: () => void;
|
||||||
|
onfocus?: () => void;
|
||||||
|
onblur?: () => void;
|
||||||
|
} = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="mb-8 rounded-sm border border-line bg-surface p-6 shadow-sm">
|
||||||
|
<!-- ROW 1: Main Search (One Line) -->
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<!-- Full Text Search -->
|
||||||
|
<div class="relative flex-1">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
bind:value={q}
|
||||||
|
oninput={onSearch}
|
||||||
|
onfocus={onfocus}
|
||||||
|
onblur={onblur}
|
||||||
|
placeholder={m.docs_search_placeholder()}
|
||||||
|
class="block w-full border-line py-2.5 pr-10 pl-3 placeholder-ink-3 shadow-sm focus:border-ink focus:ring-ink"
|
||||||
|
/>
|
||||||
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||||
|
<img
|
||||||
|
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
|
||||||
|
alt=""
|
||||||
|
aria-hidden="true"
|
||||||
|
class="h-4 w-4 opacity-40"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Toggle Advanced Button -->
|
||||||
|
<button
|
||||||
|
onclick={() => (showAdvanced = !showAdvanced)}
|
||||||
|
class="flex items-center gap-2 border border-line bg-muted px-4 py-2.5 text-sm font-bold tracking-wide text-ink-2 uppercase transition hover:bg-muted hover:text-ink"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/degruyter-icons/Simple/Small-16px/SVG/Action/Chevron/Chevron-Down-SM.svg"
|
||||||
|
alt=""
|
||||||
|
aria-hidden="true"
|
||||||
|
class="h-4 w-4 transform transition-transform duration-200 {showAdvanced ? 'rotate-180' : ''}"
|
||||||
|
/>
|
||||||
|
{m.docs_btn_filter()}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Reset Button -->
|
||||||
|
<a
|
||||||
|
href="/"
|
||||||
|
class="flex items-center justify-center border border-transparent px-3 py-2.5 text-ink-3 transition hover:text-red-500"
|
||||||
|
title={m.docs_btn_reset_title()}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Close-MD.svg"
|
||||||
|
alt=""
|
||||||
|
aria-hidden="true"
|
||||||
|
class="h-5 w-5 opacity-40"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ROW 2: Advanced Filters (Collapsible) -->
|
||||||
|
{#if showAdvanced}
|
||||||
|
<div
|
||||||
|
transition:slide
|
||||||
|
class="mt-6 grid grid-cols-1 gap-6 border-t border-line-2 pt-6 md:grid-cols-12"
|
||||||
|
>
|
||||||
|
<!-- Tag Filter -->
|
||||||
|
<div class="md:col-span-12">
|
||||||
|
<p class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase">
|
||||||
|
{m.docs_filter_label_tags()}
|
||||||
|
</p>
|
||||||
|
<TagInput bind:tags={tagNames} allowCreation={false} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sender -->
|
||||||
|
<div class="md:col-span-3">
|
||||||
|
<div
|
||||||
|
class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
|
||||||
|
>
|
||||||
|
<PersonTypeahead
|
||||||
|
name="senderId"
|
||||||
|
label={m.docs_filter_label_sender()}
|
||||||
|
bind:value={senderId}
|
||||||
|
initialName={initialSenderName}
|
||||||
|
onchange={onSearch}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Receiver -->
|
||||||
|
<div class="md:col-span-3">
|
||||||
|
<div
|
||||||
|
class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
|
||||||
|
>
|
||||||
|
<PersonTypeahead
|
||||||
|
name="receiverId"
|
||||||
|
label={m.docs_filter_label_receivers()}
|
||||||
|
bind:value={receiverId}
|
||||||
|
initialName={initialReceiverName}
|
||||||
|
onchange={onSearch}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Dates -->
|
||||||
|
<div class="grid grid-cols-2 gap-4 md:col-span-6">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="from"
|
||||||
|
class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
|
||||||
|
>{m.docs_filter_label_from()}</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
id="from"
|
||||||
|
bind:value={from}
|
||||||
|
onchange={onSearch}
|
||||||
|
class="block w-full border-line py-2.5 text-sm shadow-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="to" class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
|
||||||
|
>{m.docs_filter_label_to()}</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
id="to"
|
||||||
|
bind:value={to}
|
||||||
|
onchange={onSearch}
|
||||||
|
class="block w-full border-line py-2.5 text-sm shadow-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user