@riducms/admin 0.2.3 → 0.4.0

package/src/features/collections/controls/list-options.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+	import { Button, Input, buttonVariants } from "@riducms/ui";
+	import ListTreeIcon from "~icons/lucide/list-tree";
+	import XIcon from "@admin/components/icons/x.svelte";
+	import { Popover, PopoverContent, PopoverTrigger } from "@admin/components/ui/popover";
+	import { Select, SelectContent, SelectItem, SelectTrigger } from "@admin/components/ui/select";
+	import type { AdminDocument } from "@admin/core/api/admin-client";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import { Link } from "@hvniel/svelte-router";
+	import { getCollectionList } from "@admin/features/collections/collection-list.svelte";
+
+	const list = getCollectionList();
+	const runtime = getAdminRuntime();
+	const { preferences, query: listQuery } = list;
+
+	const { view, folderCollection, contentLocale, showFolder, showHierarchy } = $derived(list);
+	const { presets, presetsPending } = $derived(preferences);
+	const sessionActive = $derived(runtime.session !== undefined);
+
+	let moreOpen = $state(false);
+	let folders = $state.raw<AdminDocument[]>([]);
+
+	$effect(() => {
+		if (!moreOpen) return;
+
+		const target = folderCollection;
+		const revision = runtime.documentRevision;
+		if (target === undefined || revision < 0) {
+			folders = [];
+			return;
+		}
+
+		const request = new AbortController();
+		runtime.client
+			.list(target.slug, { limit: 100, locale: contentLocale, signal: request.signal })
+			.then((page) => {
+				if (!request.signal.aborted) folders = page.docs;
+			})
+			.catch(() => {
+				if (!request.signal.aborted) folders = [];
+			});
+
+		return () => request.abort();
+	});
+
+	let presetName = $state("");
+
+	const sortedPresets = $derived(
+		[...presets].sort((left, right) =>
+			left.name.localeCompare(right.name, runtime.i18n.language, {
+				numeric: true,
+				sensitivity: "base",
+			})
+		)
+	);
+
+	const sortedFolders = $derived(
+		[...folders].sort((left, right) =>
+			folderLabel(left).localeCompare(folderLabel(right), runtime.i18n.language, {
+				numeric: true,
+				sensitivity: "base",
+			})
+		)
+	);
+
+	const selectedFolder = $derived(folders.find((folder) => folder.id === view.folder));
+	const selectedFolderLabel = $derived(
+		view.folder === ""
+			? runtime.i18n.t("collections:allFolders")
+			: selectedFolder
+				? folderLabel(selectedFolder)
+				: view.folder
+	);
+
+	function folderLabel(folder: AdminDocument) {
+		return String(folder.name ?? folder.title ?? folder.id);
+	}
+
+	async function savePreset() {
+		if (await list.saveView(presetName)) presetName = "";
+	}
+</script>
+
+<Popover bind:open={moreOpen}>
+	<PopoverTrigger
+		class="ridu-list__pill ridu-list__more"
+		aria-label={runtime.i18n.t("general:more")}
+	>
+		···
+	</PopoverTrigger>
+
+	<PopoverContent align="end" class="ridu-list__options">
+		{#if showFolder}
+			<div class="grid gap-2">
+				<label class="text-[11px] font-medium text-foreground-muted" for="folder-filter">
+					{runtime.i18n.t("collections:folder")}
+				</label>
+				<Select type="single" value={view.folder} onValueChange={listQuery.selectFolder}>
+					<SelectTrigger
+						id="folder-filter"
+						size="toolbar"
+						aria-label={runtime.i18n.t("collections:folder")}
+					>
+						{selectedFolderLabel}
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="" label={runtime.i18n.t("collections:allFolders")} />
+						{#each sortedFolders as folder (folder.id)}
+							<SelectItem value={folder.id} label={folderLabel(folder)} />
+						{/each}
+					</SelectContent>
+				</Select>
+				{#if list.foldersHref !== undefined}
+					<Link
+						class={buttonVariants({ variant: "outline", class: "h-[31px] gap-1.75 px-3" })}
+						to={list.foldersHref}
+					>
+						{runtime.i18n.t("collections:manageFolders")}
+					</Link>
+				{/if}
+			</div>
+		{/if}
+
+		{#if showHierarchy}
+			<div class="grid gap-2">
+				<p class="text-[11px] font-medium text-foreground-muted">
+					{runtime.i18n.t("collections:view")}
+				</p>
+				<div
+					class="flex rounded-[3px] border border-control-border bg-background p-0.5"
+					aria-label={runtime.i18n.t("collections:collectionView")}
+				>
+					<Button
+						variant="ghost"
+						size="sm"
+						class="h-7 flex-1"
+						aria-pressed={view.view === "list"}
+						onclick={() => listQuery.selectView("list")}
+					>
+						{runtime.i18n.t("collections:listView")}
+					</Button>
+					<Button
+						variant="ghost"
+						size="sm"
+						class="h-7 flex-1"
+						aria-pressed={view.view === "hierarchy"}
+						onclick={() => listQuery.selectView("hierarchy")}
+					>
+						<ListTreeIcon class="size-3" />
+						{runtime.i18n.t("collections:hierarchy")}
+					</Button>
+				</div>
+			</div>
+		{/if}
+
+		{#if sessionActive}
+			<p>{runtime.i18n.t("collections:savedViews")}</p>
+			<form
+				class="flex gap-1"
+				onsubmit={(event) => {
+					event.preventDefault();
+					savePreset();
+				}}
+			>
+				<Input
+					bind:value={presetName}
+					aria-label={runtime.i18n.t("collections:savedViewName")}
+					placeholder={runtime.i18n.t("collections:viewName")}
+					class="h-8 min-w-0"
+				/>
+				<Button
+					type="submit"
+					size="sm"
+					class="h-8"
+					disabled={presetName.trim() === "" || presetsPending}
+				>
+					{runtime.i18n.t("general:save")}
+				</Button>
+			</form>
+
+			{#each sortedPresets as preset (preset.name)}
+				<div class="flex items-center gap-1">
+					<button
+						class="min-w-0 flex-1 truncate rounded-[3px] px-2 py-1.5 text-start text-[12.5px] hover:bg-control"
+						onclick={() => list.applySavedView(preset)}
+					>
+						{preset.name}
+					</button>
+					<Button
+						variant="ghost"
+						size="icon-xs"
+						aria-label={runtime.i18n.t("collections:deleteSavedView", {
+							name: preset.name,
+						})}
+						onclick={() => preferences.deletePreset(preset.name)}
+					>
+						<XIcon class="size-3" />
+					</Button>
+				</div>
+			{/each}
+		{/if}
+	</PopoverContent>
+</Popover>

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

@@ -0,0 +1,78 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-list__chevron-previous {
+		transform: rotate(90deg);
+	}
+	.ridu-list__chevron-next {
+		transform: rotate(-90deg);
+	}
+	[dir="rtl"] .ridu-list__chevron-previous {
+		transform: rotate(-90deg);
+	}
+	[dir="rtl"] .ridu-list__chevron-next {
+		transform: rotate(90deg);
+	}
+
+	.ridu-list-pagination {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 20px;
+
+		nav {
+			display: flex;
+			gap: 5px;
+			align-items: center;
+		}
+	}
+	.ridu-list-pagination__page {
+		display: grid;
+		place-items: center;
+		min-width: 30px;
+		height: 30px;
+		padding: 0 5px;
+		border: 0;
+		border-radius: 3px;
+		background: none;
+		color: var(--foreground);
+		font: inherit;
+		cursor: pointer;
+
+		&[aria-current="page"] {
+			background: var(--background-layer);
+			color: var(--foreground-muted);
+		}
+
+		&:disabled {
+			opacity: 0.4;
+			cursor: default;
+		}
+	}
+	.ridu-list-pagination__summary {
+		display: flex;
+		gap: 20px;
+		align-items: center;
+		white-space: nowrap;
+		margin-inline-start: auto;
+	}
+	.ridu-list-pagination__size {
+		height: auto;
+		min-height: 20px;
+		padding: 0;
+		border: 0;
+		background: none;
+		box-shadow: none;
+		font-weight: 600;
+	}
+
+	.ridu-list-pagination__page:focus-visible {
+		@include ui.focus-outline;
+	}
+	@media (max-width: ui.$small) {
+		.ridu-list-pagination {
+			align-items: flex-start;
+			flex-wrap: wrap;
+		}
+	}
+}

package/src/features/collections/controls/list-pagination.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { getAdminI18n } from "@riducms/plugin";
+	import { Select, SelectContent, SelectItem, SelectTrigger } from "@admin/components/ui/select";
+	import Chevron from "@admin/components/icons/chevron.svelte";
+	import { listPageSizes, type ListPageSize } from "@admin/features/collections/list-workspace";
+	import type { Pagination } from "@riducms/protocol";
+	import "@admin/features/collections/controls/list-pagination.scss";
+
+	let {
+		pagination,
+		pageSize,
+		busy = false,
+		inert = false,
+		onPageChange,
+		onPageSizeChange,
+	}: {
+		pagination: Pagination;
+		pageSize: ListPageSize;
+		busy?: boolean;
+		inert?: boolean;
+		onPageChange: (page: number) => void;
+		onPageSizeChange: (size: ListPageSize) => void;
+	} = $props();
+
+	const i18n = getAdminI18n();
+	const rangeStart = $derived(
+		pagination.totalDocs === 0 ? 0 : (pagination.page - 1) * pagination.limit + 1
+	);
+	const rangeEnd = $derived(Math.min(pagination.page * pagination.limit, pagination.totalDocs));
+
+	const pages = $derived.by(() => {
+		const candidates = [
+			...new Set([
+				1,
+				pagination.totalPages,
+				...Array.from({ length: 5 }, (_, i) => pagination.page + i - 2),
+			]),
+		]
+			.filter((page) => page > 0 && page <= pagination.totalPages)
+			.sort((a, b) => a - b);
+
+		return candidates.flatMap((page, index) =>
+			index > 0 && page > candidates[index - 1]! + 1 ? ["gap" as const, page] : [page]
+		);
+	});
+</script>
+
+<div class="ridu-list-pagination" {inert}>
+	<nav aria-label={i18n.t("collections:pagination")}>
+		{#if pagination.totalPages > 1}
+			<button
+				type="button"
+				class="ridu-list-pagination__page"
+				aria-label={i18n.t("collections:previousPage")}
+				disabled={!pagination.hasPrevPage || busy}
+				onclick={() => onPageChange(pagination.page - 1)}
+			>
+				<Chevron class="ridu-list__chevron-previous" />
+			</button>
+			{#each pages as page, index (`${page}:${index}`)}
+				{#if page === "gap"}
+					<span>…</span>
+				{:else}
+					<button
+						type="button"
+						class="ridu-list-pagination__page"
+						aria-current={pagination.page === page ? "page" : undefined}
+						disabled={busy}
+						onclick={() => onPageChange(page)}
+					>
+						{i18n.formatNumber(page)}
+					</button>
+				{/if}
+			{/each}
+			<button
+				type="button"
+				class="ridu-list-pagination__page"
+				aria-label={i18n.t("collections:nextPage")}
+				disabled={!pagination.hasNextPage || busy}
+				onclick={() => onPageChange(pagination.page + 1)}
+			>
+				<Chevron class="ridu-list__chevron-next" />
+			</button>
+		{/if}
+	</nav>
+	<div class="ridu-list-pagination__summary">
+		<span>
+			{i18n.t("collections:rangeSummary", {
+				start: i18n.formatNumber(rangeStart),
+				end: i18n.formatNumber(rangeEnd),
+				total: i18n.formatNumber(pagination.totalDocs),
+			})}
+		</span>
+		<Select
+			type="single"
+			value={String(pageSize)}
+			onValueChange={(value) => onPageSizeChange(Number(value) as ListPageSize)}
+		>
+			<SelectTrigger
+				class="ridu-list-pagination__size"
+				aria-label={i18n.t("collections:documentsPerPage")}
+			>
+				{i18n.t("collections:perPageLabel", { count: i18n.formatNumber(pageSize) })}
+			</SelectTrigger>
+			<SelectContent align="end">
+				{#each listPageSizes as size}
+					<SelectItem
+						value={String(size)}
+						label={i18n.t("collections:perPage", { count: i18n.formatNumber(size) })}
+					/>
+				{/each}
+			</SelectContent>
+		</Select>
+	</div>
+</div>

package/src/features/collections/controls/list-toolbar.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import "@admin/features/collections/controls/list-controls.scss";
+	import { getAdminI18n } from "@riducms/plugin";
+	import Chevron from "@admin/components/icons/chevron.svelte";
+	import SearchIcon from "@admin/components/icons/search.svelte";
+	import XIcon from "@admin/components/icons/x.svelte";
+	import { CollapsiblePanel } from "@admin/components/ui/collapsible-panel";
+	import ColumnPicker from "@admin/features/collections/controls/column-picker.svelte";
+	import FilterBuilder from "@admin/features/collections/controls/filter-builder.svelte";
+	import ListOptions from "@admin/features/collections/controls/list-options.svelte";
+	import { getCollectionList } from "@admin/features/collections/collection-list.svelte";
+
+	let {
+		searchInput = $bindable<HTMLInputElement | null>(null),
+	}: { searchInput?: HTMLInputElement | null } = $props();
+
+	const list = getCollectionList();
+	const i18n = getAdminI18n();
+
+	const { view, searchLabel, filterFields, availableColumnFields, label, navigationIdle } =
+		$derived(list);
+	const { query: listQuery } = list;
+
+	let panel = $state<"columns" | "filters">();
+
+	const readableFields = $derived(
+		filterFields.filter((field) => list.controller.canReadField(field.path))
+	);
+
+	const statusLabel = $derived(
+		filterFields
+			.find((field) => field.path === "status")
+			?.select?.options.find((option) => option.value === view.status)?.label ?? view.status
+	);
+
+	function clearSearch() {
+		listQuery.clearSearch();
+		searchInput?.focus();
+	}
+</script>
+
+<div class="ridu-list-controls" data-slot="collection-list-workspace-toolbar">
+	{#if view.status !== ""}
+		<div class="ridu-list-controls__context">
+			<button
+				type="button"
+				class="ridu-list__pill"
+				onclick={() => listQuery.selectStatus("")}
+				aria-label={i18n.t("collections:clearStatus")}
+			>
+				{i18n.t("collections:status")}: {statusLabel}<XIcon />
+			</button>
+		</div>
+	{/if}
+
+	<div class="ridu-list-search">
+		<div class="ridu-list-search__input">
+			<SearchIcon />
+			<label class="sr-only" for="collection-search">{searchLabel}</label>
+			<input
+				id="collection-search"
+				bind:this={searchInput}
+				type="search"
+				value={view.q}
+				oninput={(event) => listQuery.handleSearch(event.currentTarget.value)}
+				placeholder={i18n.t("collections:searchPlaceholder", { label: searchLabel })}
+			/>
+			{#if view.q !== ""}
+				<button
+					type="button"
+					class="ridu-list-search__clear"
+					aria-label={i18n.t("collections:clearSearch")}
+					onclick={clearSearch}
+				>
+					<XIcon />
+				</button>
+			{/if}
+		</div>
+
+		<div class="ridu-list-search__actions">
+			<button
+				type="button"
+				class="ridu-list__pill"
+				aria-expanded={panel === "columns"}
+				aria-controls="collection-columns"
+				onclick={() => (panel = panel === "columns" ? undefined : "columns")}
+			>
+				{i18n.t("collections:columns")}<Chevron
+					class={panel === "columns" ? "ridu-list__chevron-up" : undefined}
+				/>
+			</button>
+			{#if filterFields.length > 0}
+				<button
+					type="button"
+					class="ridu-list__pill"
+					aria-expanded={panel === "filters"}
+					aria-controls="collection-filters"
+					onclick={() => (panel = panel === "filters" ? undefined : "filters")}
+				>
+					{i18n.t("collections:filters")}
+					{#if view.filters.length > 0}
+						<span>
+							({view.filters.flat().length})
+						</span>
+					{/if}
+					<Chevron class={panel === "filters" ? "ridu-list__chevron-up" : undefined} />
+				</button>
+			{/if}
+			<ListOptions />
+		</div>
+	</div>
+
+	<CollapsiblePanel id="collection-columns" open={panel === "columns"}>
+		<ColumnPicker
+			columns={list.columnChoices}
+			availableColumns={availableColumnFields}
+			canReadField={list.controller.canReadField}
+			onChange={list.setColumns}
+			{navigationIdle}
+		/>
+	</CollapsiblePanel>
+
+	<CollapsiblePanel id="collection-filters" open={panel === "filters"}>
+		<FilterBuilder
+			fields={readableFields}
+			filters={view.filters}
+			{label}
+			onChange={listQuery.updateListFilters}
+			{navigationIdle}
+		/>
+	</CollapsiblePanel>
+</div>

package/src/features/collections/controls/sort-heading.scss

@@ -0,0 +1,52 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-list-sort {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		white-space: nowrap;
+	}
+	.ridu-list-sort__buttons {
+		display: flex;
+	}
+	.ridu-list-sort button {
+		border: 0;
+		padding: 5px 0;
+		background: none;
+		color: inherit;
+		opacity: 0.3;
+		cursor: pointer;
+		width: 20px;
+		height: 30px;
+	}
+	.ridu-list-sort button:hover {
+		opacity: 0.7;
+	}
+	.ridu-list-sort button[data-active="true"] {
+		opacity: 1;
+	}
+
+	.ridu-list-sort button:focus-visible {
+		@include ui.focus-outline;
+	}
+	.ridu-list-sort__ascending {
+		transform: rotate(180deg);
+	}
+	.ridu-list-sort--compact {
+		display: inline-flex;
+		gap: 5px;
+		button {
+			width: 16px;
+			padding: 2px;
+			opacity: 0.35;
+			&:hover {
+				opacity: 0.75;
+			}
+			svg {
+				width: 12px;
+				height: 12px;
+			}
+		}
+	}
+}

package/src/features/collections/controls/sort-heading.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { getAdminI18n } from "@riducms/plugin";
+	import Chevron from "@admin/components/icons/chevron.svelte";
+	import ArrowUp from "~icons/lucide/arrow-up";
+	import ArrowDown from "~icons/lucide/arrow-down";
+	import { sortableField, type ListColumn } from "@admin/features/collections/list-workspace";
+	import "@admin/features/collections/controls/sort-heading.scss";
+
+	let {
+		column,
+		sort,
+		onSort,
+		disabled = false,
+		ready = true,
+		compact = false,
+	}: {
+		column: ListColumn;
+		sort: string;
+		onSort: (path: string, descending: boolean) => void;
+		disabled?: boolean;
+		ready?: boolean;
+		compact?: boolean;
+	} = $props();
+
+	const i18n = getAdminI18n();
+	const sortable = $derived(column.field === undefined || sortableField(column.field));
+	const active = $derived(sort.replace(/^-/, "") === column.path);
+	const descending = $derived(sort.startsWith("-"));
+	let pendingFocus = $state<boolean>();
+
+	function selectSort(nextDescending: boolean) {
+		pendingFocus = nextDescending;
+		onSort(column.path, nextDescending);
+	}
+
+	// A navigation may temporarily make the results inert; restore the clicked direction afterward.
+	function restoreFocus(node: HTMLDivElement) {
+		if (!ready || pendingFocus === undefined) return;
+
+		const direction = pendingFocus ? "descending" : "ascending";
+		pendingFocus = undefined;
+		node.querySelector<HTMLButtonElement>(`[data-ridu-sort-direction="${direction}"]`)?.focus();
+	}
+</script>
+
+<th
+	scope="col"
+	aria-sort={sortable && active ? (descending ? "descending" : "ascending") : undefined}
+>
+	<div class={["ridu-list-sort", compact && "ridu-list-sort--compact"]} {@attach restoreFocus}>
+		<span>{column.label}</span>
+		{#if sortable}
+			<div class="ridu-list-sort__buttons">
+				{#each [false, true] as direction}
+					<button
+						type="button"
+						data-active={active && descending === direction}
+						data-ridu-sort-path={column.path}
+						data-ridu-sort-direction={direction ? "descending" : "ascending"}
+						aria-label={i18n.t(
+							direction ? "collections:sortDescending" : "collections:sortAscending",
+							{ label: column.label }
+						)}
+						{disabled}
+						onclick={() => selectSort(direction)}
+					>
+						{#if compact}
+							{const Icon = direction ? ArrowDown : ArrowUp}
+							<Icon aria-hidden="true" />
+						{:else}
+							<Chevron class={!direction ? "ridu-list-sort__ascending" : undefined} />
+						{/if}
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</th>

package/src/features/collections/list-columns.ts

@@ -0,0 +1,43 @@
+import type { AdminI18n, AdminListCellRenderer } from "@riducms/plugin";
+import type { SchemaCollection } from "@riducms/protocol";
+import {
+	listColumnFields,
+	listMetadataFields,
+	type ListColumn,
+} from "@admin/features/collections/list-workspace";
+
+export function resolveListCells(
+	collection: SchemaCollection | undefined,
+	renderers: readonly AdminListCellRenderer[]
+) {
+	return renderers.flatMap((cell) => {
+		if (cell.collection !== collection?.slug) return [];
+
+		const field = collection.fields.find(
+			(candidate) => candidate.path === cell.field || candidate.name === cell.field
+		);
+		return field === undefined ? [] : [{ ...cell, field }];
+	});
+}
+
+export function resolveListColumns(
+	collection: SchemaCollection | undefined,
+	i18n: AdminI18n,
+	cells: ReturnType<typeof resolveListCells> = []
+): ListColumn[] {
+	return [
+		...listColumnFields(collection).map((field) => {
+			const cell = cells.find((cell) => cell.field.path === field.path);
+			return {
+				path: field.path,
+				label: cell?.labelKey ? i18n.t(cell.labelKey) : (cell?.label ?? field.admin.label),
+				field,
+			};
+		}),
+		...listMetadataFields(collection, i18n).map((field) => ({
+			path: field.path,
+			label: field.admin.label,
+			field,
+		})),
+	];
+}