mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-16 11:41:19 +01:00
36e3bd5de0
Had to overwrite formatter as it gave an error for accessing not yet set _inputNode
170 lines
4.5 KiB
TypeScript
170 lines
4.5 KiB
TypeScript
/**
|
|
* EGroupware eTemplate2 - WidgetWithSelectMixin
|
|
*
|
|
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
|
|
* @package api
|
|
* @link https://www.egroupware.org
|
|
* @author Nathan Gray
|
|
*/
|
|
|
|
import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
|
|
import {StaticOptions} from "./StaticOptions";
|
|
import {dedupeMixin, html, PropertyValues, TemplateResult} from "@lion/core";
|
|
import {et2_readAttrWithDefault} from "../et2_core_xml";
|
|
import {find_select_options, SelectOption} from "./FindSelectOptions";
|
|
|
|
/**
|
|
* Base class for things that do selectbox type behaviour, to avoid putting too much or copying into read-only
|
|
* selectboxes, also for common handling of properties for more special selectboxes.
|
|
*
|
|
* LionSelect (and any other LionField) use slots to wrap a real DOM node. ET2 doesn't expect this,
|
|
* so we have to create the input node (via slots()) and respect that it is _external_ to the Web Component.
|
|
* This complicates things like adding the options, since we can't just override _inputGroupInputTemplate()
|
|
* and include them when rendering - the parent expects to find the <select> added via a slot, render() would
|
|
* put it inside the shadowDOM. That's fine, but then it doesn't get created until render(), and the parent
|
|
* (LionField) can't find it when it looks for it before then.
|
|
*
|
|
*/
|
|
export const Et2widgetWithSelectMixin = dedupeMixin((superclass) =>
|
|
{
|
|
class Et2WidgetWithSelect extends Et2InputWidget(superclass)
|
|
{
|
|
static get properties()
|
|
{
|
|
return {
|
|
...super.properties,
|
|
/**
|
|
* Textual label for first row, eg: 'All' or 'None'. It's value will be ''
|
|
*/
|
|
empty_label: String,
|
|
|
|
/**
|
|
* Select box options
|
|
*
|
|
* Will be found automatically based on ID and type, or can be set explicitly in the template using
|
|
* <option/> children, or using widget.set_select_options(SelectOption[])
|
|
*/
|
|
select_options: Object,
|
|
}
|
|
}
|
|
|
|
constructor()
|
|
{
|
|
super();
|
|
|
|
this.select_options = <StaticOptions[]>[];
|
|
}
|
|
|
|
/** @param {import('@lion/core').PropertyValues } changedProperties */
|
|
updated(changedProperties : PropertyValues)
|
|
{
|
|
super.updated(changedProperties);
|
|
|
|
// If the ID changed (or was just set) find the select options
|
|
if(changedProperties.has("id"))
|
|
{
|
|
this.set_select_options(find_select_options(this));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Overwritten as sometimes called before this._inputNode is available
|
|
*
|
|
* @param {*} v - modelValue: can be an Object, Number, String depending on the
|
|
* input type(date, number, email etc)
|
|
* @returns {string} formattedValue
|
|
*/
|
|
formatter(v)
|
|
{
|
|
if (!this._inputNode)
|
|
{
|
|
return v;
|
|
}
|
|
return super.formatter(v);
|
|
}
|
|
|
|
set_value(val)
|
|
{
|
|
let oldValue = this.modelValue;
|
|
|
|
// Make sure it's a string
|
|
val = "" + val;
|
|
|
|
this.modelValue = val
|
|
this.requestUpdate("value", oldValue);
|
|
}
|
|
|
|
/**
|
|
* Set the select options
|
|
*
|
|
* @param {SelectOption[]} new_options
|
|
*/
|
|
set_select_options(new_options : SelectOption[] | { [key : string] : string })
|
|
{
|
|
if(!Array.isArray(new_options))
|
|
{
|
|
let fixed_options = [];
|
|
for(let key in new_options)
|
|
{
|
|
fixed_options.push({value: key, label: new_options[key]});
|
|
}
|
|
this.select_options = fixed_options;
|
|
}
|
|
else
|
|
{
|
|
this.select_options = new_options;
|
|
}
|
|
}
|
|
|
|
get_select_options()
|
|
{
|
|
return this.select_options;
|
|
}
|
|
|
|
/**
|
|
* Render the "empty label", used when the selectbox does not currently have a value
|
|
*
|
|
* @returns {}
|
|
*/
|
|
_emptyLabelTemplate() : TemplateResult
|
|
{
|
|
return html`${this.empty_label}`;
|
|
}
|
|
|
|
_optionTemplate(option : SelectOption) : TemplateResult
|
|
{
|
|
return html``;
|
|
}
|
|
|
|
/**
|
|
* Load extra stuff from the template node. In particular, we're looking for any <option/> tags added.
|
|
*
|
|
* @param {Element} _node
|
|
*/
|
|
loadFromXML(_node : Element)
|
|
{
|
|
// Read the option-tags
|
|
let options = _node.querySelectorAll("option");
|
|
let new_options = [];
|
|
for(let i = 0; i < options.length; i++)
|
|
{
|
|
new_options.push({
|
|
value: et2_readAttrWithDefault(options[i], "value", options[i].textContent),
|
|
// allow options to contain multiple translated sub-strings eg: {Firstname}.{Lastname}
|
|
label: options[i].textContent.replace(/{([^}]+)}/g, function(str, p1)
|
|
{
|
|
return this.egw().lang(p1);
|
|
}),
|
|
title: et2_readAttrWithDefault(options[i], "title", "")
|
|
});
|
|
}
|
|
|
|
if(this.id)
|
|
{
|
|
new_options = find_select_options(this, {}, new_options);
|
|
}
|
|
this.set_select_options(new_options);
|
|
}
|
|
}
|
|
return Et2WidgetWithSelect;
|
|
}); |