@yuneta/gobj-ui 7.8.0 → 7.9.0

package/README.md

@@ -491,6 +491,39 @@ The buttons of that toolbar never shrink. When the row runs out of room, the
 url is what gives way, cut with an ellipsis, and the whole value stays in the
 `title` and the `aria-label`.
 
+### Editing a topic table in place
+
+A writable scalar is editable in the table, in edition mode
+(`with_inline_edit`, default on). Changing one field used to mean opening the
+record form, changing it, saving and closing.
+
+**Which cells, and why not the rest.** The schema decides first: only a column
+flagged `writable`, and never the pkey — renaming what a record is KEYED by is
+not a field edit. Then the type: a hook holds children and an fkey IS a link,
+so both are edited by linking; a dict or a list is a document the form has an
+editor for; a date cell shows a formatted string over an epoch, so typing into
+it would write the string. Those stay with the form, one click away on the
+same row. `boolean` gets a tick, `enum` the list of its own values, numbers a
+number editor.
+
+**The write is a partial update with no `autolink`, and that is the whole
+safety of it.** `treedb_update_node()` merges (`json_object_update`), so the
+fields it does not carry are left alone; `autolink` is the option that wipes a
+node's links and rebuilds them from the fkeys the record carries, and on a
+partial record it reads that as "no parents", detaches the node and answers
+**success**. So a cell edit travels as its own event, `EV_UPDATE_FIELD`, and
+not as `EV_UPDATE_RECORD` — that one does send autolink, and may, because the
+form hands it the whole record with its fkeys in it. See
+`schema_write_options.js` for the rule and why each word of it is there.
+
+`editable` is a **function** on the column, not a flag: edition mode is
+toggled on a table that is already built, so the answer has to be asked for at
+the moment of the click.
+
+A refused write puts the topic back to what the treedb has. Leaving the typed
+value on screen is tolerable for a form, which stays open on the values it
+failed with; a cell edited in place would just look saved.
+
 ### Reading a topic table: filters, columns, CSV
 
 `C_YUI_TREEDB_TOPIC_WITH_FORM` had one global search box over the loaded rows.

package/dist/gobj-ui.cjs.js

@@ -14416,6 +14416,66 @@ function yui_shell_show_route_map(shell, opts) {
 	return modal_ref.modal;
 }
 //#endregion
+//#region src/nodes_answer.js
+/***********************************************************************
+*          nodes_answer.js
+*
+*      What the `nodes` command answered, whatever shape it came in.
+*
+*      A treedb lives in memory on the backend, so walking it is not
+*      what costs: serializing every node, pushing it through a
+*      websocket and parsing it here is. So `nodes` learned to answer a
+*      PAGE, with the contract `list-keys` of C_TRANGER already used:
+*
+*          no `limit`  ->  the plain list it has always answered
+*          a `limit`   ->  {total_rows, pages, data}
+*
+*      Both shapes are alive at once and will be for a long time: the
+*      SPA talks to backends the operator configures, and an older one
+*      answers the plain list whatever this app asks for. So the shape
+*      is read, never assumed — a view that indexed `data` as an array
+*      would render an object's keys as rows the day a backend
+*      upgraded, which is the kind of break that looks like a bug in
+*      the app.
+*
+*      Pure and tested, because this is exactly the sort of thing that
+*      cannot be exercised until the other side moves.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+/***************************************************************
+*  nodes_answer(data) -> {rows, total, pages, paged}
+*
+*  `rows` is always an array, so a caller never has to ask which
+*  shape it got. `paged` says whether the backend answered a page,
+*  which is the one thing a caller may legitimately care about (it is
+*  what tells a pager it has something to page).
+***************************************************************/
+function nodes_answer(data) {
+	if (Array.isArray(data)) return {
+		rows: data,
+		total: data.length,
+		pages: 1,
+		paged: false
+	};
+	if (data && typeof data === "object" && Array.isArray(data.data)) {
+		let rows = data.data;
+		return {
+			rows,
+			total: typeof data.total_rows === "number" ? data.total_rows : rows.length,
+			pages: typeof data.pages === "number" && data.pages > 0 ? data.pages : 1,
+			paged: true
+		};
+	}
+	return {
+		rows: [],
+		total: 0,
+		pages: 1,
+		paged: false
+	};
+}
+//#endregion
 //#region src/c_yui_treedb_topics.js
 /***********************************************************************
 *          c_yui_treedb_topics.js
@@ -14437,6 +14497,7 @@ var attrs_table$6 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "gobj_remote_yuno", 0, null, "Remote yuno for data fetching"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "treedb_name", 0, null, "Remote TreeDB service name"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "descs", 0, null, "Description of topics"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_remote_paging", 0, false, "Each topic table pulls its rows a PAGE at a time (`nodes` from/limit) instead of loading the topic whole. Safe against a backend that cannot page: it answers the whole list, which the table reads as one page"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "system", 0, false, "Manage system topics (true) or user topics (false)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "tabs_style", 0, "is-toggle is-fullwidth", "Bulma tab styling"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_cards_landing", 0, false, "Land on a grid of topic cards (list->detail): a card opens its table, with the tabs bar + a back-to-grid button. Off = tabs only (legacy)."),
@@ -15250,7 +15311,8 @@ function process_treedb_descs$1(gobj) {
 			with_delete_button: !readonly,
 			treedb_name,
 			topic_name: key,
-			desc
+			desc,
+			with_remote_paging: (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_remote_paging")
 		};
 		let id = `${(0, _yuneta_gobj_js.gobj_name)(gobj)}?${desc.topic_name}`;
 		let gobj_topic_form = (0, _yuneta_gobj_js.gobj_create_service)(id, "C_YUI_TREEDB_TOPIC_WITH_FORM", kw_topic_form, gobj);
@@ -15321,6 +15383,8 @@ function register_sub_routes$1(gobj) {
 function get_nodes$1(gobj, topic_name) {
 	const treedb_name = gobj.priv.treedb_name;
 	subscribe_treedb$1(gobj, topic_name);
+	let gobj_topic_form = get_gobj_formtable(gobj, topic_name);
+	if (gobj_topic_form && (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj_topic_form, "with_remote_paging")) return;
 	treedb_nodes$1(gobj, treedb_name, topic_name, { list_dict: true });
 }
 /************************************************************
@@ -15368,7 +15432,7 @@ function get_gobj_formtable(gobj, topic_name) {
 /************************************************************
 *  Command to remote service
 ************************************************************/
-function treedb_nodes$1(gobj, treedb_name, topic_name, options) {
+function treedb_nodes$1(gobj, treedb_name, topic_name, options, page) {
 	let command = "nodes";
 	let gobj_remote_yuno = (0, _yuneta_gobj_js.gobj_read_pointer_attr)(gobj, "gobj_remote_yuno");
 	let kw = {
@@ -15378,8 +15442,17 @@ function treedb_nodes$1(gobj, treedb_name, topic_name, options) {
 		options: options || {}
 	};
 	kw.__md_command__ = { topic_name };
+	if (page) {
+		kw.from = page.from;
+		kw.limit = page.limit;
+		kw.__md_command__.req_id = page.req_id;
+	}
 	let ret = (0, _yuneta_gobj_js.gobj_command)(gobj_remote_yuno, command, kw, gobj);
-	if (ret) (0, _yuneta_gobj_js.log_error)(ret);
+	if (ret) {
+		(0, _yuneta_gobj_js.log_error)(ret);
+		return -1;
+	}
+	return 0;
 }
 /************************************************************
 *  Command to remote service
@@ -15613,7 +15686,7 @@ function ac_mt_command_answer$2(gobj, event, kw, src) {
 			yui_shell_show_error(yui_shell_of(gobj), comment, { t: i18next.t });
 			if (command === "update-node" || command === "create-node") {
 				let failed_topic = (0, _yuneta_gobj_js.kw_get_str)(gobj, kw_command, "topic_name", "", 0);
-				if (failed_topic) treedb_nodes$1(gobj, (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "treedb_name"), failed_topic, { list_dict: true });
+				if (failed_topic) (0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_REFRESH_TOPIC", { topic_name: failed_topic }, gobj);
 			}
 		}
 		return 0;
@@ -15629,7 +15702,16 @@ function ac_mt_command_answer$2(gobj, event, kw, src) {
 			let topic_name = (0, _yuneta_gobj_js.kw_get_str)(gobj, kw_command, "topic_name", "", _yuneta_gobj_js.kw_flag_t.KW_REQUIRED);
 			if (result >= 0) {
 				let gobj_topic_form = (0, _yuneta_gobj_js.gobj_find_child)(gobj, { __gobj_name__: `${(0, _yuneta_gobj_js.gobj_name)(gobj)}?${topic_name}` });
-				(0, _yuneta_gobj_js.gobj_send_event)(gobj_topic_form, "EV_LOAD_NODES", data, gobj);
+				let answer = nodes_answer(data);
+				let md = (0, _yuneta_gobj_js.kw_get_dict)(gobj, kw_command, "__md_command__", {}, 0);
+				let req_id = (0, _yuneta_gobj_js.kw_get_str)(gobj, md, "req_id", "", 0);
+				if (req_id) (0, _yuneta_gobj_js.gobj_send_event)(gobj_topic_form, "EV_PAGE_LOADED", {
+					req_id,
+					rows: answer.rows,
+					pages: answer.pages,
+					total: answer.total
+				}, gobj);
+				else (0, _yuneta_gobj_js.gobj_send_event)(gobj_topic_form, "EV_LOAD_NODES", answer.rows, gobj);
 			}
 			break;
 		case "create-node":
@@ -15855,6 +15937,31 @@ function ac_create_record(gobj, event, kw, src) {
 	});
 }
 /********************************************
+*  A topic table wants a page.
+*
+*  The transport is ours, so the table asks and we fetch; the answer
+*  finds its way back by the `req_id` we echo. A backend that cannot
+*  page answers the whole list, which the table takes as one page —
+*  which is the truth, and is why the table can ask without knowing
+*  what it is talking to.
+********************************************/
+function ac_request_page(gobj, event, kw, src) {
+	let topic_name = kw.topic_name || (0, _yuneta_gobj_js.gobj_read_attr)(src, "topic_name");
+	if (!topic_name || !kw.req_id) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: a page request with no topic or no id`);
+		return -1;
+	}
+	if (treedb_nodes$1(gobj, (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "treedb_name"), topic_name, { list_dict: true }, {
+		from: kw.from,
+		limit: kw.limit,
+		req_id: kw.req_id
+	}) < 0) (0, _yuneta_gobj_js.gobj_send_event)(src, "EV_PAGE_FAILED", {
+		req_id: kw.req_id,
+		error: "cannot reach the backend"
+	}, gobj);
+	return 0;
+}
+/********************************************
 *  Event from formtable: ONE field of one record, edited in place.
 *
 *  Written as a PARTIAL update and, deliberately, with NO `autolink`.
@@ -15921,6 +16028,11 @@ function ac_delete_record(gobj, event, kw, src) {
 *  }
 ********************************************/
 function ac_refresh_topic(gobj, event, kw, src) {
+	let gobj_topic_form = get_gobj_formtable(gobj, kw.topic_name);
+	if (gobj_topic_form && (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj_topic_form, "with_remote_paging")) {
+		(0, _yuneta_gobj_js.gobj_send_event)(gobj_topic_form, "EV_REPULL_PAGE", {}, gobj);
+		return 0;
+	}
 	treedb_nodes$1(gobj, (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "treedb_name"), kw.topic_name, { list_dict: true });
 	return 0;
 }
@@ -16010,6 +16122,11 @@ function create_gclass$6(gclass_name) {
 			ac_update_field,
 			null
 		],
+		[
+			"EV_REQUEST_PAGE",
+			ac_request_page,
+			null
+		],
 		[
 			"EV_DELETE_RECORD",
 			ac_delete_record,
@@ -16084,6 +16201,7 @@ function create_gclass$6(gclass_name) {
 		["EV_CREATE_RECORD", 0],
 		["EV_UPDATE_RECORD", 0],
 		["EV_UPDATE_FIELD", 0],
+		["EV_REQUEST_PAGE", 0],
 		["EV_DELETE_RECORD", 0],
 		["EV_RECORD_WRITTEN", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT | _yuneta_gobj_js.event_flag_t.EVF_NO_WARN_SUBS],
 		["EV_REFRESH_TOPIC", 0],
@@ -16298,6 +16416,8 @@ var attrs_table$5 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_export_button", 0, true, "Button toolbar EXPORT (download as CSV what the table holds)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_header_filters", 0, true, "Per-column filter box in the table header, on the columns a text/number match means something (not hooks, fkeys or json)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_inline_edit", 0, true, "Edit a writable scalar cell in place while in edition mode (the record form keeps the rest)"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_remote_paging", 0, false, "Pull the topic a PAGE at a time from the backend (`nodes` from/limit) instead of loading it whole. Needs a backend that pages"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_INTEGER, "page_size", 0, 200, "Rows per page when with_remote_paging. Generous on purpose: a treedb that fits in one page behaves exactly as it did, paginator hidden and every filter seeing every row"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_in_row_edit_icons", 0, true, "Add a last column with internal EDIT/DELETE icon"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "editable", 0, false, "Edit state"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_checkbox", 0, true, "Auxiliary first column to select rows"),
@@ -16326,6 +16446,8 @@ var attrs_table$5 = [
 	(0, _yuneta_gobj_js.SDATA_END)()
 ];
 var PRIVATE_DATA$5 = {
+	_pending_pages: null,
+	_page_seq: 0,
 	$container: null,
 	treedb_name: "",
 	topic_name: "",
@@ -17051,6 +17173,25 @@ function create_tabulator(gobj) {
 	let pkey = desc.pkey || "id";
 	let selectable = with_checkbox ? "highlight" : with_radio ? 1 : false;
 	let tabulator_settings = (0, _yuneta_gobj_js.json_deep_copy)((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "tabulator_settings"));
+	if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_remote_paging")) {
+		let page_size = (0, _yuneta_gobj_js.gobj_read_integer_attr)(gobj, "page_size") || 200;
+		Object.assign(tabulator_settings, {
+			pagination: true,
+			paginationMode: "remote",
+			filterMode: "local",
+			paginationSize: page_size,
+			paginationSizeSelector: [
+				50,
+				100,
+				200,
+				500
+			],
+			ajaxURL: "nodes",
+			ajaxRequestFunc: function(url, config, params) {
+				return request_page(gobj, params.page || 1, params.size || page_size);
+			}
+		});
+	}
 	Object.assign(tabulator_settings, {
 		index: pkey,
 		columns,
@@ -18252,6 +18393,99 @@ function ac_show_schema(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  Ask the host for one page and park the promise Tabulator wants.
+*
+*  The transport belongs to the HOST, so the request goes up as an event
+*  and the answer comes back down as one; what lives here is only the
+*  promise, keyed by a correlation id the host echoes.
+*
+*  Rejected right away when there is nobody to ask: a request that can
+*  never be answered would leave the table spinning for ever and leak
+*  one entry per attempt. Same for the watchdog — the link can stay up
+*  and the answer still never land.
+************************************************************/
+var PAGE_TIMEOUT_MS = 2e4;
+function request_page(gobj, page, size) {
+	let priv = gobj.priv;
+	return new Promise(function(resolve, reject) {
+		if (!priv._pending_pages) priv._pending_pages = {};
+		let req_id = `p${++priv._page_seq}`;
+		let timer = window.setTimeout(function() {
+			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_PAGE_TIMEOUT", { req_id }, gobj);
+		}, PAGE_TIMEOUT_MS);
+		priv._pending_pages[req_id] = {
+			resolve,
+			reject,
+			timer
+		};
+		(0, _yuneta_gobj_js.gobj_publish_event)(gobj, "EV_REQUEST_PAGE", {
+			topic_name: (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "topic_name"),
+			req_id,
+			from: (page - 1) * size + 1,
+			limit: size
+		});
+	});
+}
+/************************************************************
+*  Settle a parked page request, however it ended.
+************************************************************/
+function settle_page(gobj, req_id, value, error) {
+	let priv = gobj.priv;
+	let pend = priv._pending_pages ? priv._pending_pages[req_id] : null;
+	if (!pend) return;
+	delete priv._pending_pages[req_id];
+	if (pend.timer) window.clearTimeout(pend.timer);
+	if (error) {
+		pend.reject(new Error(error));
+		return;
+	}
+	pend.resolve(value);
+}
+/************************************************************
+*  Pull the current page again. `replaceData()` re-runs
+*  ajaxRequestFunc for the page the reader is on, so a refresh keeps
+*  their position instead of throwing them back to the first page.
+************************************************************/
+function ac_repull_page(gobj, event, kw, src) {
+	let tabulator = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "tabulator");
+	if (!tabulator) return 0;
+	try {
+		tabulator.replaceData();
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot re-pull the page: ${e}`);
+		return -1;
+	}
+	return 0;
+}
+/************************************************************
+*  The host answered a page.
+************************************************************/
+function ac_page_loaded(gobj, event, kw, src) {
+	settle_page(gobj, kw.req_id, {
+		data: (0, _yuneta_gobj_js.is_array)(kw.rows) ? kw.rows : [],
+		last_page: kw.pages || 1,
+		last_row: typeof kw.total === "number" ? kw.total : 0
+	}, null);
+	return 0;
+}
+/************************************************************
+*  The host could not answer it.
+************************************************************/
+function ac_page_failed(gobj, event, kw, src) {
+	let why = kw && kw.error || "page request failed";
+	(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: ${why}`);
+	settle_page(gobj, kw.req_id, null, why);
+	return 0;
+}
+/************************************************************
+*  Nobody answered in time.
+************************************************************/
+function ac_page_timeout(gobj, event, kw, src) {
+	(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: no answer for page request '${kw.req_id}' in ${PAGE_TIMEOUT_MS}ms`);
+	settle_page(gobj, kw.req_id, null, "page request timed out");
+	return 0;
+}
+/************************************************************
 *  Filter the loaded rows by a term matched against every non-internal
 *  field. `clearFilter()` with no argument drops only THIS filter: the
 *  per-column header filters are a separate layer and survive, so a
@@ -18499,6 +18733,26 @@ function create_gclass$5(gclass_name) {
 			ac_cell_edited,
 			null
 		],
+		[
+			"EV_REPULL_PAGE",
+			ac_repull_page,
+			null
+		],
+		[
+			"EV_PAGE_LOADED",
+			ac_page_loaded,
+			null
+		],
+		[
+			"EV_PAGE_FAILED",
+			ac_page_failed,
+			null
+		],
+		[
+			"EV_PAGE_TIMEOUT",
+			ac_page_timeout,
+			null
+		],
 		[
 			"EV_SEARCH",
 			ac_search,
@@ -18550,7 +18804,12 @@ function create_gclass$5(gclass_name) {
 		["EV_REFRESH", 0],
 		["EV_SHOW_SCHEMA", 0],
 		["EV_CELL_EDITED", 0],
+		["EV_REPULL_PAGE", 0],
+		["EV_PAGE_LOADED", 0],
+		["EV_PAGE_FAILED", 0],
+		["EV_PAGE_TIMEOUT", 0],
 		["EV_UPDATE_FIELD", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
+		["EV_REQUEST_PAGE", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_SEARCH", 0],
 		["EV_OPEN_COLUMNS", 0],
 		["EV_TOGGLE_COLUMN", 0],