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
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}
|
||||
/>
|
||||
Reference in New Issue
Block a user