egroupware/api/js/etemplate/Et2Widget.ts

import {et2_IDOMNode, et2_implements_registry} from "./et2_core_interfaces";
import {et2_arrayMgr} from "./et2_core_arrayMgr";
import {et2_attribute_registry, et2_registry, et2_widget} from "./et2_core_widget";
import {etemplate2} from "./etemplate2";
import {et2_compileLegacyJS} from "./et2_core_legacyJSFunctions";
import {et2_cloneObject, et2_csvSplit} from "./et2_core_common";
// @ts-ignore
import {IegwAppLocal} from "../jsapi/egw_global";
import {ClassWithAttributes, ClassWithInterfaces} from "./et2_core_inheritance";
import {LitElement} from "@lion/core";

/**
 * This mixin will allow any LitElement to become an Et2Widget
 *
 * Usage:
 * @example
 * export class Et2Loading extends Et2Widget(BXLoading) { ... }
 * @example
 * export class Et2Button extends Et2InputWidget(Et2Widget(BXButton)) { ... }
 *
 * @see Mixin explanation https://lit.dev/docs/composition/mixins/
 */

type Constructor<T = {}> = new (...args : any[]) => T;
export const Et2Widget = <T extends Constructor<LitElement>>(superClass : T) =>
{
	class Et2WidgetClass extends superClass implements et2_IDOMNode
	{

		/** et2_widget compatability **/
		protected _mgrs : et2_arrayMgr[] = [];
		protected _parent : Et2WidgetClass | et2_widget | null = null;
		private _inst : etemplate2 | null = null;
		private supportedWidgetClasses = [];

		/**
		 * Not actually required by et2_widget, but needed to keep track of non-webComponent children
		 */
		private _legacy_children : et2_widget[] = [];

		/**
		 * Properties - default values, and actually creating them as fields
		 */
		private label : string = "";
		private statustext : string = "";
		private disabled : Boolean = false;


		/** WebComponent **/
		static get properties()
		{
			return {
				...super.properties,

				/**
				 * Defines whether this widget is visible.
				 * Not to be confused with an input widget's HTML attribute 'disabled'.",
				 */
				disabled: {
					type: Boolean,
					reflect: true
				},

				/**
				 * Tooltip which is shown for this element on hover
				 */
				statustext: {type: String},

				label: {type: String},
				onclick: {
					type: Function,
					converter: (value) =>
					{
						debugger;
						return et2_compileLegacyJS(value, this, this);
					}
				}
			};
		}

		/**
		 * Widget Mixin constructor
		 *
		 * Note the ...args parameter and super() call
		 *
		 * @param args
		 */
		constructor(...args : any[])
		{
			super(...args);
		}

		connectedCallback()
		{
			super.connectedCallback();

			this.set_label(this.label);

			if(this.statustext)
			{
				this.egw().tooltipBind(this, this.statustext);
			}
			if(this.onclick && !this.disabled)
			{
				this.addEventListener("click", this._handleClick.bind(this));
			}
		}

		disconnectedCallback()
		{
			this.egw().tooltipUnbind(this);

			this.removeEventListener("click", this._handleClick.bind(this));
		}

		/**
		 * NOT the setter, since we cannot add to the DOM before connectedCallback()
		 *
		 * TODO: This is not best practice.  Should just set property, DOM modification should be done in render
		 * https://lit-element.polymer-project.org/guide/templates#design-a-performant-template
		 *
		 * @param value
		 */
		set_label(value)
		{
			let oldValue = this.label;

			// Remove old
			let oldLabels = this.getElementsByClassName("et2_label");
			while(oldLabels[0])
			{
				this.removeChild(oldLabels[0]);
			}

			this.label = value;
			if(value)
			{
				let label = document.createElement("span");
				label.classList.add("et2_label");
				label.textContent = this.label;
				// We should have a slot in the template for the label
				//label.slot="label";
				this.appendChild(label);
				this.requestUpdate('label', oldValue);
			}
		}

		/**
		 * Event handlers
		 */

		/**
		 * Click handler calling custom handler set via onclick attribute to this.onclick
		 *
		 * @param _ev
		 * @returns
		 */
		_handleClick(_ev : MouseEvent) : boolean
		{
			if (typeof this.onclick == 'function')
			{
				// Make sure function gets a reference to the widget, splice it in as 2. argument if not
				var args = Array.prototype.slice.call(arguments);
				if(args.indexOf(this) == -1) args.splice(1, 0, this);

				return this.onclick.apply(this, args);
			}

			return true;
		}

		/** et2_widget compatability **/
		destroy()
		{
			// Not really needed, use the disconnectedCallback() and let the browser handle it
		}

		isInTree() : boolean
		{
			// TODO: Probably should watch the state or something
			return true;
		}

		/**
		 * Loads the widget tree from an XML node
		 *
		 * @param _node xml node
		 */
		loadFromXML(_node)
		{
			// Load the child nodes.
			for(var i = 0; i < _node.childNodes.length; i++)
			{
				var node = _node.childNodes[i];
				var widgetType = node.nodeName.toLowerCase();

				if(widgetType == "#comment")
				{
					continue;
				}

				if(widgetType == "#text")
				{
					if(node.data.replace(/^\s+|\s+$/g, ''))
					{
						this.innerText = node.data;
					}
					continue;
				}

				// Create the new element
				this.createElementFromNode(node);
			}
		}

		/**
		 * Create a et2_widget from an XML node.
		 *
		 * First the type and attributes are read from the node.  Then the readonly & modifications
		 * arrays are checked for changes specific to the loaded data.  Then the appropriate
		 * constructor is called.  After the constructor returns, the widget has a chance to
		 * further initialize itself from the XML node when the widget's loadFromXML() method
		 * is called with the node.
		 *
		 * @param _node XML node to read
		 * @param _name XML node name
		 *
		 * @return et2_widget
		 */
		createElementFromNode(_node, _name?)
		{
			var attributes = {};

			// Parse the "readonly" and "type" flag for this element here, as they
			// determine which constructor is used
			let _nodeName = attributes["type"] = _node.getAttribute("type") ?
												 _node.getAttribute("type") : _node.nodeName.toLowerCase();
			const readonly = attributes["readonly"] = this.getArrayMgr("readonlys") ?
													  (<any>this.getArrayMgr("readonlys")).isReadOnly(
														  _node.getAttribute("id"), _node.getAttribute("readonly"),
														  typeof this.readonly !== "undefined" ? this.readonly : false) : false;

			// Check to see if modifications change type
			var modifications = this.getArrayMgr("modifications");
			if(modifications && _node.getAttribute("id"))
			{
				let entry : any = modifications.getEntry(_node.getAttribute("id"));
				if(entry == null)
				{
					// Try again, but skip the fancy stuff
					// TODO: Figure out why the getEntry() call doesn't always work
					entry = modifications.data[_node.getAttribute("id")];
					if(entry)
					{
						this.egw().debug("warn", "getEntry(" + _node.getAttribute("id") + ") failed, but the data is there.", modifications, entry);
					}
					else
					{
						// Try the root, in case a namespace got missed
						entry = modifications.getRoot().getEntry(_node.getAttribute("id"));
					}
				}
				if(entry && entry.type && typeof entry.type === 'string')
				{
					_nodeName = attributes["type"] = entry.type;
				}
				entry = null;
			}

			// if _nodeName / type-attribute contains something to expand (eg. type="@${row}[type]"),
			// we need to expand it now as it defines the constructor and by that attributes parsed via parseXMLAttrs!
			if(_nodeName.charAt(0) == '@' || _nodeName.indexOf('$') >= 0)
			{
				_nodeName = attributes["type"] = this.getArrayMgr('content').expandName(_nodeName);
			}

			let widget = null;
			if(undefined == window.customElements.get(_nodeName))
			{
				// Get the constructor - if the widget is readonly, use the special "_ro"
				// constructor if it is available
				var constructor = et2_registry[typeof et2_registry[_nodeName] == "undefined" ? 'placeholder' : _nodeName];
				if(readonly === true && typeof et2_registry[_nodeName + "_ro"] != "undefined")
				{
					constructor = et2_registry[_nodeName + "_ro"];
				}

				// Parse the attributes from the given XML attributes object
				this.parseXMLAttrs(_node.attributes, attributes, constructor.prototype);

				// Do an sanity check for the attributes
				ClassWithAttributes.generateAttributeSet(et2_attribute_registry[constructor.name], attributes);

				// Creates the new widget, passes this widget as an instance and
				// passes the widgetType. Then it goes on loading the XML for it.
				widget = new constructor(this, attributes);

				// Load the widget itself from XML
				widget.loadFromXML(_node);
			}
			else
			{
				if(readonly === true && typeof window.customElements.get(_nodeName + "_ro") != "undefined")
				{
					_nodeName += "_ro";
				}
				widget = loadWebComponent(_nodeName, _node, this);

				if(this.addChild)
				{
					// webcomponent going into old et2_widget
					this.addChild(widget);
				}
			}
			return widget;
		}


		/**
		 * The parseXMLAttrs function takes an XML DOM attributes object
		 * and adds the given attributes to the _target associative array. This
		 * function also parses the legacyOptions.
		 *
		 * @param _attrsObj is the XML DOM attributes object
		 * @param {object} _target is the object to which the attributes should be written.
		 * @param {et2_widget} _proto prototype with attributes and legacyOptions attribute
		 */
		parseXMLAttrs(_attrsObj, _target, _proto)
		{
			// Check whether the attributes object is really existing, if not abort
			if(typeof _attrsObj == "undefined")
			{
				return;
			}

			// Iterate over the given attributes and parse them
			var mgr = this.getArrayMgr("content");
			for(var i = 0; i < _attrsObj.length; i++)
			{
				var attrName = _attrsObj[i].name;
				var attrValue = _attrsObj[i].value;

				// Special handling for the legacy options
				if(attrName == "options" && _proto.constructor.legacyOptions && _proto.constructor.legacyOptions.length > 0)
				{
					let legacy = _proto.constructor.legacyOptions || [];
					let attrs = et2_attribute_registry[Object.getPrototypeOf(_proto).constructor.name] || {};
					// Check for modifications on legacy options here.  Normal modifications
					// are handled in widget constructor, but it's too late for legacy options then
					if(_target.id && this.getArrayMgr("modifications").getEntry(_target.id))
					{
						var mod : any = this.getArrayMgr("modifications").getEntry(_target.id);
						if(typeof mod.options != "undefined") attrValue = _attrsObj[i].value = mod.options;
					}
					// expand legacyOptions with content
					if(attrValue.charAt(0) == '@' || attrValue.indexOf('$') != -1)
					{
						attrValue = mgr.expandName(attrValue);
					}

					// Parse the legacy options (as a string, other types not allowed)
					var splitted = et2_csvSplit(attrValue + "");

					for(var j = 0; j < splitted.length && j < legacy.length; j++)
					{
						// Blank = not set, unless there's more legacy options provided after
						if(splitted[j].trim().length === 0 && legacy.length >= splitted.length) continue;

						// Check to make sure we don't overwrite a current option with a legacy option
						if(typeof _target[legacy[j]] === "undefined")
						{
							attrValue = splitted[j];

							/**
						If more legacy options than expected, stuff them all in the last legacy option
						Some legacy options take a comma separated list.
							 */
							if(j == legacy.length - 1 && splitted.length > legacy.length)
							{
								attrValue = splitted.slice(j);
							}

							var attr = et2_attribute_registry[_proto.constructor.name][legacy[j]] || {};

							// If the attribute is marked as boolean, parse the
							// expression as bool expression.
							if(attr.type == "boolean")
							{
								attrValue = mgr.parseBoolExpression(attrValue);
							}
							else if(typeof attrValue != "object")
							{
								attrValue = mgr.expandName(attrValue);
							}
							_target[legacy[j]] = attrValue;
						}
					}
				}
				else if(attrName == "readonly" && typeof _target[attrName] != "undefined")
				{
					// do NOT overwrite already evaluated readonly attribute
				}
				else
				{
					let attrs = et2_attribute_registry[_proto.constructor.name] || {};
					if(mgr != null && typeof attrs[attrName] != "undefined")
					{
						var attr = attrs[attrName];

						// If the attribute is marked as boolean, parse the
						// expression as bool expression.
						if(attr.type == "boolean")
						{
							attrValue = mgr.parseBoolExpression(attrValue);
						}
						else
						{
							attrValue = mgr.expandName(attrValue);
						}
					}

					// Set the attribute
					_target[attrName] = attrValue;
				}
			}
		}

		iterateOver(_callback : Function, _context, _type)
		{
			if(et2_implements_registry[_type] && et2_implements_registry[_type](this))
			{
				_callback.call(_context, this);
			}
			// TODO: children
		}

		/**
		 * Needed for legacy compatability.
		 *
		 * @param {Promise[]} promises List of promises from widgets that are not done.  Pass an empty array, it will be filled if needed.
		 */
		loadingFinished(promises)
		{
			/**
			 * This is needed mostly as a bridge between non-WebComponent widgets and
			 * connectedCallback().  It's not really needed if the whole tree is WebComponent.
			 * WebComponents can be added as children immediately after creation, and they handle the
			 * rest themselves with their normal lifecycle (especially connectedCallback(), which is kind
			 * of the equivalent of doLoadingFinished()
			 */
			if(this.getParent() instanceof et2_widget)
			{
				this.getParent().getDOMNode(this).append(this);
			}

			for(let i = 0; i < this._legacy_children.length; i++)
			{
				let child = this._legacy_children[i];
				let child_node = typeof child.getDOMNode !== "undefined" ? child.getDOMNode(child) : null;
				if(child_node && child_node !== this)
				{
					this.append(child_node);
				}
				child.loadingFinished(promises);
			}
		}

		getWidgetById(_id)
		{
			if(this.id == _id)
			{
				return this;
			}
		}

		setParent(new_parent : Et2WidgetClass | et2_widget)
		{
			this._parent = new_parent;

			if(this.id)
			{
				// Create a namespace for this object
				if(this._createNamespace())
				{
					this.checkCreateNamespace();
				}
			}

		}

		getParent() : HTMLElement | et2_widget
		{
			let parentNode = this.parentNode;

			// If parent is an old et2_widget, use it
			if(this._parent)
			{
				return this._parent;
			}

			return <HTMLElement>parentNode;
		}

		addChild(child : et2_widget | Et2WidgetClass)
		{
			if(child instanceof et2_widget)
			{
				child._parent = this;

				// During legacy widget creation, the child's DOM node won't be available yet.
				this._legacy_children.push(child);
				let child_node = null;
				try
				{
					child_node = typeof child.getDOMNode !== "undefined" ? child.getDOMNode(child) : null;
				}
				catch(e)
				{
					// Child did not give up its DOM node nicely but errored instead
				}
				if(child_node && child_node !== this)
				{
					this.append(child_node);
				}
			}
			else
			{
				this.append(child);
			}
		}

		/**
		 * Get [legacy] children
		 * Use <obj>.children to get web component children
		 * @returns {et2_widget[]}
		 */
		getChildren()
		{
			return this._legacy_children;
		}

		getType() : string
		{
			return this.nodeName;
		}

		getDOMNode() : HTMLElement
		{
			return this;
		}

		/**
		 * Creates a copy of this widget.
		 *
		 * @param {et2_widget} _parent parent to set for clone, default null
		 */
		clone(_parent?) : Et2WidgetClass
		{
			// Default _parent to null
			if(typeof _parent == "undefined")
			{
				_parent = null;
			}

			// Create the copy
			var copy = <Et2WidgetClass>this.cloneNode(true);

			// Create a clone of all child widgets of the given object
			for(var i = 0; i < copy.getChildren().length; i++)
			{
				copy.addChild(copy.getChildren()[i].clone(this));
			}

			// Copy a reference to the content array manager
			copy.setArrayMgrs(this.getArrayMgrs());

			return copy;
		}


		/**
		 * Sets the array manager for the given part
		 *
		 * @param {string} _part which array mgr to set
		 * @param {object} _mgr
		 */
		setArrayMgr(_part : string, _mgr : et2_arrayMgr)
		{
			this._mgrs[_part] = _mgr;
		}

		/**
		 * Returns the array manager object for the given part
		 *
		 * @param {string} managed_array_type name of array mgr to return
		 */
		getArrayMgr(managed_array_type : string) : et2_arrayMgr | null
		{
			if(this._mgrs && typeof this._mgrs[managed_array_type] != "undefined")
			{
				return this._mgrs[managed_array_type];
			}
			else if(this.getParent())
			{
				return this.getParent().getArrayMgr(managed_array_type);
			}

			return null;
		}

		/**
		 * Sets all array manager objects - this function can be used to set the
		 * root array managers of the container object.
		 *
		 * @param {object} _mgrs
		 */
		setArrayMgrs(_mgrs)
		{
			this._mgrs = <et2_arrayMgr[]>et2_cloneObject(_mgrs);
		}

		/**
		 * Returns an associative array containing the top-most array managers.
		 *
		 * @param _mgrs is used internally and should not be supplied.
		 */
		getArrayMgrs(_mgrs? : object)
		{
			if(typeof _mgrs == "undefined")
			{
				_mgrs = {};
			}

			// Add all managers of this object to the result, if they have not already
			// been set in the result
			for(var key in this._mgrs)
			{
				if(typeof _mgrs[key] == "undefined")
				{
					_mgrs[key] = this._mgrs[key];
				}
			}

			// Recursively applies this function to the parent widget
			if(this._parent)
			{
				this._parent.getArrayMgrs(_mgrs);
			}

			return _mgrs;
		}

		/**
		 * Checks whether a namespace exists for this element in the content array.
		 * If yes, an own perspective of the content array is created. If not, the
		 * parent content manager is used.
		 *
		 * Constructor attributes are passed in case a child needs to make decisions
		 */
		checkCreateNamespace()
		{
			// Get the content manager
			var mgrs = this.getArrayMgrs();

			for(var key in mgrs)
			{
				var mgr = mgrs[key];

				// Get the original content manager if we have already created a
				// perspective for this node
				if(typeof this._mgrs[key] != "undefined" && mgr.perspectiveData.owner == this)
				{
					mgr = mgr.parentMgr;
				}

				// Check whether the manager has a namespace for the id of this object
				var entry = mgr.getEntry(this.id);
				if(typeof entry === 'object' && entry !== null || this.id)
				{
					// The content manager has an own node for this object, so
					// create an own perspective.
					this._mgrs[key] = mgr.openPerspective(this, this.id);
				}
				else
				{
					// The current content manager does not have an own namespace for
					// this element, so use the content manager of the parent.
					delete (this._mgrs[key]);
				}
			}
		}

		/**
		 * Returns the instance manager
		 *
		 * @return {etemplate2}
		 */
		getInstanceManager()
		{
			if(this._inst != null)
			{
				return this._inst;
			}
			else if(this.getParent())
			{
				return this.getParent().getInstanceManager();
			}

			return null;
		}

		/**
		 * Returns the path into the data array.  By default, array manager takes care of
		 * this, but some extensions need to override this
		 */
		getPath()
		{
			var path = this.getArrayMgr("content").getPath();

			// Prevent namespaced widgets with value from going an extra layer deep
			if(this.id && this._createNamespace() && path[path.length - 1] == this.id) path.pop();

			return path;
		}

		_createNamespace() : boolean
		{
			return false;
		}

		egw() : IegwAppLocal
		{
			if(this.getParent() != null && !(this.getParent() instanceof HTMLElement))
			{
				return (<et2_widget>this.getParent()).egw();
			}

			// Get the window this object belongs to
			var wnd = null;
			// @ts-ignore Technically this doesn't have implements(), but it's mixed in
			if(this.implements(et2_IDOMNode))
			{
				var node = (<et2_IDOMNode><unknown>this).getDOMNode();
				if(node && node.ownerDocument)
				{
					wnd = node.ownerDocument.parentNode || node.ownerDocument.defaultView;
				}
			}

			// If we're the root object, return the phpgwapi API instance
			return egw('phpgwapi', wnd);
		}
	};

	function applyMixins(derivedCtor : any, baseCtors : any[])
	{
		baseCtors.forEach(baseCtor =>
		{
			Object.getOwnPropertyNames(baseCtor.prototype).forEach(name =>
			{
				if(name !== 'constructor')
				{
					derivedCtor.prototype[name] = baseCtor.prototype[name];
				}
			});
		});
	}

	// Add some more stuff in
	applyMixins(Et2WidgetClass, [ClassWithInterfaces]);

	return Et2WidgetClass as unknown as Constructor<et2_IDOMNode> & T;
}

/**
 * Load a Web Component
 * @param _nodeName
 * @param _template_node
 */
export function loadWebComponent(_nodeName : string, _template_node, parent : Et2WidgetClass | et2_widget) : HTMLElement
{
	let widget = <Et2WidgetClass>document.createElement(_nodeName);
	widget.textContent = _template_node.textContent;

	const widget_class = window.customElements.get(_nodeName);
	if(!widget_class)
	{
		throw Error("Unknown or unregistered WebComponent '" + _nodeName + "', could not find class");
	}
	widget.setParent(parent);
	var mgr = widget.getArrayMgr("content");

	// Set read-only.  Doesn't really matter if it's a ro widget, but otherwise it needs set
	widget.readonly = parent.getArrayMgr("readonlys") ?
					  (<any>parent.getArrayMgr("readonlys")).isReadOnly(
						  _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
	_template_node.getAttributeNames().forEach(attribute =>
	{
		let attrValue = _template_node.getAttribute(attribute);

		// If there is not attribute set, ignore it.  Widget sets its own default.
		if(typeof attrValue === "undefined") return;

		// If the attribute is marked as boolean, parse the
		// expression as bool expression.
		if(widget_class.getPropertyOptions(attribute).type == "Boolean")
		{
			attrValue = mgr.parseBoolExpression(attrValue);
		}
		else
		{
			attrValue = mgr.expandName(attrValue);
		}
		widget.setAttribute(attribute, attrValue);
	});

	if(widget_class.getPropertyOptions("value") && widget.set_value)
	{
		if(mgr != null)
		{
			let val = mgr.getEntry(widget.id, false, true);
			if(val !== null)
			{
				widget.set_value(val);
			}
		}
	}

	// Children need to be loaded
	widget.loadFromXML(_template_node);

	return widget;
}