@protobase/ui 0.23.13 → 0.24.0

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

@@ -28,18 +28,20 @@ const placeOver = (over, row) => {
 	};
 };
 /**
-* A column per value of the board's enum field, each loading its own records through the list API, with their count;
-* a card dragged, or moved with the keyboard, to another column saves the record with that column's value. When the
-* resource has a position, its records ordered as one, the columns are in its order and a card is dropped at a place:
-* the up and down arrow keys move it within its column, and the drop renumbers the cards before it.
+* A column per value of the board's enum field, each loading its own records through the list API, with their count.
+* When the list's `drag.board` is on, a card dragged, or moved with the keyboard, to another column saves the record
+* with that column's value. When the resource has a position, its records ordered as one, the columns are in its order,
+* and when `drag.rank` is on a card is dropped at a place: the up and down arrow keys move it within its column, and
+* the drop renumbers the cards before it. Each change says so with **Undo**.
 */
 const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit }) => {
 	const columns = columnsAllowed(filter, display.by, boardColumns(model, view, display));
 	const card = boardCard(model, view, display);
 	const permissions = usePermissions(model.name);
-	const movable = can(permissions, "update") && !model.fields[display.by]?.readOnly;
+	const drag = view?.list?.drag;
+	const movable = drag?.board === true && can(permissions, "update") && !model.fields[display.by]?.readOnly;
 	const rank = boardRank(model);
-	const placeable = rank !== void 0 && listHandOrder(model, permissions) !== void 0;
+	const placeable = drag?.rank === true && rank !== void 0 && listHandOrder(model, permissions) !== void 0;
 	const columnOrder = rank ? `${rank} asc` : orderBy;
 	const { moves, move } = useBoardMove(model, display.by, rank);
 	const [active, setActive] = useState();
@@ -115,7 +117,7 @@ const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit })
 		},
 		accessibility: {
 			announcements,
-			screenReaderInstructions: { draggable: placeable ? "To move a card, press Space, move it with the up and down arrow keys within its column and the left and right arrow keys to another column, and press Space again to drop it there. Escape puts it back." : "To move a card to another column, press Space, move it with the left and right arrow keys, and press Space again to drop it there. Escape puts it back." }
+			screenReaderInstructions: { draggable: !placeable ? "To move a card to another column, press Space, move it with the left and right arrow keys, and press Space again to drop it there. Escape puts it back." : movable ? "To move a card, press Space, move it with the up and down arrow keys within its column and the left and right arrow keys to another column, and press Space again to drop it there. Escape puts it back." : "To move a card, press Space, move it with the up and down arrow keys within its column, and press Space again to drop it there. Escape puts it back." }
 		},
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "relative min-w-0 flex-1 overflow-x-auto",

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

@@ -44,5 +44,27 @@ const placeOps = (model, by, rank, row, column, order, first, last) => {
 		etag: etagOf(row)
 	}, reorder];
 };
+/**
+* What the batch of a drop saved: each record it wrote, as it stored it last, with its values in `rows`, the column's
+* cards as listed before the drop, so the drop can be undone.
+*/
+const boardWrites = (model, rows, result) => {
+	const before = new Map(rows.map((row) => [encodeKey(recordKey(model, row.record)), row.record]));
+	const stored = /* @__PURE__ */ new Map();
+	for (const entry of result.results) {
+		const written = entry.op === "reorder" ? entry.records : entry.op === "update" ? [entry] : [];
+		for (const { record, etag } of written) stored.set(encodeKey(recordKey(model, record)), {
+			record,
+			etag
+		});
+	}
+	return [...stored].flatMap(([key, written]) => {
+		const was = before.get(key);
+		return was ? [{
+			before: was,
+			...written
+		}] : [];
+	});
+};
 //#endregion
-export { placeOps, placedRows };
+export { boardWrites, placeOps, placedRows };

package/dist/app/displays/messages.js

@@ -6,14 +6,22 @@ const text = defineMessages({
 		display: "Display",
 		sort: "Sort",
 		ascending: "ascending",
-		descending: "descending"
+		descending: "descending",
+		movedTo: (column) => `Moved to ${column}`,
+		orderChanged: "Order changed",
+		undo: "Undo",
+		couldNotUndo: "Could not undo"
 	},
 	nl: {
 		table: "Tabel",
 		display: "Weergave",
 		sort: "Sorteren",
 		ascending: "oplopend",
-		descending: "aflopend"
+		descending: "aflopend",
+		movedTo: (column) => `Verplaatst naar ${column}`,
+		orderChanged: "Volgorde gewijzigd",
+		undo: "Ongedaan maken",
+		couldNotUndo: "Kon niet ongedaan maken"
 	}
 });
 //#endregion

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

@@ -2,30 +2,48 @@ import { useClient } from "../../data/api-provider.js";
 import { useToast } from "../../toasts/toast-provider.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { refusalReason } from "./board-columns.js";
+import { text } from "./messages.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
-import { placeOps } from "./board-place.js";
-import { useState } from "react";
+import { boardWrites, placeOps } from "./board-place.js";
+import { undoOps } from "../hand-order/undo-ops.js";
+import { useRef, useState } from "react";
 import { useMutation } from "@tanstack/react-query";
 //#region src/app/displays/use-board-move.ts
 /**
 * Moving a board's card to another column: one update of the record with the column's value and the ETag it was listed
 * with, as a named update action sends, so the resource's access rules and `validate` decide. On a ranked board a drop
 * at a place is one batch instead, that update when the column changes and a `reorder` by `rank` of the column's cards.
-* The card shows in its new place at once; a refusal puts it back and says why, and either way every list of the
-* resource reloads.
+* The card shows in its new place at once; a saved move says so with **Undo**, which puts back the values it changed,
+* and a refusal puts it back and says why. Either way every list of the resource reloads.
 */
 const useBoardMove = (model, by, rank) => {
 	const client = useClient();
 	const toast = useToast();
 	const refresh = useRefreshResource();
 	const [moves, setMoves] = useState([]);
+	const undoToast = useRef(void 0);
 	const settle = (key) => setMoves((current) => current.filter((move) => move.row.key !== key));
+	const fields = rank ? [by, rank] : [by];
+	const undo = useMutation({
+		mutationFn: (writes) => client.batchWrite(undoOps(model, writes, fields)),
+		onError: (error) => toast.show({
+			state: "error",
+			title: text("couldNotUndo"),
+			description: refusalReason(error)
+		}),
+		onSettled: () => refresh(model.name)
+	});
 	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.first, place.last));
+			if (place) return boardWrites(model, place.order, await 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);
+			const stored = await client.update(model.name, recordKey(model, row.record), { [by]: to.value }, etag);
+			return [{
+				before: row.record,
+				record: stored.record,
+				etag: stored.etag
+			}];
 		},
 		onMutate: ({ row, to, place }) => {
 			const moved = {
@@ -42,6 +60,23 @@ const useBoardMove = (model, by, rank) => {
 				...order && { order }
 			}]);
 		},
+		onSuccess: (writes, { row, to }) => {
+			if (undoToast.current !== void 0) toast.dismiss(undoToast.current);
+			const title = (row.record[by] ?? null) === to.value ? text("orderChanged") : text("movedTo", to.label);
+			const id = toast.show({
+				state: "success",
+				title,
+				action: {
+					label: text("undo"),
+					onClick: () => {
+						toast.dismiss(id);
+						undoToast.current = void 0;
+						undo.mutate(writes);
+					}
+				}
+			});
+			undoToast.current = id;
+		},
 		onError: (error, { row, to }) => {
 			settle(row.key);
 			const title = (row.record[by] ?? null) === to.value ? "Could not change the order" : `Could not move it to ${to.label}`;

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

@@ -1,3 +1,4 @@
+import { parseSort } from "../list-order.js";
 import { can } from "../permissions.js";
 //#region src/app/hand-order/hand-order.ts
 /** The field a user may sort `model`'s records by hand in: its `position`, when they may update it. */
@@ -17,5 +18,14 @@ const listHandOrder = (model, permissions) => model.position?.within === void 0
 * whose `within` relation points at the page's record, no filter or join resource leaving some out.
 */
 const relatedHandOrder = (item, model, permissions) => model.position?.within !== void 0 && item.field === model.position.within && !item.through && !item.from && !item.filter ? writablePosition(model, permissions) : void 0;
+/**
+* Whether the list page's table moves its rows by dragging at any time, without **Reorder**: its list turns
+* `drag.rank` on, and it shows every record in the order of `field`, from `listHandOrder`, without a filter or search.
+*/
+const dragsRank = (view, field, orderBy, filter) => {
+	if (field === void 0 || view?.list?.drag?.rank !== true || filter !== "") return false;
+	const sort = parseSort(orderBy);
+	return sort.columnId === field && sort.direction === "asc";
+};
 //#endregion
-export { listHandOrder, relatedHandOrder };
+export { dragsRank, listHandOrder, relatedHandOrder };

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

@@ -17,24 +17,26 @@ import { jsx } from "react/jsx-runtime";
 * row, or moving it with the keyboard from its handle, renumbers them all. The page scrolls them, and a row still opens
 * its record.
 */
-const HandSortedList = ({ model, view, field, filter, columns }) => {
+const HandSortedList = ({ model, view, field, filter, columns, sort }) => {
 	const { resources, views } = useAdminMeta();
 	const { fields: fieldTypes } = useProjectUi();
 	const { go, href } = useAppAddress();
+	const sorts = sort !== void 0;
 	const specs = useMemo(() => embeddedColumns(model, view, columns, {
 		resources,
 		views,
 		fieldTypes
-	}).map((spec) => ({
+	}).map((spec) => sorts ? spec : {
 		...spec,
 		sortable: false
-	})), [
+	}), [
 		model,
 		view,
 		columns.join(","),
 		resources,
 		views,
-		fieldTypes
+		fieldTypes,
+		sorts
 	]);
 	const fields = useMemo(() => loadedFields(model, view, specs.map((spec) => spec.id)), [
 		model,
@@ -85,6 +87,10 @@ const HandSortedList = ({ model, view, field, filter, columns }) => {
 		latencyMs: 0,
 		onOpenRow: openRecord,
 		rowLink: recordLink,
+		...sort && {
+			sort: sort.value,
+			onSortChange: sort.onChange
+		},
 		rowNumbers: false,
 		reorder: {
 			label: (row) => recordTitle(model, view, row, row.id),

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

@@ -6,14 +6,20 @@ const text = defineMessages({
 		reorder: "Reorder",
 		couldNotLoad: "Could not load",
 		nothingYet: "Nothing here yet.",
-		couldNotChange: "Could not change the order"
+		couldNotChange: "Could not change the order",
+		orderChanged: "Order changed",
+		undo: "Undo",
+		couldNotUndo: "Could not undo"
 	},
 	nl: {
 		done: "Klaar",
 		reorder: "Volgorde wijzigen",
 		couldNotLoad: "Kon niet laden",
 		nothingYet: "Hier staat nog niets.",
-		couldNotChange: "Kon de volgorde niet wijzigen"
+		couldNotChange: "Kon de volgorde niet wijzigen",
+		orderChanged: "Volgorde gewijzigd",
+		undo: "Ongedaan maken",
+		couldNotUndo: "Kon niet ongedaan maken"
 	}
 });
 //#endregion

package/dist/app/hand-order/undo-ops.js

@@ -0,0 +1,19 @@
+import { recordKey } from "../../live/model-helpers.js";
+//#region src/app/hand-order/undo-ops.ts
+/**
+* The batch that undoes a drag: an update of each record it saved putting back those of `fields` it changed, with the
+* ETag the save gave it, so a record changed again since is refused rather than overwritten.
+*/
+const undoOps = (model, writes, fields) => writes.flatMap(({ before, record, etag }) => {
+	const changed = fields.filter((field) => Object.hasOwn(before, field) && before[field] !== record[field]);
+	if (changed.length === 0) return [];
+	return [{
+		op: "update",
+		resource: model.name,
+		key: recordKey(model, record),
+		data: Object.fromEntries(changed.map((field) => [field, before[field]])),
+		etag
+	}];
+});
+//#endregion
+export { undoOps };

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

@@ -7,6 +7,7 @@ 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 { undoOps } from "./undo-ops.js";
 import { text } from "./messages.js";
 import { useRef, useState } from "react";
 import { encodeKey } from "@protobase/schema/internal";
@@ -17,7 +18,8 @@ import { arrayMove } from "@dnd-kit/sortable";
 * 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.
+* Each save says so with **Undo**, which puts back the values it changed. 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();
@@ -53,6 +55,7 @@ const useHandOrder = ({ model, field, filter, fields }) => {
 	const pending = useRef(void 0);
 	const saving = useRef(Promise.resolve());
 	const waiting = useRef(0);
+	const undoToast = useRef(void 0);
 	const save = async () => {
 		const rows = latest.current;
 		const changed = pending.current;
@@ -69,7 +72,22 @@ const useHandOrder = ({ model, field, filter, fields }) => {
 			start: span.start,
 			etags
 		}])).results[0];
-		if (written?.op !== "reorder" || !latest.current) return;
+		if (written?.op !== "reorder") return;
+		const before = new Map(sent.map((row) => [row.id, { [field]: row[field] }]));
+		const undo = undoOps(model, written.records.map((entry) => ({
+			...entry,
+			before: before.get(recordId(model, entry.record)) ?? {}
+		})), [field]);
+		if (undoToast.current !== void 0) toast.dismiss(undoToast.current);
+		undoToast.current = toast.show({
+			state: "success",
+			title: text("orderChanged"),
+			action: {
+				label: text("undo"),
+				onClick: () => undoSave(undo)
+			}
+		});
+		if (!latest.current) return;
 		const stored = new Map(written.records.map((entry) => [recordId(model, entry.record), entry]));
 		latest.current = latest.current.map((row) => {
 			const entry = stored.get(row.id);
@@ -80,13 +98,13 @@ const useHandOrder = ({ model, field, filter, fields }) => {
 			} : row;
 		});
 	};
-	const refused = (error) => {
+	const refused = (title) => (error) => {
 		latest.current = void 0;
 		pending.current = void 0;
 		setMoved(void 0);
 		toast.show({
 			state: "error",
-			title: text("couldNotChange"),
+			title,
 			description: refusalReason(error)
 		});
 	};
@@ -113,7 +131,18 @@ const useHandOrder = ({ model, field, filter, fields }) => {
 		};
 		setMoved(latest.current);
 		waiting.current += 1;
-		saving.current = saving.current.then(save).catch(refused).then(settle);
+		saving.current = saving.current.then(save).catch(refused(text("couldNotChange"))).then(settle);
+	};
+	const undoSave = (ops) => {
+		if (undoToast.current !== void 0) toast.dismiss(undoToast.current);
+		undoToast.current = void 0;
+		waiting.current += 1;
+		saving.current = saving.current.then(async () => {
+			await client.batchWrite(ops);
+			latest.current = void 0;
+			pending.current = void 0;
+			setMoved(void 0);
+		}).catch(refused(text("couldNotUndo"))).then(settle);
 	};
 	return {
 		rows: moved ?? loaded.data,

package/dist/app/list-page.js

@@ -31,7 +31,7 @@ import { facetNames, filterChips } from "./searches/saved-search.js";
 import { useSeedRecord } from "./record-preview.js";
 import { SignInPrompt } from "../auth/sign-in-prompt.js";
 import { relatedColumnLoads } from "./related-dots/dot-card.js";
-import { listHandOrder } from "./hand-order/hand-order.js";
+import { dragsRank, listHandOrder } from "./hand-order/hand-order.js";
 import { useDisplayRows } from "./displays/use-display-rows.js";
 import { BoardDisplay } from "./displays/board-display.js";
 import { CalendarDisplay } from "./displays/calendar-display.js";
@@ -176,6 +176,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 	const handOrder = scope ? void 0 : listHandOrder(model, permissions);
 	const [sorting, setSorting] = useState(false);
 	const handSorting = sorting && handOrder !== void 0;
+	const dragging = !display && !handSorting && dragsRank(view, handOrder, orderBy, loadFilter);
 	const pageScroll = handSorting || display?.kind !== "map";
 	usePageScroll(pageScroll);
 	const displayRows = useDisplayRows(model, rows.page, rows.key, display?.kind === "custom");
@@ -316,7 +317,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		},
 		children: [/* @__PURE__ */ jsx(Download, { className: "size-3.5" }), desktop && text$1("export")]
 	});
-	const sortButton = handOrder && /* @__PURE__ */ jsx(ReorderButton, {
+	const sortButton = handOrder && !dragging && /* @__PURE__ */ jsx(ReorderButton, {
 		sorting: handSorting,
 		onChange: setSorting,
 		iconOnly: !desktop
@@ -397,6 +398,17 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		create: createButton
 	});
 	const drawDisplay = () => {
+		if (dragging) return /* @__PURE__ */ jsx(HandSortedList, {
+			model,
+			view,
+			field: handOrder,
+			filter: "",
+			columns: listColumnNames(model, view),
+			sort: {
+				value: parseSort(orderBy),
+				onChange: (sort) => set({ orderBy: sortToOrderBy(sort) })
+			}
+		});
 		if (!display) return rows.source?.total === 0 && !rows.error ? empty : table;
 		if (display.kind === "cards") return /* @__PURE__ */ jsx(ListCards, {
 			model,

package/dist/package.js

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