Formular zur Kundenverwaltung hinzugefügt: Unterstützung für das Hinzufügen und Aktualisieren von Kunden implementiert

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("h1", currentKunde.id === -1 ? "Neuen Kunden anlegen" : "Kundenstammblatt"),
-                m(Form, {showButtons: true, onsubmit: (null), oncancel: (null)} as iForm, [
+                m(Form, {showButtons: true, onsubmit: submit, oncancel: cancel} as iForm, [
-                    m("label", "Kundenname", m(Input, {name: "kundenname", value: currentKunde.name, type: "text"} as iInput)),
+                    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")
+                        )
                     )
                 )
             )