@protobase/ui 0.18.0 → 0.19.0

package/dist/app/record-page.js

@@ -1,6 +1,8 @@
+import { cn } from "../lib/cn.js";
+import { inApp } from "../app-shell/breadcrumb.js";
 import { useAuth } from "../auth/auth-provider.js";
 import { formatRelativeTime } from "../format/date.js";
-import { Button } from "../primitives/button.js";
+import { Button, buttonClass } from "../primitives/button.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
 import { useNavigationGuard, useRouter } from "./router.js";
@@ -10,7 +12,7 @@ import { humanize } from "../live/naming.js";
 import { useProjectUi } from "./pages/project-ui.js";
 import { displayValue } from "../live/display-value.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
-import { useAppAddress } from "./use-app-address.js";
+import { AppLink, useAppAddress } from "./use-app-address.js";
 import { ErrorBanner } from "./error-banner.js";
 import { shownWidget } from "./field-types/shown-widget.js";
 import { WidgetPart } from "./field-types/widget-part.js";
@@ -20,10 +22,12 @@ import { Field } from "../record-view/field.js";
 import { Section } from "../record-view/section.js";
 import { MetadataCard, RelatedRecords, SidebarCard } from "../record-view/record-sidebar.js";
 import { RecordHeader } from "../record-view/record-header.js";
+import { SpecTable } from "../record-view/spec-table.js";
 import { toneFor } from "../live/columns-from-model.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
 import { ValueBadge } from "./value-badge.js";
+import { FieldValue } from "./pages/field-value.js";
 import { auditField } from "../live/audit-fields.js";
 import { CustomSection } from "./custom-section.js";
 import { MapSection } from "./map/map-section.js";
@@ -32,11 +36,13 @@ import { RecordLines, findLinesResource } from "./record-lines.js";
 import { draftStorageKey } from "./draft-storage.js";
 import { useLines } from "./use-lines.js";
 import { useLinesDraft } from "./use-lines-draft.js";
+import { GallerySection } from "./gallery/gallery-section.js";
+import { fieldHelp, helpShown, recordShown } from "./record-mode/record-mode.js";
 import { useRecordEditor } from "./use-record-editor.js";
 import { useRelatedRecords } from "./use-related-records.js";
 import { RelatedSection } from "./related-section.js";
 import { Fragment, useMemo } from "react";
-import { Check } from "lucide-react";
+import { Check, Pencil } from "lucide-react";
 import { isApiError } from "@protobase/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useQueryClient } from "@tanstack/react-query";
@@ -45,16 +51,17 @@ import { enumLabel } from "@protobase/schema";
 const hidden = (model, name) => name === model.tenant || model.primaryKey.includes(name);
 /**
 * The view's layout, or one section with the editable fields when the view has none. A user who may only read the
-* resource has every field read-only, so they get every field, locked, rather than an empty section.
+* resource has every field read-only, so they get every field, locked, rather than an empty section; so does the read
+* view, which shows the record rather than what can be changed.
 */
-const layoutFor = (model, view) => {
+const layoutFor = (model, view, read) => {
 	if (view && view.layout.length > 0) return view.layout;
 	const shown = Object.values(model.fields).filter((field) => !hidden(model, field.name));
 	const editable = shown.filter((field) => !field.readOnly);
 	return [{
 		kind: "section",
 		title: "Details",
-		fields: (editable.length > 0 ? editable : shown).map((field) => field.name)
+		fields: (editable.length > 0 && !read ? editable : shown).map((field) => field.name)
 	}];
 };
 const RecordPage = ({ resource, recordKey }) => {
@@ -92,7 +99,7 @@ const RecordPage = ({ resource, recordKey }) => {
 const LoadedRecord = ({ model, recordKey, stored }) => {
 	const meta = useAdminMeta();
 	const { basePath } = useRouter();
-	const { go, open } = useAppAddress();
+	const { address, go, open } = useAppAddress();
 	const view = meta.views[model.name];
 	const singular = view?.names?.singular ?? humanize(model.name);
 	const title = recordTitle(model, view, stored.record, recordKey);
@@ -109,12 +116,23 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 		draftKey: auth.kind === "signed-in" ? draftStorageKey(auth.user.id, model.name, recordKey) : void 0,
 		lines: linesDraft
 	});
-	useNavigationGuard(editor.dirty);
 	const queryClient = useQueryClient();
 	const client = useClient();
 	const permissions = usePermissions(model.name);
 	const restore = useRestore(model);
 	const canUpdate = can(permissions, "update") && stored.permissions?.update !== false;
+	const { shown, offersEdit, editing } = recordShown(view?.recordMode, canUpdate, address?.kind === "record" && address.edit === true);
+	useNavigationGuard(editor.dirty && shown === "form");
+	const readAddress = {
+		kind: "record",
+		resource: model.name,
+		key: recordKey
+	};
+	const editAddress = {
+		...readAddress,
+		edit: true
+	};
+	const leavesForm = shown === "form" && view?.recordMode !== void 0 && view.recordMode !== "edit";
 	const canDelete = can(permissions, "delete") && stored.permissions?.delete !== false;
 	const remove = useDeleteFlow({
 		model,
@@ -128,7 +146,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 	});
 	const related = useRelatedRecords(model, view, meta.resources, meta.views, stored.record, basePath);
 	const { fields: fieldTypes } = useProjectUi();
-	const layout = layoutFor(model, view);
+	const layout = layoutFor(model, view, shown === "read");
 	const sidebarFields = layout.flatMap((item) => item.kind === "sidebar" ? item.fields : []);
 	const status = model.fields.status?.type === "enum" ? String(stored.record.status) : void 0;
 	const updatedAt = auditField(model, "updated");
@@ -142,7 +160,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 		const conflict = editor.conflicts[name];
 		return /* @__PURE__ */ jsx(Field, {
 			label: hint(name)?.label ?? humanize(name),
-			help: hint(name)?.help,
+			help: fieldHelp(hint(name), view, editing),
 			error: editor.errors[name],
 			wide: Boolean(hint(name)?.multiline),
 			conflict: conflict === void 0 ? void 0 : {
@@ -163,7 +181,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 				stored: stored.record[name],
 				relationLabel: related.labels[name],
 				relationTo: related.addresses[name],
-				locked: !canUpdate || access === "read",
+				locked: shown !== "form" || access === "read",
 				invalid: Boolean(editor.errors[name]),
 				reveal: field.sensitive ? () => client.reveal(model.name, recordKey, name) : void 0,
 				resource: model.name,
@@ -171,6 +189,30 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 			})
 		}, field.sensitive ? `${name}:${stored.etag}` : name);
 	};
+	const readRow = (name) => {
+		const field = model.fields[name];
+		const value = field.sensitive ? /* @__PURE__ */ jsx(FieldEditor, {
+			field,
+			hints: hint(name),
+			value: "",
+			stored: stored.record[name],
+			locked: true,
+			reveal: () => client.reveal(model.name, recordKey, name),
+			resource: model.name,
+			onChange: (next) => editor.change(name, next)
+		}) : /* @__PURE__ */ jsx(FieldValue, {
+			model,
+			field,
+			value: stored.record[name],
+			relationLabel: related.labels[name]
+		});
+		return {
+			label: hint(name)?.label ?? humanize(name),
+			help: fieldHelp(hint(name), view, editing),
+			wide: Boolean(hint(name)?.multiline),
+			value
+		};
+	};
 	const firstSidebar = layout.findIndex((item) => item.kind === "sidebar");
 	const summary = /* @__PURE__ */ jsx(MetadataCard, {
 		title: "Summary",
@@ -206,34 +248,51 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 		etag: stored.etag,
 		permissions: stored.permissions
 	};
-	const saveControls = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	const save = async () => {
+		if (await editor.save() && leavesForm) go(readAddress, { replace: true });
+	};
+	const deleteButton = canDelete && /* @__PURE__ */ jsx(Button, {
+		variant: "danger",
+		className: "max-md:min-h-11",
+		onClick: () => void remove.start({
+			key: recordKey,
+			title,
+			etag: stored.etag,
+			snapshot: stored.record
+		}),
+		children: "Delete"
+	});
+	const saveControls = offersEdit ? /* @__PURE__ */ jsxs(Fragment$1, { children: [deleteButton, /* @__PURE__ */ jsxs(AppLink, {
+		to: editAddress,
+		className: cn(buttonClass({ variant: "primary" }), "max-md:min-h-11 max-md:flex-1"),
+		children: [/* @__PURE__ */ jsx(Pencil, {
+			className: "size-3.5",
+			"aria-hidden": true
+		}), "Edit"]
+	})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		editor.dirty && /* @__PURE__ */ jsx("span", {
 			className: "text-xs text-muted-foreground",
 			children: "Unsaved changes"
 		}),
-		editor.dirty && canUpdate && /* @__PURE__ */ jsx(Button, {
+		editor.dirty && canUpdate && !leavesForm && /* @__PURE__ */ jsx(Button, {
 			className: "max-md:min-h-11",
 			disabled: editor.saving,
 			onClick: editor.discard,
 			children: "Discard"
 		}),
-		canDelete && /* @__PURE__ */ jsx(Button, {
-			variant: "danger",
-			className: "max-md:min-h-11",
-			onClick: () => void remove.start({
-				key: recordKey,
-				title,
-				etag: stored.etag,
-				snapshot: stored.record
-			}),
-			children: "Delete"
+		leavesForm && /* @__PURE__ */ jsx(AppLink, {
+			to: readAddress,
+			className: cn(buttonClass(), "max-md:min-h-11"),
+			onClick: (event) => inApp(event) && editor.discard(),
+			children: "Cancel"
 		}),
+		deleteButton,
 		canUpdate && /* @__PURE__ */ jsxs(Button, {
 			variant: "primary",
 			className: "max-md:min-h-11 max-md:flex-1",
 			loading: editor.saving,
 			disabled: !editor.dirty && editor.phase !== "saved",
-			onClick: () => void editor.save(),
+			onClick: () => void save(),
 			children: [editor.phase === "saved" && /* @__PURE__ */ jsx(Check, { className: "size-4" }), editor.phase === "saved" ? "Saved" : "Save"]
 		})
 	] });
@@ -273,7 +332,23 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 								error: /* @__PURE__ */ new Error("The lines were reloaded. Your new order is kept: Save again to apply it, or Discard to drop it.")
 							})
 						}),
-						editor.restored && /* @__PURE__ */ jsxs("div", {
+						shown !== "form" && offersEdit && editor.dirty && /* @__PURE__ */ jsxs("div", {
+							className: "mt-4 flex items-center justify-between gap-3 rounded-lg border bg-surface px-3 py-2 text-[13px]",
+							role: "status",
+							children: [/* @__PURE__ */ jsx("span", { children: "You have unsaved changes to this record." }), /* @__PURE__ */ jsxs("span", {
+								className: "flex gap-2",
+								children: [/* @__PURE__ */ jsx(AppLink, {
+									to: editAddress,
+									className: buttonClass({ size: "sm" }),
+									children: "Continue editing"
+								}), /* @__PURE__ */ jsx(Button, {
+									size: "sm",
+									onClick: editor.discard,
+									children: "Discard"
+								})]
+							})]
+						}),
+						shown === "form" && editor.restored && /* @__PURE__ */ jsxs("div", {
 							className: "mt-4 flex items-center justify-between gap-3 rounded-lg border bg-surface px-3 py-2 text-[13px]",
 							role: "status",
 							children: [/* @__PURE__ */ jsx("span", { children: "Your unsaved changes were restored." }), /* @__PURE__ */ jsxs("span", {
@@ -307,13 +382,18 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 										item,
 										record: stored.record
 									}, `map:${index}`)];
+									if (item.kind === "gallery") return [/* @__PURE__ */ jsx(GallerySection, {
+										item,
+										record: stored.record,
+										recordKey
+									}, `gallery:${index}`)];
 									if (item.kind !== "section") return [];
 									const fields = item.fields.filter((name) => model.fields[name] && visible(name));
 									if (fields.length === 0) return [];
 									return [/* @__PURE__ */ jsx(Section, {
 										title: item.title,
-										help: item.help,
-										children: /* @__PURE__ */ jsx("div", {
+										help: helpShown(item.helpWhen, view, editing) ? item.help : void 0,
+										children: shown === "read" ? /* @__PURE__ */ jsx(SpecTable, { rows: fields.map(readRow) }) : /* @__PURE__ */ jsx("div", {
 											className: "grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2",
 											children: fields.map(fieldView)
 										})
@@ -322,7 +402,8 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 									lines: linesModel,
 									draft: linesDraft,
 									vatRate: Number(stored.record.vatRate ?? 21) / 100,
-									saving: editor.saving
+									saving: editor.saving,
+									locked: shown !== "form"
 								})]
 							}), /* @__PURE__ */ jsxs("aside", {
 								className: "space-y-4 md:pt-8",

package/dist/app/use-live-save.js

@@ -5,7 +5,8 @@ import { isApiError } from "@protobase/client";
 const savedForMs = 2e3;
 /**
 * Shows the outcome of a save the way the view asks: a toast (spinner, then check) or the state of
-* the Save button. API errors are reported and not rethrown; anything else propagates.
+* the Save button. API errors are reported and not rethrown; anything else propagates. `run` resolves to whether the
+* save went through.
 */
 const useLiveSave = (mode, subject) => {
 	const toast = useToast();
@@ -30,6 +31,7 @@ const useLiveSave = (mode, subject) => {
 				setPhase("saved");
 				timer.current = setTimeout(() => setPhase("idle"), savedForMs);
 			}
+			return true;
 		} catch (error) {
 			if (!isApiError(error)) throw error;
 			const title = error.status === 412 ? "Changed by someone else" : "Could not save";
@@ -42,6 +44,7 @@ const useLiveSave = (mode, subject) => {
 				setPhase("idle");
 				setMessage(`${title}: ${error.message}`);
 			}
+			return false;
 		}
 	};
 	return {

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.18.0";
+var version = "0.19.0";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/record-view/spec-table.js

@@ -0,0 +1,25 @@
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/record-view/spec-table.tsx
+/**
+* Label/value rows, the label on the left and the value on the right, as a property's features table on a real estate
+* site: what a record page's section shows on its read view. A wide row puts its value under the label.
+*/
+const SpecTable = ({ rows }) => /* @__PURE__ */ jsx("dl", {
+	className: "border-t border-border text-[13px]",
+	children: rows.map((row) => /* @__PURE__ */ jsxs("div", {
+		className: cn("grid gap-x-4 border-b border-border py-2.5", row.wide ? "grid-cols-1 gap-y-1.5" : "grid-cols-[minmax(0,2fr)_minmax(0,3fr)]"),
+		children: [/* @__PURE__ */ jsxs("dt", {
+			className: "min-w-0 text-muted-foreground",
+			children: [row.label, row.help && /* @__PURE__ */ jsx("span", {
+				className: "mt-0.5 block text-xs text-faint-foreground",
+				children: row.help
+			})]
+		}), /* @__PURE__ */ jsx("dd", {
+			className: "min-w-0 break-words text-foreground",
+			children: row.value
+		})]
+	}, row.label))
+});
+//#endregion
+export { SpecTable };