Kontakte: Modell, Liste und Formular für Ansprechpartner beim Kunden

Neue Entität "Kontakt" (Ansprechpartner, FK kundenId) analog zu Projekte:
- Client/models/kontakt.ts: Interface, In-Memory-Mock, CRUD- und REST-Stubs
- Client/Components/kontakt.ts: Kontaktliste (Treetable, kundengefiltert) und Stammblatt-Formular
- index.ts: Routen /kontaktliste und /kontakt (kein Hauptmenü-Eintrag)
- kunde.ts: Kontakte-Button in Kundenliste und im Kunden-Formular (nur bei bestehendem Kunden)

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

Client/Components/kunde.ts

@@ -52,7 +52,14 @@ export const kunde: m.ClosureComponent = (vnode) => {
                 m.route.set("/kundenliste")
             }
             return m("div.w3-container.w3-auto.form-view-container",
-                m("h1", currentKunde.id === -1 ? "Neuen Kunden anlegen" : "Kundenstammblatt"),
+                m("div", {style: {display: 'flex', 'align-items': 'center', 'justify-content': 'space-between'}},
+                    m("h1", currentKunde.id === -1 ? "Neuen Kunden anlegen" : "Kundenstammblatt"),
+                    currentKunde.id !== -1
+                        ? m("button.w3-button.w3-theme",
+                            {onclick: () => m.route.set("/kontaktliste", {kundenId: currentKunde.id})},
+                            m("i.material-icons", "contact_page"), " Kontakte")
+                        : null
+                ),
                 m("div", {style: {flex: '1', 'min-height': '0'}},
                     m(Form, {showButtons: true, onsubmit: submit, oncancel: cancel} as iForm, [
                     m("label", "Kundenname", m(Input, {name: "kundenname", value: currentKunde.name, type: "text", required: true} as iInput)),
@@ -96,6 +103,11 @@ export const kundenliste: m.ClosureComponent = (vnode) => {
         e.stopPropagation()
         m.route.set("/projektliste", {kundenId: kunde.id})
     }
+
+    const showKontakte = (kunde: iKunde, e: Event) => {
+        e.stopPropagation()
+        m.route.set("/kontaktliste", {kundenId: kunde.id})
+    }
     
     const addKundeRoute = () => {
         m.route.set("/kunde", {id: -1, name: "", strasse: "", plz: "", ort: "", land: ""})
@@ -113,7 +125,8 @@ export const kundenliste: m.ClosureComponent = (vnode) => {
             m("span", {style: cellStyle}, kunde.ort),
             m("span", {style: cellStyle}, kunde.land),
             m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => editKunde(kunde, e)}, m("i.material-icons", "edit")),
-            m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => showProjekte(kunde, e)}, m("i.material-icons", "library_books"))
+            m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => showProjekte(kunde, e)}, m("i.material-icons", "library_books")),
+            m("button.w3-button.w3-small", {title: "Kontakte anzeigen", style: cellStyle, onclick: (e: Event) => showKontakte(kunde, e)}, m("i.material-icons", "contact_page"))
         ]
     }