Improve tree JS component (move in setSelectableTypes from sites selector)

Author: davidfrederique

src/bemserver_ui/static/scripts/modules/components/structuralElements/selector.js

@@ -122,9 +122,9 @@ export class StructuralElementSelector extends HTMLElement {
         this.#treeSelectorElmt.showLoading();
     }
 
-    loadTree(data) {
+    loadTree(data, selectableTypes = ["site", "building", "storey", "space", "zone"]) {
         this.#treeSelectorData = data;
-        this.#loadTree();
+        this.#loadTree(selectableTypes);
     }
 
     select(nodeId) {
@@ -136,20 +136,7 @@ export class StructuralElementSelector extends HTMLElement {
     }
 
     setSelectableTypes(types = ["site", "building", "storey", "space", "zone"]) {
-        this.showLoadingTree();
-
-        let recursiveSetNodeSelectable = (node, types) => {
-            node.is_selectable = types.includes(node.type);
-            for (let childNode of node.nodes) {
-                recursiveSetNodeSelectable(childNode, types);
-            }
-        };
-
-        for (let node of this.#treeSelectorData) {
-            recursiveSetNodeSelectable(node, types);
-        }
-
-        this.#loadTree();
+        this.#treeSelectorElmt.setSelectableTypes(types);
     }
 
     static getInstance(elementId = null) {

src/bemserver_ui/static/scripts/modules/components/tree.js

@@ -220,7 +220,8 @@ export class Tree extends HTMLElement {
             liElmt.appendChild(linkElmt);
 
             linkElmt.addEventListener("click", (event) => {
-                if (Parser.parseBoolOrDefault(node.is_selectable)) {
+                let isSelectable = linkElmt.classList.contains("disabled") ? false : true;
+                if (isSelectable) {
                     if (this.#treeNodeSelected != event.target) {
                         this.#treeNodeSelected?.classList.remove("active");
                         this.#treeNodeSelected = event.target;
@@ -323,10 +324,24 @@ export class Tree extends HTMLElement {
         this.#treeContainerElmt.innerHTML = "";
     }
 
-    load(data) {
+    load(data, selectableTypes = null) {
         this.hideLoading();
 
         if (data.length > 0) {
+            if (selectableTypes != null)
+            {
+                let recursiveSetNodeSelectable = (node, types) => {
+                    node.is_selectable = types.includes(node.type);
+                    for (let childNode of node.nodes) {
+                        recursiveSetNodeSelectable(childNode, types);
+                    }
+                };
+        
+                for (let node of data) {
+                    recursiveSetNodeSelectable(node, types);
+                }
+            }
+
             this.#renderNodes(data);
         }
         else {
@@ -337,6 +352,27 @@ export class Tree extends HTMLElement {
         }
     }
 
+    setSelectableTypes(types = null) {
+        if (types == null) return;
+
+        let linkElmts = [].slice.call(this.#treeContainerElmt.querySelectorAll(`.nav-tree-item-link`));
+        for (let linkElmt of linkElmts)
+        {
+            let nodeType = linkElmt.getAttribute("data-tree-node-type");
+            if (nodeType == null) continue;
+            if (types.includes(nodeType))
+            {
+                linkElmt.classList.remove("disabled");
+                linkElmt.removeAttribute("aria-disabled");
+            }
+            else
+            {
+                linkElmt.classList.add("disabled");
+                linkElmt.setAttribute("aria-disabled", true);
+            }
+        }
+    }
+
     select(nodeId) {
         this.unselect();
         let [nodeType, _nodeId] = nodeId.split("-");