@protobase/ui 0.65.0 → 0.66.0

package/dist/app/incoming-card.js

@@ -10,9 +10,9 @@ import { ChevronRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/incoming-card.tsx
 /** The rail's card of the records pointing at this one: per resource and field, how many, linking to them in their list. */
-const IncomingCard = ({ model, recordKey, layout, lines }) => {
+const IncomingCard = ({ model, recordKey, layout }) => {
 	const { resources, views } = useAdminMeta();
-	const counts = useIncomingCounts(incomingRelations(model, resources, views, layout, lines), resources, recordKey);
+	const counts = useIncomingCounts(incomingRelations(model, resources, views, layout), resources, recordKey);
 	if (counts.length === 0) return null;
 	return /* @__PURE__ */ jsx(SidebarCard, {
 		title: text("relatedRecords"),

package/dist/app/incoming-relations.js

@@ -6,13 +6,13 @@ const where$1 = createWhere();
 /**
 * The relations that point at records of `model`, as the rail lists them by default: each filterable relation of
 * another resource the user can see (a hidden resource or field is not in the meta), to a record of one key column.
-* Left out are a resource's tenant, which every record holds, the lines drawn on the page, and what an `l.related`
-* section of the page already lists. Two fields of one resource are told apart by their labels.
+* Left out are a resource's tenant, which every record holds, and what an `l.related` section of the page already
+* lists, the record's lines included. Two fields of one resource are told apart by their labels.
 */
-const incomingRelations = (model, resources, views, layout, lines) => {
+const incomingRelations = (model, resources, views, layout) => {
 	if (model.primaryKey.length !== 1) return [];
 	const listed = new Set(layoutItems(layout).flatMap((item) => item.kind === "related" && !item.through && !item.from ? [`${item.resource}.${item.field}`] : []));
-	const found = Object.values(resources).flatMap((source) => Object.values(source.fields).filter((field) => field.type === "relation" && field.relation?.resource === model.name && field.relation.columns.length === 1 && field.filterable).filter((field) => field.name !== source.tenant && source.name !== lines?.name && !listed.has(`${source.name}.${field.name}`)).map((field) => ({
+	const found = Object.values(resources).flatMap((source) => Object.values(source.fields).filter((field) => field.type === "relation" && field.relation?.resource === model.name && field.relation.columns.length === 1 && field.filterable).filter((field) => field.name !== source.tenant && !listed.has(`${source.name}.${field.name}`)).map((field) => ({
 		source,
 		field: field.name
 	})));

package/dist/app/record-lines.js

@@ -20,7 +20,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 const RecordLines = ({ lines, editable, saving }) => {
 	const { resources, views } = useAdminMeta();
-	const { model, columns, data, draft } = lines;
+	const { item, model, columns, data, draft } = lines;
 	const permissions = usePermissions(model.name);
 	const view = views[model.name];
 	const [picked, setPicked] = useState({});
@@ -89,8 +89,8 @@ const RecordLines = ({ lines, editable, saving }) => {
 		return rejection.message;
 	};
 	return /* @__PURE__ */ jsxs(Section, {
-		title: text("lines"),
-		help: text("linesHelp"),
+		title: item.title,
+		help: item.help,
 		children: [!data.complete && /* @__PURE__ */ jsx("p", {
 			className: "mb-2 text-muted-foreground",
 			children: text("tooManyLines", { limit: formatInt(1e3) })

package/dist/app/record-page.js

@@ -412,6 +412,18 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 				children
 			}, `group:${item.title}`)];
 		}
+		if (item.kind === "related" && item.lines) {
+			if (!lines.model || !lines.item || preview) return [];
+			return [/* @__PURE__ */ jsx(RecordLines, {
+				lines: {
+					...lines,
+					model: lines.model,
+					item: lines.item
+				},
+				editable: shown === "form",
+				saving: editor.saving
+			}, `lines:${item.title}`)];
+		}
 		if (item.kind === "related") {
 			if (item.from !== void 0 && !known(item.from)) return [];
 			return [/* @__PURE__ */ jsx(RelatedSection, {
@@ -548,15 +560,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 										className: "divide-y divide-border",
 										children: tab.items.flatMap(mainItem)
 									}, `tab:${tab.title}`),
-									after.flatMap(mainItem),
-									lines.model && !preview && /* @__PURE__ */ jsx(RecordLines, {
-										lines: {
-											...lines,
-											model: lines.model
-										},
-										editable: shown === "form",
-										saving: editor.saving
-									})
+									after.flatMap(mainItem)
 								]
 							}), /* @__PURE__ */ jsxs("aside", {
 								className: "space-y-4 md:sticky md:top-[var(--pb-sticky-top,0px)] md:max-h-[calc(100dvh-var(--pb-sticky-top,0px)-var(--pb-sticky-bottom,0px))] md:self-start md:overflow-y-auto md:pb-4 md:pt-8",
@@ -601,8 +605,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 									!preview && /* @__PURE__ */ jsx(IncomingCard, {
 										model,
 										recordKey,
-										layout,
-										lines: lines.model
+										layout
 									})
 								]
 							})]

package/dist/app/use-lines.js

@@ -3,20 +3,20 @@ import { useEffect, useMemo } from "react";
 //#region src/app/use-lines.ts
 /** The most lines a record's line editor loads; a record with more shows them read-only, as it cannot save them as a whole. */
 const linesLimit = 1e3;
-const byPosition = (a, b) => Number(a.position) - Number(b.position);
 /**
-* The numbered lines of a record, in position order, as the server has them: every page, up to `linesLimit`, each as
-* large as the API gives. `labels` names the records their relations point at. Nothing is fetched without a lines resource.
+* The numbered lines of a record, in the order of their `position` field, as the server has them: every page, up to
+* `linesLimit`, each as large as the API gives. `labels` names the records their relations point at. Nothing is
+* fetched without a lines resource.
 */
-const useLines = (lines, link, parentKey, labels) => {
+const useLines = (lines, link, position, parentKey, labels) => {
 	const list = useList(lines?.name ?? "", {
 		enabled: Boolean(lines && link),
 		filter: link ? `${link.name} = "${parentKey}"` : void 0,
 		pageSize: 500,
 		labels,
-		...lines?.fields.position?.sortable && { orderBy: "position asc" }
+		...position && lines?.fields[position]?.sortable && { orderBy: `${position} asc` }
 	});
-	const items = useMemo(() => [...list.items].sort(byPosition), [list.data]);
+	const items = useMemo(() => position ? [...list.items].sort((a, b) => Number(a[position]) - Number(b[position])) : list.items, [list.data, position]);
 	const more = list.hasNextPage && list.items.length < 1e3;
 	useEffect(() => {
 		if (more && !list.isFetchingNextPage) list.fetchNextPage();

package/dist/app/use-record-lines.js

@@ -5,42 +5,64 @@ import { listLabels } from "../live/relation-labels.js";
 import { useLines } from "./use-lines.js";
 import { useLinesDraft } from "./use-lines-draft.js";
 import { useMemo } from "react";
+import { layoutItems } from "@protobase/schema/internal";
 //#region src/app/use-record-lines.ts
-/** A resource that holds numbered lines of this one: it points at the parent and has `position` and `quantity`. */
-const findLinesResource = (resources, parent) => Object.values(resources).find((candidate) => candidate.name !== parent.name && candidate.fields.position && candidate.fields.quantity && Object.values(candidate.fields).some((field) => field.type === "relation" && field.relation?.resource === parent.name));
+/**
+* The record's lines, as its view declares them with `l.related(..., { lines: true })`: the section, the lines'
+* resource, the relation that points at the record and the field that orders them.
+*/
+const findLinesResource = (resources, view) => {
+	const item = layoutItems(view?.layout ?? []).find((each) => each.kind === "related" && each.lines === true);
+	if (item?.kind !== "related") return;
+	const model = resources[item.resource];
+	const link = model?.fields[item.field];
+	const position = model?.position?.field;
+	if (!model || !link || !position || model.position?.within !== item.field) return;
+	return {
+		item,
+		model,
+		link,
+		position
+	};
+};
 /**
 * The lines' columns: the list columns of their view, or its first fields, without what the editor fills in itself:
 * the key, the tenant, the relation to the record and the position, which is the order of the rows.
 */
-const lineColumnNames = (lines, view, link) => listColumnNames(lines, view).filter((name) => {
+const lineColumnNames = (lines, view, link, position) => listColumnNames(lines, view).filter((name) => {
 	const field = lines.fields[name];
-	return field && !field.writeOnly && name !== link && name !== "position" && name !== lines.tenant && !lines.primaryKey.includes(name);
+	return field && !field.writeOnly && name !== link && name !== position && name !== lines.tenant && !lines.primaryKey.includes(name);
 });
-/** The record's lines when it has a lines resource: the resource, its columns, the lines as stored and the changes made to them. */
+/** The record's lines when its view declares them: the section, the resource, its columns, the lines as stored and the changes made to them. */
 const useRecordLines = (parent, parentKey) => {
 	const { resources, views } = useAdminMeta();
-	const model = useMemo(() => findLinesResource(resources, parent), [resources, parent]);
-	const link = model && Object.values(model.fields).find((field) => field.type === "relation" && field.relation?.resource === parent.name);
-	const columns = model && link ? lineColumnNames(model, views[model.name], link.name) : [];
-	const data = useLines(model, link, parentKey, model ? listLabels(resources, views, model, columns) : void 0);
-	const target = useMemo(() => model && link ? {
-		model,
-		position: "position",
+	const found = useMemo(() => findLinesResource(resources, views[parent.name]), [
+		resources,
+		views,
+		parent
+	]);
+	const model = found?.model;
+	const columns = found ? lineColumnNames(found.model, views[found.model.name], found.link.name, found.position) : [];
+	const data = useLines(model, found?.link, found?.position, parentKey, model ? listLabels(resources, views, model, columns) : void 0);
+	const target = useMemo(() => found ? {
+		model: found.model,
+		position: found.position,
 		link: {
-			field: link.name,
+			field: found.link.name,
 			value: keyValue(parent, parentKey)
 		}
 	} : void 0, [
-		model,
-		link,
+		found,
 		parent,
 		parentKey
 	]);
+	const draft = useLinesDraft(target, data.items);
 	return {
+		item: found?.item,
 		model,
 		columns,
 		data,
-		draft: useLinesDraft(target, data.items)
+		draft
 	};
 };
 //#endregion

package/dist/app-shell/top-bar.js

@@ -3,7 +3,7 @@ import { text } from "./messages.js";
 import { Breadcrumb, inApp } from "./breadcrumb.js";
 import { backTarget } from "./back-target.js";
 import { GlobalSearch } from "./global-search.js";
-import { useEffect, useRef, useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 import { ChevronLeft, Menu, Search, X } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/top-bar.tsx
@@ -13,7 +13,7 @@ const TopBar = ({ breadcrumb, onNavigate, onBack, actions, onMenu, menuOpen, men
 	const [searchOpen, setSearchOpen] = useState(false);
 	const back = backTarget(breadcrumb);
 	const desktopSearch = useRef(null);
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (!search) return;
 		const onKey = (event) => {
 			if (event.key.toLowerCase() !== "k" || !(event.metaKey || event.ctrlKey)) return;

package/dist/locale/en.js

@@ -734,8 +734,6 @@ var en_default = {
 		"nothingYet": "Nothing here yet.",
 		"couldNotLoadRelated": "Could not load",
 		"relatedRecords": "Related records",
-		"lines": "Lines",
-		"linesHelp": "What the document bills for. Edit a line in place, add one, or drag the handle to change the order; Save applies it all.",
 		"lineNumber": "Line {place}",
 		"lineField": "{label}, line {place}",
 		"tooManyLines": "This record has more than {limit} lines, so they show here read-only."

package/dist/locale/nl.js

@@ -734,8 +734,6 @@ var nl_default = {
 		"nothingYet": "Hier staat nog niets.",
 		"couldNotLoadRelated": "Kon niet laden",
 		"relatedRecords": "Gerelateerde records",
-		"lines": "Regels",
-		"linesHelp": "Waar het document voor factureert. Wijzig een regel ter plekke, voeg er een toe, of sleep de greep om de volgorde te wijzigen; Bewaren past alles toe.",
 		"lineNumber": "Regel {place}",
 		"lineField": "{label}, regel {place}",
 		"tooManyLines": "Dit record heeft meer dan {limit} regels, dus ze staan hier alleen ter inzage."

package/dist/package.js

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