@questpie/admin 3.5.2 → 3.5.4

package/dist/client/views/collection/document-view.mjs

@@ -0,0 +1,377 @@
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
+import { resolveIconElement } from "../../components/component-renderer.mjs";
+import { Button } from "../../components/ui/button.mjs";
+import { Separator } from "../../components/ui/separator.mjs";
+import { Badge } from "../../components/ui/badge.mjs";
+import { adminCollectionKey } from "../../hooks/query-access.mjs";
+import { useCollectionFields } from "../../hooks/use-collection-fields.mjs";
+import { FieldRenderer } from "./field-renderer.mjs";
+import { EmptyState } from "../../components/ui/empty-state.mjs";
+import { useCollectionValidation } from "../../hooks/use-collection-validation.mjs";
+import { usePreferServerValidation } from "../../hooks/use-server-validation.mjs";
+import { useAutosave } from "../../hooks/use-autosave.mjs";
+import { useCollectionItem, useCollectionUpdate } from "../../hooks/use-collection.mjs";
+import { AdminViewHeader, AdminViewLayout } from "../layout/admin-view-layout.mjs";
+import { FormViewSkeleton } from "./view-skeletons.mjs";
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FormProvider, useForm, useFormContext, useFormState } from "react-hook-form";
+import { toast } from "sonner";
+
+//#region src/client/views/collection/document-view.tsx
+/**
+* Document View — Notion-style document page
+*
+* Renders a collection record as a centered page: an optional title, a compact
+* block of inline-editable property rows, a divider, and a dominant long-form
+* body field rendered with the rich-text editor.
+*
+* Drop-in with the form view: takes the same props (`CollectionFormViewProps`).
+* Layout and which fields are body/title/properties are declared via
+* `viewConfig.document` (the `DocumentViewConfig` contract) — no hardcoded field
+* names. Save is configurable: `"autosave"` (debounced, shared `useAutosave`
+* pipeline) or `"manual"` (a Save affordance with dirty tracking).
+*/
+/**
+* Presentation-only default icons per field type, used for property rows when a
+* field carries no explicit icon. Falls back to a generic tag icon.
+*/
+const FIELD_TYPE_ICONS = {
+	text: "ph:text-aa",
+	textarea: "ph:text-align-left",
+	richText: "ph:article",
+	number: "ph:hash",
+	boolean: "ph:toggle-left",
+	select: "ph:list-checks",
+	relation: "ph:link-simple",
+	date: "ph:calendar-blank",
+	datetime: "ph:calendar-blank",
+	upload: "ph:paperclip",
+	json: "ph:brackets-curly",
+	color: "ph:palette",
+	email: "ph:envelope-simple",
+	url: "ph:globe-simple"
+};
+const DEFAULT_PROPERTY_ICON = "ph:tag";
+/**
+* A single Notion-style property row: icon + label + the field's inline editor.
+*/
+const DocumentPropertyRow = React.memo(function DocumentPropertyRow$1({ collection, fieldName, fieldDef, icon, label, registry, allCollectionsConfig }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "qa-document-view__property hover:bg-muted/40 flex items-start gap-3 rounded-md px-2 py-1.5 transition-colors duration-150",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground flex w-32 shrink-0 items-center gap-2 pt-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "flex size-3.5 shrink-0 items-center justify-center",
+				children: icon
+			}), /* @__PURE__ */ jsx("span", {
+				className: "truncate text-xs",
+				children: label
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "qa-document-view__property-control min-w-0 flex-1",
+			children: /* @__PURE__ */ jsx(FieldRenderer, {
+				fieldName,
+				fieldDef,
+				collection,
+				registry,
+				allCollectionsConfig,
+				hideLabel: true
+			})
+		})]
+	});
+});
+const DocumentSaveButton = React.memo(function DocumentSaveButton$1({ isPending }) {
+	const { t } = useTranslation();
+	const { isDirty, isSubmitting } = useFormState();
+	const busy = isPending || isSubmitting;
+	return /* @__PURE__ */ jsx(Button, {
+		type: "submit",
+		size: "sm",
+		disabled: busy || !isDirty,
+		className: "gap-2",
+		children: busy ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+			icon: "ph:spinner-gap",
+			className: "size-4 animate-spin"
+		}), t("common.loading")] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+			icon: "ph:check",
+			width: 16,
+			height: 16
+		}), t("common.save")] })
+	});
+});
+const DocumentAutosaveIndicator = React.memo(function DocumentAutosaveIndicator$1({ isSaving, lastSaved }) {
+	const { t } = useTranslation();
+	const { isDirty } = useFormState();
+	const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
+	React.useEffect(() => {
+		if (!lastSaved) return;
+		const interval = setInterval(forceUpdate, 1e4);
+		return () => clearInterval(interval);
+	}, [lastSaved]);
+	const formatTimeAgo = (date) => {
+		const seconds = Math.floor((Date.now() - date.getTime()) / 1e3);
+		if (seconds < 10) return t("autosave.justNow");
+		if (seconds < 60) return t("autosave.secondsAgo", { count: seconds });
+		const minutes = Math.floor(seconds / 60);
+		if (minutes < 60) return t("autosave.minutesAgo", { count: minutes });
+		return t("autosave.hoursAgo", { count: Math.floor(minutes / 60) });
+	};
+	if (isSaving) return /* @__PURE__ */ jsxs(Badge, {
+		variant: "secondary",
+		className: "gap-1.5",
+		children: [/* @__PURE__ */ jsx(Icon, {
+			icon: "ph:spinner-gap",
+			className: "size-3 animate-spin"
+		}), t("autosave.saving")]
+	});
+	if (isDirty) return /* @__PURE__ */ jsxs(Badge, {
+		variant: "outline",
+		className: "gap-1.5",
+		children: [/* @__PURE__ */ jsx(Icon, {
+			icon: "ph:clock-counter-clockwise",
+			className: "size-3"
+		}), t("autosave.unsavedChanges")]
+	});
+	if (lastSaved) return /* @__PURE__ */ jsxs(Badge, {
+		variant: "secondary",
+		className: "text-muted-foreground gap-1.5",
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				icon: "ph:check",
+				className: "size-3"
+			}),
+			t("autosave.saved"),
+			" ",
+			formatTimeAgo(lastSaved)
+		]
+	});
+	return null;
+});
+/**
+* Resolve the ordered list of property field names.
+* - `"auto"` → every schema field except the body and title, in schema order.
+* - `string[]` → the explicit list (filtered to fields that exist).
+*/
+function resolvePropertyNames(properties, resolvedFields, body, title) {
+	const allNames = Object.keys(resolvedFields);
+	if (Array.isArray(properties)) return properties.filter((name) => allNames.includes(name));
+	return allNames.filter((name) => name !== body && name !== title);
+}
+const DocumentForm = React.memo(function DocumentForm$1({ collection, documentConfig, propertyNames, resolvedFields, schema, registry, allCollectionsConfig, title, saveMode, isSaving, lastSaved, isMutationPending }) {
+	const resolveText = useResolveText();
+	const form = useFormContext();
+	const propertyRows = React.useMemo(() => {
+		const schemaFields = schema?.fields ?? {};
+		return propertyNames.map((name) => {
+			const fieldDef = resolvedFields[name];
+			if (!fieldDef) return null;
+			const meta = schemaFields[name]?.metadata;
+			const fieldType = fieldDef.name;
+			return {
+				name,
+				fieldDef,
+				label: resolveText(meta?.label ?? name, name, form.getValues()),
+				icon: (meta?.icon ? resolveIconElement(meta.icon, { className: "size-3.5" }) : null) ?? /* @__PURE__ */ jsx(Icon, {
+					icon: FIELD_TYPE_ICONS[fieldType] ?? DEFAULT_PROPERTY_ICON,
+					className: "size-3.5"
+				})
+			};
+		}).filter(Boolean);
+	}, [
+		propertyNames,
+		resolvedFields,
+		schema?.fields,
+		resolveText,
+		form
+	]);
+	const bodyFieldDef = resolvedFields[documentConfig.body];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "qa-document-view mx-auto max-w-3xl px-6 py-8",
+		children: [
+			/* @__PURE__ */ jsx(AdminViewHeader, {
+				className: "mb-6",
+				title,
+				titleAccessory: saveMode === "autosave" ? /* @__PURE__ */ jsx(DocumentAutosaveIndicator, {
+					isSaving,
+					lastSaved
+				}) : /* @__PURE__ */ jsx(DocumentSaveButton, { isPending: isMutationPending })
+			}),
+			propertyRows.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "qa-document-view__properties mb-6 space-y-px",
+				children: propertyRows.map((row) => /* @__PURE__ */ jsx(DocumentPropertyRow, {
+					collection,
+					fieldName: row.name,
+					fieldDef: row.fieldDef,
+					icon: row.icon,
+					label: row.label,
+					registry,
+					allCollectionsConfig
+				}, row.name))
+			}),
+			/* @__PURE__ */ jsx(Separator, { className: "mb-8" }),
+			/* @__PURE__ */ jsx("div", {
+				className: "qa-document-view__body min-w-0",
+				children: bodyFieldDef ? /* @__PURE__ */ jsx(FieldRenderer, {
+					fieldName: documentConfig.body,
+					fieldDef: bodyFieldDef,
+					collection,
+					registry,
+					allCollectionsConfig,
+					hideLabel: true
+				}) : /* @__PURE__ */ jsx(EmptyState, {
+					iconName: "ph:warning",
+					title: `Document body field "${documentConfig.body}" not found.`
+				})
+			})
+		]
+	});
+});
+/**
+* The form-bearing inner component. The outer `DocumentView` gates on loading
+* and mounts this with `initialValues` already populated, so `useForm` — and
+* therefore the TipTap body editor (`content: value`) — initializes WITH the
+* stored content on its very first render. This is the fix for the empty-body /
+* spurious "unsaved changes" bug: we never mount the editor empty and then try
+* to re-sync a value-prop change into ProseMirror.
+*
+* Remounted (via `key`) by the outer when the record identity changes, so each
+* record gets a fresh form seeded with its own values.
+*/
+function DocumentEditor({ collection, id, documentConfig, propertyNames, resolvedFields, schema, registry, allCollectionsConfig, resolver, updateMutation, initialValues, title, autosaveDebounce }) {
+	const { t } = useTranslation();
+	const saveMode = documentConfig.save === "manual" ? "manual" : "autosave";
+	const form = useForm({
+		defaultValues: initialValues,
+		resolver,
+		mode: "onBlur"
+	});
+	const formIsDirtyRef = React.useRef(false);
+	const formIsSubmittingRef = React.useRef(false);
+	const { isDirty: formIsDirty, isSubmitting: formIsSubmitting } = useFormState({ control: form.control });
+	React.useEffect(() => {
+		formIsDirtyRef.current = formIsDirty;
+	}, [formIsDirty]);
+	React.useEffect(() => {
+		formIsSubmittingRef.current = formIsSubmitting;
+	}, [formIsSubmitting]);
+	const [isSaving, setIsSaving] = React.useState(false);
+	const [lastSaved, setLastSaved] = React.useState(null);
+	useAutosave({
+		form,
+		id,
+		enabled: saveMode === "autosave",
+		debounce: autosaveDebounce,
+		isDirtyRef: formIsDirtyRef,
+		isSubmittingRef: formIsSubmittingRef,
+		updateMutation,
+		onSavingChange: setIsSaving,
+		onSaved: setLastSaved
+	});
+	const onManualSubmit = form.handleSubmit(async (data) => {
+		if (!id) return;
+		try {
+			const result = await updateMutation.mutateAsync({
+				id,
+				data
+			});
+			form.reset(result, { keepTouched: true });
+			setLastSaved(/* @__PURE__ */ new Date());
+			toast.success(t("toast.saveSuccess"));
+		} catch (error) {
+			toast.error(t("toast.saveFailed"), { description: error instanceof Error ? error.message : void 0 });
+		}
+	});
+	return /* @__PURE__ */ jsx(FormProvider, {
+		...form,
+		children: /* @__PURE__ */ jsx("form", {
+			onSubmit: (e) => {
+				e.stopPropagation();
+				if (saveMode === "manual") onManualSubmit(e);
+				else e.preventDefault();
+			},
+			children: /* @__PURE__ */ jsx(DocumentForm, {
+				collection,
+				documentConfig,
+				propertyNames,
+				resolvedFields,
+				schema,
+				registry,
+				allCollectionsConfig,
+				title,
+				saveMode,
+				isSaving,
+				lastSaved,
+				isMutationPending: updateMutation.isPending
+			})
+		})
+	});
+}
+function DocumentView({ collection, id, config, viewConfig, defaultValues: defaultValuesProp, registry, allCollectionsConfig, title: titleProp }) {
+	const { t } = useTranslation();
+	const isEditMode = !!id;
+	const collectionKey = adminCollectionKey(collection);
+	const { fields: resolvedFields, schema, isLoading: isFieldsLoading } = useCollectionFields(collection, { fallbackFields: config?.fields });
+	const documentConfig = React.useMemo(() => viewConfig?.document ?? (schema?.admin?.form)?.document ?? config?.form?.document, [
+		viewConfig,
+		schema?.admin?.form,
+		config
+	]);
+	const propertyNames = React.useMemo(() => documentConfig ? resolvePropertyNames(documentConfig.properties, resolvedFields, documentConfig.body, documentConfig.title) : [], [documentConfig, resolvedFields]);
+	const { data: item, isLoading, error: itemError } = useCollectionItem(collectionKey, id ?? "", { localeFallback: false }, { enabled: isEditMode });
+	const updateMutation = useCollectionUpdate(collectionKey);
+	const hasServerValidationSchema = !!schema?.validation?.update;
+	const clientResolver = useCollectionValidation(collection, { enabled: !isFieldsLoading && !hasServerValidationSchema });
+	const resolver = usePreferServerValidation(collection, {
+		mode: "update",
+		schema
+	}, clientResolver);
+	const autosaveDebounce = config?.autoSave?.debounce ?? 300;
+	if (!documentConfig) return /* @__PURE__ */ jsx(AdminViewLayout, {
+		contentClassName: "overflow-y-auto",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "mx-auto max-w-3xl px-6 py-8",
+			children: /* @__PURE__ */ jsx(EmptyState, {
+				iconName: "ph:warning",
+				title: "No document configuration",
+				description: "This view has kind 'document' but no document config (body/properties). Configure it via view(..., { kind: 'document', document: { body, properties } })."
+			})
+		})
+	});
+	if (isEditMode && itemError) return /* @__PURE__ */ jsx(AdminViewLayout, {
+		contentClassName: "overflow-y-auto",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "mx-auto max-w-3xl px-6 py-8",
+			children: /* @__PURE__ */ jsx(EmptyState, {
+				iconName: "ph:warning",
+				title: t("error.failedToLoad"),
+				description: itemError instanceof Error ? itemError.message : void 0
+			})
+		})
+	});
+	if (isEditMode && (isLoading || !item) || isFieldsLoading) return /* @__PURE__ */ jsx(FormViewSkeleton, {});
+	const initialValues = isEditMode ? item : defaultValuesProp ?? {};
+	const titleFieldValue = documentConfig.title ? initialValues[documentConfig.title] : void 0;
+	return /* @__PURE__ */ jsx(AdminViewLayout, {
+		contentClassName: "overflow-y-auto",
+		children: /* @__PURE__ */ jsx(DocumentEditor, {
+			collection,
+			id,
+			documentConfig,
+			propertyNames,
+			resolvedFields,
+			schema,
+			registry,
+			allCollectionsConfig,
+			resolver,
+			updateMutation,
+			initialValues,
+			title: (titleFieldValue && titleFieldValue.trim() ? titleFieldValue : void 0) ?? titleProp ?? initialValues.id ?? collection,
+			autosaveDebounce
+		}, id ?? "new")
+	});
+}
+
+//#endregion
+export { DocumentView as default };

package/dist/client/views/collection/field-context.mjs

@@ -105,7 +105,7 @@ function getFieldContext({ fieldName, fieldDef, collection, form, fieldPrefix, l
 * Build props for a FieldInstance component (field.component).
 * Returns raw props with I18nText - resolve before passing to component.
 */
-function buildComponentProps(context) {
+function buildComponentProps(context, overrides) {
 	return {
 		name: context.fullFieldName,
 		value: context.fieldValue,
@@ -118,7 +118,8 @@ function buildComponentProps(context) {
 		readOnly: context.isReadOnly,
 		error: context.fieldError,
 		localized: context.isLocalized,
-		locale: context.locale
+		locale: context.locale,
+		hideLabel: overrides?.hideLabel
 	};
 }
 

package/dist/client/views/collection/field-renderer.mjs

@@ -6,6 +6,7 @@ import { Skeleton } from "../../components/ui/skeleton.mjs";
 import { scopeDependencies, trackDependencies } from "../../utils/dependency-tracker.mjs";
 import { buildComponentProps, getFieldContext, getFieldOptions, getFullFieldName } from "./field-context.mjs";
 import { useFieldHooks } from "../../hooks/use-field-hooks.mjs";
+import { mergeReactiveFieldState, useReactiveFieldState } from "../../hooks/use-reactive-fields.mjs";
 import { useReactiveProps } from "../../hooks/use-reactive-prop.mjs";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -137,7 +138,7 @@ function renderEmbeddedField({ context, registry, allCollectionsConfig, componen
 * 2. FieldDefinition.field.component (registry-first approach)
 * 3. Error message if no component registered
 */
-function FieldRenderer({ fieldName, fieldDef, collection, mode = "collection", registry, fieldPrefix, allCollectionsConfig, renderEmbeddedFields, className, entityMeta: entityMetaProp, extraProps }) {
+function FieldRenderer({ fieldName, fieldDef, collection, mode = "collection", registry, fieldPrefix, allCollectionsConfig, renderEmbeddedFields, className, entityMeta: entityMetaProp, extraProps, hideLabel }) {
 	const form = useFormContext();
 	const { locale } = useScopedLocale();
 	const resolveText = useResolveText();
@@ -178,6 +179,12 @@ function FieldRenderer({ fieldName, fieldDef, collection, mode = "collection", r
 		entityMeta: entityMetaProp,
 		formValues
 	});
+	const reactiveFieldState = useReactiveFieldState(fullFieldName);
+	const effectiveFieldState = mergeReactiveFieldState({
+		hidden: context.isHidden,
+		readOnly: context.isReadOnly,
+		disabled: context.isDisabled
+	}, reactiveFieldState);
 	const { Component: resolvedComponent, loading: componentLoading } = useLazyComponent(context.component);
 	const clientSideCompute = typeof fieldOptions.compute === "function" ? fieldOptions.compute : void 0;
 	const { handleChange, computedValue, isComputed, options: hookOptions, optionsLoading } = useFieldHooks({
@@ -191,7 +198,7 @@ function FieldRenderer({ fieldName, fieldDef, collection, mode = "collection", r
 		staticOptions: context.options
 	});
 	const resolvedOptions = hookOptions ?? context.options;
-	const rawComponentProps = buildComponentProps(context);
+	const rawComponentProps = buildComponentProps(context, { hideLabel });
 	const { props: resolvedFieldProps } = useReactiveProps({
 		entity: collection,
 		entityType: mode,
@@ -200,9 +207,9 @@ function FieldRenderer({ fieldName, fieldDef, collection, mode = "collection", r
 			...stripFieldUiOptions(getFieldOptions(fieldDef)),
 			...extraProps ?? {}
 		}), [fieldDef, extraProps]),
-		enabled: !context.isHidden && !!fieldDef
+		enabled: !effectiveFieldState.hidden && !!fieldDef
 	});
-	if (context.isHidden) return null;
+	if (effectiveFieldState.hidden) return null;
 	if (!fieldDef) return renderConfigError(`Field "${fieldName}" not found in ${mode === "global" ? "global" : "collection"} "${collection}" config.`);
 	const fieldValue = isComputed ? computedValue : watchedFieldValue === void 0 ? rawComponentProps.value : watchedFieldValue;
 	const componentProps = {
@@ -212,7 +219,8 @@ function FieldRenderer({ fieldName, fieldDef, collection, mode = "collection", r
 		onChange: handleChange,
 		options: resolvedOptions,
 		optionsLoading,
-		readOnly: rawComponentProps.readOnly || isComputed,
+		readOnly: effectiveFieldState.readOnly || isComputed,
+		disabled: effectiveFieldState.disabled === true,
 		label: resolveText(rawComponentProps.label, "", formValues),
 		description: resolveText(rawComponentProps.description, "", formValues),
 		placeholder: resolveText(rawComponentProps.placeholder, "", formValues)