From 87f8d9e395639dfa28e6dc80998f2754f0f8e2ed Mon Sep 17 00:00:00 2001
From: Gerd <gerd.goldberg@web.de>
Date: Mon, 31 Aug 2026 13:32:56 +0200
Subject: [PATCH] =?UTF-8?q?Formular=20zur=20Kundenverwaltung=20hinzugef?=
 =?UTF-8?q?=C3=BCgt:=20Unterst=C3=BCtzung=20f=C3=BCr=20das=20Hinzuf=C3=BCg?=
 =?UTF-8?q?en=20und=20Aktualisieren=20von=20Kunden=20implementiert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Client/Components/kunde.ts | 66 +++++++++++++++++++++++++++++++++++---
 1 file changed, 62 insertions(+), 4 deletions(-)

diff --git a/Client/Components/kunde.ts b/Client/Components/kunde.ts
index 4e8c964..291e390 100644
--- a/Client/Components/kunde.ts
+++ b/Client/Components/kunde.ts
@@ -28,10 +28,32 @@ export const kunde: m.ClosureComponent = (vnode) => {
             }
         },
         view: (vnode) => {
+            const submit = (form: HTMLFormElement): boolean => {
+                const formData = new FormData(form)
+                const gespeicherterKunde: iKunde = {
+                    id: currentKunde.id,
+                    name: (formData.get("kundenname") as string) || "",
+                    strasse: (formData.get("strasse") as string) || "",
+                    plz: (formData.get("plz") as string) || "",
+                    ort: (formData.get("ort") as string) || "",
+                    land: (formData.get("land") as string) || ""
+                }
+                if (currentKunde.id === -1) {
+                    gespeicherterKunde.id = getNewKundeId()
+                    addKunde(gespeicherterKunde)
+                } else {
+                    updateKunde(gespeicherterKunde)
+                }
+                m.route.set("/kundenliste")
+                return true
+            }
+            const cancel = (e: Event) => {
+                m.route.set("/kundenliste")
+            }
             return m("div.w3-container.w3-twothird", 
-                m("h1", "Kundenstammblatt"),
-                m(Form, {showButtons: true, onsubmit: (null), oncancel: (null)} as iForm, [
-                    m("label", "Kundenname", m(Input, {name: "kundenname", value: currentKunde.name, type: "text"} as iInput)),
+                m("h1", currentKunde.id === -1 ? "Neuen Kunden anlegen" : "Kundenstammblatt"),
+                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)),
                     m("label", "Straße", m(Input, {name: "strasse", value: currentKunde.strasse, type: "text"} as iInput)),
                     m("label", "PLZ", m(Input, {name: "plz", value: currentKunde.plz, type: "text"} as iInput)),
                     m("label", "Ort", m(Input, {name: "ort", value: currentKunde.ort, type: "text"} as iInput)),
@@ -51,12 +73,41 @@ interface iKunde {
     land: string
 }
 
+function getNewKundeId(): number {
+    if (kundenDaten.length === 0) {
+        return 1
+    }
+    return Math.max(...kundenDaten.map((kunde: iKunde) => kunde.id)) + 1
+}
+
+function addKunde(kunde: iKunde): void {
+    kundenDaten.push(kunde)
+}
+
+function updateKunde(kunde: iKunde): void {
+    const index = kundenDaten.findIndex((k: iKunde) => k.id === kunde.id)
+    if (index !== -1) {
+        kundenDaten[index] = kunde
+    }
+}
+
 const kundenDaten: iKunde[] = [
     {id: 1, name: "Musterfirma GmbH", strasse: "Musterstraße 1", plz: "12345", ort: "Musterstadt", land: "Deutschland"},
     {id: 2, name: "Beispiel AG", strasse: "Beispielweg 2", plz: "54321", ort: "Beispielstadt", land: "Deutschland"},
     {id: 3, name: "Test Unternehmen", strasse: "Testallee 3", plz: "67890", ort: "Testdorf", land: "Österreich"}
 ]
 
+/**
+ * Erzeugt aus der Kundendatenliste die Treenode-Struktur für die Treetable der
+ * Kundenliste. Jeder Kunde wird zu einem expandierten Treenode ohne Kinder
+ * (expand=true, children=[]) - d.h. ein Blattknoten, der sofort in der
+ * Tabelle sichtbar ist und sich nicht weiter aufklappen lässt.
+ *
+ * Crée la structure de Treenode pour la Treetable de la liste des clients à
+ * partir de la liste des données clients. Chaque client devient un Treenode
+ * déployé sans enfants (expand=true, children=[]) - c'est-à-dire un nœud
+ * feuille, immédiatement visible dans le tableau et non dépliable.
+ */
 function createKundenTreenodes(): iTreenode[] {
     return kundenDaten.map((kunde: iKunde) => {
         return new Treenode(kunde, true, [])
@@ -81,6 +132,10 @@ export const kundenliste: m.ClosureComponent = (vnode) => {
         m.route.set("/projektliste", {kundenId: kunde.id})
     }
     
+    const addKundeRoute = () => {
+        m.route.set("/kunde", {id: -1, name: "", strasse: "", plz: "", ort: "", land: ""})
+    }
+    
     const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
         let kunde: iKunde = node.nodevalue
         const isSelected = selectedNode === node
@@ -126,7 +181,10 @@ export const kundenliste: m.ClosureComponent = (vnode) => {
                             columnmapper: columnmapper,
                             filter: filterFunction,
                             onRowMarked: handleRowMarked
-                        } as iTreetable
+                        } as iTreetable,
+                        m(TopbarButton, {onclick: addKundeRoute, tooltip: "Neuen Kunden anlegen"} as iTopbarButton,
+                            m("i.material-icons", "person_add")
+                        )
                     )
                 )
             )