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

Et2MultiselectTree.ts no longer needed --cleanup WIP

Browse Source 
Improve subscribeFolder Tree WIP
This commit is contained in:
milan 2024-02-21 20:45:50 +01:00
parent dbecc4ee84
commit 8ffbff03da
2 changed files with 24 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
api/js/etemplate/Et2Tree/Et2MultiselectTree.ts
View File

@ -11,121 +11,6 @@ import {Et2Tree, TreeItemData} from "./Et2Tree";
* //TODO add for other events * //TODO add for other events
*/ */
export class Et2MultiselectTree extends Et2Tree { 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`
<sl-tree-item
id=${selectOption.id}
?selected=${this.value.includes(selectOption.id)}
?lazy=${selectOption.item?.length === 0 && selectOption.child}
@sl-lazy-load=${(event) => {
this.handleLazyLoading(selectOption).then((result) => {
this.getNode(selectOption.id).item = [...result.item]
this.requestUpdate("_selectOptions")
})
}}
>
<sl-icon src="${img ?? nothing}"></sl-icon>
${selectOption.text}
${(selectOption.item) ? html`${repeat(selectOption.item, this._optionTemplate.bind(this))}` : nothing}
</sl-tree-item>`
}
public render(): unknown {
return html`
<sl-tree
selection="${this.multiple?"multiple":nothing}"
@sl-selection-change=${
(event: any) => {
//TODO inefficient
this.selectedItems = []
for (const slTreeItem of <SlTreeItem[]>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))}
</sl-tree>
`;
}
} }
customElements.define("et2-tree-multiple", Et2MultiselectTree); customElements.define("et2-tree-multiple", Et2MultiselectTree);
customElements.define("et2-tree-cat-multiple", class extends Et2MultiselectTree{}); customElements.define("et2-tree-cat-multiple", class extends Et2MultiselectTree{});

24
api/js/etemplate/Et2Tree/Et2Tree.ts
View File

@ -90,6 +90,9 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
@state() @state()
protected _currentSlTreeItem: SlTreeItem; protected _currentSlTreeItem: SlTreeItem;
@state()
selectedNodes: SlTreeItem[]
private input: any = null; private input: any = null;
private _actionManager: EgwAction; private _actionManager: EgwAction;
@ -102,6 +105,8 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
this._selectOptions = []; this._selectOptions = [];
this._optionTemplate = this._optionTemplate.bind(this); this._optionTemplate = this._optionTemplate.bind(this);
this.selectedNodes = [];
} }
firstUpdated() firstUpdated()
@ -414,6 +419,21 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
return this._currentOption || this._selectOptions[0] 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 * getSelectedNode, retrieves the full node of the selected Item
* @return {SlTreeItem} full SlTreeItem * @return {SlTreeItem} full SlTreeItem
@ -694,6 +714,10 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
this.value = this.multiple ? ids ?? [] : ids[0] ?? ""; this.value = this.multiple ? ids ?? [] : ids[0] ?? "";
event.detail.previous = this._previousOption?.id; event.detail.previous = this._previousOption?.id;
this._currentSlTreeItem = event.detail.selection[0]; this._currentSlTreeItem = event.detail.selection[0];
if(this.multiple)
{
this.selectedNodes = event.detail.selection
}
if(typeof this.onclick == "function") if(typeof this.onclick == "function")
{ {
this.onclick(event.detail.selection[0].id, this, event.detail.previous) this.onclick(event.detail.selection[0].id, this, event.detail.previous)