@riducms/admin 0.2.3 → 0.3.0

package/src/features/collections/controls/column-picker.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import { tick } from "svelte";
+	import { DragDropProvider, type DragDropEvents } from "@dnd-kit-svelte/svelte";
+	import { isSortable } from "@dnd-kit-svelte/svelte/sortable";
+	import { getAdminI18n } from "@riducms/plugin";
+	import ColumnPill from "@admin/features/collections/controls/column-pill.svelte";
+	import type { ListColumn, ListColumnSelection } from "@admin/features/collections/list-workspace";
+	import "@admin/features/collections/controls/list-controls.scss";
+
+	let {
+		columns,
+		availableColumns,
+		canReadField,
+		onChange,
+		navigationIdle = true,
+	}: {
+		columns: readonly ListColumnSelection[];
+		availableColumns: readonly ListColumn[];
+		canReadField: (path: string) => boolean;
+		onChange: (columns: ListColumnSelection[]) => void;
+		navigationIdle?: boolean;
+	} = $props();
+
+	const i18n = getAdminI18n();
+	let root: HTMLDivElement | undefined;
+	let dragging = $state(false);
+	let pendingColumnFocus = $state<{ element: HTMLElement; columns: string }>();
+
+	$effect(() => {
+		const focus = pendingColumnFocus;
+		if (!focus || !navigationIdle || JSON.stringify(columns) !== focus.columns) return;
+
+		let active = true;
+		tick().then(() => {
+			if (!active) return;
+
+			pendingColumnFocus = undefined;
+			if (focus.element.isConnected) focus.element.focus({ preventScroll: true });
+		});
+
+		return () => {
+			active = false;
+		};
+	});
+
+	const orderedColumns = $derived(
+		columns.flatMap((selection) => {
+			const column = availableColumns.find((column) => column.path === selection.path);
+
+			return column && (column.field === undefined || canReadField(column.path))
+				? [{ ...column, active: selection.active }]
+				: [];
+		})
+	);
+
+	function setColumns(nextColumns: ListColumnSelection[]) {
+		const element = document.activeElement;
+		if (element instanceof HTMLElement && root?.contains(element))
+			pendingColumnFocus = { element, columns: JSON.stringify(nextColumns) };
+
+		onChange(nextColumns);
+	}
+
+	function toggleColumn(path: string) {
+		setColumns(
+			columns.map((column) =>
+				column.path === path ? { ...column, active: !column.active } : column
+			)
+		);
+	}
+
+	function reorder(event: Parameters<DragDropEvents["dragend"]>[0]) {
+		dragging = false;
+		const source = event.operation.source;
+		if (event.canceled || !source || !isSortable(source)) return;
+
+		const from = source.sortable.initialIndex;
+		const to = source.sortable.index;
+		if (from < 0 || to < 0 || from === to) return;
+
+		const order = [...orderedColumns];
+		const [moved] = order.splice(from, 1);
+		order.splice(to, 0, moved!);
+		const readable = new Set(order.map((column) => column.path));
+		let next = 0;
+		setColumns(
+			columns.map((column) => {
+				if (!readable.has(column.path)) return column;
+				const replacement = order[next++]!;
+				return { path: replacement.path, active: replacement.active };
+			})
+		);
+	}
+</script>
+
+<DragDropProvider onDragStart={() => (dragging = true)} onDragEnd={reorder}>
+	<div class="ridu-list-columns" bind:this={root}>
+		{#each orderedColumns as column, index (column.path)}
+			<ColumnPill
+				disabled={dragging}
+				path={column.path}
+				label={column.label}
+				{index}
+				selected={column.active}
+				onToggle={() => toggleColumn(column.path)}
+				reorderLabel={i18n.t("collections:reorderColumn", { label: column.label })}
+			/>
+		{/each}
+	</div>
+</DragDropProvider>

package/src/features/collections/controls/column-pill.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { useSortable } from "@dnd-kit-svelte/svelte/sortable";
+	import Plus from "@admin/components/icons/plus.svelte";
+	import X from "@admin/components/icons/x.svelte";
+
+	let {
+		path,
+		label,
+		index,
+		selected,
+		onToggle,
+		reorderLabel,
+		disabled,
+	}: {
+		path: string;
+		label: string;
+		index: number;
+		selected: boolean;
+		onToggle: () => void;
+		reorderLabel: string;
+		disabled: boolean;
+	} = $props();
+
+	const sortable = useSortable({ id: () => path, index: () => index, group: "list-columns" });
+</script>
+
+<div
+	class={[
+		"ridu-list-columns__pill",
+		sortable.isDragging.current && "ridu-list-columns__pill--dragging",
+	]}
+	data-selected={selected}
+	{@attach sortable.ref}
+>
+	<button
+		class="ridu-list-columns__toggle"
+		type="button"
+		{disabled}
+		aria-pressed={selected}
+		onclick={onToggle}
+	>
+		{#if selected}
+			<X />
+		{:else}
+			<Plus />
+		{/if}
+		{label}
+	</button>
+	<button
+		class="ridu-list-columns__handle"
+		type="button"
+		aria-label={reorderLabel}
+		{@attach sortable.handleRef}
+	>
+		<svg width="12" height="16" viewBox="0 0 12 16" aria-hidden="true">
+			<path
+				d="M4 4h1v1H4zm3 0h1v1H7zM4 8h1v1H4zm3 0h1v1H7zM4 12h1v1H4zm3 0h1v1H7z"
+				fill="currentColor"
+			/>
+		</svg>
+	</button>
+</div>

package/src/features/collections/controls/filter-builder.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+	import { tick } from "svelte";
+	import type { SchemaField } from "@riducms/protocol";
+	import { getAdminI18n } from "@riducms/plugin";
+	import Plus from "@admin/components/icons/plus.svelte";
+	import FilterRow from "@admin/features/collections/controls/filter-row.svelte";
+	import {
+		filterOperatorsFor,
+		type ListFilter,
+		type ListFilterGroup,
+	} from "@admin/features/collections/list-workspace";
+	import "@admin/features/collections/controls/list-controls.scss";
+
+	let {
+		fields,
+		filters,
+		label,
+		onChange,
+		navigationIdle = true,
+	}: {
+		fields: readonly SchemaField[];
+		filters: readonly ListFilterGroup[];
+		label: string;
+		onChange: (filters: ListFilterGroup[]) => void;
+		navigationIdle?: boolean;
+	} = $props();
+
+	const i18n = getAdminI18n();
+	let root: HTMLDivElement | undefined;
+	let pendingFocus = $state<{
+		element: HTMLElement;
+		encoded: string;
+		start: number | null;
+		end: number | null;
+	}>();
+
+	$effect(() => {
+		const focus = pendingFocus;
+		if (!focus || !navigationIdle || JSON.stringify(filters) !== focus.encoded) return;
+
+		let active = true;
+		tick().then(() => {
+			if (!active || !focus.element.isConnected) return;
+
+			pendingFocus = undefined;
+			focus.element.focus({ preventScroll: true });
+			if (focus.element instanceof HTMLInputElement && focus.start !== null && focus.end !== null)
+				focus.element.setSelectionRange(focus.start, focus.end);
+		});
+
+		return () => {
+			active = false;
+		};
+	});
+
+	type Row = { id: string; filter: ListFilter };
+
+	let groups = $state<{ id: string; rows: Row[] }[]>([]);
+	let lastEmittedFilters = "";
+	let lastSourceFilters: string | undefined;
+	let commitTimer: ReturnType<typeof setTimeout> | undefined;
+
+	// Acknowledge this builder's writes without replacing draft row identities and input focus.
+	$effect.pre(() => {
+		const encoded = JSON.stringify(filters);
+		if (encoded === lastSourceFilters) return;
+
+		lastSourceFilters = encoded;
+		if (encoded === lastEmittedFilters) return;
+
+		clearTimeout(commitTimer);
+		lastEmittedFilters = encoded;
+		groups = filters.map((group) => ({
+			id: crypto.randomUUID(),
+			rows: group.map((filter) => ({ id: crypto.randomUUID(), filter: { ...filter } })),
+		}));
+	});
+
+	$effect(() => () => clearTimeout(commitTimer));
+
+	function scheduleCommit() {
+		clearTimeout(commitTimer);
+		commitTimer = setTimeout(() => {
+			const value = groups
+				.map((group) =>
+					group.rows
+						.map((row) => row.filter)
+						.filter(
+							(filter) =>
+								fields.some((field) => field.path === filter.field) &&
+								(filter.operator === "exists" || filter.value !== "")
+						)
+				)
+				.filter((group) => group.length > 0);
+			lastEmittedFilters = JSON.stringify(value);
+			if (lastEmittedFilters !== JSON.stringify(filters)) {
+				const element = document.activeElement;
+				if (element instanceof HTMLElement && root?.contains(element))
+					pendingFocus = {
+						element,
+						encoded: lastEmittedFilters,
+						start: element instanceof HTMLInputElement ? element.selectionStart : null,
+						end: element instanceof HTMLInputElement ? element.selectionEnd : null,
+					};
+
+				onChange(value);
+			}
+		}, 300);
+	}
+
+	function createRow(): Row {
+		return {
+			id: crypto.randomUUID(),
+			filter: {
+				field: fields[0]?.path ?? "",
+				operator: fields[0] ? filterOperatorsFor(fields[0])[0]! : "equals",
+				value: "",
+			},
+		};
+	}
+
+	function addGroup() {
+		groups.push({ id: crypto.randomUUID(), rows: [createRow()] });
+	}
+
+	function rowIndexInList(groupIndex: number, rowIndex: number) {
+		return (
+			groups.slice(0, groupIndex).reduce((count, group) => count + group.rows.length, 0) + rowIndex
+		);
+	}
+
+	async function removeRow(groupIndex: number, rowIndex: number) {
+		const focused = root?.contains(document.activeElement);
+		const index = rowIndexInList(groupIndex, rowIndex);
+		groups[groupIndex]!.rows.splice(rowIndex, 1);
+		if (groups[groupIndex]!.rows.length === 0) groups.splice(groupIndex, 1);
+
+		await tick();
+		if (focused) {
+			const buttons = root?.querySelectorAll<HTMLButtonElement>("[data-filter-remove]");
+			const target = buttons?.length
+				? buttons[Math.min(index, buttons.length - 1)]
+				: root?.querySelector<HTMLButtonElement>("[data-filter-add]");
+			target?.focus({ preventScroll: true });
+		}
+
+		scheduleCommit();
+	}
+</script>
+
+<div class="ridu-list-filter" bind:this={root}>
+	{#if groups.length === 0}
+		<p>{i18n.t("collections:noFilters")}</p>
+		<button
+			type="button"
+			class="ridu-list__text-action"
+			onclick={addGroup}
+			data-filter-add
+			disabled={fields.length === 0}
+		>
+			<Plus />{i18n.t("collections:addFilter")}
+		</button>
+	{:else}
+		<p>{i18n.t("collections:filterWhere", { label })}</p>
+
+		{#each groups as group, groupIndex (group.id)}
+			{#if groupIndex > 0}
+				<p class="ridu-list-filter__join">{i18n.t("collections:or")}</p>
+			{/if}
+			{#each group.rows as row, rowIndex (row.id)}
+				{#if rowIndex > 0}
+					<p class="ridu-list-filter__join">{i18n.t("collections:and")}</p>
+				{/if}
+				<FilterRow
+					{fields}
+					filter={row.filter}
+					index={rowIndexInList(groupIndex, rowIndex)}
+					onChange={(filter) => {
+						row.filter = filter;
+						scheduleCommit();
+					}}
+					onAdd={() => group.rows.splice(rowIndex + 1, 0, createRow())}
+					onRemove={() => removeRow(groupIndex, rowIndex)}
+				/>
+			{/each}
+		{/each}
+
+		<button type="button" class="ridu-list__text-action" onclick={addGroup}>
+			<span class="ridu-list__circle"><Plus /></span>
+			{i18n.t("collections:or")}
+		</button>
+	{/if}
+</div>

package/src/features/collections/controls/filter-row.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+	import type { SchemaField } from "@riducms/protocol";
+	import { getAdminI18n } from "@riducms/plugin";
+	import { Select, SelectContent, SelectItem, SelectTrigger } from "@admin/components/ui/select";
+	import { Input } from "@riducms/ui";
+	import { DateValueControl } from "@admin/components/ui/date-value-control";
+	import Plus from "@admin/components/icons/plus.svelte";
+	import X from "@admin/components/icons/x.svelte";
+	import {
+		filterOperatorsFor,
+		filterOperatorLabel,
+		type ListFilter,
+		type ListFilterOperator,
+	} from "@admin/features/collections/list-workspace";
+
+	let {
+		filter,
+		fields,
+		onChange,
+		onAdd,
+		onRemove,
+		index,
+	}: {
+		filter: ListFilter;
+		fields: readonly SchemaField[];
+		onChange: (filter: ListFilter) => void;
+		onAdd: () => void;
+		onRemove: () => void;
+		index: number;
+	} = $props();
+
+	const i18n = getAdminI18n();
+
+	const field = $derived(fields.find((candidate) => candidate.path === filter.field));
+	const options = $derived.by(() => {
+		if (filter.operator === "exists")
+			return [
+				{ value: "true", label: i18n.t("collections:hasValue") },
+				{ value: "false", label: i18n.t("collections:isEmpty") },
+			];
+		if (field?.type === "checkbox")
+			return [
+				{ value: "true", label: i18n.t("collections:enabled") },
+				{ value: "false", label: i18n.t("collections:disabled") },
+			];
+
+		return field?.select?.options ?? [];
+	});
+
+	function selectField(path: string) {
+		const candidate = fields.find((candidate) => candidate.path === path);
+		onChange({
+			field: path,
+			operator: candidate ? filterOperatorsFor(candidate)[0]! : "equals",
+			value: "",
+		});
+	}
+
+	function selectOperator(operator: string) {
+		onChange({
+			...filter,
+			operator: operator as ListFilterOperator,
+			value: operator === "exists" ? "true" : "",
+		});
+	}
+
+	function setValue(value: string) {
+		onChange({ ...filter, value });
+	}
+</script>
+
+<div class="ridu-list-filter__row">
+	<div class="ridu-list-filter__inputs">
+		<Select type="single" value={filter.field} onValueChange={selectField}>
+			<SelectTrigger aria-label={i18n.t("collections:filterField")}>
+				{field?.admin.label ?? i18n.t("collections:chooseField")}
+			</SelectTrigger>
+			<SelectContent>
+				{#each fields as candidate (candidate.path)}
+					<SelectItem value={candidate.path} label={candidate.admin.label} />
+				{/each}
+			</SelectContent>
+		</Select>
+		<Select type="single" value={filter.operator} onValueChange={selectOperator}>
+			<SelectTrigger aria-label={i18n.t("collections:filterOperator")}>
+				{filterOperatorLabel(filter.operator, i18n)}
+			</SelectTrigger>
+			<SelectContent>
+				{#each field ? filterOperatorsFor(field) : [] as operator}
+					<SelectItem value={operator} label={filterOperatorLabel(operator, i18n)} />
+				{/each}
+			</SelectContent>
+		</Select>
+		{#if options.length > 0}
+			<Select type="single" value={filter.value} onValueChange={setValue}>
+				<SelectTrigger aria-label={i18n.t("collections:filterValue")}>
+					{options.find((option) => option.value === filter.value)?.label ??
+						i18n.t("collections:chooseValue")}
+				</SelectTrigger>
+				<SelectContent>
+					{#each options as option}
+						<SelectItem value={option.value} label={option.label} />
+					{/each}
+				</SelectContent>
+			</Select>
+		{:else if field?.type === "date"}
+			<DateValueControl
+				id={`list-filter-${index}`}
+				appearance={field.date?.format}
+				value={filter.value}
+				label={i18n.t("collections:filterValue")}
+				onValueChange={setValue}
+			/>
+		{:else}
+			<Input
+				aria-label={i18n.t("collections:filterValue")}
+				type={field?.type === "number" || field?.type === "number-list" ? "number" : "text"}
+				value={filter.value}
+				oninput={(event) => setValue(event.currentTarget.value)}
+			/>
+		{/if}
+	</div>
+	<div class="ridu-list-filter__actions">
+		<button
+			type="button"
+			class="ridu-list__circle"
+			aria-label={i18n.t("collections:removeFilter", { index: i18n.formatNumber(index + 1) })}
+			data-filter-remove
+			onclick={onRemove}
+		>
+			<X />
+		</button>
+		<button
+			type="button"
+			class="ridu-list__circle"
+			aria-label={i18n.t("collections:addAndFilter")}
+			onclick={onAdd}
+		>
+			<Plus />
+		</button>
+	</div>
+</div>

package/src/features/collections/controls/list-controls.scss

@@ -0,0 +1,196 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-list-controls__context {
+		margin-bottom: 10px;
+	}
+	.ridu-list-controls {
+		margin-bottom: 20px;
+	}
+	.ridu-list-search {
+		display: flex;
+		min-height: 46px;
+		border-radius: 4px;
+		background: var(--background-surface);
+	}
+	.ridu-list-search__input {
+		position: relative;
+		display: flex;
+		align-items: center;
+		flex: 1;
+		min-width: 0;
+
+		& > svg {
+			position: absolute;
+			inset-inline-start: 10px;
+			pointer-events: none;
+		}
+
+		input {
+			width: 100%;
+			min-width: 0;
+			border: 0;
+			border-radius: 4px;
+			background: var(--background-surface);
+			box-shadow: none;
+			padding: 13px 35px 13px 40px;
+			color: var(--foreground);
+			font: inherit;
+			outline: none;
+			line-height: 20px;
+		}
+	}
+	[dir="rtl"] .ridu-list-search__input input {
+		padding-inline: 40px 35px;
+	}
+
+	.ridu-list-search__input input::-webkit-search-cancel-button {
+		display: none;
+	}
+	.ridu-list-search__input input::placeholder {
+		color: var(--foreground-muted);
+	}
+	.ridu-list-search__clear {
+		position: absolute;
+		inset-inline-end: 10px;
+		display: grid;
+		place-items: center;
+		border: 0;
+		padding: 0;
+		background: none;
+		color: var(--foreground-muted);
+		cursor: pointer;
+	}
+	.ridu-list-search__actions {
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		padding: 10px;
+	}
+	.ridu-list__more {
+		min-width: 24px;
+		font-weight: bold;
+		padding-inline: 5px;
+	}
+	.ridu-list__options {
+		width: 260px;
+		gap: 15px;
+		padding: 15px;
+	}
+	.ridu-list-columns {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 10px;
+		padding: 20px;
+		margin-top: 10px;
+		background: var(--background-surface);
+		border-radius: 3px;
+	}
+	.ridu-list-columns__pill {
+		display: flex;
+		align-items: center;
+		border: 1px solid var(--control-border);
+		border-radius: 3px;
+		min-height: 30px;
+
+		&[data-selected="true"] {
+			background: var(--background);
+		}
+
+		&:hover {
+			border-color: var(--control-border-hover);
+		}
+	}
+	.ridu-list-columns__pill--dragging {
+		opacity: 0.4;
+	}
+	.ridu-list-columns__toggle {
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		padding: 4px 0 4px 8px;
+		border: 0;
+		background: none;
+		color: inherit;
+		font: inherit;
+		cursor: pointer;
+	}
+	.ridu-list-columns__handle {
+		display: grid;
+		place-items: center;
+		align-self: stretch;
+		border: 0;
+		background: none;
+		color: var(--foreground-muted);
+		padding: 0 4px;
+		cursor: grab;
+		touch-action: none;
+	}
+	.ridu-list-columns__toggle:focus-visible,
+	.ridu-list-columns__handle:focus-visible {
+		@include ui.focus-outline(2px);
+	}
+	.ridu-list-filter {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+		background: var(--background-surface);
+		padding: 20px;
+		margin-top: 10px;
+		border-radius: 3px;
+
+		p {
+			margin: 0;
+		}
+	}
+	.ridu-list-filter__row {
+		display: flex;
+		align-items: flex-start;
+		gap: 20px;
+	}
+	.ridu-list-filter__inputs {
+		display: grid;
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+		gap: 20px;
+		flex: 1;
+		min-width: 0;
+
+		.ridu-select__trigger {
+			width: 100%;
+		}
+	}
+	.ridu-list-filter__actions {
+		display: flex;
+		gap: 10px;
+		padding-block: 10px;
+	}
+	.ridu-list-filter__join {
+		color: var(--foreground-muted);
+	}
+	@media (max-width: ui.$medium) {
+		.ridu-list-filter__inputs {
+			grid-template-columns: minmax(0, 1fr);
+			gap: 10px;
+		}
+		.ridu-list-filter__actions {
+			flex-direction: column;
+		}
+	}
+	@media (max-width: ui.$small) {
+		.ridu-list-search {
+			flex-direction: column;
+			background: none;
+			gap: 10px;
+		}
+		.ridu-list-search__actions {
+			padding: 0;
+		}
+		.ridu-list-search__actions > .ridu-list__pill:not(.ridu-list__more) {
+			flex: 1;
+		}
+		.ridu-list-columns,
+		.ridu-list-filter {
+			padding: 15px;
+		}
+	}
+}