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/kontaktadresse.ts

@@ -2,6 +2,7 @@ import m from "mithril"
 import {Form, iForm} from "./widgets/form"
 import { Input, iInput, Textarea, iTextarea} from "./widgets/inputs"
 import {Treenode, iTreenode, Treetable, iTreetable, TopbarButton, iTopbarButton} from "./widgets/Treetable_V2"
+import {BreadcrumbBar, iBreadcrumb, iBreadcrumbBar, parseBc, serializeBc} from "./widgets/breadcrumb"
 import {iKontaktadresse, fetchKontaktadressen, fetchKontaktadresseById, createKontaktadresseREST, updateKontaktadresseREST} from "../models/kontaktadresse"
 import {iProjekt, fetchProjektById} from "../models/projekt"
 import {showServerError} from "./auth/authmessages"
@@ -13,23 +14,35 @@ export const kontaktadresseliste: m.ClosureComponent = (vnode) => {
     // Projektname für die Überschrift, asynchron per fetchProjektById
     // aufgelöst, falls nicht in den Route-Params enthalten.
     let projektName: 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: "/kontaktadresseliste",
+        params: filterProjektId !== null ? {projekt_id: filterProjektId} : {},
+        label: filterProjektId !== null ? "Kontaktadressen: " + projektName : "Kontaktadressen"
+    })
+
     const addKontaktadresseRoute = () => {
         const params: any = {id: -1}
         if (filterProjektId !== null) {
             params.projekt_id = filterProjektId
             params.projekt_name = projektName
         }
+        // Breadcrumb-Kette um eigene Position erweitern.
+        params.bc = serializeBc([...breadcrumbs, ownCrumb()])
         m.route.set("/kontaktadresse", params)
     }
 
     const editKontaktadresse = (kontaktadresse: iKontaktadresse, e: Event) => {
         e.stopPropagation()
-        m.route.set("/kontaktadresse", {id: kontaktadresse.id})
+        // Breadcrumb-Kette um eigene Position erweitern.
+        m.route.set("/kontaktadresse", {id: kontaktadresse.id, bc: serializeBc([...breadcrumbs, ownCrumb()])})
     }
 
     const addCallLog = (kontaktadresse: iKontaktadresse, e: Event) => {
@@ -37,6 +50,14 @@ export const kontaktadresseliste: 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 Kontaktadressenliste und Notizliste
+        // erweitern, da die Maske nach Speichern/Abbrechen in die
+        // projektgefilterte Notizliste zurückkehrt.
+        const chain = [...breadcrumbs, ownCrumb(), {
+            route: "/calllogliste",
+            params: {projekt_id: kontaktadresse.projekt_id},
+            label: "Notizen: " + kontaktadresse.projekt_name
+        } as iBreadcrumb]
         m.route.set("/call_log", {
             id: -1,
             projekt_id: kontaktadresse.projekt_id,
@@ -49,7 +70,8 @@ export const kontaktadresseliste: m.ClosureComponent = (vnode) => {
             telefon: kontaktadresse.telefon,
             notiz: "",
             wiedervorlage_datum: "",
-            erledigt: false
+            erledigt: false,
+            bc: serializeBc(chain)
         })
     }
 
@@ -92,6 +114,8 @@ export const kontaktadresseliste: m.ClosureComponent = (vnode) => {
                 filterProjektId = null
                 projektName = ""
             }
+            // Breadcrumb-Kette aus Route-Param parsen.
+            breadcrumbs = parseBc(routeParams && routeParams.bc)
             // Kontaktadressen asynchron vom Server laden. Die Filterung
             // nach projekt_id erfolgt serverseitig, sofern ein Filter
             // gesetzt ist.
@@ -113,6 +137,10 @@ export const kontaktadresseliste: m.ClosureComponent = (vnode) => {
                     height: 'inherit',
                     'overflow-y': 'inherit'}},
                 m("h1", projektName ? "Kontaktadressen für " + projektName : "Kontaktadressen"),
+                m(BreadcrumbBar, {
+                    breadcrumbs: breadcrumbs,
+                    current: filterProjektId !== null ? "Kontaktadressen: " + projektName : "Kontaktadressen"
+                } as iBreadcrumbBar),
                 m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
                     m(Treetable,
                         {
@@ -166,11 +194,15 @@ export const Kontaktadresse: m.ClosureComponent = (vnode) => {
         land: "",
         notiz: ""
     }
+    // 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) {
                 // Kontaktadresse frisch vom Server holen.
                 fetchKontaktadresseById(id).then((result) => {
@@ -183,6 +215,14 @@ export const Kontaktadresse: m.ClosureComponent = (vnode) => {
             }
         },
         view: (vnode) => {
+            // Rückkehr zur Kontaktadressenliste; das bc ohne das letzte
+            // Glied (die Kontaktadressenliste selbst) durchreichen.
+            const goBack = () => {
+                const listBc = serializeBc(breadcrumbs.slice(0, -1))
+                const routeParams: any = {projekt_id: currentKontaktadresse.projekt_id, projekt_name: currentKontaktadresse.projekt_name}
+                if (listBc) routeParams.bc = listBc
+                m.route.set("/kontaktadresseliste", routeParams)
+            }
             const submit = (form: HTMLFormElement): boolean => {
                 const formData = new FormData(form)
                 const gespeicherteKontaktadresse: iKontaktadresse = {
@@ -202,19 +242,25 @@ export const Kontaktadresse: m.ClosureComponent = (vnode) => {
                     notiz: (formData.get("notiz") as string) || ""
                 }
                 if (currentKontaktadresse.id === -1) {
-                    createKontaktadresseREST(gespeicherteKontaktadresse).then(() => m.route.set("/kontaktadresseliste", {projekt_id: currentKontaktadresse.projekt_id, projekt_name: currentKontaktadresse.projekt_name})).catch((e) => showServerError(e))
+                    createKontaktadresseREST(gespeicherteKontaktadresse).then(() => goBack()).catch((e) => showServerError(e))
                 } else {
-                    updateKontaktadresseREST(gespeicherteKontaktadresse).then(() => m.route.set("/kontaktadresseliste", {projekt_id: currentKontaktadresse.projekt_id, projekt_name: currentKontaktadresse.projekt_name})).catch((e) => showServerError(e))
+                    updateKontaktadresseREST(gespeicherteKontaktadresse).then(() => goBack()).catch((e) => showServerError(e))
                 }
                 return true
             }
             const cancel = (e: Event) => {
-                m.route.set("/kontaktadresseliste", {projekt_id: currentKontaktadresse.projekt_id, projekt_name: currentKontaktadresse.projekt_name})
+                goBack()
             }
             return m("div.w3-container.w3-auto.form-view-container",
                 m("h1", currentKontaktadresse.id === -1
                     ? "Neue Kontaktadresse für " + currentKontaktadresse.projekt_name
                     : "Kontaktadresse-Stammblatt"),
+                m(BreadcrumbBar, {
+                    breadcrumbs: breadcrumbs,
+                    current: currentKontaktadresse.id === -1
+                        ? "Neue Kontaktadresse"
+                        : "Kontaktadresse-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: "projekt_id", value: currentKontaktadresse.projekt_id}),