Treetable: optionale isSelected-Callback für Zeilen-Markierung

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

@@ -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) {
@@ -72,6 +79,7 @@ export const Treetable: m.ClosureComponent<iTreetable> = (vnode) =>  {
                                     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
@@ -150,6 +164,7 @@ let Treerow: m.ClosureComponent<iTreerow> = (vnode) => {
                         level: vnode.attrs.level + 1,
                         columnmapper1: vnode.attrs.columnmapper1,
                         onRowMarked: vnode.attrs.onRowMarked,
+                        isSelected: vnode.attrs.isSelected,
                         isEven: ((z % 2) == 0)
                     } as iTreerow)
                 })