Datenmodell für Kunden in Verzeichnis models ausgelagert: In-Memory-Speicher und REST-API-Funktionen implementiert

Client/Components/kunde.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 {iKunde, kundenDaten, getNewKundeId, addKunde, updateKunde} from "../models/kunde"
 
 export const kunde: m.ClosureComponent = (vnode) => {
     let currentKunde: iKunde = {
@@ -50,7 +51,7 @@ export const kunde: m.ClosureComponent = (vnode) => {
             const cancel = (e: Event) => {
                 m.route.set("/kundenliste")
             }
-            return m("div.w3-container.w3-twothird", 
+            return m("div.w3-container.w3-auto", 
                 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)),
@@ -64,39 +65,6 @@ export const kunde: m.ClosureComponent = (vnode) => {
     }
 }
 
-interface iKunde {
-    id: number
-    name: string
-    strasse: string
-    plz: string
-    ort: string
-    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
@@ -164,11 +132,8 @@ export const kundenliste: m.ClosureComponent = (vnode) => {
     
     return {
         view: (vnode) => {
-            return m("div.w3-container", {
+            return m("div.w3-container.w3-auto", {
                 style: {
-                    'max-width': '80%', 
-                    'margin-left': 'auto',
-                    'margin-right': 'auto',
                     display: 'flex', 
                     'flex-direction': 'column', 
                     height: 'inherit',