familienarchiv/frontend/src/lib/document/DocumentMultiSelect.svelte

<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import { clickOutside } from '$lib/shared/actions/clickOutside';
import {
	createDocumentTypeahead,
	formatDocumentOption,
	type DocumentOption
} from './documentTypeahead';

interface Props {
	selectedDocuments?: DocumentOption[];
	placeholder?: string;
	hiddenInputName?: string;
}

let {
	selectedDocuments = $bindable([]),
	placeholder = m.geschichte_editor_search_document(),
	hiddenInputName = 'documentIds'
}: Props = $props();

let searchTerm = $state('');
let inputEl: HTMLInputElement;
let dropdownStyle = $state('');

const picker = createDocumentTypeahead();

// Filter out already-selected documents from typeahead results.
const filteredResults = $derived(
	picker.results.filter((d) => !selectedDocuments.some((s) => s.id === d.id))
);

function updateDropdownPosition() {
	if (!inputEl) return;
	const rect = inputEl.getBoundingClientRect();
	dropdownStyle = `position:fixed;top:${rect.bottom + 4}px;left:${rect.left}px;width:${rect.width}px`;
}

function handleInput() {
	if (searchTerm.trim().length >= 1) {
		picker.setQuery(searchTerm);
	} else {
		picker.close();
	}
}

function selectDocument(doc: DocumentOption) {
	selectedDocuments = [...selectedDocuments, doc];
	searchTerm = '';
	picker.close();
}

function removeDocument(id: string | undefined) {
	selectedDocuments = selectedDocuments.filter((d) => d.id !== id);
}
</script>

<svelte:window onscroll={updateDropdownPosition} onresize={updateDropdownPosition} />

{#each selectedDocuments as doc (doc.id)}
	<input type="hidden" name={hiddenInputName} value={doc.id} />
{/each}

<div class="relative" use:clickOutside onclickoutside={() => picker.close()}>
	<div
		class="flex min-h-[38px] flex-wrap gap-2 rounded border border-line bg-surface p-2 shadow-sm focus-within:ring-2 focus-within:ring-focus-ring focus-within:outline-none"
	>
		{#each selectedDocuments as doc (doc.id)}
			<span
				class="inline-flex items-center gap-1 rounded bg-muted px-2 py-1 text-sm font-medium text-ink"
			>
				{formatDocumentOption(doc)}
				<button
					type="button"
					onclick={() => removeDocument(doc.id)}
					class="ml-0.5 text-ink/50 hover:text-red-500 focus:outline-none"
					aria-label={m.comp_multiselect_remove()}
				>
					<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M6 18L18 6M6 6l12 12"
						/>
					</svg>
				</button>
			</span>
		{/each}

		<input
			bind:this={inputEl}
			type="text"
			autocomplete="off"
			bind:value={searchTerm}
			oninput={handleInput}
			onfocus={() => updateDropdownPosition()}
			placeholder={placeholder}
			class="min-w-[120px] flex-1 border-none bg-transparent p-1 text-sm outline-none focus:ring-0"
		/>
	</div>

	{#if picker.isOpen && (filteredResults.length > 0 || picker.loading || picker.error)}
		<div
			style={dropdownStyle}
			class="ring-opacity-5 z-50 max-h-60 overflow-auto rounded-md bg-surface py-1 text-base shadow-lg ring-1 ring-black sm:text-sm"
		>
			{#if picker.loading}
				<div class="p-2 text-sm text-ink-2">{m.comp_multiselect_loading()}</div>
			{:else if picker.error}
				<div role="alert" class="p-2 text-sm text-danger">{m.comp_typeahead_error()}</div>
			{:else}
				{#each filteredResults as doc (doc.id)}
					<div
						class="cursor-pointer py-2 pr-9 pl-3 text-ink select-none hover:bg-muted"
						onclick={() => selectDocument(doc)}
						onkeydown={(e) => e.key === 'Enter' && selectDocument(doc)}
						role="button"
						tabindex="0"
					>
						{formatDocumentOption(doc)}
					</div>
				{/each}
			{/if}
		</div>
	{/if}
</div>