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
				 */
				private label: string = "";
				private statustext: string = "";


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

								/**
								 * 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);
						}
				}

				disconnectedCallback()
				{
						this.egw().tooltipUnbind(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 = {};
						debugger;
						// Parse the "readonly" and "type" flag for this element here, as they
						// determine which constructor is used
						var _nodeName = attributes["type"] = _node.getAttribute("type") ?
																								 _node.getAttribute("type") : _node.nodeName.toLowerCase();
						var 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
						{
								widget = this.loadWebComponent(_nodeName, _node);

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

				/**
				 * Load a Web Component
				 * @param _nodeName
				 * @param _node
				 */
				loadWebComponent(_nodeName: string, _node): HTMLElement
				{
						let widget = <Et2WidgetClass>document.createElement(_nodeName);
						widget.textContent = _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(this);
						var mgr = widget.getArrayMgr("content");
						debugger;
						// Apply any set attributes - widget will do its own coercion
						_node.getAttributeNames().forEach(attribute =>
						{
								let attrValue = _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.setAttribute("value", val);
										}
								}
								// Check for already inside namespace
								if (this._createNamespace() && this.getArrayMgr("content").perspectiveData.owner == this)
								{
										widget.setAttribute("value", this.getArrayMgr("content").data);
								}
						}

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

						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 = typeof child.getDOMNode !== "undefined" ? child.getDOMNode(child) : null;
								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;
				}

				/**
				 * 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;
}