feat(nav): Breadcrumb-Navigation für Hierarchie-Aufrufkette

Neue BreadcrumbBar-Widget-Komponente (breadcrumb.ts) zeigt die
Aufrufkette als anklickbare Leiste. Der Route-Param bc (JSON-String)
transportiert die Vorgänger-Ansichten durch alle Listen und Masken.
Jede Ansicht hängt beim Weiternavigieren ihren eigenen Crumb an die
Kette an; Masken reichen bc beim Speichern/Abbrechen zurück.
Erfasst: kunde, projekt, kontaktadresse, call_log, kontakt.

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>

Client/Components/projekt.ts

@@ -2,6 +2,7 @@ import m from "mithril"
 import {Form, iForm} from "./widgets/form"
 import { Input, iInput} from "./widgets/inputs"
 import {Treenode, iTreenode, Treetable, iTreetable, TopbarButton, iTopbarButton} from "./widgets/Treetable_V2"
+import {BreadcrumbBar, iBreadcrumb, iBreadcrumbBar, parseBc, serializeBc} from "./widgets/breadcrumb"
 import {iProjekt, fetchProjekte, fetchProjektById, createProjektREST, updateProjektREST} from "../models/projekt"
 import {iKunde, fetchKundeById} from "../models/kunde"
 import {showServerError} from "./auth/authmessages"
@@ -13,11 +14,20 @@ export const projektliste: m.ClosureComponent = (vnode) => {
     // Kundenname für die Überschrift, asynchron per fetchKundeById
     // aufgelöst, falls nicht in den Route-Params enthalten.
     let kundenName: string = ""
+    // Breadcrumb-Kette der Vorgänger-Ansichten (aus Route-Param bc).
+    let breadcrumbs: iBreadcrumb[] = []
 
     const handleRowMarked = (node: iTreenode) => {
         selectedNode = node
     }
 
+    // Eigener Listen-Crumb für die Breadcrumb-Kette.
+    const ownCrumb = (): iBreadcrumb => ({
+        route: "/projektliste",
+        params: filterKundenId !== null ? {kunden_id: filterKundenId, kunden_name: kundenName} : {},
+        label: filterKundenId !== null ? "Projekte: " + kundenName : "Projekte"
+    })
+
     const addProjektRoute = () => {
         const params: any = {id: -1}
         // Nur bei kundengefilterter Liste den Kunden vorbelegen.
@@ -25,22 +35,27 @@ export const projektliste: m.ClosureComponent = (vnode) => {
             params.kunden_id = filterKundenId
             params.kunden_name = kundenName
         }
+        // Breadcrumb-Kette um eigene Position erweitern.
+        params.bc = serializeBc([...breadcrumbs, ownCrumb()])
         m.route.set("/projekt", params)
     }
 
     const editProjekt = (projekt: iProjekt, e: Event) => {
         e.stopPropagation()
-        m.route.set("/projekt", {id: projekt.id})
+        // Breadcrumb-Kette um eigene Position erweitern.
+        m.route.set("/projekt", {id: projekt.id, bc: serializeBc([...breadcrumbs, ownCrumb()])})
     }
 
     const showCallLogs = (projekt: iProjekt, e: Event) => {
         e.stopPropagation()
-        m.route.set("/calllogliste", {projekt_id: projekt.id})
+        // Breadcrumb-Kette um eigene Position erweitern.
+        m.route.set("/calllogliste", {projekt_id: projekt.id, bc: serializeBc([...breadcrumbs, ownCrumb()])})
     }
 
     const showKontaktadressen = (projekt: iProjekt, e: Event) => {
         e.stopPropagation()
-        m.route.set("/kontaktadresseliste", {projekt_id: projekt.id})
+        // Breadcrumb-Kette um eigene Position erweitern.
+        m.route.set("/kontaktadresseliste", {projekt_id: projekt.id, bc: serializeBc([...breadcrumbs, ownCrumb()])})
     }
 
     const addCallLog = (projekt: iProjekt, e: Event) => {
@@ -48,6 +63,14 @@ export const projektliste: m.ClosureComponent = (vnode) => {
         const now = new Date()
         const datum = now.toISOString().split('T')[0]
         const uhrzeit = now.toTimeString().split(':')[0] + ':' + now.toTimeString().split(':')[1]
+        // Breadcrumb-Kette um Projektliste und Notizliste erweitern, da
+        // die Maske nach Speichern/Abbrechen in die projektgefilterte
+        // Notizliste zurückkehrt.
+        const chain = [...breadcrumbs, ownCrumb(), {
+            route: "/calllogliste",
+            params: {projekt_id: projekt.id},
+            label: "Notizen: " + projekt.projektname
+        } as iBreadcrumb]
         m.route.set("/call_log", {
             id: -1,
             kunden_name: projekt.kunden_name,
@@ -61,7 +84,8 @@ export const projektliste: m.ClosureComponent = (vnode) => {
             telefon: "",
             notiz: "",
             wiedervorlage_datum: "",
-            erledigt: false
+            erledigt: false,
+            bc: serializeBc(chain)
         })
     }
 
@@ -103,6 +127,8 @@ export const projektliste: m.ClosureComponent = (vnode) => {
                 filterKundenId = null
                 kundenName = ""
             }
+            // Breadcrumb-Kette aus Route-Param parsen.
+            breadcrumbs = parseBc(routeParams && routeParams.bc)
             // Projekte asynchron vom Server laden. Die Filterung nach
             // kunden_id erfolgt serverseitig, sofern ein Filter gesetzt ist.
             fetchProjekte(filterKundenId !== null ? filterKundenId : undefined).then((result) => {
@@ -123,6 +149,10 @@ export const projektliste: m.ClosureComponent = (vnode) => {
                     height: 'inherit',
                     'overflow-y': 'inherit'}},
                 m("h1", kundenName ? "Projektliste für " + kundenName : "Projektliste"),
+                m(BreadcrumbBar, {
+                    breadcrumbs: breadcrumbs,
+                    current: kundenName ? "Projekte: " + kundenName : "Projekte"
+                } as iBreadcrumbBar),
                 m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
                     m(Treetable,
                         {
@@ -162,11 +192,15 @@ export const Projekt: m.ClosureComponent = (vnode) => {
         verantwortlicher: "",
         startdatum: ""
     }
+    // Breadcrumb-Kette der Vorgänger-Ansichten (aus Route-Param bc).
+    let breadcrumbs: iBreadcrumb[] = []
 
     return {
         oninit: (vnode) => {
             const routeParams = m.route.param()
             const id = routeParams && routeParams.id ? parseInt(routeParams.id) : -1
+            // Breadcrumb-Kette aus Route-Param parsen.
+            breadcrumbs = parseBc(routeParams && routeParams.bc)
             if (id !== -1) {
                 // Projektdaten frisch vom Server holen, um zwischenzeitliche
                 // Änderungen anderer Nutzer nicht zu überschreiben.
@@ -192,15 +226,23 @@ export const Projekt: m.ClosureComponent = (vnode) => {
                     verantwortlicher: (formData.get("verantwortlicher") as string) || "",
                     startdatum: (formData.get("startdatum") as string) || ""
                 }
+                // Bei Rückkehr zur Projektliste das bc ohne das letzte
+                // Glied (die Projektliste selbst) durchreichen.
+                const listBc = serializeBc(breadcrumbs.slice(0, -1))
+                const routeParams: any = {kunden_id: currentProjekt.kunden_id, kunden_name: currentProjekt.kunden_name}
+                if (listBc) routeParams.bc = listBc
                 if (currentProjekt.id === -1) {
-                    createProjektREST(gespeichertesProjekt).then(() => m.route.set("/projektliste", {kunden_id: currentProjekt.kunden_id, kunden_name: currentProjekt.kunden_name})).catch((e) => showServerError(e))
+                    createProjektREST(gespeichertesProjekt).then(() => m.route.set("/projektliste", routeParams)).catch((e) => showServerError(e))
                 } else {
-                    updateProjektREST(gespeichertesProjekt).then(() => m.route.set("/projektliste", {kunden_id: currentProjekt.kunden_id, kunden_name: currentProjekt.kunden_name})).catch((e) => showServerError(e))
+                    updateProjektREST(gespeichertesProjekt).then(() => m.route.set("/projektliste", routeParams)).catch((e) => showServerError(e))
                 }
                 return true
             }
             const cancel = (e: Event) => {
-                m.route.set("/projektliste", {kunden_id: currentProjekt.kunden_id, kunden_name: currentProjekt.kunden_name})
+                const listBc = serializeBc(breadcrumbs.slice(0, -1))
+                const routeParams: any = {kunden_id: currentProjekt.kunden_id, kunden_name: currentProjekt.kunden_name}
+                if (listBc) routeParams.bc = listBc
+                m.route.set("/projektliste", routeParams)
             }
             return m("div.w3-container.w3-auto.form-view-container",
                 m("div", {style: {display: 'flex', 'align-items': 'center', 'justify-content': 'space-between'}},
@@ -219,6 +261,10 @@ export const Projekt: m.ClosureComponent = (vnode) => {
                         ]
                         : null
                 ),
+                m(BreadcrumbBar, {
+                    breadcrumbs: breadcrumbs,
+                    current: currentProjekt.id === -1 ? "Neues Projekt" : "Projekt-Stammblatt"
+                } as iBreadcrumbBar),
                 m("div", {style: {flex: '1', 'min-height': '0'}},
                     m(Form, {showButtons: true, onsubmit: submit, oncancel: cancel} as iForm, [
                     m("input", {type: "hidden", name: "kunden_id", value: currentProjekt.kunden_id}),