Merge pull request #181 from emncnozge/update-tree

Add Icon Support to TreeData

Author: ofaruk84

README.md

@@ -1365,7 +1365,8 @@ treeNodes.Add("sample-child-1", new TreeNode()
     Id = "sample-child-1",
     Data = new TreeData()
     {
-        Name = "Sample Child 1"
+        Name = "Sample Child 1",
+        Icon = "star"
     },
     HasChildren = false,
     Children = new List<string>() {}

SiemensIXBlazor.Tests/TreeTests.cs

@@ -206,4 +206,22 @@ public async Task OnAfterRenderAsync_FirstRender_AttachesListeners()
             ), Times.AtLeastOnce());
         }
     }
+
+    [Fact]
+    public void TreeData_WithIcon_ShouldSerializeCorrectly()
+    {
+        // Arrange
+        var treeData = new TreeData
+        {
+            Name = "Test Node",
+            Icon = "star"
+        };
+
+        // Act
+        var json = Newtonsoft.Json.JsonConvert.SerializeObject(treeData);
+
+        // Assert
+        Assert.Contains("\"name\":\"Test Node\"", json);
+        Assert.Contains("\"icon\":\"star\"", json);
+    }
 }

SiemensIXBlazor/Components/Tree/Tree.razor.cs

@@ -12,7 +12,6 @@
 using Newtonsoft.Json;
 using SiemensIXBlazor.Interops;
 using SiemensIXBlazor.Objects;
-using System.Dynamic;
 using System.Text.Json;
 
 namespace SiemensIXBlazor.Components.Tree

SiemensIXBlazor/Objects/TreeData.cs

@@ -15,5 +15,7 @@ public class TreeData
     {
         [JsonProperty("name")]
         public string? Name { get; set; }
+        [JsonProperty("icon")]
+        public string? Icon { get; set; }
     }
 }

SiemensIXBlazor/wwwroot/js/siemens-ix/interops/treeInterop.js

@@ -7,43 +7,78 @@
 // LICENSE file in the root directory of this source tree.
 //  -----------------------------------------------------------------------
 
+
+function getElementOrThrow(id) {
+  const el = document.getElementById(id);
+  if (!el) throw new Error(`Element with ID ${id} not found`);
+  return el;
+}
+
+function createElement(tag, props, children = []) {
+  const el = document.createElement(tag);
+  Object.assign(el, props);
+  children.forEach(child => el.appendChild(child));
+  return el;
+}
+
 export function setTreeModel(id, treeModel) {
   try {
-    const element = document.getElementById(id);
-    if (!element) {
-      throw new Error(`Element with ID ${id} not found`);
-    }
+    const element = getElementOrThrow(id);
+    element.renderItem = (_, item, __, context, update) => {
+      const { icon: iconName, name: itemName } = item.data || {};
+      const children = [];
+      
+      if (iconName) {
+        children.push(createElement('ix-icon', {
+          name: iconName,
+          style: 'margin-right: 0.5rem'
+        }));
+      }
+      
+      let nameEl;
+      if (itemName) {
+        nameEl = createElement('span', { innerText: itemName });
+        children.push(nameEl);
+      }
+      
+      const el = createElement('ix-tree-item', {
+        hasChildren: item.hasChildren,
+        context: context[item.id]
+      }, children);
+      
+      update(updateTreeItem => {
+        const uData = updateTreeItem.data || {};
+        if (nameEl && uData.name) nameEl.innerText = uData.name;
+      });
+      
+      return el;
+    };
     element.model = JSON.parse(treeModel);
-  } catch {
-    console.error("Failed to set tree model:", error);
+  } catch (error) {
+    console.error('Failed to set tree model:', error);
   }
 }
 
 export function setTreeContext(id, treeContext) {
   try {
-    const element = document.getElementById(id);
-    if (!element) {
-      throw new Error(`Element with ID ${id} not found`);
-    }
+    const element = getElementOrThrow(id);
     element.context = JSON.parse(treeContext);
-  } catch {
-    console.error("Failed to set tree context:", error);
+  } catch (error) {
+    console.error('Failed to set tree context:', error);
   }
 }
 
 export function markItemAsDirty(treeId, itemIdentifiers) {
-    console.log('markItemAsDirty called:', treeId, itemIdentifiers);
-
-    const treeElement = document.getElementById(treeId);
-    if (!treeElement) {
-        console.warn(`Tree element with id '${treeId}' not found`);
-        return;
-    }
-
-    if (typeof treeElement.markItemAsDirty === 'function') {
-        treeElement.markItemAsDirty(itemIdentifiers);
-        console.log('Items marked as dirty:', itemIdentifiers);
-    } else {
-        console.warn('markItemAsDirty method not available on tree element');
-    }
+  console.log('markItemAsDirty called:', treeId, itemIdentifiers);
+  const treeElement = document.getElementById(treeId);
+  if (!treeElement) {
+    console.warn(`Tree element with id '${treeId}' not found`);
+    return;
+  }
+  if (typeof treeElement.markItemAsDirty === 'function') {
+    treeElement.markItemAsDirty(itemIdentifiers);
+    console.log('Items marked as dirty:', itemIdentifiers);
+  } else {
+    console.warn('markItemAsDirty method not available on tree element');
+  }
 }