@riducms/admin 0.2.2 → 0.3.0

package/src/features/collections/bulk/bulk-confirmation.svelte

@@ -0,0 +1,153 @@
+<script module lang="ts">
+	export type BulkConfirmationAction =
+		| "publish-selected"
+		| "unpublish-selected"
+		| "delete-selected"
+		| "restore-selected"
+		| "delete-selected-permanently"
+		| "empty-trash";
+</script>
+
+<script lang="ts">
+	import { getAdminI18n } from "@riducms/plugin";
+	import { ConfirmationDialog } from "@admin/components/ui/confirmation-dialog";
+	import { getCollectionList } from "@admin/features/collections/collection-list.svelte";
+
+	let {
+		open = $bindable(false),
+		action,
+	}: {
+		open?: boolean;
+		action: BulkConfirmationAction;
+	} = $props();
+
+	const list = getCollectionList();
+	const { controller } = list;
+	const i18n = getAdminI18n();
+
+	const { selectedIDs, bulkPending } = $derived(controller);
+	const copy = $derived(confirmationText(action));
+
+	async function performConfirmation() {
+		switch (action) {
+			case "publish-selected":
+				await controller.bulkPublish();
+				break;
+
+			case "unpublish-selected":
+				await controller.bulkUnpublish();
+				break;
+
+			case "restore-selected":
+				await controller.bulkRestore();
+				break;
+
+			case "delete-selected-permanently":
+				await controller.bulkDeletePermanent();
+				break;
+
+			case "empty-trash":
+				await controller.emptyTrash();
+				break;
+
+			default:
+				action satisfies "delete-selected";
+				await controller.bulkDelete();
+		}
+	}
+
+	function confirmationText(action: BulkConfirmationAction) {
+		const count = selectedIDs.size;
+		switch (action) {
+			case "publish-selected":
+				return {
+					title: i18n.t("collections:confirmPublishSelected"),
+					description: i18n.t("collections:publishSelectedDescription", {
+						label:
+							list.collection === undefined
+								? i18n.t("collections:documents")
+								: i18n.text(
+										list.collection.labels.plural,
+										list.collection.labels.pluralTranslations
+									),
+					}),
+					confirmLabel: i18n.t("general:confirm"),
+					destructive: false,
+				};
+
+			case "unpublish-selected":
+				return {
+					title: i18n.t("collections:confirmUnpublishSelected"),
+					description: i18n.t("collections:unpublishSelectedDescription", {
+						label:
+							list.collection === undefined
+								? i18n.t("collections:documents")
+								: i18n.text(
+										list.collection.labels.plural,
+										list.collection.labels.pluralTranslations
+									),
+					}),
+					confirmLabel: i18n.t("general:confirm"),
+					destructive: false,
+				};
+
+			case "restore-selected":
+				return {
+					title: i18n.t("collections:confirmRestoreSelected", {
+						count,
+						formattedCount: i18n.formatNumber(count),
+					}),
+					description: i18n.t("collections:restoreSelectedDescription"),
+					confirmLabel: i18n.t("documents:restore"),
+					destructive: false,
+				};
+
+			case "delete-selected-permanently":
+				return {
+					title: i18n.t("collections:confirmDeleteSelectedPermanently", {
+						count,
+						formattedCount: i18n.formatNumber(count),
+					}),
+					description: i18n.t("collections:cannotUndo"),
+					confirmLabel: i18n.t("collections:deletePermanently"),
+					destructive: true,
+				};
+
+			case "empty-trash": {
+				return {
+					title: i18n.t("collections:confirmEmptyTrash", {
+						label:
+							list.collection?.labels.plural.toLocaleLowerCase(i18n.language) ??
+							i18n.t("collections:documents"),
+					}),
+					description: i18n.t("collections:emptyTrashDescription"),
+					confirmLabel: i18n.t("collections:emptyTrash"),
+					destructive: true,
+				};
+			}
+
+			default:
+				action satisfies "delete-selected";
+				return {
+					title: i18n.t("collections:confirmDeleteSelected", {
+						count,
+						formattedCount: i18n.formatNumber(count),
+					}),
+					description: i18n.t("collections:deleteSelectedDescription"),
+					confirmLabel: i18n.t("general:delete"),
+					destructive: true,
+				};
+		}
+	}
+</script>
+
+<ConfirmationDialog
+	bind:open
+	title={copy.title}
+	description={copy.description}
+	confirmLabel={copy.confirmLabel}
+	cancelLabel={i18n.t("general:cancel")}
+	destructive={copy.destructive}
+	disabled={bulkPending}
+	onconfirm={performConfirmation}
+/>

package/src/features/collections/bulk/bulk-editor-loader.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { getAdminI18n } from "@riducms/plugin";
+	import { Button } from "@riducms/ui";
+	import { Dialog } from "bits-ui";
+	import type { SchemaCollection, SchemaField } from "@riducms/protocol";
+
+	import { getCollectionList } from "@admin/features/collections/collection-list.svelte";
+
+	let { open = $bindable(false) }: { open?: boolean } = $props();
+
+	const i18n = getAdminI18n();
+	const list = getCollectionList();
+	let editor = $state.raw<typeof import("@admin/features/collections/bulk/bulk-editor.svelte")>();
+	let status = $state<"idle" | "loading" | "failed">("idle");
+	let owner:
+		| {
+				slug: string;
+				locale: string | undefined;
+				collection: SchemaCollection | undefined;
+				fields: readonly SchemaField[];
+		  }
+		| undefined;
+
+	$effect(() => {
+		const slug = list.slug;
+		const locale = list.contentLocale;
+		const collection = list.collection;
+		const fields = list.bulkEditableFields;
+		if (!open) {
+			owner = undefined;
+			return;
+		}
+		if (owner === undefined) owner = { slug, locale, collection, fields };
+		else if (
+			owner.slug !== slug ||
+			owner.locale !== locale ||
+			owner.collection !== collection ||
+			owner.fields !== fields
+		) {
+			open = false;
+			owner = undefined;
+			return;
+		}
+
+		if (!open || editor !== undefined || status !== "idle") return;
+
+		status = "loading";
+		import("@admin/features/collections/bulk/bulk-editor.svelte")
+			.then((loaded) => {
+				editor = loaded;
+				status = "idle";
+			})
+			.catch(() => {
+				status = "failed";
+			});
+	});
+
+	function changeOpen(next: boolean) {
+		open = next;
+	}
+</script>
+
+{#if editor !== undefined}
+	<editor.default bind:open />
+{:else if open}
+	<Dialog.Root {open} onOpenChange={changeOpen}>
+		<Dialog.Portal>
+			<Dialog.Overlay class="ridu-list-bulk-module-overlay" />
+			<Dialog.Content class="ridu-list-bulk-module" dir={i18n.direction}>
+				<header class="ridu-list-bulk-module__header">
+					<Dialog.Title class="ridu-list-bulk-module__title">
+						{i18n.t(status === "failed" ? "collections:workspaceLoadFailed" : "general:loading")}
+					</Dialog.Title>
+					<Dialog.Description class="ridu-list-bulk-module__description">
+						{i18n.t(
+							status === "failed"
+								? "collections:workspaceLoadFailed"
+								: "collections:bulkEditDescription"
+						)}
+					</Dialog.Description>
+				</header>
+				<footer class="ridu-list-bulk-module__actions">
+					<Button variant="outline" onclick={() => (open = false)}>
+						{i18n.t("general:close")}
+					</Button>
+					{#if status === "failed"}
+						<Button onclick={() => window.location.reload()}>
+							{i18n.t("general:reloadPage")}
+						</Button>
+					{/if}
+				</footer>
+			</Dialog.Content>
+		</Dialog.Portal>
+	</Dialog.Root>
+{/if}

package/src/features/collections/bulk/bulk-editor.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+	import { getAdminI18n } from "@riducms/plugin";
+	import type { SchemaField } from "@riducms/protocol";
+	import { Button } from "@riducms/ui";
+	import { Dialog } from "bits-ui";
+	import { tick } from "svelte";
+	import XIcon from "~icons/lucide/x";
+
+	import { focusFieldIssue } from "@admin/core/forms/field-issue-focus";
+	import { FormController } from "@admin/core/forms/form-controller.svelte";
+	import { initialBulkEditValues } from "@admin/features/bulk-edit/bulk-edit-fields";
+	import BulkEditFieldPicker from "@admin/features/bulk-edit/field-picker.svelte";
+	import type { CollectionBulkUpdateTarget } from "@admin/features/collections/collection-list-controller.svelte";
+	import { getCollectionList } from "@admin/features/collections/collection-list.svelte";
+	import FieldLayout from "@admin/fields/field-layout.svelte";
+	import "@admin/features/bulk-edit/bulk-edit.scss";
+
+	const list = getCollectionList();
+	const i18n = getAdminI18n();
+	const form = new FormController({}, i18n);
+
+	let { open = $bindable(false) }: { open?: boolean } = $props();
+
+	let target = $state.raw<CollectionBulkUpdateTarget>();
+	let editorFields = $state.raw<readonly SchemaField[]>([]);
+	let ownerFields: readonly SchemaField[] | undefined;
+	let selectedPaths = $state<string[]>([]);
+	// Only the issue-focus handler reads this DOM binding.
+	// svelte-ignore non_reactive_update
+	let fieldsViewport: HTMLElement | null = null;
+	let wasOpen = false;
+
+	const selectedFields = $derived(
+		editorFields.filter((field) => selectedPaths.includes(field.path))
+	);
+	const pending = $derived(list.controller.bulkPending || form.submitting);
+	const selectedCount = $derived(target?.ids.length ?? 0);
+	const selectedLabel = $derived.by(() => {
+		const collection = target?.collection;
+		if (collection === undefined) return i18n.t("collections:documents");
+		const labels = collection.labels;
+		return selectedCount === 1
+			? i18n.text(labels.singular, labels.singularTranslations)
+			: i18n.text(labels.plural, labels.pluralTranslations);
+	});
+
+	form.setEditorScope(() => open);
+
+	$effect(() => {
+		const currentFields = list.bulkEditableFields;
+		if (open && !wasOpen) {
+			target = list.controller.captureBulkUpdateTarget();
+			ownerFields = currentFields;
+			editorFields = [...currentFields];
+			selectedPaths = [];
+			form.reset({}, []);
+			form.setResource({ collection: target.slug });
+			form.setLocalization(target.locale);
+		} else if (
+			open &&
+			target !== undefined &&
+			(target.slug !== list.slug ||
+				target.locale !== list.contentLocale ||
+				target.collection !== list.collection ||
+				ownerFields !== currentFields)
+		) {
+			open = false;
+			resetEditor();
+		} else if (!open && wasOpen) {
+			resetEditor();
+		}
+
+		wasOpen = open;
+	});
+
+	$effect(() => () => form.disposeBindings());
+
+	function changeOpen(next: boolean) {
+		if (pending && !next) return;
+		open = next;
+	}
+
+	function resetEditor() {
+		target = undefined;
+		ownerFields = undefined;
+		editorFields = [];
+		selectedPaths = [];
+		form.reset({}, []);
+		form.setResource(undefined);
+		form.setLocalization(undefined);
+	}
+
+	function changeSelectedPaths(paths: string[]) {
+		const allowed = new Set(editorFields.map((field) => field.path));
+		selectedPaths = [...new Set(paths.filter((path) => allowed.has(path)))];
+		const fields = editorFields.filter((field) => selectedPaths.includes(field.path));
+		form.reset(initialBulkEditValues(fields, form.snapshot()), fields);
+	}
+
+	async function focusFirstIssue() {
+		const issue = form.issues[0];
+		if (issue === undefined || fieldsViewport === null) return;
+		await tick();
+		await focusFieldIssue(issue.path, fieldsViewport);
+	}
+
+	async function submit() {
+		const updateTarget = target;
+		if (
+			pending ||
+			selectedFields.length === 0 ||
+			updateTarget === undefined ||
+			updateTarget.ids.length === 0
+		)
+			return;
+
+		try {
+			const updated = await form.submit(selectedFields, true, (values) =>
+				list.controller.bulkUpdate(updateTarget, values)
+			);
+			if (updated) open = false;
+		} catch {
+			await focusFirstIssue();
+		}
+	}
+</script>
+
+<Dialog.Root {open} onOpenChange={changeOpen}>
+	<Dialog.Portal>
+		<Dialog.Overlay class="ridu-bulk-edit-overlay" />
+		<Dialog.Content
+			class="ridu-bulk-edit-drawer"
+			dir={i18n.direction}
+			onEscapeKeydown={(event) => pending && event.preventDefault()}
+		>
+			<main class="ridu-bulk-edit-main" bind:this={fieldsViewport}>
+				<header class="ridu-bulk-edit-header">
+					<Dialog.Title class="ridu-bulk-edit-title">
+						{i18n.t("collections:bulkEditSelected", {
+							count: selectedCount,
+							formattedCount: i18n.formatNumber(selectedCount),
+							label: selectedLabel,
+						})}
+					</Dialog.Title>
+					<Dialog.Close
+						type="button"
+						class="ridu-bulk-edit-close"
+						disabled={pending}
+						aria-label={i18n.t("general:close")}
+					>
+						<XIcon aria-hidden="true" />
+					</Dialog.Close>
+				</header>
+				<Dialog.Description class="ridu-bulk-edit-description">
+					{i18n.t("collections:bulkEditDescription")}
+				</Dialog.Description>
+
+				<BulkEditFieldPicker
+					fields={editorFields}
+					value={selectedPaths}
+					onValueChange={changeSelectedPaths}
+					disabled={pending}
+				/>
+
+				{#if selectedFields.length > 0}
+					<div class="ridu-bulk-edit-fields">
+						<FieldLayout fields={selectedFields} {form} />
+					</div>
+				{/if}
+			</main>
+
+			<aside class="ridu-bulk-edit-sidebar">
+				<Button
+					disabled={pending ||
+						selectedFields.length === 0 ||
+						target === undefined ||
+						target.ids.length === 0}
+					aria-busy={pending}
+					onclick={submit}
+				>
+					{pending ? i18n.t("collections:applying") : i18n.t("collections:applyChanges")}
+				</Button>
+			</aside>
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>

package/src/features/collections/collection-list-cell-values.ts

@@ -0,0 +1,144 @@
+import type { AdminI18n } from "@riducms/plugin";
+import type { SchemaCollection, SchemaField } from "@riducms/protocol";
+
+import type { AdminDocument } from "@admin/core/api/admin-client";
+import { readDocumentPath } from "@admin/core/schema/read-document-path";
+import { documentLabel } from "@admin/features/documents/document-title";
+import { formatDateDisplay } from "@admin/fields/scalar/date-value";
+
+interface CollectionListCellFormatterOptions {
+	i18n: AdminI18n;
+	get collections(): readonly SchemaCollection[];
+	canReadField: (path: string, id: string) => boolean;
+}
+
+export function createCollectionListCellFormatter(options: CollectionListCellFormatterOptions) {
+	return (document: AdminDocument, field: SchemaField) => {
+		const { i18n } = options;
+		if (!options.canReadField(field.path, document.id)) return "—";
+		const value = readDocumentPath(document, field.path);
+		if (value === undefined || value === null || value === "") return "—";
+		if (field.type === "checkbox") {
+			return value === true ? i18n.t("general:yes") : i18n.t("general:no");
+		}
+		if (field.type === "select" || field.type === "radio") {
+			const values = Array.isArray(value) ? value : [value];
+			const labels = values.map((candidate) => {
+				const option = field.select?.options.find((item) => item.value === candidate);
+				return option === undefined
+					? String(candidate)
+					: i18n.text(option.label, option.labelTranslations);
+			});
+			return Array.isArray(value) ? i18n.formatList(labels) : labels[0];
+		}
+		if (field.type === "array") return summarizeRows(value, "row", i18n);
+		if (field.type === "blocks") return summarizeRows(value, "block", i18n);
+		if (field.type === "json" || field.plugin !== undefined) return summarizeStructured(value);
+		if (field.type === "date") return formatDateDisplay(value, field.date?.format, i18n);
+		if (referenceField(field)) {
+			return i18n.formatList(
+				fieldReferences(field, value).map((reference) => {
+					const collection = options.collections.find(
+						(candidate) => candidate.slug === reference.collection
+					);
+					return reference.document === undefined
+						? reference.id
+						: documentLabel(collection, reference.document);
+				})
+			);
+		}
+		if (Array.isArray(value)) {
+			return i18n.formatList(value.map((item) => displayReference(item, i18n)));
+		}
+		if (typeof value === "object") return displayReference(value, i18n);
+		return String(value);
+	};
+}
+
+function referenceField(field: SchemaField) {
+	return field.relationship !== undefined || field.upload !== undefined || field.join !== undefined;
+}
+
+interface ListReference {
+	collection: string;
+	id: string;
+	document?: AdminDocument;
+}
+
+function fieldReferences(field: SchemaField, value: unknown): ListReference[] {
+	const values = Array.isArray(value) ? value : [value];
+	return values.flatMap((candidate): ListReference[] => {
+		const configuredTarget =
+			field.relationship?.collectionSlug ??
+			field.upload?.collectionSlug ??
+			field.join?.collectionSlug;
+		if (typeof candidate === "string") {
+			return configuredTarget === undefined
+				? []
+				: [{ collection: configuredTarget, id: candidate }];
+		}
+		if (typeof candidate !== "object" || candidate === null) return [];
+		const record = candidate as Record<string, unknown>;
+		const collection = typeof record.relationTo === "string" ? record.relationTo : configuredTarget;
+		if (collection === undefined) return [];
+		if (record.relationTo !== undefined) {
+			if (typeof record.id === "string") return [{ collection, id: record.id }];
+			if (documentValue(record.id)) {
+				return [{ collection, id: record.id.id, document: record.id }];
+			}
+			return [];
+		}
+		return documentValue(record) ? [{ collection, id: record.id, document: record }] : [];
+	});
+}
+
+function documentValue(value: unknown): value is AdminDocument {
+	return (
+		typeof value === "object" && value !== null && typeof Reflect.get(value, "id") === "string"
+	);
+}
+
+function displayReference(value: unknown, i18n: AdminI18n) {
+	if (typeof value === "string") return value;
+	if (typeof value !== "object" || value === null) return String(value ?? "—");
+	const record = value as Record<string, unknown>;
+	return String(
+		record.title ??
+			record.name ??
+			record.email ??
+			record.id ??
+			i18n.t("collections:relatedDocument")
+	);
+}
+
+function summarizeRows(value: unknown, singular: "row" | "block", i18n: AdminI18n) {
+	if (!Array.isArray(value) || value.length === 0) return "—";
+	const previews = value.slice(0, 2).map((row, index) => {
+		if (typeof row !== "object" || row === null) return String(row);
+		const record = row as Record<string, unknown>;
+		return String(
+			record.label ??
+				record.title ??
+				record.heading ??
+				record.name ??
+				record.blockType ??
+				i18n.t(singular === "row" ? "collections:rowNumber" : "collections:blockNumber", {
+					number: i18n.formatNumber(index + 1),
+				})
+		);
+	});
+	const summary = i18n.formatList(previews);
+	return value.length > previews.length
+		? i18n.t("collections:moreItems", {
+				summary,
+				count: i18n.formatNumber(value.length - previews.length),
+			})
+		: summary;
+}
+
+function summarizeStructured(value: unknown) {
+	if (value === undefined || value === null) return "—";
+	if (typeof value !== "object") return String(value);
+	const text = JSON.stringify(value);
+	return text.length > 72 ? `${text.slice(0, 69)}…` : text;
+}