From 73a606f6bad75369078f02ef1c762bd0ff6f3061 Mon Sep 17 00:00:00 2001 From: nathan Date: Fri, 15 Nov 2024 08:49:37 -0700 Subject: [PATCH] Et2Tree: When drag + hover over a leaf, only open it if it actually has children --- api/js/egw_action/EgwDragDropShoelaceTree.ts | 15 ++++++++++----- api/js/etemplate/Et2Tree/Et2Tree.ts | 8 +++++--- 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/api/js/egw_action/EgwDragDropShoelaceTree.ts b/api/js/egw_action/EgwDragDropShoelaceTree.ts index 21e76e407b..027d2bdd19 100644 --- a/api/js/egw_action/EgwDragDropShoelaceTree.ts +++ b/api/js/egw_action/EgwDragDropShoelaceTree.ts @@ -55,13 +55,18 @@ export class EgwDragDropShoelaceTree extends egwActionObjectInterface{ n.classList.remove("draggedOver", "drop-hover"); }); target.target.classList.add("draggedOver", "drop-hover"); - this.timeouts[target.target.id] = setTimeout(() => + + // Open nodes with children after a wait + if(target.target.hasAttribute("lazy") || target.target.querySelector(target.target.nodeName)) { - if(target.target.classList.contains("draggedOver")) + this.timeouts[target.target.id] = setTimeout(() => { - (target.target).expanded = true - } - }, EXPAND_FOLDER_ON_DRAG_DROP_TIMEOUT) + if(target.target.classList.contains("draggedOver")) + { + (target.target).expanded = true + } + }, EXPAND_FOLDER_ON_DRAG_DROP_TIMEOUT) + } } else if(egw_event == EGW_AI_DRAG_OUT) { diff --git a/api/js/etemplate/Et2Tree/Et2Tree.ts b/api/js/etemplate/Et2Tree/Et2Tree.ts index 375841c38b..a3de61e3bc 100644 --- a/api/js/etemplate/Et2Tree/Et2Tree.ts +++ b/api/js/etemplate/Et2Tree/Et2Tree.ts @@ -23,7 +23,7 @@ import styles from "./Et2Tree.styles"; export type TreeItemData = SelectOption & { focused?: boolean; - // Has children, but they may not be provided in item + // Has children, but they may not be provided in children (lazy loaded) child: Boolean | 1, data?: Object,//{sieve:true,...} or {acl:true} or other //this is coming from SelectOption @@ -981,8 +981,10 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin //fallback to try and set icon if everything else failed if (!img) img = selectOption.icon ?? selectOption.im0 ?? selectOption.im1 ?? selectOption.im2; - // lazy iff "child" is set and "item" is empty or item does not exist in the first place - const lazy = (selectOption.item?.length === 0 && selectOption.child) || (selectOption.child && !selectOption.item) + // lazy iff "child" is set and "children" is empty or children does not exist in the first place + const lazy = typeof selectOption.item !== "undefined" ? + (selectOption.item?.length === 0 && selectOption.child) || (selectOption.child && !selectOption.item) : + (selectOption.children?.length == 0 && selectOption.child); const value = selectOption.value ?? selectOption.id; if(expandState && this.autoloading && lazy) {