extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-08 09:05:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix select change event not firing, initial value not showing

Browse Source
This commit is contained in:
nathan 2022-05-27 15:39:51 -06:00
parent 45327d559a
commit 7f1cd117a7
3 changed files with 91 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
api/js/etemplate/Et2Link/Et2LinkAppSelect.ts
View File

@ -86,6 +86,8 @@ export class Et2LinkAppSelect extends SlotMixin(Et2Select)
// Select options are based off abilities registered with link system
this._reset_select_options();
this._handleChange = this._handleChange.bind(this);
}
connectedCallback()
@ -104,20 +106,13 @@ export class Et2LinkAppSelect extends SlotMixin(Et2Select)
this.querySelector("[slot='prefix']").setAttribute("src", this.value + "/navbar");
// Register to
this.addEventListener("sl-change", () =>
{
// Set icon
this.querySelector("[slot='prefix']").setAttribute("src", this.value + "/navbar");
this.addEventListener("change", this._handleChange);
}
// update preference
let appname = "";
if(typeof this.value != 'undefined' && this.parentNode && this.parentNode.to_app)
{
appname = this.parentNode.to_app;
}
this.egw().set_preference(appname || this.egw().app_name(), 'link_app', this.value);
this.dispatchEvent(new Event("change"));
});
disconnectedCallback()
{
super.disconnectedCallback();
this.removeEventListener("change", this._handleChange);
}
/**
@ -135,6 +130,20 @@ export class Et2LinkAppSelect extends SlotMixin(Et2Select)
}
}
private _handleChange(e)
{
// Set icon
this.querySelector("[slot='prefix']").setAttribute("src", this.value + "/navbar");
// update preference
let appname = "";
if(typeof this.value != 'undefined' && this.parentNode && this.parentNode.to_app)
{
appname = this.parentNode.to_app;
}
this.egw().set_preference(appname || this.egw().app_name(), 'link_app', this.value);
}
/**
* Limited select options here
* This method will check properties and set select options appropriately

164
api/js/etemplate/Et2Select/Et2Select.ts
View File

@ -67,45 +67,6 @@ export class Et2Select extends Et2InvokerMixin(Et2WidgetWithSelect)
];
}
get slots()
{
return {
...super.slots,
input: () =>
{
return document.createElement("select");
}
}
}
connectedCallback()
{
super.connectedCallback();
//MOVE options that were set as children inside SELECT:
//this.querySelector('select').append(...this.querySelectorAll('option'));
}
firstUpdated(changedProperties)
{
super.firstUpdated(changedProperties);
// if _inputNode was not available by the time set_value() got called
if(this.getValue() !== this.value)
{
this.set_value(this.modelValue);
}
}
/**
* Get the node where we're putting the selection options
*
* @returns {HTMLElement}
*/
get _optionTargetNode() : HTMLElement
{
return <HTMLElement><unknown>this;
}
static get properties()
{
return {
@ -126,6 +87,70 @@ export class Et2Select extends Et2InvokerMixin(Et2WidgetWithSelect)
}
}
get slots()
{
return {
...super.slots,
input: () =>
{
return document.createElement("select");
}
}
}
constructor()
{
super();
this._triggerChange = this._triggerChange.bind(this);
}
connectedCallback()
{
super.connectedCallback();
//MOVE options that were set as children inside SELECT:
//this.querySelector('select').append(...this.querySelectorAll('option'));
this.getUpdateComplete().then(() =>
{
this.addEventListener("sl-clear", this._triggerChange)
this.addEventListener("sl-select", this._triggerChange);
});
}
disconnectedCallback()
{
super.disconnectedCallback();
this.removeEventListener("sl-clear", this._triggerChange)
this.removeEventListener("sl-select", this._triggerChange);
}
firstUpdated(changedProperties)
{
super.firstUpdated(changedProperties);
// if _inputNode was not available by the time set_value() got called
if(this.getValue() !== this.value)
{
this.set_value(this.modelValue);
}
}
_triggerChange(e)
{
this.dispatchEvent(new Event("change"));
}
/**
* Get the node where we're putting the selection options
*
* @returns {HTMLElement}
*/
get _optionTargetNode() : HTMLElement
{
return <HTMLElement><unknown>this;
}
/**
* @deprecated use this.multiple = multi
*
@ -136,64 +161,9 @@ export class Et2Select extends Et2InvokerMixin(Et2WidgetWithSelect)
this.multiple = multi;
}
/**
* Reimplemented to return string[] for multiple
*/
get value() : string|string[]
set_value(val)
{
if (!this._inputNode || !this.select_options.length)
{
return this.__value || '';
}
if (!this.multiple)
{
return this._inputNode.value || this.__value || '';
}
// multi-selection value
const selected = this._inputNode.querySelectorAll('option:checked');
return Array.from(selected).map(el => (<HTMLOptionElement>el).value);
}
/**
* Reimplemented to select options for multiple
*
* @param value
*/
set value(value: string|string[])
{
// if not yet connected to dom can't change the value
if (this._inputNode && this.select_options.length)
{
// split multiple comma-separated values for multiple or expand_multiple_rows
if (typeof value === 'string' && (this.multiple || this.expand_multiple_rows) && value.indexOf(',') !== -1)
{
value = value.split(',');
}
// if we get more than one value AND expand_multiple_rows is set --> switch to multiple
if (!this.multiple && this.expand_multiple_rows && Array.isArray(value) && value.length > 1)
{
this.multiple = true;
this.size = this.expand_multiple_rows;
}
if (!this.multiple)
{
this._inputNode.value = value;
}
else
{
this._inputNode.multiple = true; // in case property is not yet set, selectbox will unselect all other options
this._inputNode.querySelectorAll('option').forEach((el : HTMLOptionElement) =>
{
el.selected = [].concat(value).find(val => val == el.value);
});
}
/** @type {string | undefined} */
this.__value = undefined;
}
else
{
this.__value = value;
}
this.value = val;
}
/**
@ -203,7 +173,7 @@ export class Et2Select extends Et2InvokerMixin(Et2WidgetWithSelect)
*/
_callParser(value = this.formattedValue)
{
if (this.multiple && Array.isArray(value))
if(this.multiple && Array.isArray(value))
{
return value;
}

3
api/js/etemplate/Styles/shoelace.ts
View File

@ -12,7 +12,8 @@ registerIconLibrary('default', {
});
/**
* Override some shoelace icons with EGroupware
* Override some shoelace icons with EGroupware icons
* In particular, the data: ones give errors with our CSP
*/
const egw_icons = {'chevron-down': 'arrow_down'}
registerIconLibrary("system", {