@protobase/ui 0.23.12 → 0.23.14

package/dist/app/displays/board-display.js

@@ -100,7 +100,8 @@ const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit })
 		const order = placedRows(place.rows, row, place.index);
 		move(row, place.column, {
 			order,
-			changed: from === -1 ? place.index : Math.max(from, place.index)
+			first: from === -1 ? place.index : Math.min(from, place.index),
+			last: from === -1 ? place.index : Math.max(from, place.index)
 		});
 	};
 	return /* @__PURE__ */ jsxs(DndContext, {

package/dist/app/displays/board-place.js

@@ -1,4 +1,5 @@
 import { recordKey } from "../../live/model-helpers.js";
+import { reorderSpan } from "../hand-order/reorder-span.js";
 import { encodeKey } from "@protobase/schema/internal";
 import { arrayMove } from "@dnd-kit/sortable";
 //#region src/app/displays/board-place.ts
@@ -18,18 +19,20 @@ const placedRows = (rows, row, index) => {
 const etagOf = (row) => typeof row.record.etag === "string" ? row.record.etag : "*";
 /**
 * The batch that saves a drop on a ranked board: in another column first the update of `by` with the card's ETag, then
-* a `reorder` numbering the column's cards 1, 2, 3, … up to and including the one at `changed`, the last whose place
-* changed. The cards after it already rank higher, so they keep their place unwritten, loaded or not.
+* a `reorder` of the column's cards whose place changed, `first` to `last`, reaching only as far as their ranks need
+* (see `reorderSpan`). The cards after it already rank higher, so they keep their place unwritten, loaded or not.
 */
-const placeOps = (model, by, rank, row, column, order, changed) => {
+const placeOps = (model, by, rank, row, column, order, first, last) => {
 	const moving = (row.record[by] ?? null) !== column.value;
-	const prefix = order.slice(0, changed + 1);
-	const etags = Object.fromEntries(prefix.map((entry) => [encodeKey(recordKey(model, entry.record)), moving && entry.key === row.key ? "*" : etagOf(entry)]));
+	const span = reorderSpan(order.map((entry) => entry.record[rank]), first, last);
+	const sent = order.slice(span.first, span.last + 1);
+	const etags = Object.fromEntries(sent.map((entry) => [encodeKey(recordKey(model, entry.record)), moving && entry.key === row.key ? "*" : etagOf(entry)]));
 	const reorder = {
 		op: "reorder",
 		resource: model.name,
 		field: rank,
-		keys: prefix.map((entry) => recordKey(model, entry.record)),
+		keys: sent.map((entry) => recordKey(model, entry.record)),
+		start: span.start,
 		etags
 	};
 	if (!moving) return [reorder];

package/dist/app/displays/use-board-move.js

@@ -23,7 +23,7 @@ const useBoardMove = (model, by, rank) => {
 	const mutation = useMutation({
 		mutationFn: async ({ row, to, place }) => {
 			if (place && !rank) throw new Error("A board places a card only by its rank");
-			if (place) return client.batchWrite(placeOps(model, by, rank, row, to, place.order, place.changed));
+			if (place) return client.batchWrite(placeOps(model, by, rank, row, to, place.order, place.first, place.last));
 			const etag = typeof row.record.etag === "string" ? row.record.etag : "*";
 			return client.update(model.name, recordKey(model, row.record), { [by]: to.value }, etag);
 		},

package/dist/app/hand-order/hand-sorted-list.js

@@ -1,6 +1,4 @@
-import { formatTag } from "../../locale/active-locale.js";
 import { Skeleton } from "../../primitives/skeleton.js";
-import { humanize } from "../../live/naming.js";
 import { recordKey, recordTitle } from "../../live/model-helpers.js";
 import { loadedFields } from "../displays/list-displays.js";
 import { useAdminMeta } from "../meta-gate.js";
@@ -54,7 +52,6 @@ const HandSortedList = ({ model, view, field, filter, columns }) => {
 		total: rows.length,
 		rowAt: (index) => rows[index]
 	}, [rows]);
-	const plural = (view?.names?.plural ?? humanize(model.name)).toLowerCase();
 	if (order.loading) return /* @__PURE__ */ jsx("div", {
 		className: "flex flex-col gap-2",
 		children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }, index))
@@ -63,10 +60,6 @@ const HandSortedList = ({ model, view, field, filter, columns }) => {
 		title: text("couldNotLoad"),
 		error: order.error
 	});
-	if (order.more) return /* @__PURE__ */ jsx("p", {
-		className: "text-muted-foreground",
-		children: text("tooMany", 500 .toLocaleString(formatTag()), plural)
-	});
 	if (!source || source.total === 0) return /* @__PURE__ */ jsx("p", {
 		className: "text-muted-foreground",
 		children: text("nothingYet")

package/dist/app/hand-order/messages.js

@@ -3,17 +3,15 @@ import { defineMessages } from "../../locale/messages.js";
 const text = defineMessages({
 	en: {
 		done: "Done",
-		sort: "Sort",
+		reorder: "Reorder",
 		couldNotLoad: "Could not load",
-		tooMany: (limit, plural) => `There are more than ${limit} ${plural}, too many to sort by hand.`,
 		nothingYet: "Nothing here yet.",
 		couldNotChange: "Could not change the order"
 	},
 	nl: {
 		done: "Klaar",
-		sort: "Sorteren",
+		reorder: "Volgorde wijzigen",
 		couldNotLoad: "Kon niet laden",
-		tooMany: (limit, plural) => `Er zijn meer dan ${limit} ${plural}, te veel om met de hand te sorteren.`,
 		nothingYet: "Hier staat nog niets.",
 		couldNotChange: "Kon de volgorde niet wijzigen"
 	}

package/dist/app/hand-order/{sort-button.js → reorder-button.js}

@@ -2,10 +2,10 @@ import { Button } from "../../primitives/button.js";
 import { text } from "./messages.js";
 import { ArrowUpDown, Check } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/app/hand-order/sort-button.tsx
-/** The button that turns sorting by hand on, as **Sort**, and off again, as **Done**; with `iconOnly` its icon alone. */
-const SortButton = ({ sorting, onChange, size, iconOnly = false }) => {
-	const label = sorting ? text("done") : text("sort");
+//#region src/app/hand-order/reorder-button.tsx
+/** The button that turns reordering by hand on, as **Reorder**, and off again, as **Done**; with `iconOnly` its icon alone. */
+const ReorderButton = ({ sorting, onChange, size, iconOnly = false }) => {
+	const label = sorting ? text("done") : text("reorder");
 	return /* @__PURE__ */ jsxs(Button, {
 		size,
 		variant: sorting ? "primary" : "secondary",
@@ -18,4 +18,4 @@ const SortButton = ({ sorting, onChange, size, iconOnly = false }) => {
 	});
 };
 //#endregion
-export { SortButton };
+export { ReorderButton };

package/dist/app/hand-order/reorder-span.js

@@ -0,0 +1,25 @@
+//#region src/app/hand-order/reorder-span.ts
+const isRank = (value) => typeof value === "number" && Number.isInteger(value);
+/**
+* The shortest stretch that saves a move: `ranks` are the records' values in their new order, and `first` to `last`
+* the places that moved. The records before it keep their values, so they must already rise, and the stretch starts
+* just above them, or at 1; it then reaches on until the next record already ranks above it. When the values were
+* 1, 2, 3, ... that is the records that moved and nothing else, so a long list sends a few keys instead of all of them.
+*/
+const reorderSpan = (ranks, first, last) => {
+	let rising = 0;
+	while (rising < first && isRank(ranks[rising]) && (rising === 0 || ranks[rising] > ranks[rising - 1])) rising += 1;
+	let tail = ranks.length;
+	while (tail - 1 > last && isRank(ranks[tail - 1]) && (tail === ranks.length || ranks[tail - 1] < ranks[tail])) tail -= 1;
+	const from = Math.min(first, rising);
+	const start = from === 0 ? 1 : ranks[from - 1] + 1;
+	let to = Math.max(last, tail - 1);
+	while (to + 1 < ranks.length && ranks[to + 1] <= start + (to - from)) to += 1;
+	return {
+		first: from,
+		last: to,
+		start
+	};
+};
+//#endregion
+export { reorderSpan };

package/dist/app/hand-order/use-hand-order.js

@@ -6,6 +6,7 @@ import { refusalReason } from "../displays/board-columns.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
 import { listLabels, withLabels } from "../../live/relation-labels.js";
+import { reorderSpan } from "./reorder-span.js";
 import { text } from "./messages.js";
 import { useRef, useState } from "react";
 import { encodeKey } from "@protobase/schema/internal";
@@ -13,10 +14,10 @@ import { useQuery } from "@tanstack/react-query";
 import { arrayMove } from "@dnd-kit/sortable";
 //#region src/app/hand-order/use-hand-order.ts
 /**
-* The records of `filter` in the order of `field`, all of them up to `handOrderLimit`, with `more` when there are
-* others, and `move` to put one elsewhere. A move shows at once and renumbers them all 1, 2, 3, ... in one batch
-* `reorder` with their ETags; moves made while one saves are saved after it, with the ETags it gave back. A refusal
-* puts them back as the server has them and says why; either way every list of the resource reloads.
+* The records of `filter` in the order of `field`, all of them, a page of `handOrderPage` at a time, and `move` to put
+* one elsewhere. A move shows at once and saves only the records whose place changed (see `reorderSpan`) in one batch
+* `reorder` with their ETags; moves made while one saves are saved after it, with the values and ETags it gave back.
+* A refusal puts them back as the server has them and says why; either way every list of the resource reloads.
 */
 const useHandOrder = ({ model, field, filter, fields }) => {
 	const client = useClient();
@@ -28,34 +29,44 @@ const useHandOrder = ({ model, field, filter, fields }) => {
 		queryKey: [...keys.list(model.name, filter, orderBy, 500, "hand-order"), fields.join(",")],
 		queryFn: async () => {
 			const labels = listLabels(resources, views, model, fields);
-			const page = await client.search(model.name, {
-				filter: filter || void 0,
-				orderBy,
-				pageSize: 500,
-				labels
-			});
-			return {
-				rows: withLabels(resources, model, fields, page.items, page.labels).map((row, index) => ({
+			const rows = [];
+			let pageToken = "";
+			do {
+				const page = await client.search(model.name, {
+					filter: filter || void 0,
+					orderBy,
+					pageSize: 500,
+					labels,
+					...pageToken && { pageToken }
+				});
+				rows.push(...withLabels(resources, model, fields, page.items, page.labels).map((row, index) => ({
 					...row,
 					id: recordId(model, page.items[index])
-				})),
-				more: Boolean(page.nextPageToken)
-			};
+				})));
+				pageToken = page.nextPageToken;
+			} while (pageToken);
+			return rows;
 		}
 	});
 	const [moved, setMoved] = useState();
 	const latest = useRef(void 0);
+	const pending = useRef(void 0);
 	const saving = useRef(Promise.resolve());
 	const waiting = useRef(0);
 	const save = async () => {
 		const rows = latest.current;
-		if (!rows) return;
-		const etags = Object.fromEntries(rows.flatMap((row) => typeof row.etag === "string" ? [[encodeKey(recordKey(model, row)), row.etag]] : []));
+		const changed = pending.current;
+		pending.current = void 0;
+		if (!rows || !changed) return;
+		const span = reorderSpan(rows.map((row) => row[field]), changed.first, changed.last);
+		const sent = rows.slice(span.first, span.last + 1);
+		const etags = Object.fromEntries(sent.flatMap((row) => typeof row.etag === "string" ? [[encodeKey(recordKey(model, row)), row.etag]] : []));
 		const written = (await client.batchWrite([{
 			op: "reorder",
 			resource: model.name,
 			field,
-			keys: rows.map((row) => recordKey(model, row)),
+			keys: sent.map((row) => recordKey(model, row)),
+			start: span.start,
 			etags
 		}])).results[0];
 		if (written?.op !== "reorder" || !latest.current) return;
@@ -71,6 +82,7 @@ const useHandOrder = ({ model, field, filter, fields }) => {
 	};
 	const refused = (error) => {
 		latest.current = void 0;
+		pending.current = void 0;
 		setMoved(void 0);
 		toast.show({
 			state: "error",
@@ -87,16 +99,24 @@ const useHandOrder = ({ model, field, filter, fields }) => {
 		setMoved(void 0);
 	};
 	const move = (from, to) => {
-		const rows = latest.current ?? loaded.data?.rows;
+		const rows = latest.current ?? loaded.data;
 		if (!rows || from === to) return;
 		latest.current = arrayMove(rows, from, to);
+		const first = Math.min(from, to);
+		const last = Math.max(from, to);
+		pending.current = pending.current ? {
+			first: Math.min(pending.current.first, first),
+			last: Math.max(pending.current.last, last)
+		} : {
+			first,
+			last
+		};
 		setMoved(latest.current);
 		waiting.current += 1;
 		saving.current = saving.current.then(save).catch(refused).then(settle);
 	};
 	return {
-		rows: moved ?? loaded.data?.rows,
-		more: loaded.data?.more ?? false,
+		rows: moved ?? loaded.data,
 		loading: loaded.isPending,
 		error: loaded.error,
 		move

package/dist/app/list-page.js

@@ -62,7 +62,7 @@ import { SaveSearchButton } from "./searches/save-search-button.js";
 import { SavedSearches } from "./searches/saved-searches.js";
 import { useListCellEditor } from "./list-edit/use-list-cell-editor.js";
 import { HandSortedList } from "./hand-order/hand-sorted-list.js";
-import { SortButton } from "./hand-order/sort-button.js";
+import { ReorderButton } from "./hand-order/reorder-button.js";
 import { useMemo, useState } from "react";
 import { Download, Plus, SlidersHorizontal } from "lucide-react";
 import { isGroupChart, tableDisplay, viewOfList } from "@protobase/schema/internal";
@@ -316,7 +316,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		},
 		children: [/* @__PURE__ */ jsx(Download, { className: "size-3.5" }), desktop && text$1("export")]
 	});
-	const sortButton = handOrder && /* @__PURE__ */ jsx(SortButton, {
+	const sortButton = handOrder && /* @__PURE__ */ jsx(ReorderButton, {
 		sorting: handSorting,
 		onChange: setSorting,
 		iconOnly: !desktop

package/dist/app/related-section.js

@@ -13,7 +13,7 @@ import { EmbeddedDisplaySwitch, EmbeddedList } from "./embedded-list/embedded-li
 import { useEmbeddedDisplay } from "./embedded-list/use-embedded-display.js";
 import { text } from "./record-messages.js";
 import { HandSortedList } from "./hand-order/hand-sorted-list.js";
-import { SortButton } from "./hand-order/sort-button.js";
+import { ReorderButton } from "./hand-order/reorder-button.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useQuery } from "@tanstack/react-query";
@@ -79,7 +79,7 @@ const Empty = ({ empty }) => /* @__PURE__ */ jsx("p", {
 /**
 * A record page section listing the first records of another resource that point at this record, directly or through
 * a join resource, in the list page's table or display, with a link to them all in the list. When they are ordered by
-* hand within this record, **Sort** shows them all in their order, to be moved by their drag handles.
+* hand within this record, **Reorder** shows them all in their order, to be moved by their drag handles.
 */
 const RelatedSection = ({ item, value, owner }) => {
 	const { resources, views } = useAdminMeta();
@@ -108,7 +108,7 @@ const RelatedSection = ({ item, value, owner }) => {
 	});
 	const actions = handOrder ? /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center gap-2",
-		children: [!sorting && displaySwitch, /* @__PURE__ */ jsx(SortButton, {
+		children: [!sorting && displaySwitch, /* @__PURE__ */ jsx(ReorderButton, {
 			size: "sm",
 			sorting,
 			onChange: setSorting

package/dist/package.js

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