@riducms/admin 0.2.2 → 0.3.0

package/src/fields/relationship/relationship-field.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
+	import { isSortable } from "@dnd-kit-svelte/svelte/sortable";
 	import type { FieldAuthoringHost } from "@riducms/plugin";
 	import type { SchemaField } from "@riducms/protocol";
-	import { fieldControlARIA } from "@riducms/ui";
-	import FileIcon from "~icons/lucide/file";
-	import PencilIcon from "~icons/lucide/pencil";
-	import PlusIcon from "~icons/lucide/plus";
-	import SearchIcon from "~icons/lucide/search";
-	import XIcon from "~icons/lucide/x";
+	import { fieldControlARIA, Button } from "@riducms/ui";
+	import { DragDropProvider, type DragDropEvents } from "@dnd-kit-svelte/svelte";
+	import RelationshipSelection from "@admin/fields/relationship/relationship-selection.svelte";
+	import {
+		parseRelationshipKey,
+		relationshipKey,
+	} from "@admin/fields/relationship/relationship-value";
+	import "@admin/fields/relationship/relationship.scss";
 
-	import { Button } from "@admin/components/ui/button";
 	import type { FormController } from "@admin/core/forms/form-controller.svelte";
 	import { localizeSchemaCollection } from "@admin/core/i18n/localized-schema";
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
@@ -36,30 +38,21 @@
 	});
 	const {
 		browserOpen,
-		documents,
 		hasMany,
 		hydrationError,
 		initialDocument,
 		initialDocumentID,
+		initialCreate,
+		initialFile,
+		selections,
 		issues,
-		polymorphic,
 		selectedID,
 		selectedIDs,
 		selectedTarget,
 		targetCollection,
 		targets,
 	} = $derived(controller);
-	const {
-		commit,
-		initials,
-		isImage,
-		label,
-		mediaURL,
-		openBrowser,
-		remove,
-		selectTarget,
-		setBrowserOpen,
-	} = controller;
+	const { commit, label, openBrowser, selectTarget, setBrowserOpen } = controller;
 	const controlARIA = $derived(
 		fieldControlARIA(field.id, field.admin.description !== undefined, issues.length > 0)
 	);
@@ -94,171 +87,145 @@
 		selectTarget(target);
 		openBrowser();
 	}
+	let dragging = $state(false);
+	const canCreate = $derived(
+		!editingBlocked &&
+			targetCollection !== undefined &&
+			runtime.collectionOperations[targetCollection.slug]?.create === true
+	);
+
+	function reorder(event: Parameters<DragDropEvents["dragend"]>[0]) {
+		const source = event.operation.source;
+		if (event.canceled || editingBlocked || !source || !isSortable(source)) return;
+		controller.move(source.sortable.initialIndex, source.sortable.index);
+	}
+
+	function setSelectedValues(keys: string[]) {
+		if (editingBlocked) return;
+		controller.setReferences(
+			keys.flatMap((key) => {
+				const reference = parseRelationshipKey(key);
+				return reference !== undefined &&
+					targets.some((candidate) => candidate.collectionSlug === reference.relationTo)
+					? [reference]
+					: [];
+			})
+		);
+	}
+
+	function drop(event: DragEvent) {
+		event.preventDefault();
+		dragging = false;
+		const file = event.dataTransfer?.files[0];
+		if (canCreate && file) openBrowser(undefined, true, selectedTarget, file);
+	}
 </script>
 
+{#snippet selectedItems(upload = false)}
+	{#each selections as selection, index (selection.key)}
+		<RelationshipSelection
+			id={selection.key}
+			{index}
+			label={selection.label}
+			document={selection.document}
+			{upload}
+			sortable={hasMany}
+			readOnly={field.admin.readOnly}
+			blocked={form.editingBlocked}
+			onEdit={() => openBrowser(selection.id, false, selection.relationTo)}
+			onRemove={() => controller.removeReference(selection)}
+		/>
+	{/each}
+{/snippet}
+
 <FieldShell {field} {issues}>
 	{#if targetCollection === undefined}
-		<div
-			class="rounded-[4px] border border-destructive/25 bg-destructive/7 p-3 text-[12.5px] text-destructive"
-			role="alert"
-		>
+		<p class="ridu-field-error" role="alert">
 			{runtime.i18n.t("errors:relationshipTargetUnavailable")}
-		</div>
-	{:else if field.upload !== undefined && !hasMany && selectedID !== undefined}
-		{const document = documents[selectedID]}
-		<div
-			class="flex min-h-17 items-center gap-2.5 rounded-[4px] border border-control-border bg-control p-2 aria-invalid:!border-destructive/65"
-			aria-invalid={issues.length > 0}
-		>
-			<button
-				id={field.id}
-				type="button"
-				disabled={form.editingBlocked}
-				class="group flex min-w-0 flex-1 items-center gap-2.5 rounded-[3px] text-start outline-none focus-visible:ring-2 focus-visible:ring-ring/70"
-				onclick={() => openBrowser(selectedID)}
-				aria-label={runtime.i18n.t("fields:edit", { label: label(selectedID) })}
-				{...controlARIA}
-			>
-				<span
-					class="grid size-14 shrink-0 place-items-center overflow-hidden rounded-[3px] border border-control-border bg-background"
-				>
-					{#if isImage(document) && mediaURL(document) !== undefined}
-						<img
-							class="size-full object-cover"
-							src={mediaURL(document)}
-							alt={typeof document?.alt === "string" ? document.alt : ""}
-						/>
-					{:else}
-						<FileIcon class="size-5 text-foreground-faint" />
-					{/if}
-				</span>
-				<span class="min-w-0 flex-1">
-					<span class="block truncate text-[13px] text-foreground-strong group-hover:text-primary">
-						{label(selectedID)}
-					</span>
-					<span class="font-mono mt-0.5 block truncate text-[9.5px] text-foreground-faint">
-						{selectedID}
-					</span>
-					<span class="mt-1.5 flex items-center gap-1 text-[11px] text-foreground-sub">
-						<PencilIcon class="size-3" />
-						{runtime.i18n.t("fields:inspectEdit")}
-					</span>
-				</span>
-			</button>
-			{#if !field.admin.readOnly}
-				<div class="flex shrink-0 flex-wrap justify-end gap-1">
-					<Button
-						variant="outline"
-						size="xs"
-						disabled={form.editingBlocked}
-						onclick={() => openBrowser()}
-					>
-						<SearchIcon class="size-3" />
-						{runtime.i18n.t("general:replace")}
-					</Button>
-					<Button variant="ghost" size="xs" disabled={editingBlocked} onclick={() => commit([])}>
-						<XIcon class="size-3" />
-						{runtime.i18n.t("general:remove")}
-					</Button>
-				</div>
-			{/if}
-		</div>
+		</p>
 	{:else}
-		{#if !hasMany}
-			<RelationshipQuickPicker
-				id={field.id}
-				label={field.admin.label}
-				targets={quickPickerTargets}
-				{selectedTarget}
-				{selectedID}
-				selectedLabel={selectedID === undefined ? undefined : label(selectedID)}
-				selectedInitials={selectedID === undefined ? undefined : initials(selectedID)}
-				placeholder={field.admin.placeholder}
-				readOnly={field.admin.readOnly}
-				blocked={form.editingBlocked}
-				locale={form.contentLocale}
-				upload={field.upload !== undefined}
-				invalid={issues.length > 0}
-				hasDescription={field.admin.description !== undefined}
-				onPick={pickRelationship}
-				onRemove={() => {
-					if (!editingBlocked) commit([]);
-				}}
-				onBrowse={browseRelationships}
-				onEdit={selectedID === undefined ? undefined : () => openBrowser(selectedID)}
-			/>
-		{:else}
-			<div
-				class="flex min-h-10 min-w-0 rounded-[3px] border border-control-border bg-control transition-colors hover:border-control-border-hover aria-invalid:!border-destructive/65"
-				aria-invalid={issues.length > 0}
-			>
-				{#if selectedIDs.length === 0}
-					<button
-						id={field.id}
-						type="button"
-						disabled={form.editingBlocked}
-						class="flex min-h-10 min-w-0 flex-1 items-center px-3 text-start text-[13px] text-foreground-placeholder outline-none hover:text-foreground focus-visible:text-primary"
-						onclick={() => openBrowser()}
-						{...controlARIA}
-					>
-						<span class="px-1.5 text-[13px] text-foreground-placeholder">
-							{field.admin.placeholder ??
-								runtime.i18n.t("fields:select", {
-									label: targetCollection.labels.singular.toLocaleLowerCase(runtime.i18n.language),
-								})}
-						</span>
-					</button>
-				{:else}
-					<div class="flex min-w-0 flex-1 flex-wrap items-center gap-1.5 p-1.5">
-						{#each selectedIDs as id (id)}
-							<div
-								class="inline-flex max-w-full items-center gap-1 rounded-[3px] border border-control-border bg-background py-0.5 pe-0.5 ps-2 text-[12px] text-foreground-muted"
+		<DragDropProvider onDragEnd={reorder}>
+			{#if field.upload !== undefined}
+				<div class="ridu-upload-references" id={field.id} {...controlARIA}>
+					{@render selectedItems(true)}
+					{#if !field.admin.readOnly && (hasMany || selectedID === undefined)}
+						<!-- File drops supplement the keyboard-accessible create and browse actions. -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
+						<div
+							class="ridu-upload-intake"
+							role="region"
+							aria-label={field.admin.label}
+							data-dragging={dragging}
+							ondragover={(event) => {
+								event.preventDefault();
+								if (canCreate) dragging = true;
+							}}
+							ondragleave={(event) => {
+								if (!event.currentTarget.contains(event.relatedTarget as Node | null))
+									dragging = false;
+							}}
+							ondrop={drop}
+						>
+							{#if canCreate}
+								<Button variant="secondary" size="sm" onclick={() => openBrowser(undefined, true)}>
+									{runtime.i18n.t("collections:createNewButton")}
+								</Button>
+								<span>{runtime.i18n.t("general:or")}</span>
+							{/if}
+							<Button
+								variant="secondary"
+								size="sm"
+								disabled={editingBlocked}
+								onclick={() => openBrowser()}
 							>
-								<button
-									type="button"
-									disabled={form.editingBlocked}
-									class="min-w-0 flex-1 truncate text-start outline-none hover:text-foreground focus-visible:text-primary"
-									onclick={() => openBrowser(id)}
-									aria-label={runtime.i18n.t("fields:edit", { label: label(id) })}
-								>
-									{label(id)}
-								</button>
-								{#if !field.admin.readOnly}
-									<Button
-										variant="ghost"
-										size="icon-xs"
-										disabled={editingBlocked}
-										onclick={() => remove(id)}
-										aria-label={runtime.i18n.t("fields:remove", { label: label(id) })}
-									>
-										<XIcon class="size-3" />
-									</Button>
-								{/if}
-							</div>
-						{/each}
-					</div>
-				{/if}
-				<Button
-					variant="ghost"
-					size="icon"
-					class="h-auto min-h-10 w-10 rounded-s-none border-s border-control-border"
-					disabled={form.editingBlocked}
-					onclick={() => openBrowser()}
-					{...controlARIA}
-					aria-label={runtime.i18n.t("fields:browse", {
-						label: targetCollection.labels.plural.toLocaleLowerCase(runtime.i18n.language),
-					})}
+								{runtime.i18n.t("fields:chooseExisting")}
+							</Button>
+							{#if canCreate}
+								<span class="ridu-upload-intake__drop-label">
+									{runtime.i18n.t("uploads:dropFile")}
+								</span>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			{:else}
+				<RelationshipQuickPicker
+					id={field.id}
+					label={field.admin.label}
+					targets={quickPickerTargets}
+					{selectedTarget}
+					selectedID={hasMany ? undefined : selectedID}
+					selectedLabel={selectedID === undefined ? undefined : label(selectedID)}
+					placeholder={field.admin.placeholder}
+					readOnly={field.admin.readOnly}
+					blocked={form.editingBlocked}
+					locale={form.contentLocale}
+					invalid={issues.length > 0}
+					hasDescription={field.admin.description !== undefined}
+					multiple={hasMany}
+					values={controller.references.map(relationshipKey)}
+					onValuesChange={setSelectedValues}
+					onPick={pickRelationship}
+					onRemove={() => {
+						if (!editingBlocked) commit([]);
+					}}
+					onBrowse={browseRelationships}
+					onCreate={(target) => openBrowser(undefined, true, target)}
+					onEdit={selectedID === undefined ? undefined : () => openBrowser(selectedID)}
 				>
-					{#if selectedIDs.length === 0}<PlusIcon class="size-3.5" />{:else}<SearchIcon
-							class="size-3.5"
-						/>{/if}
-				</Button>
-			</div>
-		{/if}
+					{#snippet selections()}
+						{#if hasMany}
+							{@render selectedItems()}
+						{/if}
+					{/snippet}
+				</RelationshipQuickPicker>
+			{/if}
+		</DragDropProvider>
 	{/if}
-
 	{#if hydrationError !== undefined}
-		<p class="ridu-field-error" role="alert">{hydrationError}</p>
+		<p class="ridu-field-error" role="alert">
+			{hydrationError}
+		</p>
 	{/if}
 </FieldShell>
 
@@ -272,6 +239,8 @@
 		readOnly={field.admin.readOnly}
 		{initialDocument}
 		{initialDocumentID}
+		{initialCreate}
+		{initialFile}
 		{optionFilter}
 		locale={form.contentLocale}
 		onCommit={(ids) => {

package/src/fields/relationship/relationship-lookup-controller.svelte.ts

@@ -1,4 +1,4 @@
-import type { Pagination } from "@riducms/protocol";
+import type { CollectionPageAccess, Pagination } from "@riducms/protocol";
 import type { AdminI18n } from "@riducms/plugin";
 import { createAdminI18n } from "@riducms/translations";
 
@@ -17,6 +17,12 @@ export interface RelationshipLookupRequest {
 	searchField: string | undefined;
 	filter: RelationshipFilter;
 	locale?: string;
+	sort?: string;
+	where?: Record<string, unknown>;
+	includeAccess?: boolean;
+	depth?: number;
+	/** Fill quick-picker suggestions without counting already selected documents. */
+	excludeIDs?: readonly string[];
 }
 
 type RelationshipLookupStatus = "initial" | "loading" | "ready" | "failed";
@@ -36,8 +42,8 @@ export class RelationshipLookupController {
 	#known = $state.raw<Record<string, AdminDocument>>({});
 	#pagination = $state.raw<Pagination>(emptyPagination);
 	#error = $state<string>();
+	#access = $state.raw<CollectionPageAccess>();
 	#request?: AbortController;
-	#requestGeneration = 0;
 
 	constructor(
 		readonly client: AdminClient,
@@ -60,6 +66,11 @@ export class RelationshipLookupController {
 		return this.#error;
 	}
 
+	canReadField = (path: string, id?: string) => {
+		const access = id === undefined ? this.#access?.collection : this.#access?.documents[id];
+		return access?.operations.read === true && access.fields[path]?.read !== false;
+	};
+
 	document(id: string) {
 		return this.#known[id];
 	}
@@ -74,56 +85,73 @@ export class RelationshipLookupController {
 	search = async (request: RelationshipLookupRequest) => {
 		this.#request?.abort();
 		const activeRequest = new AbortController();
-		const generation = ++this.#requestGeneration;
 		this.#request = activeRequest;
 		this.#status = "loading";
 		this.#error = undefined;
 
 		try {
-			const page = await this.client.list(request.slug, {
-				page: request.page,
-				limit: request.limit,
-				where: buildRelationshipWhere(request.searchField, request.search, request.filter),
+			const referenceWhere = buildRelationshipWhere(
+				request.searchField,
+				request.search,
+				request.filter
+			);
+			const predicates = [referenceWhere, request.where].filter((where) => where !== undefined);
+			const excluded = new Set(request.excludeIDs);
+			const options = {
+				limit: excluded.size > 0 ? Math.min(100, request.limit + excluded.size) : request.limit,
+				where: predicates.length > 1 ? { and: predicates } : predicates[0],
+				sort: request.sort ? [request.sort] : undefined,
+				depth: request.depth,
+				includeAccess: request.includeAccess,
 				signal: activeRequest.signal,
 				locale: request.locale,
-			});
-			if (activeRequest.signal.aborted || generation !== this.#requestGeneration) return;
-			this.#docs = page.docs;
+			};
+			let nextPage = request.page;
+			let page;
+			const docs: AdminDocument[] = [];
+
+			// Page through bounded requests instead of sending an unbounded exclusion query.
+			do {
+				page = await this.client.list(request.slug, { ...options, page: nextPage++ });
+				if (activeRequest.signal.aborted) return;
+				docs.push(...page.docs.filter((document) => !excluded.has(document.id)));
+			} while (excluded.size > 0 && docs.length < request.limit && page.pagination.hasNextPage);
+
+			this.#docs = excluded.size > 0 ? docs.slice(0, request.limit) : docs;
 			this.#known = {
 				...this.#known,
-				...Object.fromEntries(page.docs.map((document) => [document.id, document])),
+				...Object.fromEntries(this.#docs.map((document) => [document.id, document])),
 			};
 			this.#pagination = page.pagination;
+			this.#access = "access" in page ? page.access : undefined;
 			this.#status = "ready";
 		} catch (cause) {
-			if (activeRequest.signal.aborted || generation !== this.#requestGeneration) return;
+			if (activeRequest.signal.aborted) return;
 			this.#error =
 				cause instanceof Error ? cause.message : this.i18n.t("errors:relationshipDocumentsLoad");
 			this.#status = "failed";
+			this.#access = undefined;
 		} finally {
 			if (this.#request === activeRequest) this.#request = undefined;
 		}
 	};
 
-	loadDocument = async (slug: string, id: string, locale?: string, signal?: AbortSignal) => {
-		const known = this.#known[id];
-		if (known !== undefined) return known;
-		try {
-			const document = await this.client.find(slug, id, { signal, locale });
-			if (signal?.aborted) return undefined;
-			this.remember(document);
-			return document;
-		} catch (cause) {
-			if (signal?.aborted) return undefined;
-			this.#error =
-				cause instanceof Error ? cause.message : this.i18n.t("errors:relatedDocumentLoad");
-			return undefined;
-		}
-	};
-
-	dispose() {
-		this.#requestGeneration += 1;
+	cancelSearch() {
 		this.#request?.abort();
 		this.#request = undefined;
 	}
+
+	reset() {
+		this.cancelSearch();
+		this.#status = "initial";
+		this.#docs = [];
+		this.#known = {};
+		this.#pagination = emptyPagination;
+		this.#access = undefined;
+		this.#error = undefined;
+	}
+
+	dispose() {
+		this.cancelSearch();
+	}
 }

package/src/fields/relationship/relationship-query.ts

@@ -1,4 +1,5 @@
 import { scalarLiteralValue } from "@admin/core/forms/scalar-literal";
+import { readDocumentPath } from "@admin/core/schema/read-document-path";
 import type { FieldReferenceFilter } from "@riducms/plugin";
 import type { SchemaField } from "@riducms/protocol";
 
@@ -49,7 +50,7 @@ export function relationshipOptionFilters(
 					? undefined
 					: typeof values === "function"
 						? values(candidate.sourcePath)
-						: readPath(values, candidate.sourcePath)
+						: readDocumentPath(values, candidate.sourcePath)
 				: scalarLiteralValue(candidate.value);
 		if (typeof value !== "string" && typeof value !== "number" && typeof value !== "boolean") {
 			return [];
@@ -64,12 +65,3 @@ export function relationshipOptionFilters(
 	});
 	return filters.length === 0 ? undefined : filters;
 }
-
-function readPath(values: Record<string, unknown>, path: string) {
-	let current: unknown = values;
-	for (const segment of path.split(".")) {
-		if (typeof current !== "object" || current === null || Array.isArray(current)) return undefined;
-		current = (current as Record<string, unknown>)[segment];
-	}
-	return current;
-}