@riducms/admin 0.1.0

package/src/features/collections/collection-list-filter-popover.svelte

@@ -0,0 +1,238 @@
+<script lang="ts">
+	import type { AdminI18n } from "@riducms/plugin";
+	import type { SchemaField } from "@riducms/protocol";
+	import ListFilterIcon from "~icons/lucide/list-filter";
+	import XIcon from "~icons/lucide/x";
+
+	import { Button, buttonVariants } from "@admin/components/ui/button";
+	import { DateValueControl } from "@admin/components/ui/date-value-control";
+	import { Input } from "@admin/components/ui/input";
+	import { Popover, PopoverContent, PopoverTrigger } from "@admin/components/ui/popover";
+	import { Select, SelectContent, SelectItem, SelectTrigger } from "@admin/components/ui/select";
+	import {
+		filterOperatorLabel,
+		filterOperatorsFor,
+		type ListFilter,
+		type ListFilterOperator,
+	} from "@admin/features/collections/list-workspace";
+
+	let {
+		i18n,
+		fields,
+		filters,
+		canReadField,
+		onFiltersChange,
+	}: {
+		i18n: AdminI18n;
+		fields: readonly SchemaField[];
+		filters: readonly ListFilter[];
+		canReadField: (path: string) => boolean;
+		onFiltersChange: (filters: readonly ListFilter[]) => void;
+	} = $props();
+
+	let fieldName = $state("");
+	let operator = $state<ListFilterOperator>("equals");
+	let value = $state("");
+	const readableFields = $derived(fields.filter((candidate) => canReadField(candidate.path)));
+	const field = $derived(readableFields.find((candidate) => candidate.path === fieldName));
+	const selectedFieldLabel = $derived(field?.admin.label ?? i18n.t("collections:chooseField"));
+	const selectedOperatorLabel = $derived(
+		field === undefined ? i18n.t("collections:chooseOperator") : filterOperatorLabel(operator, i18n)
+	);
+	const booleanValueOptions = $derived(
+		operator === "exists"
+			? [
+					{ value: "true", label: i18n.t("collections:hasValue") },
+					{ value: "false", label: i18n.t("collections:isEmpty") },
+				]
+			: field?.type === "checkbox"
+				? [
+						{ value: "true", label: i18n.t("collections:enabled") },
+						{ value: "false", label: i18n.t("collections:disabled") },
+					]
+				: []
+	);
+
+	$effect(() => {
+		if (fieldName !== "" && !readableFields.some((candidate) => candidate.path === fieldName)) {
+			fieldName = "";
+			operator = "equals";
+			value = "";
+		}
+	});
+
+	function selectField(name: string) {
+		fieldName = name;
+		const selected = readableFields.find((candidate) => candidate.path === name);
+		operator = selected === undefined ? "equals" : (filterOperatorsFor(selected)[0] ?? "equals");
+		value = "";
+	}
+
+	function selectOperator(next: string) {
+		operator = next as ListFilterOperator;
+	}
+
+	function addFilter() {
+		if (field === undefined) return;
+		const filterValue = operator === "exists" ? value || "true" : value;
+		if (operator !== "exists" && filterValue === "") return;
+		onFiltersChange([...filters, { field: field.path, operator, value: filterValue }]);
+		value = "";
+	}
+
+	function removeFilter(index: number) {
+		onFiltersChange(filters.filter((_, candidate) => candidate !== index));
+	}
+</script>
+
+<Popover>
+	<PopoverTrigger
+		class={buttonVariants({
+			variant: "outline",
+			class: ["h-[31px] gap-1.75 px-3", filters.length > 0 && "border-primary/30 text-primary"],
+		})}
+	>
+		<ListFilterIcon class="size-3 text-foreground-faint" />
+		{i18n.t("collections:filters")}
+		{#if filters.length > 0}<span class="font-mono text-[9px]">
+				{i18n.formatNumber(filters.length)}
+			</span>{/if}
+	</PopoverTrigger>
+	<PopoverContent align="start" class="w-[360px] gap-2 p-3">
+		<p class="font-mono text-[9px] tracking-[0.14em] text-foreground-faint uppercase">
+			{i18n.t("collections:filterDocuments")}
+		</p>
+		<label class="grid gap-1 text-[11px] text-foreground-muted">
+			{i18n.t("collections:field")}
+			<Select type="single" value={fieldName} onValueChange={selectField}>
+				<SelectTrigger size="toolbar" class="w-full" aria-label={i18n.t("collections:filterField")}>
+					<span class={fieldName === "" ? "text-foreground-placeholder" : undefined}>
+						{selectedFieldLabel}
+					</span>
+				</SelectTrigger>
+				<SelectContent>
+					<SelectItem value="" label={i18n.t("collections:chooseField")} />
+					{#each readableFields as candidate (candidate.id)}
+						<SelectItem value={candidate.path} label={candidate.admin.label} />
+					{/each}
+				</SelectContent>
+			</Select>
+		</label>
+		{#if field !== undefined}
+			<div class="grid grid-cols-[1fr_1fr] gap-2">
+				<label class="grid gap-1 text-[11px] text-foreground-muted">
+					{i18n.t("collections:operator")}
+					<Select type="single" value={operator} onValueChange={selectOperator}>
+						<SelectTrigger
+							size="toolbar"
+							class="w-full"
+							aria-label={i18n.t("collections:filterOperator")}
+						>
+							{selectedOperatorLabel}
+						</SelectTrigger>
+						<SelectContent>
+							{#each filterOperatorsFor(field) as candidate}
+								<SelectItem value={candidate} label={filterOperatorLabel(candidate, i18n)} />
+							{/each}
+						</SelectContent>
+					</Select>
+				</label>
+				<label class="grid gap-1 text-[11px] text-foreground-muted">
+					{i18n.t("collections:value")}
+					{#if booleanValueOptions.length > 0}
+						<Select type="single" {value} onValueChange={(next) => (value = next)}>
+							<SelectTrigger
+								size="toolbar"
+								class="w-full"
+								aria-label={i18n.t("collections:filterValue")}
+							>
+								{booleanValueOptions.find((option) => option.value === value)?.label ??
+									booleanValueOptions[0]?.label}
+							</SelectTrigger>
+							<SelectContent>
+								{#each booleanValueOptions as option (option.value)}
+									<SelectItem value={option.value} label={option.label} />
+								{/each}
+							</SelectContent>
+						</Select>
+					{:else if field.type === "select" || field.type === "radio"}
+						<Select type="single" {value} onValueChange={(next) => (value = next)}>
+							<SelectTrigger
+								size="toolbar"
+								class="w-full"
+								aria-label={i18n.t("collections:filterValue")}
+							>
+								<span class={value === "" ? "text-foreground-placeholder" : undefined}>
+									{field.select?.choices.find((choice) => choice.value === value)?.label ??
+										i18n.t("collections:chooseValue")}
+								</span>
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value="" label={i18n.t("collections:chooseValue")} />
+								{#each field.select?.choices ?? [] as choice}
+									<SelectItem value={choice.value} label={choice.label} />
+								{/each}
+							</SelectContent>
+						</Select>
+					{:else if field.type === "date"}
+						<DateValueControl
+							id={`collection-filter-${field.id}`}
+							appearance={field.date?.pickerAppearance}
+							{value}
+							label={i18n.t("collections:filterValue")}
+							size="toolbar"
+							onValueChange={(next) => (value = next)}
+						/>
+					{:else}
+						<Input
+							aria-label={i18n.t("collections:filterValue")}
+							type={field.type === "number" ? "number" : "text"}
+							class="h-8"
+							bind:value
+						/>
+					{/if}
+				</label>
+			</div>
+			<Button
+				size="sm"
+				class="w-full"
+				disabled={operator !== "exists" && value === ""}
+				onclick={addFilter}
+			>
+				{i18n.t("collections:addFilter")}
+			</Button>
+		{/if}
+		{#if filters.length > 0}
+			<div class="grid gap-1 border-t border-control-border pt-2">
+				{#each filters as filter, index (`${filter.field}:${filter.operator}:${index}`)}
+					<div class="flex items-center gap-2 rounded-[3px] bg-control px-2 py-1.5 text-[11px]">
+						<span class="min-w-0 flex-1 truncate">
+							{i18n.t("collections:filterSummary", {
+								field:
+									fields.find((candidate) => candidate.path === filter.field)?.admin.label ??
+									filter.field,
+								operator: filterOperatorLabel(filter.operator, i18n),
+								value:
+									filter.operator === "exists"
+										? filter.value === "false"
+											? i18n.t("general:no")
+											: i18n.t("general:yes")
+										: filter.value,
+							})}
+						</span>
+						<Button
+							variant="ghost"
+							size="icon-xs"
+							aria-label={i18n.t("collections:removeFilter", {
+								index: i18n.formatNumber(index + 1),
+							})}
+							onclick={() => removeFilter(index)}
+						>
+							<XIcon class="size-3" />
+						</Button>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</PopoverContent>
+</Popover>

package/src/features/collections/collection-list-preferences-controller.svelte.ts

@@ -0,0 +1,393 @@
+import type { SchemaField } from "@riducms/protocol";
+import { RiduError } from "@riducms/sdk";
+import type { AdminI18n } from "@riducms/translations";
+
+import type { AdminClient } from "@admin/core/api/admin-client";
+import type { NotificationCenter } from "@admin/core/notifications/notification-center.svelte";
+import { getPreferenceWriteQueue } from "@admin/core/preferences/preference-write-queue";
+import {
+	normalizeWorkspacePreference,
+	parseListFilters,
+	parseListPageSize,
+	type ListFilter,
+	type ListPageSize,
+	type ListWorkspacePreference,
+} from "@admin/features/collections/list-workspace";
+
+export interface CollectionListPreset {
+	name: string;
+	q: string;
+	status: string;
+	folder: string;
+	view: "list" | "hierarchy";
+	filters: ListFilter[];
+	sort: string;
+	columns: string[];
+	limit: ListPageSize;
+	showStatus: boolean;
+	showID: boolean;
+	showCreated: boolean;
+	showUpdated: boolean;
+}
+
+export type CollectionListPresetInput = Omit<CollectionListPreset, "name">;
+
+interface CollectionListPreferenceRoute {
+	slug: string;
+	sessionID: string;
+	preferenceOwnerID: string;
+	columnFields: readonly SchemaField[];
+	filterFields: readonly SchemaField[];
+	defaultColumns: readonly string[];
+}
+
+type PreferenceClient = Pick<AdminClient, "preference" | "setPreference">;
+type PreferenceNotifications = Pick<NotificationCenter, "success" | "error">;
+
+interface ActivePreferenceRoute extends CollectionListPreferenceRoute {
+	key: string;
+	generation: number;
+	ownerKey: string;
+	presetKey: string;
+	presetWriteKey: string;
+	workspaceKey: string;
+	workspaceWriteKey: string;
+}
+
+const initialWorkspace: ListWorkspacePreference = {
+	columns: [],
+	showStatus: true,
+	showID: false,
+	showCreated: false,
+	showUpdated: true,
+	limit: 25,
+};
+
+export class CollectionListPreferencesController {
+	workspace = $state.raw<ListWorkspacePreference>(initialWorkspace);
+	presets = $state.raw<CollectionListPreset[]>([]);
+	presetsPending = $state(false);
+	#active?: ActivePreferenceRoute;
+	#generation = 0;
+	#presetLoad?: AbortController;
+	#workspaceLoad?: AbortController;
+	#workspaceWrites = getPreferenceWriteQueue();
+	#workspaceSaveVersions = new Map<string, number>();
+	#unsubscribeWorkspace?: () => void;
+	#unsubscribePresets?: () => void;
+
+	constructor(
+		private readonly client: PreferenceClient,
+		private readonly notifications: PreferenceNotifications,
+		private readonly sessionID: () => string,
+		private readonly i18n: AdminI18n
+	) {}
+
+	enter = (route: CollectionListPreferenceRoute) => {
+		const key = routeKey(route);
+		if (this.#active?.key === key) return;
+		this.#abortLoads();
+		this.#unsubscribeWrites();
+		const generation = ++this.#generation;
+		this.#active = {
+			...route,
+			key,
+			generation,
+			ownerKey: ownerKey(route),
+			presetKey: `collection:${route.slug}:presets`,
+			presetWriteKey: JSON.stringify([route.preferenceOwnerID, route.slug, "presets"]),
+			workspaceKey: `collection:${route.slug}:workspace`,
+			workspaceWriteKey: JSON.stringify([route.preferenceOwnerID, route.slug, "workspace"]),
+		};
+		const fallback = fallbackWorkspace(route.defaultColumns);
+		this.workspace = fallback;
+		this.presets = [];
+		this.#subscribeWrites(this.#active);
+		if (route.sessionID === "" || route.slug === "") return;
+		this.#loadWorkspace(this.#active, fallback);
+		this.#loadPresets(this.#active);
+	};
+
+	persistWorkspace = async (next: ListWorkspacePreference) => {
+		const active = this.#active;
+		if (active === undefined) return false;
+		this.workspace = next;
+		this.#workspaceLoad?.abort();
+		this.#workspaceLoad = undefined;
+		if (active.sessionID === "") return true;
+
+		const version = (this.#workspaceSaveVersions.get(active.workspaceWriteKey) ?? 0) + 1;
+		this.#workspaceSaveVersions.set(active.workspaceWriteKey, version);
+		try {
+			const result = await this.#workspaceWrites.enqueue(
+				active.workspaceWriteKey,
+				active.preferenceOwnerID,
+				() => this.sessionID() === active.sessionID,
+				() => this.client.setPreference(active.workspaceKey, next)
+			);
+			return result.dispatched;
+		} catch (cause) {
+			if (
+				this.#isSameOwner(active) &&
+				this.#workspaceSaveVersions.get(active.workspaceWriteKey) === version
+			) {
+				this.notifications.error({
+					title: this.i18n.t("collections:listPreferencesNotSaved"),
+					message: cause instanceof Error ? cause.message : undefined,
+				});
+			}
+			return false;
+		}
+	};
+
+	savePreset = async (name: string, input: CollectionListPresetInput) => {
+		const active = this.#active;
+		const normalizedName = name.trim();
+		if (
+			active === undefined ||
+			active.sessionID === "" ||
+			normalizedName === "" ||
+			this.presetsPending
+		) {
+			return false;
+		}
+		this.#presetLoad?.abort();
+		this.#presetLoad = undefined;
+		const next = [
+			...this.presets.filter((preset) => preset.name !== normalizedName),
+			{ name: normalizedName, ...input },
+		];
+		try {
+			const result = await this.#workspaceWrites.enqueue(
+				active.presetWriteKey,
+				active.preferenceOwnerID,
+				() => this.sessionID() === active.sessionID,
+				() => this.client.setPreference(active.presetKey, next)
+			);
+			if (!result.dispatched || !this.#isSameOwner(active)) return false;
+			this.notifications.success({ title: this.i18n.t("collections:viewSaved") });
+			return true;
+		} catch (cause) {
+			if (this.#isSameOwner(active)) {
+				this.notifications.error({
+					title: this.i18n.t("collections:viewNotSaved"),
+					message: cause instanceof Error ? cause.message : undefined,
+				});
+			}
+			return false;
+		}
+	};
+
+	deletePreset = async (name: string) => {
+		const active = this.#active;
+		if (active === undefined || active.sessionID === "" || this.presetsPending) return false;
+		this.#presetLoad?.abort();
+		this.#presetLoad = undefined;
+		const next = this.presets.filter((preset) => preset.name !== name);
+		try {
+			const result = await this.#workspaceWrites.enqueue(
+				active.presetWriteKey,
+				active.preferenceOwnerID,
+				() => this.sessionID() === active.sessionID,
+				() => this.client.setPreference(active.presetKey, next)
+			);
+			if (!result.dispatched || !this.#isSameOwner(active)) return false;
+			this.notifications.success({ title: this.i18n.t("collections:savedViewDeleted") });
+			return true;
+		} catch (cause) {
+			if (this.#isSameOwner(active)) {
+				this.notifications.error({
+					title: this.i18n.t("collections:savedViewNotDeleted"),
+					message: cause instanceof Error ? cause.message : undefined,
+				});
+			}
+			return false;
+		}
+	};
+
+	dispose() {
+		this.#generation += 1;
+		this.#active = undefined;
+		this.#abortLoads();
+		this.#unsubscribeWrites();
+	}
+
+	#loadWorkspace(active: ActivePreferenceRoute, fallback: ListWorkspacePreference) {
+		const request = new AbortController();
+		this.#workspaceLoad = request;
+		void this.client
+			.preference<ListWorkspacePreference>(active.workspaceKey, { signal: request.signal })
+			.then((value) => {
+				if (
+					!request.signal.aborted &&
+					this.#isCurrent(active) &&
+					!this.#workspaceWrites.isPending(active.workspaceWriteKey)
+				) {
+					this.workspace = normalizeWorkspacePreference(value, active.columnFields, fallback);
+				}
+			})
+			.catch((cause) => {
+				if (
+					!request.signal.aborted &&
+					this.#isCurrent(active) &&
+					(!(cause instanceof RiduError) || cause.code !== "not_found")
+				) {
+					this.notifications.error({
+						title: this.i18n.t("collections:listPreferencesUnavailable"),
+						message: cause instanceof Error ? cause.message : undefined,
+					});
+				}
+			})
+			.finally(() => {
+				if (this.#workspaceLoad === request) this.#workspaceLoad = undefined;
+			});
+	}
+
+	#loadPresets(active: ActivePreferenceRoute) {
+		const request = new AbortController();
+		this.#presetLoad = request;
+		void this.client
+			.preference<CollectionListPreset[]>(active.presetKey, { signal: request.signal })
+			.then((value) => {
+				if (
+					!request.signal.aborted &&
+					this.#isCurrent(active) &&
+					!this.#workspaceWrites.isPending(active.presetWriteKey)
+				) {
+					this.presets = validPresets(value, active.filterFields, active.defaultColumns);
+				}
+			})
+			.catch((cause) => {
+				if (
+					!request.signal.aborted &&
+					this.#isCurrent(active) &&
+					(!(cause instanceof RiduError) || cause.code !== "not_found")
+				) {
+					this.notifications.error({
+						title: this.i18n.t("collections:savedViewsUnavailable"),
+						message: cause instanceof Error ? cause.message : undefined,
+					});
+				}
+			})
+			.finally(() => {
+				if (this.#presetLoad === request) this.#presetLoad = undefined;
+			});
+	}
+
+	#subscribeWrites(active: ActivePreferenceRoute) {
+		if (active.sessionID === "" || active.slug === "") {
+			this.presetsPending = false;
+			return;
+		}
+		this.#unsubscribeWorkspace = this.#workspaceWrites.subscribe(
+			active.workspaceWriteKey,
+			(state) => {
+				if (state.pending || !state.hasValue || !this.#isSameOwner(active)) return;
+				const current = this.#active;
+				if (current === undefined) return;
+				this.workspace = normalizeWorkspacePreference(
+					state.value,
+					current.columnFields,
+					fallbackWorkspace(current.defaultColumns)
+				);
+			}
+		);
+		this.#unsubscribePresets = this.#workspaceWrites.subscribe(active.presetWriteKey, (state) => {
+			if (!this.#isSameOwner(active)) return;
+			this.presetsPending = state.pending;
+			if (state.pending || !state.hasValue) return;
+			const current = this.#active;
+			if (current === undefined) return;
+			this.presets = validPresets(state.value, current.filterFields, current.defaultColumns);
+		});
+	}
+
+	#unsubscribeWrites() {
+		this.#unsubscribeWorkspace?.();
+		this.#unsubscribeWorkspace = undefined;
+		this.#unsubscribePresets?.();
+		this.#unsubscribePresets = undefined;
+	}
+
+	#isCurrent(active: ActivePreferenceRoute) {
+		return this.#active?.key === active.key && this.#active.generation === active.generation;
+	}
+
+	#isSameOwner(active: ActivePreferenceRoute) {
+		return this.#active?.ownerKey === active.ownerKey;
+	}
+
+	#abortLoads() {
+		this.#presetLoad?.abort();
+		this.#presetLoad = undefined;
+		this.#workspaceLoad?.abort();
+		this.#workspaceLoad = undefined;
+	}
+}
+
+function routeKey(route: CollectionListPreferenceRoute) {
+	return JSON.stringify([
+		route.slug,
+		route.sessionID,
+		route.preferenceOwnerID,
+		route.columnFields.map((field) => field.path),
+		route.filterFields.map((field) => field.path),
+		route.defaultColumns,
+	]);
+}
+
+function ownerKey(route: CollectionListPreferenceRoute) {
+	return JSON.stringify([route.preferenceOwnerID, route.slug]);
+}
+
+function fallbackWorkspace(defaultColumns: readonly string[]): ListWorkspacePreference {
+	return { ...initialWorkspace, columns: [...defaultColumns] };
+}
+
+function validPresets(
+	value: unknown,
+	fields: readonly SchemaField[],
+	defaultColumns: readonly string[]
+): CollectionListPreset[] {
+	if (!Array.isArray(value)) return [];
+	return value.flatMap((candidate) => {
+		if (typeof candidate !== "object" || candidate === null) return [];
+		const record = candidate as Partial<CollectionListPreset>;
+		if (
+			typeof record.name !== "string" ||
+			typeof record.q !== "string" ||
+			typeof record.status !== "string" ||
+			typeof record.folder !== "string" ||
+			(record.view !== "list" && record.view !== "hierarchy") ||
+			typeof record.showStatus !== "boolean" ||
+			typeof record.showUpdated !== "boolean"
+		) {
+			return [];
+		}
+		return [
+			{
+				name: record.name,
+				q: record.q,
+				status: record.status,
+				folder: record.folder,
+				view: record.view,
+				filters: parseListFilters(
+					Array.isArray(record.filters) ? JSON.stringify(record.filters) : null,
+					fields
+				),
+				sort: typeof record.sort === "string" ? record.sort : "",
+				columns: Array.isArray(record.columns)
+					? record.columns.filter((name): name is string => typeof name === "string")
+					: [...defaultColumns],
+				limit: parseListPageSize(
+					typeof record.limit === "number" ? String(record.limit) : null,
+					25
+				),
+				showStatus: record.showStatus,
+				showID: record.showID === true,
+				showCreated: record.showCreated === true,
+				showUpdated: record.showUpdated,
+			},
+		];
+	});
+}