@protobase/ui 0.21.4 → 0.21.6

package/dist/app/embedded-list/cut-off-note.js

@@ -0,0 +1,11 @@
+//#region src/app/embedded-list/cut-off-note.ts
+/**
+* What a list that shows only its first `shown` of `total` records says about the rest, as "The first 10 of 37.";
+* nothing when it shows them all. An `estimated` total is the planner's, so it reads "about".
+*/
+const cutOffNote = (shown, total, estimated) => {
+	if (shown >= total) return void 0;
+	return `The first ${shown} of ${estimated ? "about " : ""}${total.toLocaleString("en-GB")}.`;
+};
+//#endregion
+export { cutOffNote };

package/dist/app/embedded-list/embedded-list.js

@@ -17,6 +17,7 @@ import { CustomDisplay } from "../displays/custom-display.js";
 import { MapDisplay } from "../displays/map-display.js";
 import { DisplaySwitch } from "../displays/display-controls.js";
 import { embeddedColumns } from "./embedded-columns.js";
+import { cutOffNote } from "./cut-off-note.js";
 import { useEmbeddedRows } from "./use-embedded-rows.js";
 import { useMemo, useState } from "react";
 import { ArrowRight } from "lucide-react";
@@ -35,7 +36,8 @@ const Loading = () => /* @__PURE__ */ jsx("div", {
 });
 /**
 * The first `limit` records of a list, drawn by the list page's own table (sized to its rows) or display, and a link
-* to the whole list with the same filter, order and display. On a phone a cards display is one row that scrolls sideways.
+* to the whole list with the same filter, order and display, beside a note such as "The first 10 of 37." when there are
+* more. On a phone a cards display is one row that scrolls sideways.
 */
 const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empty, row = false, viewAll, link = true }) => {
 	const { resources, views } = useAdminMeta();
@@ -68,7 +70,7 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 		limit,
 		fields
 	});
-	const loaded = rows.data;
+	const loaded = rows.data?.rows;
 	const source = useMemo(() => loaded && {
 		total: loaded.length,
 		rowAt: (index) => loaded[index]
@@ -113,8 +115,8 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 	}
 	const list = {
 		resource: model.name,
-		rows: rows.data.map((row) => displayRow(model, row)),
-		total: rows.data.length,
+		rows: rows.data.rows.map((row) => displayRow(model, row)),
+		total: rows.data.total,
 		loading: false,
 		error: null,
 		more: false,
@@ -134,6 +136,7 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 		onFollow: () => openRecord(row)
 	});
 	const singular = view?.names?.singular ?? humanize(model.name);
+	const note = cutOffNote(source.total, rows.data.total, rows.data.estimated);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-3",
 		children: [!shown ? /* @__PURE__ */ jsx(DataGrid, {
@@ -177,7 +180,13 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 		}) : /* @__PURE__ */ jsx(CustomDisplay, {
 			display: shown,
 			list
-		}), allLink]
+		}), note && link ? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center justify-between gap-2",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground",
+				children: note
+			}), allLink]
+		}) : allLink]
 	});
 };
 //#endregion

package/dist/app/embedded-list/use-embedded-rows.js

@@ -8,8 +8,9 @@ import { keepPreviousData, useQuery } from "@tanstack/react-query";
 //#region src/app/embedded-list/use-embedded-rows.ts
 /**
 * The first `limit` records in `orderBy` order, as the list page's table and displays get them: relations among
-* `fields` as `{ id, name }`, named in the same call, with the photos of its cards. A filter through a join resource may hold hundreds of keys, so it
-* goes in a JSON body.
+* `fields` as `{ id, name }`, named in the same call, with the photos of its cards, and how many records match in all,
+* counted in the same call: `estimated` when more than the server counts exactly match. A filter through a join
+* resource may hold hundreds of keys, so it goes in a JSON body.
 */
 const useEmbeddedRows = ({ model, filter, orderBy, limit, fields }) => {
 	const client = useClient();
@@ -24,13 +25,24 @@ const useEmbeddedRows = ({ model, filter, orderBy, limit, fields }) => {
 				filter: filter || void 0,
 				orderBy: orderBy || void 0,
 				pageSize: limit,
+				count: "exact",
 				labels,
 				photos
 			});
-			return withLabels(resources, model, fields, withPhotos(model, page.items, page.photos), page.labels).map((row, index) => ({
+			const rows = withLabels(resources, model, fields, withPhotos(model, page.items, page.photos), page.labels).map((row, index) => ({
 				...row,
 				id: recordId(model, page.items[index])
 			}));
+			if (page.nextPageToken === "") return {
+				rows,
+				total: rows.length,
+				estimated: false
+			};
+			return {
+				rows,
+				total: page.totalSize ?? page.totalSizeEstimate,
+				estimated: page.totalSize === void 0
+			};
 		}
 	});
 };

package/dist/app/related-section.js

@@ -5,6 +5,7 @@ import { useAdminMeta, usePermissions } from "./meta-gate.js";
 import { Section } from "../record-view/section.js";
 import { ErrorBanner } from "./error-banner.js";
 import { listColumnNames } from "../live/columns-from-model.js";
+import { searchAll } from "../live/search-all.js";
 import { EmbeddedDisplaySwitch, EmbeddedList } from "./embedded-list/embedded-list.js";
 import { useEmbeddedDisplay } from "./embedded-list/use-embedded-display.js";
 import { relatedHandOrder } from "./hand-order/hand-order.js";
@@ -16,15 +17,14 @@ import { useQuery } from "@tanstack/react-query";
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/app/related-section.tsx
 const where$1 = createWhere();
-/** The most join records a section reads to find its records; the list API's largest page. */
-const maxThrough = 500;
 const and = (...parts) => {
 	const given = parts.filter((part) => Boolean(part));
 	return given.length === 1 ? given[0] : given.map((part) => `(${part})`).join(" AND ");
 };
 /**
 * The filter on the section's resource: its `field` is this record's key, or, through a join resource, one of the keys
-* the join records that point at this record hold. `null` when no join record does, so nothing can match.
+* all the join records that point at this record hold, read page by page. `null` when no join record does, so nothing
+* can match.
 */
 const useMatch = (item, recordKey) => {
 	const client = useClient();
@@ -34,15 +34,14 @@ const useMatch = (item, recordKey) => {
 	const key = through?.key ?? via?.primaryKey[0];
 	const viaFilter = through ? and(printFilter(where$1.eq(through.field, recordKey)), through.filter) : "";
 	const collected = useQuery({
-		queryKey: keys.list(via?.name ?? "", viaFilter, "", maxThrough, `related:${key}`),
+		queryKey: keys.list(via?.name ?? "", viaFilter, "", 0, `related:${key}`),
 		enabled: Boolean(via && key),
 		queryFn: async () => {
-			const page = await client.search(via.name, {
+			const joined = await searchAll(client, via.name, {
 				filter: viaFilter,
-				fields: [key],
-				pageSize: maxThrough
+				fields: [key]
 			});
-			return [...new Set(page.items.flatMap((row) => row[key] === null || row[key] === void 0 ? [] : [String(row[key])]))];
+			return [...new Set(joined.items.flatMap((row) => row[key] === null || row[key] === void 0 ? [] : [String(row[key])]))];
 		}
 	});
 	if (!through) return {

package/dist/live/related-column-rows.js

@@ -1,4 +1,5 @@
 import { listLabels, withLabels } from "./relation-labels.js";
+import { searchAll } from "./search-all.js";
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/live/related-column-rows.ts
 const where$1 = createWhere();
@@ -28,10 +29,9 @@ const linksOf = async (client, resources, column, owners) => {
 	const via = resources[through.resource];
 	const key = through.key ?? via?.primaryKey[0];
 	if (!via || key === void 0) throw new Error(`The related column ${column.name} names a join resource the app does not have: ${through.resource}`);
-	return (await client.search(via.name, {
+	return (await searchAll(client, via.name, {
 		filter: and(printFilter(where$1.in(through.field, owners)), through.filter),
-		fields: [through.field, key],
-		pageSize: 500
+		fields: [through.field, key]
 	})).items.flatMap((row) => {
 		const owner = text(row[through.field]);
 		const value = text(row[key]);
@@ -39,8 +39,8 @@ const linksOf = async (client, resources, column, owners) => {
 	});
 };
 /**
-* The records a related column shows for each of `owners`, the keys of one page of the list's rows: its join records in
-* one request, then the records they pick in another, in the column's order, their relations labelled.
+* The records a related column shows for each of `owners`, the keys of one page of the list's rows: all its join records,
+* then all the records they pick, each read page by page so no dot is left out, in the column's order, their relations labelled.
 */
 const loadRelatedColumn = async ({ client, resources, views, load, owners }) => {
 	const { column, fields } = load;
@@ -57,14 +57,13 @@ const loadRelatedColumn = async ({ client, resources, views, load, owners }) =>
 		...fields
 	])];
 	const labels = listLabels(resources, views, target, loaded);
-	const page = await client.search(target.name, {
+	const records = await searchAll(client, target.name, {
 		filter: and(printFilter(where$1.in(column.field, values)), column.filter),
 		...column.sort && { orderBy: column.sort },
 		fields: loaded,
-		pageSize: 500,
 		labels
 	});
-	return groupByOwner(links, withLabels(resources, target, loaded, page.items, page.labels), column.field);
+	return groupByOwner(links, withLabels(resources, target, loaded, records.items, records.labels), column.field);
 };
 //#endregion
 export { groupByOwner, loadRelatedColumn };

package/dist/live/search-all.js

@@ -0,0 +1,27 @@
+//#region src/live/search-all.ts
+const pageSize = 500;
+/** Every record a search matches, page by page, so none is left out; with `labels`, the names of every page merged. */
+const searchAll = async (client, resource, params) => {
+	const items = [];
+	const labels = {};
+	let pageToken;
+	do {
+		const page = await client.search(resource, {
+			...params,
+			pageSize,
+			...pageToken && { pageToken }
+		});
+		items.push(...page.items);
+		for (const [relation, names] of Object.entries(page.labels ?? {})) labels[relation] = {
+			...labels[relation],
+			...names
+		};
+		pageToken = page.nextPageToken || void 0;
+	} while (pageToken);
+	return {
+		items,
+		labels
+	};
+};
+//#endregion
+export { searchAll };

package/dist/package.js

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