From 68e9de8dc1b430463b025c5a01d233b841705ef0 Mon Sep 17 00:00:00 2001
From: Gerd <gerd.goldberg@web.de>
Date: Tue, 1 Sep 2026 10:27:13 +0200
Subject: [PATCH] =?UTF-8?q?Treetable:=20optionale=20isSelected-Callback=20?=
 =?UTF-8?q?f=C3=BCr=20Zeilen-Markierung?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die Treetable unterstützt nun ein optionales isSelected-Callback (iTreetable.isSelected),
mit dem die Hintergrund-Einfärbung der gesamten <tr>-Zeile gesteuert werden kann. Bisher
musste jede Zelle einzeln über den columnmapper gestylt werden. Die Markierung verwendet
die w3-theme-l4-Klasse statt einer festen Farbe.

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
---
 Client/Components/widgets/Treetable_V2.ts | 29 +++++++++++++++++------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/Client/Components/widgets/Treetable_V2.ts b/Client/Components/widgets/Treetable_V2.ts
index 7bc46b9..49ff947 100644
--- a/Client/Components/widgets/Treetable_V2.ts
+++ b/Client/Components/widgets/Treetable_V2.ts
@@ -33,10 +33,17 @@ export interface iTreetable {
     columnmapper: Columnmapper
     onRowMarked?: (node: iTreenode) => void
     filter?: (row:iTreenode, searchvalue:string) => boolean
+    /** Optional: Callback, der für eine Treenode bestimmt, ob die gesamte
+     *  Tabellenzeile als markiert (selektiert) dargestellt werden soll.
+     *  Wenn gesetzt, übernimmt das Widget die Hintergrund-Einfärbung der
+     *  <tr>-Zeile; die columnmapper-Inhalte brauchen dann kein eigenes
+     *  Selektions-Styling mehr. */
+    isSelected?: (node: iTreenode) => boolean
 }
 
 export const Treetable: m.ClosureComponent<iTreetable> = (vnode) =>  {
     let onRowMarked = vnode.attrs.onRowMarked === undefined ? (node: iTreenode) => {} : vnode.attrs.onRowMarked
+    let isSelected = vnode.attrs.isSelected
     let expandtoggle: boolean = true
     let searchvalue:string = ""
     function setSearchvalue(v:string) {
@@ -68,10 +75,11 @@ export const Treetable: m.ClosureComponent<iTreetable> = (vnode) =>  {
                                 if (vnode.attrs.filter == undefined || (vnode.attrs.filter != undefined && vnode.attrs.filter(tn, searchvalue) == true)) { 
                                 return m(Treerow, {
                                     // ACHTUNG: Änderungen hier müssen unten beim rekursiven Aufruf der Treerow-Funktion ebenfalls eingebaut werden
-                                    treenode: tn, 
-                                    level: 0, 
-                                    columnmapper1: vnode.attrs.columnmapper, 
+                                    treenode: tn,
+                                    level: 0,
+                                    columnmapper1: vnode.attrs.columnmapper,
                                     onRowMarked: onRowMarked,
+                                    isSelected: isSelected,
                                     isEven: ((z % 2) == 0)} as iTreerow)
                                 }
                                 else {
@@ -91,16 +99,22 @@ interface iTreerow {
     level: number
     columnmapper1: Columnmapper
     onRowMarked: (node: iTreenode) => void
+    isSelected?: (node: iTreenode) => boolean
     isEven?: boolean
 }
 let Treerow: m.ClosureComponent<iTreerow> = (vnode) => {
     
     return {
         view: (vnode) => {
+            // Wenn ein isSelected-Callback gesetzt ist, prüfen, ob diese
+            // Zeile selektiert ist; in diesem Fall wird der Hintergrund der
+            // gesamten <tr>-Zeile eingefärbt.
+            const rowSelected = vnode.attrs.isSelected ? vnode.attrs.isSelected(vnode.attrs.treenode) : false
             return [
                 m("tr.w3-border-theme", {onmouseup: () => vnode.attrs.onRowMarked(vnode.attrs.treenode),
                          onkeyup: () => vnode.attrs.onRowMarked(vnode.attrs.treenode),
-                         class: (vnode.attrs.isEven ? "w3-tablerow-even" : "w3-tablerow-odd"),
+                         class: (vnode.attrs.isEven ? "w3-tablerow-even" : "w3-tablerow-odd")
+                               + (rowSelected ? " w3-theme-l4" : ""),
                          style: {'border-top-style': 'solid', 'border-top-width': '1px'}
                     }, 
                     m("td", // Zunächst wird ein td-Element für die erste Spalte der Tabelle erzeugt, damit dort die
@@ -146,10 +160,11 @@ let Treerow: m.ClosureComponent<iTreerow> = (vnode) => {
                 vnode.attrs.treenode.hasChildren && vnode.attrs.treenode.expand
                 ? vnode.attrs.treenode.children.map((tn: iTreenode, z) => {
                     return m(Treerow, {
-                        treenode: tn, 
-                        level: vnode.attrs.level + 1, 
-                        columnmapper1: vnode.attrs.columnmapper1, 
+                        treenode: tn,
+                        level: vnode.attrs.level + 1,
+                        columnmapper1: vnode.attrs.columnmapper1,
                         onRowMarked: vnode.attrs.onRowMarked,
+                        isSelected: vnode.attrs.isSelected,
                         isEven: ((z % 2) == 0)
                     } as iTreerow)
                 })