extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-02-17 02:41:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

WIP Et2Taglist: trying to get allowFreeEntries feature working

Browse Source
This commit is contained in:
Hadi Nategh 2022-03-18 19:13:30 +01:00
parent 5650e8c616
commit 53ecdba510
2 changed files with 55 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
api/js/etemplate/Et2Taglist/Et2Taglist.ts
View File

@ -9,10 +9,10 @@
*/ */
import {css, html, TemplateResult} from "@lion/core"; import {css, html, PropertyValues, TemplateResult} from "@lion/core";
import {Et2widgetWithSelectMixin} from "../Et2Select/Et2WidgetWithSelectMixin"; import {Et2widgetWithSelectMixin} from "../Et2Select/Et2WidgetWithSelectMixin";
import {LionCombobox} from "@lion/combobox"; import {LionCombobox} from "@lion/combobox";
import {SelectOption} from "../Et2Select/FindSelectOptions"; import {find_select_options, SelectOption} from "../Et2Select/FindSelectOptions";
import {EgwOption} from "./EgwOption"; import {EgwOption} from "./EgwOption";
import {TaglistSelection} from "./TaglistSelection"; import {TaglistSelection} from "./TaglistSelection";
import {taglistStyles} from "./TaglistStyles"; import {taglistStyles} from "./TaglistStyles";
@ -57,7 +57,8 @@ export class Et2Taglist extends Et2widgetWithSelectMixin(LionCombobox)
return { return {
...super.properties, ...super.properties,
multiple: {type : Boolean}, multiple: {type : Boolean},
editModeEnabled : {type : Boolean} editModeEnabled : {type : Boolean},
allowFreeEntries : {type : Boolean}
} }
} }
@ -95,9 +96,55 @@ export class Et2Taglist extends Et2widgetWithSelectMixin(LionCombobox)
// If there are select options, enable toggle on click so user can see them // If there are select options, enable toggle on click so user can see them
this.showAllOnEmpty = this.select_options.length>0; this.showAllOnEmpty = this.select_options.length>0;
if (this.allowFreeEntries)
{
this.value.forEach(_v => {
this.__appendSelOption(_v);
})
}
} }
getValue(): any __appendSelOption(_value)
{
const optionsMappedValues = (<SelectOption[]>this.select_options).map(({value}) =>{return value});
if (!optionsMappedValues.includes(_value))
{
this.select_options = (<SelectOption[]>this.select_options).concat({label:_value, value:_value});
}
// we need to wait for the actuall rendering of select options before being able to set our newly added value.
// So far the only way to make sure of that is binding set_value into form-element-register event which does get
// called when the option gets attached to dom. We make sure to unbind that event because we only want that set
// value for a newly added value and not all selected values.
const modelValueChanged = (ev) => {
if (this._inputNode.value == _value)
{
this.set_value(this.getValue().concat([this._inputNode.value]));
}
this.removeEventListener('form-element-register', modelValueChanged);
};
this.addEventListener('form-element-register', modelValueChanged);
}
/**
* @param {string} v
* @protected
*/
_setTextboxValue(v) {
// Make sure that we don't loose inputNode.selectionStart and inputNode.selectionEnd
if (!this.allowFreeEntries && this._inputNode.value !== v) {
this._inputNode.value = v;
}
else if (this._inputNode.value !='' && !(<SelectOption[]>this.select_options).filter((_option)=>{return _option.value == this._inputNode.value}).length)
{
this.__appendSelOption(this._inputNode.value);
}
}
getValue(): String[]
{ {
return this.modelValue; return this.modelValue;
} }
@ -125,6 +172,7 @@ export class Et2Taglist extends Et2widgetWithSelectMixin(LionCombobox)
{ {
this.multiple = this.multiple ? values.length > 1 : false; this.multiple = this.multiple ? values.length > 1 : false;
} }
this.value = values;
this.modelValue = values; this.modelValue = values;
} }

3
api/js/etemplate/Et2Taglist/TaglistSelection.ts
View File

@ -212,6 +212,9 @@ export class TaglistSelection extends LitElement {
} }
} }
} }
//todo: setting a new option value changes option indexes therefore the last activeIndex should be adopted according
// to our new options' indexes. We need to figure out how to set that index before the last selected option gets unchecked.
this._getComboBoxElement().activeIndex = this.__getSelectedTags().length;
} }
} }
customElements.define('taglist-selection', TaglistSelection); customElements.define('taglist-selection', TaglistSelection);