@riducms/admin 0.1.0

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

@@ -0,0 +1,129 @@
+import type { Pagination } from "@riducms/protocol";
+import type { AdminI18n } from "@riducms/plugin";
+import { createAdminI18n } from "@riducms/translations";
+
+import type { AdminClient, AdminDocument } from "@admin/core/api/admin-client";
+
+import {
+	buildRelationshipWhere,
+	type RelationshipFilter,
+} from "@admin/fields/relationship/relationship-query";
+
+export interface RelationshipLookupRequest {
+	slug: string;
+	page: number;
+	limit: number;
+	search: string;
+	searchField: string | undefined;
+	filter: RelationshipFilter;
+	locale?: string;
+}
+
+type RelationshipLookupStatus = "initial" | "loading" | "ready" | "failed";
+
+const emptyPagination: Pagination = {
+	page: 1,
+	limit: 10,
+	totalDocs: 0,
+	totalPages: 0,
+	hasNextPage: false,
+	hasPrevPage: false,
+};
+
+export class RelationshipLookupController {
+	#status = $state<RelationshipLookupStatus>("initial");
+	#docs = $state.raw<AdminDocument[]>([]);
+	#known = $state.raw<Record<string, AdminDocument>>({});
+	#pagination = $state.raw<Pagination>(emptyPagination);
+	#error = $state<string>();
+	#request?: AbortController;
+	#requestGeneration = 0;
+
+	constructor(
+		readonly client: AdminClient,
+		readonly i18n: AdminI18n = createAdminI18n()
+	) {}
+
+	get status() {
+		return this.#status;
+	}
+
+	get docs() {
+		return this.#docs;
+	}
+
+	get pagination() {
+		return this.#pagination;
+	}
+
+	get error() {
+		return this.#error;
+	}
+
+	document(id: string) {
+		return this.#known[id];
+	}
+
+	remember(document: AdminDocument) {
+		this.#known = { ...this.#known, [document.id]: document };
+		this.#docs = this.#docs.map((candidate) =>
+			candidate.id === document.id ? document : candidate
+		);
+	}
+
+	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),
+				signal: activeRequest.signal,
+				locale: request.locale,
+			});
+			if (activeRequest.signal.aborted || generation !== this.#requestGeneration) return;
+			this.#docs = page.docs;
+			this.#known = {
+				...this.#known,
+				...Object.fromEntries(page.docs.map((document) => [document.id, document])),
+			};
+			this.#pagination = page.pagination;
+			this.#status = "ready";
+		} catch (cause) {
+			if (activeRequest.signal.aborted || generation !== this.#requestGeneration) return;
+			this.#error =
+				cause instanceof Error ? cause.message : this.i18n.t("errors:relationshipDocumentsLoad");
+			this.#status = "failed";
+		} 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;
+		this.#request?.abort();
+		this.#request = undefined;
+	}
+}

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

@@ -0,0 +1,88 @@
+import type { FieldReferenceFilter } from "@riducms/plugin";
+import type { SchemaField } from "@riducms/protocol";
+
+export type RelationshipFilter = FieldReferenceFilter | readonly FieldReferenceFilter[] | undefined;
+
+export function buildRelationshipWhere(
+	searchField: string | undefined,
+	search: string,
+	filter: RelationshipFilter
+): Record<string, unknown> | undefined {
+	const predicates: Record<string, unknown>[] = [];
+	const query = search.trim();
+	if (searchField !== undefined && query !== "") {
+		predicates.push({ [searchField]: { like: query } });
+	}
+	const filters = filter === undefined ? [] : Array.isArray(filter) ? filter : [filter];
+	for (const candidate of filters) {
+		predicates.push({ [candidate.field]: { [candidate.operator]: candidate.value } });
+	}
+	if (predicates.length === 0) return undefined;
+	if (predicates.length === 1) return predicates[0];
+	return { and: predicates };
+}
+
+export function combineRelationshipFilters(
+	...filters: readonly RelationshipFilter[]
+): RelationshipFilter {
+	const combined = filters.flatMap((filter) =>
+		filter === undefined ? [] : Array.isArray(filter) ? filter : [filter]
+	);
+	return combined.length === 0 ? undefined : combined;
+}
+
+export function relationshipOptionFilters(
+	field: SchemaField,
+	values: Record<string, unknown>,
+	targetCollection: string | undefined
+): readonly FieldReferenceFilter[] | undefined {
+	const reference = field.relationship ?? field.upload;
+	const configured = reference?.optionFilters ?? [];
+	const filters = configured.flatMap((candidate) => {
+		if (candidate.collectionSlug !== undefined && candidate.collectionSlug !== targetCollection) {
+			return [];
+		}
+		const value =
+			candidate.value === undefined
+				? candidate.sourcePath === undefined
+					? undefined
+					: readPath(values, candidate.sourcePath)
+				: relationshipFilterLiteral(candidate.value);
+		if (typeof value !== "string" && typeof value !== "number" && typeof value !== "boolean") {
+			return [];
+		}
+		return [
+			{
+				field: candidate.targetPath,
+				operator: candidate.operator ?? "equals",
+				value,
+			} satisfies FieldReferenceFilter,
+		];
+	});
+	return filters.length === 0 ? undefined : filters;
+}
+
+function relationshipFilterLiteral(value: {
+	type: "string" | "number" | "boolean";
+	value: string;
+}) {
+	switch (value.type) {
+		case "string":
+			return value.value;
+		case "number": {
+			const parsed = Number(value.value);
+			return Number.isFinite(parsed) ? parsed : undefined;
+		}
+		case "boolean":
+			return value.value === "true" ? true : value.value === "false" ? false : undefined;
+	}
+}
+
+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;
+}

package/src/fields/relationship/relationship-quick-picker-controller.svelte.ts

@@ -0,0 +1,198 @@
+import type { SchemaCollection, SchemaField } from "@riducms/protocol";
+import { SvelteMap } from "svelte/reactivity";
+
+import type { AdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+
+import { RelationshipLookupController } from "@admin/fields/relationship/relationship-lookup-controller.svelte";
+import type { RelationshipFilter } from "@admin/fields/relationship/relationship-query";
+
+export interface RelationshipQuickPickerTarget {
+	collection: SchemaCollection;
+	filter: RelationshipFilter;
+}
+
+interface RelationshipQuickPickerControllerOptions {
+	runtime: AdminRuntime;
+	get targets(): readonly RelationshipQuickPickerTarget[];
+	get selectedTarget(): string | undefined;
+	get selectedID(): string | undefined;
+	get locale(): string | undefined;
+	onPick(target: string, id: string): void;
+	onRemove(): void;
+	onBrowse(target: string): void;
+}
+
+export class RelationshipQuickPickerController {
+	open = $state(false);
+	query = $state("");
+	readonly #lookups = new SvelteMap<string, RelationshipLookupController>();
+
+	constructor(readonly options: RelationshipQuickPickerControllerOptions) {
+		$effect(() => {
+			const targets = this.options.targets;
+			const activeTargets = new Set(targets.map((target) => target.collection.slug));
+			for (const [slug, lookup] of this.#lookups) {
+				if (activeTargets.has(slug)) continue;
+				lookup.dispose();
+				this.#lookups.delete(slug);
+			}
+			for (const target of targets) {
+				if (this.#lookups.has(target.collection.slug)) continue;
+				this.#lookups.set(
+					target.collection.slug,
+					new RelationshipLookupController(this.options.runtime.client, this.options.runtime.i18n)
+				);
+			}
+		});
+
+		$effect(() => {
+			const targets = this.options.targets;
+			if (!this.open) return;
+			const search = this.query;
+			const locale = this.options.locale;
+			this.options.runtime.documentRevision;
+			const timer = window.setTimeout(
+				() => {
+					for (const target of targets) {
+						this.#lookups.get(target.collection.slug)?.search({
+							slug: target.collection.slug,
+							page: 1,
+							limit: 5,
+							search,
+							searchField: findDisplayField(target.collection.fields)?.name,
+							filter: target.filter,
+							locale,
+						});
+					}
+				},
+				search.trim() === "" ? 0 : 180
+			);
+			return () => window.clearTimeout(timer);
+		});
+
+		$effect(() => () => this.#disposeLookups());
+	}
+
+	get groups() {
+		return this.options.targets.flatMap((target) => {
+			const lookup = this.#lookups.get(target.collection.slug);
+			return lookup === undefined
+				? []
+				: [
+						{
+							collection: target.collection,
+							docs: lookup.docs,
+							error: lookup.error,
+							status: lookup.status,
+						},
+					];
+		});
+	}
+
+	get comboboxItems() {
+		return this.groups.flatMap((group) =>
+			group.docs.map((document) => ({
+				value: encodeSelection(group.collection.slug, document.id),
+				label: this.documentLabel(group.collection, document),
+			}))
+		);
+	}
+
+	get selectedValue() {
+		const target = this.options.selectedTarget;
+		const id = this.options.selectedID;
+		return target === undefined || id === undefined ? "" : encodeSelection(target, id);
+	}
+
+	documentLabel = (collection: SchemaCollection, document: Record<string, unknown>) => {
+		const searchField = findDisplayField(collection.fields);
+		return String(
+			(searchField === undefined ? undefined : document[searchField.name]) ?? document.id
+		);
+	};
+
+	initials = (value: string) =>
+		value
+			.trim()
+			.split(/\s+/)
+			.filter(Boolean)
+			.slice(0, 2)
+			.map((part) => part[0]?.toLocaleUpperCase(this.options.runtime.i18n.language) ?? "")
+			.join("");
+
+	changeOpen = (open: boolean) => {
+		this.open = open;
+		if (open) return;
+		this.query = "";
+		this.#disposeLookups();
+	};
+
+	toggleOpen = () => {
+		const open = !this.open;
+		this.changeOpen(open);
+		return open;
+	};
+
+	setQuery = (query: string) => {
+		this.query = query;
+	};
+
+	pick = (value: string) => {
+		const selection = decodeSelection(value);
+		if (
+			selection === undefined ||
+			(selection.target === this.options.selectedTarget && selection.id === this.options.selectedID)
+		) {
+			this.changeOpen(false);
+			return;
+		}
+		this.options.onPick(selection.target, selection.id);
+		this.changeOpen(false);
+	};
+
+	browseAll = (target?: string) => {
+		const targetSlug =
+			target ?? this.options.selectedTarget ?? this.options.targets[0]?.collection.slug;
+		if (targetSlug === undefined) return;
+		this.changeOpen(false);
+		this.options.onBrowse(targetSlug);
+	};
+
+	remove = () => {
+		this.changeOpen(false);
+		this.options.onRemove();
+	};
+
+	#disposeLookups() {
+		for (const lookup of this.#lookups.values()) lookup.dispose();
+	}
+}
+
+function encodeSelection(target: string, id: string) {
+	return JSON.stringify([target, id]);
+}
+
+function decodeSelection(value: string): { target: string; id: string } | undefined {
+	try {
+		const selection: unknown = JSON.parse(value);
+		if (
+			!Array.isArray(selection) ||
+			selection.length !== 2 ||
+			typeof selection[0] !== "string" ||
+			typeof selection[1] !== "string"
+		) {
+			return undefined;
+		}
+		return { target: selection[0], id: selection[1] };
+	} catch {
+		return undefined;
+	}
+}
+
+function findDisplayField(fields: readonly SchemaField[]) {
+	return (
+		fields.find((field) => field.name === "title" || field.name === "name") ??
+		fields.find((field) => field.type === "text" && field.name !== "email") ??
+		fields.find((field) => field.type === "text" || field.type === "email")
+	);
+}