@riducms/admin 0.1.5 → 0.2.0

package/src/features/documents/document-route.svelte

@@ -1,10 +1,15 @@
 <script lang="ts" module>
+	import { resolveBlockTypes } from "@riducms/protocol";
+
 	import type { SchemaField } from "@riducms/protocol";
 
 	function fieldUsesLocalization(field: SchemaField): boolean {
 		if (field.localized === true) return true;
 		if (field.nested?.fields.some(fieldUsesLocalization)) return true;
-		return field.blocks?.types.some((block) => block.fields.some(fieldUsesLocalization)) === true;
+		return (
+			resolveBlockTypes(field.blocks).some((block) => block.fields.some(fieldUsesLocalization)) ===
+			true
+		);
 	}
 
 	function withContentLocale(path: string, locale: string | undefined) {
@@ -14,6 +19,7 @@
 </script>
 
 <script lang="ts">
+	import { focusFieldIssue } from "@admin/core/forms/field-issue-focus";
 	import type { AdminDocumentExtensionHost } from "@riducms/plugin";
 	import { Link, useBlocker, useLocation, useNavigate, useParams } from "@hvniel/svelte-router";
 	import { tick, untrack } from "svelte";
@@ -242,6 +248,18 @@
 	let previousLivePreviewRouteKey: string | undefined;
 	let dismissedLock = $state<string>();
 	const livePreview = $derived(collection?.admin.livePreview);
+	$effect(() => {
+		const state = location.state as { openLivePreview?: boolean } | null;
+		if (routeDocumentView !== "edit" || state?.openLivePreview !== true) return;
+		livePreviewOpen = true;
+		// API and edit views have separate route instances. Consume the transient
+		// intent on arrival so Back or reload cannot reopen a dismissed preview.
+		const { openLivePreview: _, ...remainingState } = state;
+		navigate(`${location.pathname}${location.search}${location.hash}`, {
+			replace: true,
+			state: remainingState,
+		});
+	});
 	const creatingAuthUser = $derived(
 		creating && !globalResource && collection?.capabilities.auth === true
 	);
@@ -321,10 +339,13 @@
 	}
 
 	function toggleLivePreview() {
+		if (!livePreviewOpen && routeDocumentView === "api") {
+			navigate(editPath, { replace: true, state: { openLivePreview: true } });
+			return;
+		}
 		livePreviewOpen = !livePreviewOpen;
 		if (livePreviewOpen) {
 			controller.documentView = "edit";
-			navigate(editPath, { replace: true });
 		}
 	}
 
@@ -413,7 +434,7 @@
 		const issuePath = controller.revealFirstIssue();
 		if (issuePath === undefined) return;
 		await tick();
-		focusIssue(issuePath);
+		await focusFieldIssue(issuePath);
 	}
 
 	async function handleSave(event: Event) {
@@ -464,24 +485,6 @@
 			return runtime.i18n.t("documents:passwordsDoNotMatch");
 		return undefined;
 	}
-
-	function focusIssue(path: string) {
-		const segments = path.split(".");
-		while (segments.length > 0) {
-			const candidate = segments.join(".");
-			const container = document.querySelector<HTMLElement>(
-				`[data-field-path="${CSS.escape(candidate)}"]`
-			);
-			if (container !== null) {
-				container.scrollIntoView({ behavior: "smooth", block: "center" });
-				container
-					.querySelector<HTMLElement>("input, textarea, button, [tabindex]:not([tabindex='-1'])")
-					?.focus({ preventScroll: true });
-				return;
-			}
-			segments.pop();
-		}
-	}
 </script>
 
 <section
@@ -634,14 +637,10 @@
 					aria-busy={form.submitting}
 					onclick={handleSave}
 				>
-					{form.submitting
-						? runtime.i18n.t("documents:saving")
-						: runtime.i18n.t("documents:saveDraft")}
+					{runtime.i18n.t("documents:saveDraft")}
 				</Button>
 				<Button size="sm" disabled={!canSave} aria-busy={form.submitting} onclick={handlePublish}>
-					{form.submitting
-						? runtime.i18n.t("documents:publishing")
-						: runtime.i18n.t("documents:publish")}
+					{runtime.i18n.t("documents:publish")}
 				</Button>
 			{:else if creating && versionedCollection && !draftsCollection}
 				<Button
@@ -650,9 +649,7 @@
 					aria-busy={form.submitting}
 					onclick={handlePublish}
 				>
-					{form.submitting
-						? runtime.i18n.t("documents:publishing")
-						: runtime.i18n.t("documents:publish")}
+					{runtime.i18n.t("documents:publish")}
 				</Button>
 			{:else}
 				<Button
@@ -662,19 +659,13 @@
 					aria-busy={form.submitting}
 					onclick={handleSave}
 				>
-					{form.submitting
-						? runtime.i18n.t(
-								versionedCollection && currentStatus === "published"
-									? "documents:publishing"
-									: "documents:saving"
-							)
-						: creating && draftsCollection
-							? runtime.i18n.t("documents:saveDraft")
-							: versionedCollection
-								? currentStatus === "published"
-									? runtime.i18n.t("documents:publishChanges")
-									: runtime.i18n.t("documents:saveDraft")
-								: runtime.i18n.t("documents:save")}
+					{creating && draftsCollection
+						? runtime.i18n.t("documents:saveDraft")
+						: versionedCollection
+							? currentStatus === "published"
+								? runtime.i18n.t("documents:publishChanges")
+								: runtime.i18n.t("documents:saveDraft")
+							: runtime.i18n.t("documents:save")}
 				</Button>
 			{/if}
 			{#if !creating && versionedCollection && currentStatus === "draft" && canPublish}
@@ -812,6 +803,8 @@
 						<Skeleton class="mt-5 h-10.5" />
 						<Skeleton class="h-28" />
 					</div>
+				{:else if !creating && currentDocument === undefined}
+					<!-- A failed read has no editable document; the recovery/error banner remains visible. -->
 				{:else if documentView === "api"}
 					<DocumentAPIView
 						resourceSlug={slug}

package/src/features/reference-browser/reference-browser-workflow.svelte.ts

@@ -1,3 +1,5 @@
+import { resolveBlockTypes } from "@riducms/protocol";
+import { connectDocumentLiveValidation } from "@admin/core/forms/live-validation.svelte";
 import type { SchemaCollection, SchemaField } from "@riducms/protocol";
 import { RiduError } from "@riducms/sdk";
 
@@ -90,6 +92,7 @@ export class ReferenceBrowserWorkflow {
 
 	constructor(readonly options: ReferenceBrowserWorkflowOptions) {
 		this.form = new FormController({}, options.runtime.i18n);
+		connectDocumentLiveValidation(this.form, options.runtime.client);
 		this.#lookup = new RelationshipLookupController(options.runtime.client);
 		this.form.setLocalization(options.locale);
 		this.pageSize = options.collection.capabilities.upload ? 8 : 10;
@@ -134,6 +137,7 @@ export class ReferenceBrowserWorkflow {
 		});
 
 		$effect(() => () => {
+			this.form.disposeBindings();
 			this.#editorLoad.abort();
 			this.#editorAccess?.abort();
 			this.#saveRequest?.abort();
@@ -225,8 +229,9 @@ export class ReferenceBrowserWorkflow {
 
 	get canCommitSelection() {
 		return (
-			this.workingSelection.length !== this.options.selectedIDs.length ||
-			this.workingSelection.some((id) => !this.options.selectedIDs.includes(id))
+			!this.options.readOnly &&
+			(this.workingSelection.length !== this.options.selectedIDs.length ||
+				this.workingSelection.some((id) => !this.options.selectedIDs.includes(id)))
 		);
 	}
 
@@ -271,11 +276,11 @@ export class ReferenceBrowserWorkflow {
 	};
 
 	commitSelection = async () => {
-		if (this.committing) return;
+		if (this.committing || this.options.readOnly) return;
 		this.committing = true;
 		try {
 			const committed = await this.options.onCommit([...this.workingSelection]);
-			if (committed !== false) this.#closeBrowser();
+			if (committed !== false && !this.options.readOnly) this.#closeBrowser();
 		} catch (cause) {
 			this.options.notifications.error({
 				title: this.options.runtime.i18n.t("reference:updateNotConfirmed"),
@@ -304,11 +309,12 @@ export class ReferenceBrowserWorkflow {
 	openNewDocument = () => {
 		if (this.form.submitting || !this.canCreateDocument) return;
 		this.editorDocument = undefined;
+		this.form.setResource({ collection: this.options.collection.slug });
 		const values = {
 			...initialFormValues(this.options.collection.fields),
 			...this.options.defaultValues,
 		};
-		this.form.reset(values);
+		this.form.reset(values, this.options.collection.fields);
 		this.form.setAccess(undefined, "create");
 		this.selectedFiles = undefined;
 		this.newUserPassword = "";
@@ -338,6 +344,7 @@ export class ReferenceBrowserWorkflow {
 			this.credentialIssue = this.#validateNewUserPassword();
 			if (this.credentialIssue !== undefined) return false;
 			const saved = await this.form.submit(this.validationFields, this.creating, async (values) => {
+				if (this.options.readOnly) throw new Error("This field is read-only.");
 				if (this.editorDocument !== undefined) {
 					return this.options.runtime.client.update(
 						this.options.collection.slug,
@@ -376,7 +383,7 @@ export class ReferenceBrowserWorkflow {
 					locale: this.options.locale,
 				});
 			});
-			if (request.signal.aborted) return false;
+			if (request.signal.aborted || this.options.readOnly) return false;
 			const wasCreating = this.editorDocument === undefined;
 			this.editorDocument = saved;
 			this.#lookup.remember(saved);
@@ -384,7 +391,10 @@ export class ReferenceBrowserWorkflow {
 				? [...new Set([...this.workingSelection, saved.id])]
 				: [saved.id];
 			this.options.runtime.documentsChanged();
-			this.form.reset(documentFormValues(this.options.collection.fields, saved));
+			this.form.reset(
+				documentFormValues(this.options.collection.fields, saved),
+				this.options.collection.fields
+			);
 			this.form.setLocalization(this.options.locale, saved._localization?.sources);
 			this.options.notifications.success({
 				title: wasCreating
@@ -402,7 +412,7 @@ export class ReferenceBrowserWorkflow {
 			this.credentialIssue = undefined;
 			return true;
 		} catch (cause) {
-			if (request.signal.aborted) return false;
+			if (request.signal.aborted || this.options.readOnly) return false;
 			if (
 				creatingUpload &&
 				!(cause instanceof FormValidationError) &&
@@ -550,8 +560,12 @@ export class ReferenceBrowserWorkflow {
 	}
 
 	#openEditor(document: AdminDocument) {
+		this.form.setResource({ collection: this.options.collection.slug, id: document.id });
 		this.editorDocument = document;
-		this.form.reset(documentFormValues(this.options.collection.fields, document));
+		this.form.reset(
+			documentFormValues(this.options.collection.fields, document),
+			this.options.collection.fields
+		);
 		this.form.setLocalization(this.options.locale, document._localization?.sources);
 		this.form.setAccess(undefined, "update");
 		this.selectedFiles = undefined;
@@ -612,6 +626,7 @@ export class ReferenceBrowserWorkflow {
 	}
 
 	#closeBrowser() {
+		this.form.disposeBindings();
 		this.options.setOpen(false);
 		this.options.onClose();
 	}
@@ -645,11 +660,11 @@ function createCollectionFilters(collection: SchemaCollection, i18n: AdminRuntim
 	const select =
 		collection.fields.find((field) => field.name === "status" && field.select !== undefined) ??
 		collection.fields.find((field) => field.select !== undefined);
-	for (const choice of select?.select?.choices ?? []) {
+	for (const option of select?.select?.options ?? []) {
 		result.push({
-			key: choice.value,
-			label: i18n.text(choice.label, choice.labelTranslations),
-			filter: { field: select?.name ?? "", operator: "equals", value: choice.value },
+			key: option.value,
+			label: i18n.text(option.label, option.labelTranslations),
+			filter: { field: select?.name ?? "", operator: "equals", value: option.value },
 		});
 	}
 	return result;
@@ -675,9 +690,9 @@ function scopeField(field: SchemaField, prefix: string): SchemaField {
 			? {}
 			: {
 					blocks: {
-						types: field.blocks.types.map((block) => ({
+						types: resolveBlockTypes(field.blocks).map((block) => ({
 							...block,
-							fields: block.fields.map((child) => scopeField(child, `${prefix}-${block.key}`)),
+							fields: block.fields.map((child) => scopeField(child, `${prefix}-${block.slug}`)),
 						})),
 					},
 				}),