diff --git a/api/js/etemplate/Et2Tree/Et2MultiselectTree.ts b/api/js/etemplate/Et2Tree/Et2MultiselectTree.ts index b75eccda71..7714e703d8 100644 --- a/api/js/etemplate/Et2Tree/Et2MultiselectTree.ts +++ b/api/js/etemplate/Et2Tree/Et2MultiselectTree.ts @@ -11,121 +11,6 @@ import {Et2Tree, TreeItemData} from "./Et2Tree"; * //TODO add for other events */ export class Et2MultiselectTree extends Et2Tree { - - - @property() - onselect // description: "Javascript executed when user selects a node" - - //This is never used as far as I can tell mailapp.folgerMgmt_onCheck should select all sub folders --> Sl-Tree offers this functionality on default - @property() - oncheck // description: "Javascript executed when user checks a node" - - //only used in calendar_sidebox.xet - @property({type: Function}) - onchange;// description: "JS code which gets executed when selection changes" - - @state() - selectedNodes: SlTreeItem[] - @state() - selectedItems: TreeItemData[] - - constructor() { - super(); - this.multiple = true; - - this.selectedNodes = []; - this.selectedItems = []; - } - - public set_onchange(_handler: any) - { - this.onchange = _handler - } - - /** - * getValue, retrieves the Ids of the selected Items - * @return string or object or null - */ - getValue() - { - let res:string[] = [] - if(this.selectedItems?.length) - for (const selectedItem of this.selectedItems) - { - res.push(selectedItem.id) - } - return res - } - - _optionTemplate(selectOption: TreeItemData): TemplateResult<1> { - let img: String = selectOption.im0 ?? selectOption.im1 ?? selectOption.im2; - if (img) { - //sl-icon images need to be svgs if there is a png try to find the corresponding svg - img = img.endsWith(".png") ? img.replace(".png", ".svg") : img; - img = "api/templates/default/images/dhtmlxtree/" + img - - } - return html` - { - this.handleLazyLoading(selectOption).then((result) => { - this.getNode(selectOption.id).item = [...result.item] - this.requestUpdate("_selectOptions") - }) - - }} - > - - - ${selectOption.text} - ${(selectOption.item) ? html`${repeat(selectOption.item, this._optionTemplate.bind(this))}` : nothing} - ` - } - - public render(): unknown { - return html` - { - //TODO inefficient - this.selectedItems = [] - for (const slTreeItem of event.detail.selection) { - this.selectedItems.push(this.getNode(slTreeItem.id)); - } - this.selectedNodes = event.detail.selection; - //TODO look at what signature is expected here - if(typeof this.onclick == "function") - { - this.onclick(event.detail.selection[0].id, this, event.detail.previous) - } - - } - } - @sl-expand=${ - (event) => { - event.detail.id = event.target.id - event.detail.item = event.target - } - } - @sl-after-expand=${ - (event) => { - event.detail.id = event.target.id - event.detail.item = event.target - - } - } - > - ${repeat(this._selectOptions, this._optionTemplate.bind(this))} - - `; - } - } customElements.define("et2-tree-multiple", Et2MultiselectTree); customElements.define("et2-tree-cat-multiple", class extends Et2MultiselectTree{}); diff --git a/api/js/etemplate/Et2Tree/Et2Tree.ts b/api/js/etemplate/Et2Tree/Et2Tree.ts index 9f3cf3f297..fe536f1528 100644 --- a/api/js/etemplate/Et2Tree/Et2Tree.ts +++ b/api/js/etemplate/Et2Tree/Et2Tree.ts @@ -90,6 +90,9 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) @state() protected _currentSlTreeItem: SlTreeItem; + @state() + selectedNodes: SlTreeItem[] + private input: any = null; private _actionManager: EgwAction; @@ -102,6 +105,8 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) this._selectOptions = []; this._optionTemplate = this._optionTemplate.bind(this); + + this.selectedNodes = []; } firstUpdated() @@ -414,6 +419,21 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) return this._currentOption || this._selectOptions[0] } + /** + * getValue, retrieves the Ids of the selected Items + * @return string or object or null + */ + getValue() + { + let res:string[] = [] + if(this.selectedNodes?.length) + for (const selectedNode of this.selectedNodes) + { + res.push(selectedNode.id) + } + return res + } + /** * getSelectedNode, retrieves the full node of the selected Item * @return {SlTreeItem} full SlTreeItem @@ -694,6 +714,10 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) this.value = this.multiple ? ids ?? [] : ids[0] ?? ""; event.detail.previous = this._previousOption?.id; this._currentSlTreeItem = event.detail.selection[0]; + if(this.multiple) + { + this.selectedNodes = event.detail.selection + } if(typeof this.onclick == "function") { this.onclick(event.detail.selection[0].id, this, event.detail.previous)