@yuneta/gobj-ui 7.23.53 → 7.23.55

package/dist/gobj-ui.cjs.js

@@ -6356,6 +6356,7 @@ var attrs_table$16 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "pkey", 0, "id", "Primary key field name, used by form_mode"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "topic_name", 0, "", "Treedb topic name: labels use the i18n cascade '<topic>.<col>' -> '<col>' -> header (like table headers)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "editable", 0, false, "Default is editable, set false to readonly"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "readonly", 0, false, "Show EVERY field read-only, whatever its schema says: a record being LOOKED at, not edited. Independent of `editable`, which drives the TABLE rendering; this one drives the FORM"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "selectable", 0, true, "Rows selectable with 'click' (BAD with editable=true)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_checkbox", 0, false, "Show a first column with checkbox to select rows"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_rownum", 0, false, "Print first column with row number"),
@@ -6759,7 +6760,7 @@ function build_form_field_conf(gobj, field_desc) {
 		placeholder: "",
 		options: [],
 		extras: {},
-		readonly: !field_desc.is_writable,
+		readonly: (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "readonly") || !field_desc.is_writable,
 		required: field_desc.is_required,
 		hidden: field_desc.is_hidden,
 		default_value: field_desc.default_value
@@ -7514,10 +7515,41 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 		$extend.dataset.form_tag = tag;
 		$extend.dataset.form_input_type = inputType;
 		$extend.classList.add("yui-form-data-input");
+		apply_readonly_to_control(readonly, tag, $extend);
 	}
 	return $element;
 }
 /******************************************************************
+*  `readonly` is an attribute of a TEXT control and of nothing else.
+*
+*  A `<select>` ignores it. So does a checkbox, and so does a radio:
+*  the browser accepts the attribute, stores it, and lets the reader
+*  change the value anyway. Only `disabled` stops them, and tom-select
+*  is a widget of its own that has to be told through its API.
+*
+*  Which is why a col that is not `writable` used to render an
+*  EDITABLE select: the field was built read-only, correctly, and the
+*  three controls that cannot be read-only said nothing about it.
+*
+*  `disabled` is safe here: the record is collected by reading each
+*  marked control's value, never by submitting the form, so a disabled
+*  control is still read -- unlike in a native submit, where it would
+*  be dropped.
+******************************************************************/
+function apply_readonly_to_control(readonly, tag, $extend) {
+	if (!readonly) return;
+	switch (tag) {
+		case "select":
+		case "checkbox":
+		case "radio":
+			$extend.setAttribute("disabled", "disabled");
+			break;
+		case "select2":
+			$extend.setAttribute("disabled", "disabled");
+			if ($extend.tom_select) $extend.tom_select.disable();
+	}
+}
+/******************************************************************
 *  Create coordinates
 ******************************************************************/
 function create_coordinates(gobj, attrs) {
@@ -24126,6 +24158,13 @@ function create_tabulator(gobj) {
 	tabulator.on("dataFiltered", function(filters, rows) {
 		update_rowcount(Array.isArray(rows) ? rows.length : void 0);
 	});
+	tabulator.on("rowClick", function(e, row) {
+		if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "editable")) return;
+		let $cell = e.target ? e.target.closest(".tabulator-cell") : null;
+		let field = $cell ? $cell.getAttribute("tabulator-field") : null;
+		if (field && cell_has_its_own_action(gobj, field)) return;
+		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SHOW_RECORD", { index: row.getPosition() }, gobj);
+	});
 	tabulator.on("rowSelected", function(row) {
 		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SELECT_ROWS", { rows: [row.getData()] }, gobj);
 	});
@@ -24301,10 +24340,25 @@ function transform__treedb_value_2_table_value(gobj, col, value, row, field) {
 	return value;
 }
 /************************************************************
-*  Build the form template from desc.cols: only user-editable
-*  fields reach the form — writable cols, fkeys (linkable) and
-*  the pkey (the hosted C_YUI_FORM's form_mode drives the
-*  pkey's readonly/required state).
+*  Build the form template from desc.cols: EVERY field of the
+*  record, the ones that cannot be written included.
+*
+*  They used to be dropped, and a record was then shown as the
+*  handful of its fields somebody may type: an asset opened as
+*  its id alone, with its type, its size, its date and where it
+*  came from -- everything a person opens an asset to read --
+*  nowhere on screen. What a form is for is READING a record;
+*  writing it is one of the two things you can do next.
+*
+*  C_YUI_FORM renders a col that is not `writable` read-only on
+*  its own (`build_form_field_conf`), so this is the whole of
+*  it. What must NOT follow is sending them back:
+*  `transform__form_record_2_treedb_record()` drops them, and
+*  the reason is written there.
+*
+*  Still out: hooks (a hook is not a field of the record, it is
+*  the children hanging off it), hidden cols, and the `_`
+*  scaffolding the table adds.
 ************************************************************/
 function build_form_template(gobj) {
 	let desc = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "desc");
@@ -24314,7 +24368,6 @@ function build_form_template(gobj) {
 		const field_desc = (0, _yuneta_gobj_js.treedb_get_field_desc)(col);
 		if (field_desc.is_hidden) continue;
 		if (field_desc.type === "hook") continue;
-		if (!field_desc.is_writable && field_desc.type !== "fkey" && col.id !== desc.pkey) continue;
 		template.push(col);
 	}
 	return template;
@@ -24362,6 +24415,8 @@ function open_form_dialog(gobj, mode, record) {
 		let rid = record ? String(record[pkey] ?? "") : "";
 		title = (0, i18next.t)(topic_name) + ((0, _yuneta_gobj_js.empty_string)(rid) ? "" : " — " + rid);
 	}
+	let view_only = mode === "view";
+	let form_mode = view_only ? "update" : mode;
 	let $body = (0, _yuneta_gobj_js.createElement2)([
 		"div",
 		{
@@ -24375,12 +24430,13 @@ function open_form_dialog(gobj, mode, record) {
 		template: build_form_template(gobj),
 		record,
 		fkey_options: build_fkey_options(gobj),
-		form_mode: mode,
-		...form_plan.form_toolbar ? { toolbar: form_plan.form_toolbar } : {},
+		form_mode,
+		readonly: view_only,
+		...(view_only ? READONLY_FORM_TOOLBAR : form_plan.form_toolbar) ? { toolbar: view_only ? READONLY_FORM_TOOLBAR.slice() : form_plan.form_toolbar } : {},
 		render_mode: "edit",
 		pkey: desc.pkey || "id",
 		topic_name,
-		editable: !form_plan.readonly,
+		editable: !form_plan.readonly && !view_only,
 		$parent: $body
 	}, gobj);
 	priv.form = form;
@@ -24665,6 +24721,39 @@ function show_edit_form(gobj, row, index) {
 	open_form_dialog(gobj, pkey_is_rowid(gobj) ? "create" : "update", row);
 }
 /************************************************************
+*  Does a click on this column already mean something else?
+*
+*  The `_` columns are the table's own scaffolding (the selection
+*  checkbox, the Op buttons); a hook opens its children and a col
+*  holding a json document opens it in a viewer. Anything else is
+*  plain data, and a click on it means "show me this record".
+************************************************************/
+var CELL_WITH_ACTION = [
+	"hook",
+	"object",
+	"dict",
+	"template",
+	"array",
+	"list",
+	"coordinates",
+	"blob",
+	"gbuffer"
+];
+function cell_has_its_own_action(gobj, field) {
+	if (!field || field.charAt(0) === "_") return true;
+	let col = get_schema_col(gobj, field);
+	if (!col) return false;
+	const field_desc = (0, _yuneta_gobj_js.treedb_get_field_desc)(col);
+	return CELL_WITH_ACTION.includes(field_desc.type) || CELL_WITH_ACTION.includes(field_desc.real_type);
+}
+/************************************************************
+*  Show a record to be READ: every field, none of them editable.
+*  What a row click opens while the table is not in edition mode.
+************************************************************/
+function show_view_form(gobj, row) {
+	open_form_dialog(gobj, "view", row);
+}
+/************************************************************
 *  Show the edit "create" form to a new record
 *  internally called from the top toolbar +New button
 ************************************************************/
@@ -24687,14 +24776,16 @@ function get_schema_col(gobj, id) {
 *  operation: "create" "update"
 ************************************************************/
 function transform__form_record_2_treedb_record(gobj, kw, operation) {
+	let pkey = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "desc").pkey || "id";
 	let row = {};
 	for (let field_name of Object.keys(kw)) {
 		if ((0, _yuneta_gobj_js.empty_string)(field_name)) continue;
 		let col = get_schema_col(gobj, field_name);
-		if (col) {
-			let value = kw[field_name];
-			row[field_name] = transform__form_value_2_treedb_value(gobj, col, value, operation);
-		}
+		if (!col) continue;
+		const field_desc = (0, _yuneta_gobj_js.treedb_get_field_desc)(col);
+		if (!field_desc.is_writable && field_desc.type !== "fkey" && col.id !== pkey) continue;
+		let value = kw[field_name];
+		row[field_name] = transform__form_value_2_treedb_value(gobj, col, value, operation);
 	}
 	return row;
 }
@@ -25593,6 +25684,24 @@ function ac_open_columns(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  A row was clicked outside edition mode: open the record to be read.
+************************************************************/
+function ac_show_record(gobj, event, kw, src) {
+	let tabulator = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "tabulator");
+	let index = kw ? kw.index : void 0;
+	if (!tabulator || typeof index !== "number") {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: no row ${index} to show`);
+		return -1;
+	}
+	let row = tabulator.getRowFromPosition(index);
+	if (!row) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: row ${index} is gone`);
+		return -1;
+	}
+	show_view_form(gobj, row.getData());
+	return 0;
+}
+/************************************************************
 *  The reader picked another page size: remember it, so coming back to
 *  this topic opens where they left it instead of at 200.
 ************************************************************/
@@ -25817,6 +25926,11 @@ function create_gclass$5(gclass_name) {
 			ac_page_size_changed,
 			null
 		],
+		[
+			"EV_SHOW_RECORD",
+			ac_show_record,
+			null
+		],
 		[
 			"EV_TOGGLE_COLUMN",
 			ac_toggle_column,
@@ -25868,6 +25982,7 @@ function create_gclass$5(gclass_name) {
 		["EV_SEARCH", 0],
 		["EV_OPEN_COLUMNS", 0],
 		["EV_PAGE_SIZE_CHANGED", 0],
+		["EV_SHOW_RECORD", 0],
 		["EV_TOGGLE_COLUMN", 0],
 		["EV_EXPORT_TABLE", 0],
 		["EV_CREATE_RECORD", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],

package/dist/gobj-ui.es.js

@@ -6351,6 +6351,7 @@ var attrs_table$16 = [
 	SDATA(data_type_t.DTP_STRING, "pkey", 0, "id", "Primary key field name, used by form_mode"),
 	SDATA(data_type_t.DTP_STRING, "topic_name", 0, "", "Treedb topic name: labels use the i18n cascade '<topic>.<col>' -> '<col>' -> header (like table headers)"),
 	SDATA(data_type_t.DTP_BOOLEAN, "editable", 0, false, "Default is editable, set false to readonly"),
+	SDATA(data_type_t.DTP_BOOLEAN, "readonly", 0, false, "Show EVERY field read-only, whatever its schema says: a record being LOOKED at, not edited. Independent of `editable`, which drives the TABLE rendering; this one drives the FORM"),
 	SDATA(data_type_t.DTP_BOOLEAN, "selectable", 0, true, "Rows selectable with 'click' (BAD with editable=true)"),
 	SDATA(data_type_t.DTP_BOOLEAN, "with_checkbox", 0, false, "Show a first column with checkbox to select rows"),
 	SDATA(data_type_t.DTP_BOOLEAN, "with_rownum", 0, false, "Print first column with row number"),
@@ -6754,7 +6755,7 @@ function build_form_field_conf(gobj, field_desc) {
 		placeholder: "",
 		options: [],
 		extras: {},
-		readonly: !field_desc.is_writable,
+		readonly: gobj_read_bool_attr(gobj, "readonly") || !field_desc.is_writable,
 		required: field_desc.is_required,
 		hidden: field_desc.is_hidden,
 		default_value: field_desc.default_value
@@ -7509,10 +7510,41 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 		$extend.dataset.form_tag = tag;
 		$extend.dataset.form_input_type = inputType;
 		$extend.classList.add("yui-form-data-input");
+		apply_readonly_to_control(readonly, tag, $extend);
 	}
 	return $element;
 }
 /******************************************************************
+*  `readonly` is an attribute of a TEXT control and of nothing else.
+*
+*  A `<select>` ignores it. So does a checkbox, and so does a radio:
+*  the browser accepts the attribute, stores it, and lets the reader
+*  change the value anyway. Only `disabled` stops them, and tom-select
+*  is a widget of its own that has to be told through its API.
+*
+*  Which is why a col that is not `writable` used to render an
+*  EDITABLE select: the field was built read-only, correctly, and the
+*  three controls that cannot be read-only said nothing about it.
+*
+*  `disabled` is safe here: the record is collected by reading each
+*  marked control's value, never by submitting the form, so a disabled
+*  control is still read -- unlike in a native submit, where it would
+*  be dropped.
+******************************************************************/
+function apply_readonly_to_control(readonly, tag, $extend) {
+	if (!readonly) return;
+	switch (tag) {
+		case "select":
+		case "checkbox":
+		case "radio":
+			$extend.setAttribute("disabled", "disabled");
+			break;
+		case "select2":
+			$extend.setAttribute("disabled", "disabled");
+			if ($extend.tom_select) $extend.tom_select.disable();
+	}
+}
+/******************************************************************
 *  Create coordinates
 ******************************************************************/
 function create_coordinates(gobj, attrs) {
@@ -24121,6 +24153,13 @@ function create_tabulator(gobj) {
 	tabulator.on("dataFiltered", function(filters, rows) {
 		update_rowcount(Array.isArray(rows) ? rows.length : void 0);
 	});
+	tabulator.on("rowClick", function(e, row) {
+		if (gobj_read_bool_attr(gobj, "editable")) return;
+		let $cell = e.target ? e.target.closest(".tabulator-cell") : null;
+		let field = $cell ? $cell.getAttribute("tabulator-field") : null;
+		if (field && cell_has_its_own_action(gobj, field)) return;
+		gobj_send_event(gobj, "EV_SHOW_RECORD", { index: row.getPosition() }, gobj);
+	});
 	tabulator.on("rowSelected", function(row) {
 		gobj_send_event(gobj, "EV_SELECT_ROWS", { rows: [row.getData()] }, gobj);
 	});
@@ -24296,10 +24335,25 @@ function transform__treedb_value_2_table_value(gobj, col, value, row, field) {
 	return value;
 }
 /************************************************************
-*  Build the form template from desc.cols: only user-editable
-*  fields reach the form — writable cols, fkeys (linkable) and
-*  the pkey (the hosted C_YUI_FORM's form_mode drives the
-*  pkey's readonly/required state).
+*  Build the form template from desc.cols: EVERY field of the
+*  record, the ones that cannot be written included.
+*
+*  They used to be dropped, and a record was then shown as the
+*  handful of its fields somebody may type: an asset opened as
+*  its id alone, with its type, its size, its date and where it
+*  came from -- everything a person opens an asset to read --
+*  nowhere on screen. What a form is for is READING a record;
+*  writing it is one of the two things you can do next.
+*
+*  C_YUI_FORM renders a col that is not `writable` read-only on
+*  its own (`build_form_field_conf`), so this is the whole of
+*  it. What must NOT follow is sending them back:
+*  `transform__form_record_2_treedb_record()` drops them, and
+*  the reason is written there.
+*
+*  Still out: hooks (a hook is not a field of the record, it is
+*  the children hanging off it), hidden cols, and the `_`
+*  scaffolding the table adds.
 ************************************************************/
 function build_form_template(gobj) {
 	let desc = gobj_read_attr(gobj, "desc");
@@ -24309,7 +24363,6 @@ function build_form_template(gobj) {
 		const field_desc = treedb_get_field_desc(col);
 		if (field_desc.is_hidden) continue;
 		if (field_desc.type === "hook") continue;
-		if (!field_desc.is_writable && field_desc.type !== "fkey" && col.id !== desc.pkey) continue;
 		template.push(col);
 	}
 	return template;
@@ -24357,6 +24410,8 @@ function open_form_dialog(gobj, mode, record) {
 		let rid = record ? String(record[pkey] ?? "") : "";
 		title = t(topic_name) + (empty_string(rid) ? "" : " — " + rid);
 	}
+	let view_only = mode === "view";
+	let form_mode = view_only ? "update" : mode;
 	let $body = createElement2([
 		"div",
 		{
@@ -24370,12 +24425,13 @@ function open_form_dialog(gobj, mode, record) {
 		template: build_form_template(gobj),
 		record,
 		fkey_options: build_fkey_options(gobj),
-		form_mode: mode,
-		...form_plan.form_toolbar ? { toolbar: form_plan.form_toolbar } : {},
+		form_mode,
+		readonly: view_only,
+		...(view_only ? READONLY_FORM_TOOLBAR : form_plan.form_toolbar) ? { toolbar: view_only ? READONLY_FORM_TOOLBAR.slice() : form_plan.form_toolbar } : {},
 		render_mode: "edit",
 		pkey: desc.pkey || "id",
 		topic_name,
-		editable: !form_plan.readonly,
+		editable: !form_plan.readonly && !view_only,
 		$parent: $body
 	}, gobj);
 	priv.form = form;
@@ -24660,6 +24716,39 @@ function show_edit_form(gobj, row, index) {
 	open_form_dialog(gobj, pkey_is_rowid(gobj) ? "create" : "update", row);
 }
 /************************************************************
+*  Does a click on this column already mean something else?
+*
+*  The `_` columns are the table's own scaffolding (the selection
+*  checkbox, the Op buttons); a hook opens its children and a col
+*  holding a json document opens it in a viewer. Anything else is
+*  plain data, and a click on it means "show me this record".
+************************************************************/
+var CELL_WITH_ACTION = [
+	"hook",
+	"object",
+	"dict",
+	"template",
+	"array",
+	"list",
+	"coordinates",
+	"blob",
+	"gbuffer"
+];
+function cell_has_its_own_action(gobj, field) {
+	if (!field || field.charAt(0) === "_") return true;
+	let col = get_schema_col(gobj, field);
+	if (!col) return false;
+	const field_desc = treedb_get_field_desc(col);
+	return CELL_WITH_ACTION.includes(field_desc.type) || CELL_WITH_ACTION.includes(field_desc.real_type);
+}
+/************************************************************
+*  Show a record to be READ: every field, none of them editable.
+*  What a row click opens while the table is not in edition mode.
+************************************************************/
+function show_view_form(gobj, row) {
+	open_form_dialog(gobj, "view", row);
+}
+/************************************************************
 *  Show the edit "create" form to a new record
 *  internally called from the top toolbar +New button
 ************************************************************/
@@ -24682,14 +24771,16 @@ function get_schema_col(gobj, id) {
 *  operation: "create" "update"
 ************************************************************/
 function transform__form_record_2_treedb_record(gobj, kw, operation) {
+	let pkey = gobj_read_attr(gobj, "desc").pkey || "id";
 	let row = {};
 	for (let field_name of Object.keys(kw)) {
 		if (empty_string(field_name)) continue;
 		let col = get_schema_col(gobj, field_name);
-		if (col) {
-			let value = kw[field_name];
-			row[field_name] = transform__form_value_2_treedb_value(gobj, col, value, operation);
-		}
+		if (!col) continue;
+		const field_desc = treedb_get_field_desc(col);
+		if (!field_desc.is_writable && field_desc.type !== "fkey" && col.id !== pkey) continue;
+		let value = kw[field_name];
+		row[field_name] = transform__form_value_2_treedb_value(gobj, col, value, operation);
 	}
 	return row;
 }
@@ -25588,6 +25679,24 @@ function ac_open_columns(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  A row was clicked outside edition mode: open the record to be read.
+************************************************************/
+function ac_show_record(gobj, event, kw, src) {
+	let tabulator = gobj_read_attr(gobj, "tabulator");
+	let index = kw ? kw.index : void 0;
+	if (!tabulator || typeof index !== "number") {
+		log_error(`${gobj_short_name(gobj)}: no row ${index} to show`);
+		return -1;
+	}
+	let row = tabulator.getRowFromPosition(index);
+	if (!row) {
+		log_error(`${gobj_short_name(gobj)}: row ${index} is gone`);
+		return -1;
+	}
+	show_view_form(gobj, row.getData());
+	return 0;
+}
+/************************************************************
 *  The reader picked another page size: remember it, so coming back to
 *  this topic opens where they left it instead of at 200.
 ************************************************************/
@@ -25812,6 +25921,11 @@ function create_gclass$5(gclass_name) {
 			ac_page_size_changed,
 			null
 		],
+		[
+			"EV_SHOW_RECORD",
+			ac_show_record,
+			null
+		],
 		[
 			"EV_TOGGLE_COLUMN",
 			ac_toggle_column,
@@ -25863,6 +25977,7 @@ function create_gclass$5(gclass_name) {
 		["EV_SEARCH", 0],
 		["EV_OPEN_COLUMNS", 0],
 		["EV_PAGE_SIZE_CHANGED", 0],
+		["EV_SHOW_RECORD", 0],
 		["EV_TOGGLE_COLUMN", 0],
 		["EV_EXPORT_TABLE", 0],
 		["EV_CREATE_RECORD", event_flag_t.EVF_OUTPUT_EVENT],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.53",
+  "version": "7.23.55",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_yui_form.js

@@ -99,6 +99,7 @@ SDATA(data_type_t.DTP_STRING,   "render_mode",      0,  "exec", "'exec' interpre
 SDATA(data_type_t.DTP_STRING,   "pkey",             0,  "id",   "Primary key field name, used by form_mode"),
 SDATA(data_type_t.DTP_STRING,   "topic_name",       0,  "",     "Treedb topic name: labels use the i18n cascade '<topic>.<col>' -> '<col>' -> header (like table headers)"),
 SDATA(data_type_t.DTP_BOOLEAN,  "editable",         0,  false,  "Default is editable, set false to readonly"),
+SDATA(data_type_t.DTP_BOOLEAN,  "readonly",         0,  false,  "Show EVERY field read-only, whatever its schema says: a record being LOOKED at, not edited. Independent of `editable`, which drives the TABLE rendering; this one drives the FORM"),
 SDATA(data_type_t.DTP_BOOLEAN,  "selectable",       0,  true,   "Rows selectable with 'click' (BAD with editable=true)"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_checkbox",    0,  false,  "Show a first column with checkbox to select rows"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_rownum",      0,  false,  "Print first column with row number"),
@@ -586,7 +587,10 @@ function build_form_field_conf(gobj, field_desc)
 
         options: [],            // select,select2,radio options
         extras: {},             // extra html input/textarea attributes
-        readonly: !field_desc.is_writable,
+        /*  A form opened to LOOK at a record has no editable field, and
+         *  that is a property of the opening, not of the schema: the same
+         *  col is writable when the same form is opened to edit.  */
+        readonly: gobj_read_bool_attr(gobj, "readonly") || !field_desc.is_writable,
         required: field_desc.is_required,
         hidden: field_desc.is_hidden,
         default_value: field_desc.default_value,
@@ -1445,11 +1449,55 @@ function create_form_field(
         $extend.dataset.form_tag = tag;
         $extend.dataset.form_input_type = inputType;
         $extend.classList.add('yui-form-data-input');
+
+        apply_readonly_to_control(readonly, tag, $extend);
     }
 
     return $element;
 }
 
+/******************************************************************
+ *  `readonly` is an attribute of a TEXT control and of nothing else.
+ *
+ *  A `<select>` ignores it. So does a checkbox, and so does a radio:
+ *  the browser accepts the attribute, stores it, and lets the reader
+ *  change the value anyway. Only `disabled` stops them, and tom-select
+ *  is a widget of its own that has to be told through its API.
+ *
+ *  Which is why a col that is not `writable` used to render an
+ *  EDITABLE select: the field was built read-only, correctly, and the
+ *  three controls that cannot be read-only said nothing about it.
+ *
+ *  `disabled` is safe here: the record is collected by reading each
+ *  marked control's value, never by submitting the form, so a disabled
+ *  control is still read -- unlike in a native submit, where it would
+ *  be dropped.
+ ******************************************************************/
+function apply_readonly_to_control(readonly, tag, $extend)
+{
+    if(!readonly) {
+        return;
+    }
+
+    switch(tag) {
+        case 'select':
+        case 'checkbox':
+        case 'radio':
+            $extend.setAttribute("disabled", "disabled");
+            break;
+        case 'select2':
+            $extend.setAttribute("disabled", "disabled");
+            if($extend.tom_select) {
+                $extend.tom_select.disable();
+            }
+            break;
+        default:
+            /*  A text control already carries `readonly`, which is the
+             *  better of the two: it stays selectable and copyable.  */
+            break;
+    }
+}
+
 
 /******************************************************************
  *  Create coordinates

package/src/c_yui_treedb_topic_with_form.js

@@ -91,7 +91,7 @@ import {row_matches} from "./yui_row_search.js";
 
 import {t} from "i18next";
 
-import {plan_treedb_writes} from "./treedb_write_plan.js";
+import {plan_treedb_writes, READONLY_FORM_TOOLBAR} from "./treedb_write_plan.js";
 import {delete_impact} from "./delete_impact.js";
 
 import "./c_yui_treedb_topic_with_form.css";
@@ -1680,6 +1680,31 @@ function create_tabulator(gobj)
     tabulator.on("dataFiltered", function(filters, rows) {
         update_rowcount(Array.isArray(rows)? rows.length : undefined);
     });
+    /*  A click on a row, while the table is NOT in edition mode, OPENS the
+     *  record to be read. It used to do nothing at all: selection is driven
+     *  by the checkbox column and editing by the pencil, so the biggest
+     *  target on screen was the one thing that answered nothing.
+     *
+     *  Only outside edition mode: in it a click starts editing a cell, and
+     *  the pencil already opens the same record to be written.
+     *
+     *  Cells that carry an action of their own are left alone -- a json
+     *  preview opens its viewer, a hook opens its children, the Op buttons
+     *  edit and delete -- and the question is asked of the SCHEMA rather
+     *  than of the markup, so a new formatter does not silently start
+     *  opening two things at once.  */
+    tabulator.on("rowClick", function(e, row) {
+        if(gobj_read_bool_attr(gobj, "editable")) {
+            return;
+        }
+        let $cell = e.target? e.target.closest(".tabulator-cell") : null;
+        let field = $cell? $cell.getAttribute("tabulator-field") : null;
+        if(field && cell_has_its_own_action(gobj, field)) {
+            return;
+        }
+        gobj_send_event(gobj, "EV_SHOW_RECORD", {index: row.getPosition()}, gobj);
+    });
+
     tabulator.on("rowSelected", function(row) {
         gobj_send_event(gobj, "EV_SELECT_ROWS", {rows: [row.getData()]}, gobj);
     });
@@ -1930,10 +1955,25 @@ function transform__treedb_value_2_table_value(gobj, col, value, row, field)
 }
 
 /************************************************************
- *  Build the form template from desc.cols: only user-editable
- *  fields reach the form — writable cols, fkeys (linkable) and
- *  the pkey (the hosted C_YUI_FORM's form_mode drives the
- *  pkey's readonly/required state).
+ *  Build the form template from desc.cols: EVERY field of the
+ *  record, the ones that cannot be written included.
+ *
+ *  They used to be dropped, and a record was then shown as the
+ *  handful of its fields somebody may type: an asset opened as
+ *  its id alone, with its type, its size, its date and where it
+ *  came from -- everything a person opens an asset to read --
+ *  nowhere on screen. What a form is for is READING a record;
+ *  writing it is one of the two things you can do next.
+ *
+ *  C_YUI_FORM renders a col that is not `writable` read-only on
+ *  its own (`build_form_field_conf`), so this is the whole of
+ *  it. What must NOT follow is sending them back:
+ *  `transform__form_record_2_treedb_record()` drops them, and
+ *  the reason is written there.
+ *
+ *  Still out: hooks (a hook is not a field of the record, it is
+ *  the children hanging off it), hidden cols, and the `_`
+ *  scaffolding the table adds.
  ************************************************************/
 function build_form_template(gobj)
 {
@@ -1950,10 +1990,6 @@ function build_form_template(gobj)
         if(field_desc.type === "hook") {
             continue;   // hooks don't appear in forms
         }
-        if(!field_desc.is_writable &&
-                field_desc.type !== "fkey" && col.id !== desc.pkey) {
-            continue;
-        }
         template.push(col);
     }
     return template;
@@ -2023,6 +2059,14 @@ function open_form_dialog(gobj, mode, record)
         title = t(topic_name) + (empty_string(rid) ? "" : " — " + rid);
     }
 
+    /*  "view" is an "update" that writes nothing: same title, same pkey
+     *  handling (readonly), every field read-only and the write half of
+     *  the toolbar gone. It is what a row click opens when the table is
+     *  NOT in edition mode -- reading a record is the ordinary thing to
+     *  want, and until now a click on a row did nothing at all.  */
+    let view_only = (mode === "view");
+    let form_mode = view_only? "update" : mode;
+
     /*  A flex column so the hosted form takes the dialog height: fields
      *  scroll internally and the form's bottom toolbar stays visible. */
     let $body = createElement2(
@@ -2038,19 +2082,22 @@ function open_form_dialog(gobj, mode, record)
             template:       build_form_template(gobj),
             record:         record,
             fkey_options:   build_fkey_options(gobj),
-            form_mode:      mode,
+            form_mode:      form_mode,
+            readonly:       view_only,
             /*  A read-only topic still OPENS its form -- looking at a record
              *  is the point of a replica -- with the cells not editable and
              *  the write half of the toolbar gone. A null plan leaves the
              *  form's own default alone.  */
-            ...(form_plan.form_toolbar ? {toolbar: form_plan.form_toolbar} : {}),
+            ...((view_only? READONLY_FORM_TOOLBAR : form_plan.form_toolbar)?
+                {toolbar: view_only? READONLY_FORM_TOOLBAR.slice()
+                                   : form_plan.form_toolbar} : {}),
             /*  Editing the raw topic record: structured cols
              *  (template / table / coordinates) are raw JSON editors,
              *  not interpreted into sub-widgets (the pre-merge behaviour). */
             render_mode:    "edit",
             pkey:           desc.pkey || "id",
             topic_name:     topic_name,
-            editable:       !form_plan.readonly,
+            editable:       !form_plan.readonly && !view_only,
             $parent:        $body
         },
         gobj
@@ -2446,6 +2493,42 @@ function show_edit_form(gobj, row, index)
     open_form_dialog(gobj, mode, row);
 }
 
+/************************************************************
+ *  Does a click on this column already mean something else?
+ *
+ *  The `_` columns are the table's own scaffolding (the selection
+ *  checkbox, the Op buttons); a hook opens its children and a col
+ *  holding a json document opens it in a viewer. Anything else is
+ *  plain data, and a click on it means "show me this record".
+ ************************************************************/
+const CELL_WITH_ACTION = [
+    "hook", "object", "dict", "template", "array", "list",
+    "coordinates", "blob", "gbuffer"
+];
+
+function cell_has_its_own_action(gobj, field)
+{
+    if(!field || field.charAt(0) === '_') {
+        return true;
+    }
+    let col = get_schema_col(gobj, field);
+    if(!col) {
+        return false;
+    }
+    const field_desc = treedb_get_field_desc(col);
+    return CELL_WITH_ACTION.includes(field_desc.type) ||
+           CELL_WITH_ACTION.includes(field_desc.real_type);
+}
+
+/************************************************************
+ *  Show a record to be READ: every field, none of them editable.
+ *  What a row click opens while the table is not in edition mode.
+ ************************************************************/
+function show_view_form(gobj, row)
+{
+    open_form_dialog(gobj, "view", row);
+}
+
 /************************************************************
  *  Show the edit "create" form to a new record
  *  internally called from the top toolbar +New button
@@ -2476,6 +2559,8 @@ function get_schema_col(gobj, id)
  ************************************************************/
 function transform__form_record_2_treedb_record(gobj, kw, operation)
 {
+    let desc = gobj_read_attr(gobj, "desc");
+    let pkey = desc.pkey || "id";
     let row = {};
 
     for(let field_name of Object.keys(kw)) {
@@ -2483,12 +2568,33 @@ function transform__form_record_2_treedb_record(gobj, kw, operation)
             continue;
         }
         let col = get_schema_col(gobj, field_name);
-        if(col) {
-            let value = kw[field_name];
-            row[field_name] = transform__form_value_2_treedb_value(
-                gobj, col, value, operation
-            );
+        if(!col) {
+            continue;
+        }
+
+        /*  The form SHOWS every field and sends back only what the topic
+         *  accepts: the writable cols, the fkeys (a link is edited by
+         *  linking) and the pkey, which is not written but is what
+         *  ADDRESSES the record.
+         *
+         *  It matters because `treedb_update_node()` does not check
+         *  `writable` -- it writes any col it is handed -- so a read-only
+         *  field travelling back is written with whatever the form made of
+         *  it, and the fields that describe a record are exactly the ones
+         *  that do not survive a round trip through a widget: `t` is an
+         *  integer rendered as a date. Nothing would look wrong until the
+         *  stored timestamp had moved.
+         */
+        const field_desc = treedb_get_field_desc(col);
+        if(!field_desc.is_writable &&
+                field_desc.type !== "fkey" && col.id !== pkey) {
+            continue;
         }
+
+        let value = kw[field_name];
+        row[field_name] = transform__form_value_2_treedb_value(
+            gobj, col, value, operation
+        );
     }
     return row;
 }
@@ -3773,6 +3879,29 @@ function ac_open_columns(gobj, event, kw, src)
     return 0;
 }
 
+/************************************************************
+ *  A row was clicked outside edition mode: open the record to be read.
+ ************************************************************/
+function ac_show_record(gobj, event, kw, src)
+{
+    let tabulator = gobj_read_attr(gobj, "tabulator");
+    let index = kw? kw.index : undefined;
+    if(!tabulator || typeof index !== "number") {
+        log_error(`${gobj_short_name(gobj)}: no row ${index} to show`);
+        return -1;
+    }
+
+    let row = tabulator.getRowFromPosition(index);
+    if(!row) {
+        log_error(`${gobj_short_name(gobj)}: row ${index} is gone`);
+        return -1;
+    }
+
+    show_view_form(gobj, row.getData());
+
+    return 0;
+}
+
 /************************************************************
  *  The reader picked another page size: remember it, so coming back to
  *  this topic opens where they left it instead of at 200.
@@ -3933,6 +4062,7 @@ function create_gclass(gclass_name)
             ["EV_SEARCH",               ac_search,             null],
             ["EV_OPEN_COLUMNS",         ac_open_columns,       null],
             ["EV_PAGE_SIZE_CHANGED",    ac_page_size_changed,  null],
+            ["EV_SHOW_RECORD",          ac_show_record,        null],
             ["EV_TOGGLE_COLUMN",        ac_toggle_column,      null],
             ["EV_EXPORT_TABLE",         ac_export_table,       null],
             ["EV_SHOW",                 ac_show,               null],
@@ -3974,6 +4104,7 @@ function create_gclass(gclass_name)
         ["EV_SEARCH",               0],
         ["EV_OPEN_COLUMNS",         0],
         ["EV_PAGE_SIZE_CHANGED",    0],
+        ["EV_SHOW_RECORD",          0],
         ["EV_TOGGLE_COLUMN",        0],
         ["EV_EXPORT_TABLE",         0],