familienarchiv/frontend/src/lib/components/PersonMultiSelect.svelte

<script lang="ts">
import type { components } from '$lib/generated/api';
import { m } from '$lib/paraglide/messages.js';
import { clickOutside } from '$lib/actions/clickOutside';
type Person = components['schemas']['Person'];

interface Props {
	selectedPersons?: Person[];
}

let { selectedPersons = $bindable([]) }: Props = $props();

let searchTerm = $state('');
let results: Person[] = $state([]);
let showDropdown = $state(false);
let loading = $state(false);
let debounceTimer: ReturnType<typeof setTimeout>;
let inputEl: HTMLInputElement;
let dropdownStyle = $state('');

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() {
	showDropdown = true;
	clearTimeout(debounceTimer);
	debounceTimer = setTimeout(async () => {
		if (searchTerm.length < 1) {
			results = [];
			return;
		}
		loading = true;
		try {
			const res = await fetch(`/api/persons?q=${encodeURIComponent(searchTerm)}`);
			if (res.ok) {
				const all: Person[] = await res.json();
				results = all.filter((p) => !selectedPersons.some((s) => s.id === p.id));
			}
		} catch {
			results = [];
		} finally {
			loading = false;
		}
	}, 300);
}

function selectPerson(person: Person) {
	selectedPersons = [...selectedPersons, person];
	searchTerm = '';
	showDropdown = false;
	results = [];
}

function removePerson(id: string | undefined) {
	selectedPersons = selectedPersons.filter((p) => p.id !== id);
}
</script>

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

{#each selectedPersons as person (person.id)}
	<input type="hidden" name="receiverIds" value={person.id} />
{/each}

<div class="relative" use:clickOutside onclickoutside={() => (showDropdown = false)}>
	<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 selectedPersons as person (person.id)}
			<span
				class="inline-flex items-center gap-1 rounded bg-muted px-2 py-1 text-sm font-medium text-ink"
			>
				{person.displayName}
				<button
					type="button"
					onclick={() => removePerson(person.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(); showDropdown = true; }}
			placeholder={selectedPersons.length === 0 ? m.comp_multiselect_placeholder() : ''}
			class="min-w-[120px] flex-1 border-none bg-transparent p-1 text-sm outline-none focus:ring-0"
		/>
	</div>

	{#if showDropdown && (results.length > 0 || loading)}
		<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 loading}
				<div class="p-2 text-sm text-ink-2">{m.comp_multiselect_loading()}</div>
			{:else}
				{#each results as person (person.id)}
					<div
						class="cursor-pointer py-2 pr-9 pl-3 text-ink select-none hover:bg-muted"
						onclick={() => selectPerson(person)}
						onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
						role="button"
						tabindex="0"
					>
						{person.displayName}
					</div>
				{/each}
			{/if}
		</div>
	{/if}
</div>