Adapt nextmatch to work with webcomponents + readonly datetime widget

api/js/etemplate/Et2Date/DateStyles.ts

@@ -0,0 +1,12 @@
+import {css} from "@lion/core";
+
+export const dateStyles = css`
+	:host {
+		display: inline-block;
+		white-space: nowrap;
+		min-width: 20ex;
+	}
+	.overdue {
+		color: red; // var(--whatever the theme color)
+	}
+`;

api/js/etemplate/Et2Date/Et2Date.ts

@@ -13,6 +13,7 @@ import {css, html} from "@lion/core";
 import {LionInputDatepicker} from "@lion/input-datepicker";
 import {Unparseable} from "@lion/form-core";
 import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
+import {dateStyles} from "./DateStyles";
 
 
 /**
@@ -155,7 +156,7 @@ export function parseDateTime(dateTimeString)
 	{
 		if(!isNaN(dateTimeString) && parseInt(dateTimeString) == dateTimeString)
 		{
-			this.egw().debug("warn", "Invalid date/time string: " + dateTimeString);
+			console.warn("Invalid date/time string: " + dateTimeString);
 			dateTimeString *= 1000;
 		}
 		try
@@ -275,6 +276,7 @@ export class Et2Date extends Et2InputWidget(LionInputDatepicker)
 	{
 		return [
 			...super.styles,
+			dateStyles,
 			css`
 			:host([focused]) ::slotted(button), :host(:hover) ::slotted(button) {
 				display: inline-block;

api/js/etemplate/Et2Date/Et2DateTimeReadonly.ts

@@ -0,0 +1,74 @@
+import {css, html, LitElement} from "@lion/core";
+import {formatDateTime, parseDateTime} from "./Et2Date";
+import {et2_IDetachedDOM} from "../et2_core_interfaces";
+import {Et2Widget} from "../Et2Widget/Et2Widget";
+import {dateStyles} from "./DateStyles";
+
+/**
+ * This is a stripped-down read-only widget used in nextmatch
+ */
+export class Et2DateTimeReadonly extends Et2Widget(LitElement) implements et2_IDetachedDOM
+{
+	private value : any;
+
+	static get styles()
+	{
+		return [
+			...super.styles,
+			dateStyles
+		];
+	}
+
+	static get properties()
+	{
+		return {
+			...super.properties,
+			value: String,
+		}
+	}
+
+	set_value(value)
+	{
+		this.value = value;
+	}
+
+	render()
+	{
+		let parsed : Date | Boolean = this.value ? parseDateTime(this.value) : false
+
+		return html`
+            <time ${this.id ? html`id="${this._dom_id}"` : ''}
+                  datetime="${parsed ? formatDateTime(<Date>parsed, {dateFormat: "Y-m-d", timeFormat: "H:i:s"}) : ""}">
+                ${this.value ? formatDateTime(<Date>parsed) : ''}
+            </time>
+		`;
+	}
+
+	getDetachedAttributes(attrs)
+	{
+		attrs.push("id", "value", "class");
+	}
+
+	getDetachedNodes() : HTMLElement[]
+	{
+		return [<HTMLElement><unknown>this];
+	}
+
+	setDetachedAttributes(_nodes : HTMLElement[], _values : object, _data? : any) : void
+	{
+		// Do nothing, since we can't actually stop being a DOM node...
+	}
+
+	loadFromXML()
+	{
+		// nope
+	}
+
+	loadingFinished()
+	{
+		// already done, I'm a wc with no children
+	}
+}
+
+// @ts-ignore TypeScript is not recognizing that Et2Date is a LitElement
+customElements.define("et2-datetime_ro", Et2DateTimeReadonly);

api/js/etemplate/Et2Widget/Et2Widget.ts

@@ -93,6 +93,12 @@ const Et2WidgetMixin = (superClass) =>
 			return {
 				...super.properties,
 
+				/**
+				 * Widget ID.  Optional, and not always the same as the DOM ID if the widget is inside something
+				 * else that also has an ID.
+				 */
+				id: {type: String, reflect: false},
+
 				/**
 				 * CSS Class.  This class is applied to the _outside_, on the web component itself.
 				 * Due to how WebComponents work, this might not change anything inside the component.
@@ -606,6 +612,11 @@ const Et2WidgetMixin = (superClass) =>
 			}
 		}
 
+		transformAttributes(attrs)
+		{
+			transformAttributes(this, this.getArrayMgr("content"), attrs);
+		}
+
 		iterateOver(_callback : Function, _context, _type)
 		{
 			if(typeof _type == "undefined" || et2_implements_registry[_type] && et2_implements_registry[_type](this))
@@ -817,8 +828,12 @@ const Et2WidgetMixin = (superClass) =>
 			// Create the copy
 			var copy = <Et2WidgetClass>this.cloneNode();
 
-			let widget_class = window.customElements.get(this.nodeName);
+			let widget_class = window.customElements.get(this.localName);
-			let properties = widget_class ? widget_class.properties() : {};
+			let properties = widget_class ? widget_class.properties : [];
+			for(let key in properties)
+			{
+				copy[key] = this[key];
+			}
 
 			if(_parent)
 			{
@@ -1078,10 +1093,28 @@ export function loadWebComponent(_nodeName : string, _template_node, parent : Et
 						  _template_node.getAttribute("id"), _template_node.getAttribute("readonly"),
 						  typeof parent.readonly !== "undefined" ? parent.readonly : false) : false;
 
-	// Apply any set attributes - widget will do its own coercion
+	let attrs = {};
 	_template_node.getAttributeNames().forEach(attribute =>
 	{
-		let attrValue = _template_node.getAttribute(attribute);
+		attrs[attribute] = _template_node.getAttribute(attribute);
+	});
+	widget.transformAttributes(attrs);
+
+	// Children need to be loaded
+	widget.loadFromXML(_template_node);
+
+	return widget;
+}
+
+function transformAttributes(widget, mgr : et2_arrayMgr, attributes)
+{
+
+	const widget_class = window.customElements.get(widget.localName);
+
+	// Apply any set attributes - widget will do its own coercion
+	for(let attribute in attributes)
+	{
+		let attrValue = attributes[attribute];
 
 		// If there is not attribute set, ignore it.  Widget sets its own default.
 		if(typeof attrValue === "undefined")
@@ -1095,7 +1128,7 @@ export function loadWebComponent(_nodeName : string, _template_node, parent : Et
 			case Boolean:
 				// If the attribute is marked as boolean, parse the
 				// expression as bool expression.
-				attrValue = mgr.parseBoolExpression(attrValue);
+				attrValue = mgr ? mgr.parseBoolExpression(attrValue) : attrValue;
 				break;
 			case Function:
 				// We parse it into a function here so we can pass in the widget as context.
@@ -1106,8 +1139,8 @@ export function loadWebComponent(_nodeName : string, _template_node, parent : Et
 				}
 				break;
 			default:
-				attrValue = mgr.expandName(attrValue);
+				attrValue = mgr ? mgr.expandName(attrValue) : attrValue;
-				if(!_template_node.getAttribute("no_lang") && widget_class.translate[attribute])
+				if(!attributes.no_lang && widget_class.translate[attribute])
 				{
 					// allow attribute to contain multiple translated sub-strings eg: {Firstname}.{Lastname}
 					if(attrValue.indexOf('{') !== -1)
@@ -1136,7 +1169,7 @@ export function loadWebComponent(_nodeName : string, _template_node, parent : Et
 			// Set as property, not attribute
 			widget[attribute] = attrValue;
 		}
-	});
+	}
 
 	if(widget_class.getPropertyOptions("value") && widget.set_value)
 	{
@@ -1149,9 +1182,4 @@ export function loadWebComponent(_nodeName : string, _template_node, parent : Et
 			}
 		}
 	}
-
-	// Children need to be loaded
-	widget.loadFromXML(_template_node);
-
-	return widget;
 }

api/js/etemplate/et2_extension_nextmatch_rowProvider.ts

@@ -23,6 +23,7 @@ import {et2_arrayMgrs_expand} from "./et2_core_arrayMgr";
 import {et2_dataview_grid} from "./et2_dataview_view_grid";
 import {egw} from "../jsapi/egw_global";
 import {et2_IDetachedDOM, et2_IDOMNode} from "./et2_core_interfaces";
+import {Et2DateTimeReadonly} from "./Et2Date/Et2DateTimeReadonly";
 
 /**
  * The row provider contains prototypes (full clonable dom-trees)
@@ -37,6 +38,7 @@ export class et2_nextmatch_rowProvider
 	private _rootWidget : any;
 	private _template : any;
 	private _dataRow : any;
+
 	/**
 	 * Creates the nextmatch row provider.
 	 *
@@ -143,8 +145,15 @@ export class et2_nextmatch_rowProvider
 				for(var j = 0; j < entry.data.length; j++)
 				{
 					var set = entry.data[j];
+					if(typeof entry.widget.options != "undefined")
+					{
 						entry.widget.options[set.attribute] = mgrs["content"].expandName(set.expression);
 					}
+					else if(entry.widget.getAttributeNames().indexOf(set.attribute) >= 0)
+					{
+						entry.widget.setAttribute(set.attribute, mgrs["content"].expandName(set.expression));
+					}
+				}
 			}
 
 			// Create the row widget
@@ -159,6 +168,7 @@ export class et2_nextmatch_rowProvider
 		for(var i = 0; i < this._template.seperated.detachable.length; i++)
 		{
 			var entry = this._template.seperated.detachable[i];
+			let widget = entry.widget;
 
 			// Parse the attribute expressions
 			var data : any = {};
@@ -167,8 +177,15 @@ export class et2_nextmatch_rowProvider
 				var set = entry.data[j];
 				data[set.attribute] = mgrs["content"].expandName(set.expression);
 			}
-
+			// WebComponent IS the node, and we've already cloned it
-			// Retrieve all DOM-Nodes
+			if(typeof window.customElements.get(widget.localName) != "undefined")
+			{
+				// Use the clone, not the original
+				widget = entry.nodeFuncs[0](row)
+			}
+			else
+			{
+				// Retrieve all DOM-Nodes (legacy widgets)
 				var nodes = new Array(entry.nodeFuncs.length);
 				for(var j = 0; j < nodes.length; j++)
 				{
@@ -184,19 +201,20 @@ export class et2_nextmatch_rowProvider
 						continue;
 					}
 				}
+			}
 
 			// Set the array managers first
-			entry.widget._mgrs = mgrs;
+			widget.setArrayMgrs(mgrs);
 			if(typeof data.id != "undefined")
 			{
-				entry.widget.id = data.id;
+				widget.id = data.id;
 			}
 
 			// Adjust data for that row
-			entry.widget.transformAttributes?.call(entry.widget, data);
+			widget.transformAttributes?.call(widget, data);
 
 			// Call the setDetachedAttributes function
-			entry.widget.setDetachedAttributes(nodes, data, _data);
+			widget.setDetachedAttributes(nodes, data, _data);
 		}
 
 		// Insert the row into the tr
@@ -207,7 +225,8 @@ export class et2_nextmatch_rowProvider
 		if(typeof _data.content["is_parent"] !== "undefined"
 			&& _data.content["is_parent"])
 		{
-			_row.makeExpandable(true, function () {
+			_row.makeExpandable(true, function()
+			{
 				return this._subgridCallback.call(this._context,
 					_row, _data, _controller);
 			}, this);
@@ -226,7 +245,8 @@ export class et2_nextmatch_rowProvider
 			{
 				top_controller.kept_expansion.splice(expansion_index, 1);
 				// Use a timeout since the DOM nodes might not be finished yet
-				window.setTimeout(function() {
+				window.setTimeout(function()
+				{
 					_row.expansionButton.trigger('click');
 				}, et2_dataview_grid.ET2_GRID_INVALIDATE_TIMEOUT);
 			}
@@ -280,6 +300,28 @@ export class et2_nextmatch_rowProvider
 			};
 
 			// Get all attribute values
+			let attrs = [];
+			if(_widget.getDetachedAttributes)
+			{
+				_widget.getDetachedAttributes(attrs);
+			}
+			for(let key of attrs)
+			{
+				let attr_name = key;
+				let val = _widget[key];
+				if(typeof val == "string" && val.indexOf("$") >= 0)
+				{
+					hasAttr = true;
+					widgetData.data.push({
+						"attribute": attr_name,
+						"expression": val
+					});
+				}
+			}
+
+			// Legacy
+			if(_widget.instanceOf(et2_widget))
+			{
 				for(const key in _widget.attributes)
 				{
 					if(typeof _widget.attributes[key] !== "object")
@@ -295,12 +337,6 @@ export class et2_nextmatch_rowProvider
 					{
 						val = _widget.options[key];
 					}
-				// Handle web components
-				else if(_widget.attributes[key].value)
-				{
-					val = _widget.attributes[key].value;
-					attr_name = _widget.attributes[key].name;
-				}
 					// TODO: Improve detection
 					if(typeof val == "string" && val.indexOf("$") >= 0)
 					{
@@ -311,6 +347,7 @@ export class et2_nextmatch_rowProvider
 						});
 					}
 				}
+			}
 
 			// Add the entry if there is any data in it
 			if(hasAttr)
@@ -352,7 +389,8 @@ export class et2_nextmatch_rowProvider
 			// Check whether the widget parents are not allready in the "remaining"
 			// slot -  if this is the case do not include the widget at all.
 			var insertWidget = true;
-			var checkWidget = function (_widget) {
+			var checkWidget = function(_widget)
+			{
 				if(_widget.parent != null)
 				{
 					for(var i = 0; i < remaining.length; i++)
@@ -377,12 +415,15 @@ export class et2_nextmatch_rowProvider
 
 			// Check whether the widget implements the et2_IDetachedDOM interface
 			var isDetachable = false;
-			if (widget.implements(et2_IDetachedDOM))
+			if(widget.implements && widget.implements(et2_IDetachedDOM))
 			{
 				// Get all attributes the widgets supports to be set in the
 				// "detached" mode
 				var supportedAttrs = [];
+				if(widget.getDetachedAttributes)
+				{
 					widget.getDetachedAttributes(supportedAttrs);
+				}
 				supportedAttrs.push("id");
 				isDetachable = true;
 
@@ -529,7 +570,7 @@ export class et2_nextmatch_rowProvider
 			var entry = _rowTemplate.seperated.detachable[i];
 
 			// Get all needed nodes from the widget
-			var nodes = entry.widget.getDetachedNodes();
+			var nodes = window.customElements.get(entry.widget.localName) ? [entry.widget] : entry.widget.getDetachedNodes();
 			var nodeFuncs = entry.nodeFuncs = new Array(nodes.length);
 
 			// Record the path to each DOM-Node
@@ -575,7 +616,10 @@ export class et2_nextmatch_rowProvider
 			{
 				// Accept either cat, cat_id or category as ID, and look there for category settings
 				var category_location = _data["class"].match(/(cat(_id|egory)?)/);
-				if(category_location) category_location = category_location[0];
+				if(category_location)
+				{
+					category_location = category_location[0];
+				}
 
 				cats = classes.match(this.cat_regexp) || [];
 				classes = classes.replace(this.cat_regexp, '');
@@ -609,6 +653,7 @@ export class et2_nextmatch_rowWidget extends et2_widget implements et2_IDOMNode
 {
 	private _widgets : any[];
 	private _row : any;
+
 	/**
 	 * Constructor
 	 *
@@ -643,7 +688,10 @@ export class et2_nextmatch_rowWidget extends et2_widget implements et2_IDOMNode
 		for(var i = 0; i < _widgets.length; i++)
 		{
 			// Disabled columns might be missing widget - skip it
-			if(!_widgets[i]) continue;
+			if(!_widgets[i])
+			{
+				continue;
+			}
 
 			this._widgets[i] = _widgets[i].clone(this);
 			this._widgets[i].loadingFinished();
@@ -668,7 +716,10 @@ export class et2_nextmatch_rowWidget extends et2_widget implements et2_IDOMNode
 		for(var i = 0; i < this._widgets.length; i++)
 		{
 			// Disabled columns might be missing widget - skip it
-			if(!this._widgets[i]) continue;
+			if(!this._widgets[i])
+			{
+				continue;
+			}
 			if(this._widgets[i] == _sender && this._row.childNodes[row_id])
 			{
 				return this._row.childNodes[row_id].childNodes[0]; // Return the i-th td tag
@@ -689,6 +740,7 @@ export class et2_nextmatch_rowTemplateWidget extends et2_widget implements et2_I
 	private _root : any;
 	private _row : any;
 	private _widgets : any[];
+
 	/**
 	 * Constructor
 	 *

api/js/etemplate/etemplate2.ts

@@ -26,6 +26,7 @@ import {egwIsMobile} from "../egw_action/egw_action_common.js";
 import './Et2Box/Et2Box';
 import './Et2Button/Et2Button';
 import './Et2Date/Et2DateTime';
+import './Et2Date/Et2DateTimeReadonly';
 import './Et2Textarea/Et2Textarea';
 import './Et2Textbox/Et2Textbox';
 import './Et2Colorpicker/Et2Colorpicker';
@@ -199,11 +200,17 @@ export class etemplate2
 					//Calculate the excess height
 					excess_height = egw(window).is_popup() ? jQuery(window).height() - jQuery(self._DOMContainer).height() - appHeader.outerHeight() + 11 : 0;
 					// Recalculate excess height if the appheader is shown
-					if (appHeader.length > 0 && appHeader.is(':visible')) excess_height -= appHeader.outerHeight() - 9;
+					if(appHeader.length > 0 && appHeader.is(':visible'))
+					{
+						excess_height -= appHeader.outerHeight() - 9;
+					}
 
 					// Do not resize if the template height is bigger than screen available height
 					// For templates which have sub templates and they are bigger than screenHeight
-					if (screen.availHeight < jQuery(self._DOMContainer).height()) excess_height = 0;
+					if(screen.availHeight < jQuery(self._DOMContainer).height())
+					{
+						excess_height = 0;
+					}
 
 					// If we're visible, call the "resize" event of all functions which implement the
 					// "IResizeable" interface
@@ -247,7 +254,10 @@ export class etemplate2
 		// call our destroy_session handler, if it is not already unbind, and unbind it after
 		if(this.destroy_session)
 		{
-			if (!_keep_session) this.destroy_session();
+			if(!_keep_session)
+			{
+				this.destroy_session();
+			}
 			this.unbind_unload();
 		}
 		if(this._widgetContainer != null)
@@ -263,7 +273,10 @@ export class etemplate2
 		// Remove self from the index
 		for(const name in etemplate2.templates)
 		{
-			if (typeof etemplate2._byTemplate[name] == "undefined") continue;
+			if(typeof etemplate2._byTemplate[name] == "undefined")
+			{
+				continue;
+			}
 			for(let i = 0; i < etemplate2._byTemplate[name].length; i++)
 			{
 				if(etemplate2._byTemplate[name][i] === this)
@@ -611,7 +624,10 @@ export class etemplate2
 					let still_deferred = 0;
 					jQuery(deferred).each(function()
 					{
-						if (this.state() == "pending") still_deferred++;
+						if(this.state() == "pending")
+						{
+							still_deferred++;
+						}
 					});
 					if(still_deferred > 0)
 					{
@@ -647,7 +663,10 @@ export class etemplate2
 
 						// mobile device, focus only if the field is empty (usually means new entry)
 						// should focus always for non-mobile one
-						if (egwIsMobile() && $input.val() == "" || !egwIsMobile()) $input.focus();
+						if(egwIsMobile() && $input.val() == "" || !egwIsMobile())
+						{
+							$input.focus();
+						}
 					}
 
 					// Tell others about it
@@ -691,7 +710,10 @@ export class etemplate2
 						}
 						const end_time = (new Date).getTime();
 						let gen_time_div = jQuery('#divGenTime_' + appname);
-						if (!gen_time_div.length) gen_time_div = jQuery('.pageGenTime');
+						if(!gen_time_div.length)
+						{
+							gen_time_div = jQuery('.pageGenTime');
+						}
 						gen_time_div.find('.et2RenderTime').remove();
 						gen_time_div.append('<span class="et2RenderTime">' + egw.lang('eT2 rendering took %1s', '' + ((end_time - start_time) / 1000)) + '</span>');
 					}
@@ -737,9 +759,15 @@ export class etemplate2
 				for(let i = 0; i < _xmldoc.childNodes.length; i++)
 				{
 					const template = _xmldoc.childNodes[i];
-					if (template.nodeName.toLowerCase() != "template") continue;
+					if(template.nodeName.toLowerCase() != "template")
+					{
+						continue;
+					}
 					etemplate2.templates[template.getAttribute("id")] = template;
-					if (!_name) this.name = template.getAttribute("id");
+					if(!_name)
+					{
+						this.name = template.getAttribute("id");
+					}
 				}
 				_load.apply(this, []);
 			}, this);
@@ -821,7 +849,10 @@ export class etemplate2
 			let target = values;
 			for(i = 0; i < path.length; i++)
 			{
-				if (!values[path[i]]) values[path[i]] = {};
+				if(!values[path[i]])
+				{
+					values[path[i]] = {};
+				}
 				target = values[path[i]];
 			}
 			if(target != values || button.id.indexOf('[') != -1 && path.length == 0)
@@ -841,7 +872,10 @@ export class etemplate2
 				for(i = 0; i < indexes.length; i++)
 				{
 					idx = indexes[i];
-					if (!target[idx] || target[idx]['$row_cont']) target[idx] = i < indexes.length - 1 ? {} : true;
+					if(!target[idx] || target[idx]['$row_cont'])
+					{
+						target[idx] = i < indexes.length - 1 ? {} : true;
+					}
 					target = target[idx];
 				}
 			}
@@ -923,7 +957,10 @@ export class etemplate2
 				api.loading_prompt('et2_submit_spinner', true, api.lang(typeof async == 'string' ? async : 'Please wait...'));
 				async = true;
 			}
-			if (button) this._set_button(button, values);
+			if(button)
+			{
+				this._set_button(button, values);
+			}
 
 			// Create the request object
 			if(this.menuaction)
@@ -982,7 +1019,10 @@ export class etemplate2
 
 		if(canSubmit)
 		{
-			if (button) this._set_button(button, values);
+			if(button)
+			{
+				this._set_button(button, values);
+			}
 
 			// unbind our session-destroy handler, as we are submitting
 			this.unbind_unload();
@@ -1209,10 +1249,16 @@ export class etemplate2
 		this._widgetContainer.iterateOver(function(_widget)
 		{
 			// Skip widgets from a different etemplate (home)
-			if (_widget.getInstanceManager() != this) return;
+			if(_widget.getInstanceManager() != this)
+			{
+				return;
+			}
 
 			// Skip hidden widgets
-			if (jQuery(_widget.getDOMNode()).filter(':visible').length === 0) return;
+			if(jQuery(_widget.getDOMNode()).filter(':visible').length === 0)
+			{
+				return;
+			}
 
 			const result = _widget.beforePrint();
 			if(typeof result == "object" && result.done)
@@ -1349,7 +1395,10 @@ export class etemplate2
 		// handle framework.setSidebox calls
 		if(window.framework && jQuery.isArray(data.setSidebox))
 		{
-			if (data['fw-target']) data.setSidebox[0] = data['fw-target'];
+			if(data['fw-target'])
+			{
+				data.setSidebox[0] = data['fw-target'];
+			}
 
 			window.framework.setSidebox.apply(window.framework, data.setSidebox);
 		}
@@ -1378,7 +1427,10 @@ export class etemplate2
 						// Node has children already?  Check for loading over an
 						// existing etemplate
 						const old = etemplate2.getById(node.id);
-						if (old) old.clear();
+						if(old)
+						{
+							old.clear();
+						}
 					}
 					if(data['open_target'] && !uniqueId.match(data['open_target']))
 					{
@@ -1421,7 +1473,10 @@ export class etemplate2
 					tmpWidget = tmpWidget.getParent();
 				}
 				//Acvtivate the tab where the widget with validation error is located
-				if (tmpWidget.getType() == 'tabbox') (<et2_tabbox><unknown>tmpWidget).activateTab(widget);
+				if(tmpWidget.getType() == 'tabbox')
+				{
+					(<et2_tabbox><unknown>tmpWidget).activateTab(widget);
+				}
 
 			}
 		}
@@ -1493,7 +1548,10 @@ export class etemplate2
 }
 
 // make etemplate2 global, as we need it to check an app uses it and then call methods on it
-if (typeof window.etemplate2 === 'undefined') window['etemplate2'] = etemplate2;
+if(typeof window.etemplate2 === 'undefined')
+{
+	window['etemplate2'] = etemplate2;
+}
 
 // Calls etemplate2_handle_response in the context of the object which
 // requested the response from the server