includio-cms 0.5.3 → 0.5.7

package/dist/admin/components/fields/relation-field.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
 	import type { RelationFieldData, RelationField } from '../../../types/fields.js';
-	import type { CollectionConfig } from '../../../types/collections.js';
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import { buttonVariants } from '../../../components/ui/button/button.svelte';
-	import { getCollectionEntryLabel } from '../../utils/entryLabel.js';
 	import { onMount, tick, untrack } from 'svelte';
 	import { useId } from 'bits-ui';
 	import * as Popover from '../../../components/ui/popover/index.js';
 	import * as Command from '../../../components/ui/command/index.js';
 	import { cn } from '../../../utils.js';
-	import Selector from '@tabler/icons-svelte/icons/selector';
 	import Check from '@tabler/icons-svelte/icons/check';
 	import X from '@tabler/icons-svelte/icons/x';
+	import Plus from '@tabler/icons-svelte/icons/plus';
 	import GripVertical from '@tabler/icons-svelte/icons/grip-vertical';
-	import { getContentLanguage } from '../../state/content-language.svelte.js';
+	import ChevronUp from '@tabler/icons-svelte/icons/chevron-up';
+	import ChevronDown from '@tabler/icons-svelte/icons/chevron-down';
+	import Spinner from '../../../components/ui/spinner/spinner.svelte';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
@@ -21,14 +21,62 @@
 	import { arrayMove } from '../../utils/arrayMove.js';
 	import { flip } from 'svelte/animate';
 	import { fade } from 'svelte/transition';
+	import RelationPickerDialog from './relation-picker-dialog.svelte';
 
-	const lang: Record<InterfaceLanguage, { select: string; search: string; selected: string }> = {
-		en: { select: 'Select', search: 'Search', selected: 'selected' },
-		pl: { select: 'Wybierz', search: 'Szukaj', selected: 'wybranych' }
+	const lang: Record<
+		InterfaceLanguage,
+		{
+			select: string;
+			search: string;
+			selected: string;
+			add: string;
+			noResults: string;
+			clear: string;
+			remove: string;
+			reorder: string;
+			moveUp: string;
+			moveDown: string;
+			movedTo: string;
+			loading: string;
+			dialogTitle: string;
+			closeDialog: string;
+		}
+	> = {
+		en: {
+			select: 'Select',
+			search: 'Search',
+			selected: 'selected',
+			add: 'Add',
+			noResults: 'No results found',
+			clear: 'Clear selection',
+			remove: 'Remove',
+			reorder: 'Reorder',
+			moveUp: 'Move up',
+			moveDown: 'Move down',
+			movedTo: 'Moved to position',
+			loading: 'Loading...',
+			dialogTitle: 'Select',
+			closeDialog: 'Close'
+		},
+		pl: {
+			select: 'Wybierz',
+			search: 'Szukaj',
+			selected: 'wybranych',
+			add: 'Dodaj',
+			noResults: 'Brak wyników',
+			clear: 'Wyczyść wybór',
+			remove: 'Usuń',
+			reorder: 'Zmień kolejność',
+			moveUp: 'Przenieś wyżej',
+			moveDown: 'Przenieś niżej',
+			movedTo: 'Przeniesiono na pozycję',
+			loading: 'Ładowanie...',
+			dialogTitle: 'Wybierz',
+			closeDialog: 'Zamknij'
+		}
 	};
 
 	const remotes = getRemotes();
-	const contentLanguage = getContentLanguage();
 	const interfaceLanguage = useInterfaceLanguage();
 
 	type Props = {
@@ -39,6 +87,7 @@
 	let { field, value = $bindable(), ...props }: Props = $props();
 
 	const multiple = $derived(field.multiple === true);
+	const t = $derived(lang[interfaceLanguage.current]);
 
 	// Ensure value is array when multiple
 	onMount(() => {
@@ -47,7 +96,7 @@
 		}
 	});
 
-	// Helper to get current array value safely
+	// --- Value helpers ---
 	function getArrayValue(): string[] {
 		if (Array.isArray(value)) return value;
 		return value ? [value] : [];
@@ -58,11 +107,16 @@
 	}
 
 	function toggleItem(id: string) {
-		const arr = getArrayValue();
-		if (arr.includes(id)) {
-			value = arr.filter((v) => v !== id);
+		if (multiple) {
+			const arr = getArrayValue();
+			if (arr.includes(id)) {
+				value = arr.filter((v) => v !== id);
+			} else {
+				value = [...arr, id];
+			}
 		} else {
-			value = [...arr, id];
+			value = id;
+			pickerOpen = false;
 		}
 	}
 
@@ -70,195 +124,420 @@
 		value = getArrayValue().filter((v) => v !== id);
 	}
 
-	type RelationOption = { label: string; value: string };
-	type RelationData = { collectionConfig: CollectionConfig; options: RelationOption[] };
+	function clearValue() {
+		value = multiple ? [] : '';
+	}
+
+	// --- Labels cache (for displaying selected items) ---
+	type LabelEntry = { id: string; label: string };
+	let labelCache = $state<Map<string, string>>(new Map());
 
-	let relationData = $state<RelationData | null>(null);
-	let loading = $state(true);
+	// Resolve labels for selected IDs not yet in cache
+	async function resolveLabels(ids: string[]) {
+		const missing = ids.filter((id) => !labelCache.has(id));
+		if (missing.length === 0) return;
 
+		const results = await remotes.getEntryLabels({
+			slug: field.collection,
+			ids: missing
+		});
+		const newCache = new Map(labelCache);
+		for (const r of results) {
+			newCache.set(r.id, r.label);
+		}
+		labelCache = newCache;
+	}
+
+	// Resolve labels whenever value changes
 	$effect(() => {
-		const collection = field.collection;
-		const currentLang = contentLanguage.current;
+		const ids = getArrayValue();
+		if (ids.length > 0) {
+			untrack(() => resolveLabels(ids));
+		}
+	});
+
+	function getLabel(id: string): string {
+		return labelCache.get(id) ?? id;
+	}
+
+	// --- Picker state ---
+	let pickerOpen = $state(false);
+	let searchValue = $state('');
+	let pickerOptions = $state<LabelEntry[]>([]);
+	let pickerLoading = $state(false);
+	let totalCount = $state(0);
+	let initialLoading = $state(true);
+
+	// Auto-detect mode: <=30 published → inline popover, >30 → dialog
+	let useDialog = $state(false);
+
+	// Debounced search
+	let searchTimeout: ReturnType<typeof setTimeout> | null = null;
+
+	function debouncedSearch(query: string) {
+		if (searchTimeout) clearTimeout(searchTimeout);
+		searchTimeout = setTimeout(() => fetchOptions(query), 300);
+	}
+
+	async function fetchOptions(search?: string) {
+		pickerLoading = true;
+		try {
+			const results = await remotes.getEntryLabels({
+				slug: field.collection,
+				search: search || undefined,
+				status: 'published',
+				limit: 100
+			});
+			pickerOptions = results.map((r) => ({ id: r.id, label: r.label }));
+			if (results.length > 0) {
+				totalCount = results[0].total;
+			} else if (!search) {
+				totalCount = 0;
+			}
+		} finally {
+			pickerLoading = false;
+		}
+	}
 
+	// Initial load to determine mode + count
+	onMount(async () => {
+		try {
+			const results = await remotes.getEntryLabels({
+				slug: field.collection,
+				status: 'published',
+				limit: 100
+			});
+			pickerOptions = results.map((r) => ({ id: r.id, label: r.label }));
+			totalCount = results.length > 0 ? results[0].total : 0;
+			useDialog = totalCount > 30;
+
+			// Populate label cache from initial load
+			const newCache = new Map(labelCache);
+			for (const r of results) {
+				newCache.set(r.id, r.label);
+			}
+			labelCache = newCache;
+		} finally {
+			initialLoading = false;
+		}
+	});
+
+	function handleSearchChange(val: string) {
+		searchValue = val;
+		debouncedSearch(val);
+	}
+
+	function openPicker() {
+		searchValue = '';
+		fetchOptions();
+		pickerOpen = true;
+	}
+
+	function closePicker() {
+		pickerOpen = false;
+		searchValue = '';
+	}
+
+	// --- Collection config ---
+	let collectionLabel = $state('');
+	let singularLabel = $state('');
+
+	$effect(() => {
+		const slug = field.collection;
 		untrack(() => {
-			loading = true;
-			Promise.all([
-				remotes.getCollection(collection),
-				remotes.getEntries({ slug: collection, language: currentLang })
-			]).then(([collectionConfig, entries]) => {
-				const options = entries.map((entry) => ({
-					label: getCollectionEntryLabel(entry, collectionConfig),
-					value: entry.id
-				}));
-				relationData = { collectionConfig, options };
-				loading = false;
+			remotes.getCollection(slug).then((config) => {
+				collectionLabel =
+					getLocalizedLabel(config.labels?.plural, interfaceLanguage.current) || config.slug;
+				singularLabel =
+					getLocalizedLabel(config.labels?.singular, interfaceLanguage.current) || config.slug;
 			});
 		});
 	});
 
-	let open = $state(false);
+	// Popover state (inline mode)
+	let popoverOpen = $state(false);
+	const triggerId = useId();
 
-	function closeAndFocusTrigger(triggerId: string) {
-		open = false;
+	function closePopoverAndFocus() {
+		popoverOpen = false;
 		tick().then(() => {
 			document.getElementById(triggerId)?.focus();
 		});
 	}
-	const triggerId = useId();
 
-	function getOptionLabel(id: string): string {
-		return relationData?.options.find((o) => o.value === id)?.label ?? id;
+	// --- Keyboard reorder ---
+	let liveMessage = $state('');
+
+	function moveItem(fromIndex: number, toIndex: number) {
+		const arr = getArrayValue();
+		if (toIndex < 0 || toIndex >= arr.length) return;
+		value = [...arrayMove(arr, fromIndex, toIndex)];
+		const label = getLabel(arr[fromIndex]);
+		liveMessage = `${label}: ${t.movedTo} ${toIndex + 1}`;
 	}
 
-	// Selected items for multi-select display
+	// Selected items for multi-select chip display
 	let selectedItems = $derived(
-		multiple ? getArrayValue().map((id) => ({ id, label: getOptionLabel(id) })) : []
+		multiple ? getArrayValue().map((id) => ({ id, label: getLabel(id) })) : []
 	);
+
+	// Single-select display
+	let singleLabel = $derived(!multiple && value ? getLabel(value as string) : '');
 </script>
 
-{#if loading}
-	<div class="h-10 w-full animate-pulse rounded-md bg-accent"></div>
-{:else if relationData && relationData.options.length > 0}
-	{@const { collectionConfig, options } = relationData}
+{#if initialLoading}
+	<div class="flex h-10 w-full items-center justify-center rounded-md border bg-muted/30">
+		<Spinner class="size-4" />
+	</div>
+{:else if multiple}
+	<!-- Multi-select mode -->
+
+	<!-- Selected items list with drag reorder -->
+	{#if selectedItems.length > 0}
+		<div class="flex flex-col gap-1.5">
+			{#each selectedItems as item, index (item.id)}
+				<div
+					use:droppable={{
+						container: index.toString(),
+						callbacks: {
+							onDrop: (state) => {
+								const dragIndex = parseInt(state.sourceContainer ?? '');
+								const dropIndex = parseInt(state.targetContainer ?? '');
+
+								if (!isNaN(dragIndex) && !isNaN(dropIndex)) {
+									value = [...arrayMove(getArrayValue(), dragIndex, dropIndex)];
+								}
+							}
+						}
+					}}
+					animate:flip={{ duration: 200 }}
+					in:fade={{ duration: 150 }}
+					out:fade={{ duration: 150 }}
+				>
+					<div
+						class="flex items-center gap-1 rounded-md border bg-background px-2 py-1.5 text-sm"
+					>
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
+						<div
+							use:draggable={{ container: index.toString(), dragData: { id: item.id } }}
+							class="cursor-grab text-muted-foreground hover:text-foreground"
+							aria-label="{t.reorder} {item.label}"
+							ondragstart={(e) => e.stopPropagation()}
+							onpointerdown={(e) => e.stopPropagation()}
+						>
+							<GripVertical class="h-3.5 w-3.5" />
+						</div>
+						{#if index > 0}
+							<button
+								type="button"
+								class="shrink-0 text-muted-foreground hover:text-foreground"
+								onclick={() => moveItem(index, index - 1)}
+								aria-label="{t.moveUp} {item.label}"
+							>
+								<ChevronUp class="h-3.5 w-3.5" />
+							</button>
+						{/if}
+						{#if index < selectedItems.length - 1}
+							<button
+								type="button"
+								class="shrink-0 text-muted-foreground hover:text-foreground"
+								onclick={() => moveItem(index, index + 1)}
+								aria-label="{t.moveDown} {item.label}"
+							>
+								<ChevronDown class="h-3.5 w-3.5" />
+							</button>
+						{/if}
+						<span class="flex-1 truncate">{item.label}</span>
+						<button
+							type="button"
+							class="shrink-0 text-muted-foreground hover:text-destructive"
+							onclick={() => removeItem(item.id)}
+							aria-label="{t.remove} {item.label}"
+						>
+							<X class="h-3.5 w-3.5" />
+						</button>
+					</div>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Add trigger -->
+	{#if useDialog}
+		<button
+			type="button"
+			class="mt-1.5 flex w-full items-center justify-center gap-1.5 rounded-md border border-dashed px-3 py-2 text-sm text-muted-foreground transition-colors hover:border-primary hover:text-primary"
+			onclick={openPicker}
+			aria-haspopup="dialog"
+		>
+			<Plus class="h-4 w-4" />
+			{t.add} {singularLabel}
+		</button>
 
-	{#if multiple}
-		<!-- Multi-select mode -->
-		<Popover.Root bind:open>
+		<RelationPickerDialog
+			bind:open={pickerOpen}
+			title="{t.dialogTitle} {collectionLabel}"
+			searchPlaceholder="{t.search} {collectionLabel}..."
+			noResults={t.noResults}
+			closeLabel={t.closeDialog}
+			{multiple}
+			selected={getArrayValue()}
+			options={pickerOptions}
+			loading={pickerLoading}
+			bind:searchValue
+			onSearchChange={handleSearchChange}
+			onSelect={toggleItem}
+			onClose={closePicker}
+		/>
+	{:else}
+		<Popover.Root bind:open={popoverOpen}>
 			<Popover.Trigger
 				id={triggerId}
-				class={cn(
-					buttonVariants({ variant: 'outline' }),
-					'justify-between',
-					'text-muted-foreground'
-				)}
+				class="mt-1.5 flex w-full items-center justify-center gap-1.5 rounded-md border border-dashed px-3 py-2 text-sm text-muted-foreground transition-colors hover:border-primary hover:text-primary"
 				role="combobox"
-				{...props}
+				aria-expanded={popoverOpen}
 			>
-				{#if getArrayValue().length > 0}
-					{getArrayValue().length} {lang[interfaceLanguage.current].selected}
-				{:else}
-					{lang[interfaceLanguage.current].select} {getLocalizedLabel(collectionConfig.labels?.singular, interfaceLanguage.current) || collectionConfig.slug}
-				{/if}
-				<Selector class="opacity-50" />
+				<Plus class="h-4 w-4" />
+				{t.add} {singularLabel}
 			</Popover.Trigger>
 
-			<Popover.Content class="w-[200px] p-0">
+			<Popover.Content class="min-w-[280px] p-0">
 				<Command.Root>
 					<Command.Input
 						autofocus
-						placeholder="{lang[interfaceLanguage.current].search} {getLocalizedLabel(
-							collectionConfig.labels?.plural,
-							interfaceLanguage.current
-						) || collectionConfig.slug}..."
+						placeholder="{t.search} {collectionLabel}..."
 						class="h-9"
 					/>
-					<Command.Empty>No {collectionConfig.labels?.plural} found.</Command.Empty>
-					<Command.Group value="options">
-						{#each options as option (option.value)}
-							<Command.Item
-								value={option.label}
-								onSelect={() => {
-									toggleItem(option.value);
-								}}
-							>
-								{option.label}
-								<Check
-									class={cn('ml-auto', !isSelected(option.value) && 'text-transparent')}
-								/>
-							</Command.Item>
-						{/each}
-					</Command.Group>
+					<Command.List>
+						<Command.Empty>{t.noResults}</Command.Empty>
+						<Command.Group>
+							{#each pickerOptions as option (option.id)}
+								<Command.Item
+									value={option.label}
+									onSelect={() => toggleItem(option.id)}
+									class="flex items-center gap-2"
+								>
+									<div
+										class={cn(
+											'flex h-4 w-4 shrink-0 items-center justify-center rounded border',
+											isSelected(option.id)
+												? 'border-primary bg-primary text-primary-foreground'
+												: 'border-muted-foreground/30'
+										)}
+									>
+										{#if isSelected(option.id)}
+											<Check class="h-3 w-3" />
+										{/if}
+									</div>
+									<span class="flex-1 truncate">{option.label}</span>
+								</Command.Item>
+							{/each}
+						</Command.Group>
+					</Command.List>
 				</Command.Root>
 			</Popover.Content>
 		</Popover.Root>
+	{/if}
 
-		<!-- Selected items list with drag reorder -->
-		{#if selectedItems.length > 0}
-			<div class="mt-2 flex flex-col gap-1.5">
-				{#each selectedItems as item, index (item.id)}
-					<div
-						use:droppable={{
-							container: index.toString(),
-							callbacks: {
-								onDrop: (state) => {
-									const dragIndex = parseInt(state.sourceContainer ?? '');
-									const dropIndex = parseInt(state.targetContainer ?? '');
-
-									if (!isNaN(dragIndex) && !isNaN(dropIndex)) {
-										value = [...arrayMove(getArrayValue(), dragIndex, dropIndex)];
-									}
-								}
-							}
-						}}
-						animate:flip={{ duration: 200 }}
-						in:fade={{ duration: 150 }}
-						out:fade={{ duration: 150 }}
-					>
-						<div
-							class="flex items-center gap-2 rounded-md border bg-background px-2 py-1.5 text-sm"
-						>
-							<div
-								use:draggable={{ container: index.toString(), dragData: { id: item.id } }}
-								class="cursor-grab text-muted-foreground hover:text-foreground"
-							>
-								<GripVertical class="h-3.5 w-3.5" />
-							</div>
-							<span class="flex-1 truncate">{item.label}</span>
-							<button
-								type="button"
-								class="shrink-0 text-muted-foreground hover:text-destructive"
-								onclick={() => removeItem(item.id)}
-							>
-								<X class="h-3.5 w-3.5" />
-							</button>
-						</div>
-					</div>
-				{/each}
-			</div>
-		{/if}
+	<!-- Live region for screen readers -->
+	<div class="sr-only" aria-live="polite" role="status">
+		{liveMessage || `${getArrayValue().length} ${t.selected}`}
+	</div>
+{:else}
+	<!-- Single-select mode -->
+	{#if value}
+		<!-- Show selected chip -->
+		<div class="flex items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm">
+			<span class="flex-1 truncate">{singleLabel}</span>
+			<button
+				type="button"
+				class="shrink-0 text-muted-foreground hover:text-destructive"
+				onclick={clearValue}
+				aria-label={t.clear}
+			>
+				<X class="h-3.5 w-3.5" />
+			</button>
+		</div>
+	{/if}
+
+	{#if useDialog}
+		<button
+			type="button"
+			class={cn(
+				buttonVariants({ variant: 'outline' }),
+				'w-full justify-between',
+				!value && 'text-muted-foreground',
+				value && 'mt-1.5'
+			)}
+			onclick={openPicker}
+			role="combobox"
+			aria-expanded={pickerOpen}
+			aria-haspopup="dialog"
+			{...props}
+		>
+			{t.select} {singularLabel}
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+		</button>
+
+		<RelationPickerDialog
+			bind:open={pickerOpen}
+			title="{t.dialogTitle} {singularLabel}"
+			searchPlaceholder="{t.search} {collectionLabel}..."
+			noResults={t.noResults}
+			closeLabel={t.closeDialog}
+			{multiple}
+			selected={value ? [value as string] : []}
+			options={pickerOptions}
+			loading={pickerLoading}
+			bind:searchValue
+			onSearchChange={handleSearchChange}
+			onSelect={toggleItem}
+			onClose={closePicker}
+		/>
 	{:else}
-		<!-- Single-select mode -->
-		<Popover.Root bind:open>
+		<Popover.Root bind:open={popoverOpen}>
 			<Popover.Trigger
 				id={triggerId}
 				class={cn(
 					buttonVariants({ variant: 'outline' }),
-					'justify-between',
-					!value && 'text-muted-foreground'
+					'w-full justify-between',
+					!value && 'text-muted-foreground',
+					value && 'mt-1.5'
 				)}
 				role="combobox"
+				aria-expanded={popoverOpen}
 				{...props}
 			>
-				{options.find((f) => f.value === value)?.label ??
-					`${lang[interfaceLanguage.current].select} ${getLocalizedLabel(collectionConfig.labels?.singular, interfaceLanguage.current) || collectionConfig.slug}`}
-				<Selector class="opacity-50" />
+				{t.select} {singularLabel}
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
 			</Popover.Trigger>
 
-			<Popover.Content class="w-[200px] p-0">
+			<Popover.Content class="min-w-[280px] p-0">
 				<Command.Root>
 					<Command.Input
 						autofocus
-						placeholder="{lang[interfaceLanguage.current].search} {getLocalizedLabel(
-							collectionConfig.labels?.plural,
-							interfaceLanguage.current
-						) || collectionConfig.slug}..."
+						placeholder="{t.search} {collectionLabel}..."
 						class="h-9"
 					/>
-					<Command.Empty>No {collectionConfig.labels?.plural} found.</Command.Empty>
-					<Command.Group value="options">
-						{#each options as option (option.value)}
-							<Command.Item
-								value={option.label}
-								onSelect={() => {
-									value = option.value;
-									closeAndFocusTrigger(triggerId);
-								}}
-							>
-								{option.label}
-								<Check class={cn('ml-auto', option.value !== value && 'text-transparent')} />
-							</Command.Item>
-						{/each}
-					</Command.Group>
+					<Command.List>
+						<Command.Empty>{t.noResults}</Command.Empty>
+						<Command.Group>
+							{#each pickerOptions as option (option.id)}
+								<Command.Item
+									value={option.label}
+									onSelect={() => {
+										value = option.id;
+										closePopoverAndFocus();
+									}}
+								>
+									{option.label}
+									<Check
+										class={cn('ml-auto', option.id !== value && 'text-transparent')}
+									/>
+								</Command.Item>
+							{/each}
+						</Command.Group>
+					</Command.List>
 				</Command.Root>
 			</Popover.Content>
 		</Popover.Root>