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', 

Client/models/kunde.ts

@@ -0,0 +1,156 @@
+import m from "mithril"
+
+/**
+ * Datenmodell für einen Kunden.
+ *
+ * Modèle de données pour un client.
+ */
+export interface iKunde {
+    id: number
+    name: string
+    strasse: string
+    plz: string
+    ort: string
+    land: string
+}
+
+/**
+ * In-Memory-Datenspeicher für Kunden. Wird als Fallback solange verwendet,
+ * bis die serverseitigen REST-Endpunkte verfügbar sind.
+ *
+ * Stockage en mémoire des clients. Utilisé comme solution de repli tant
+ * que les points de terminaison REST côté serveur ne sont pas disponibles.
+ */
+export 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"}
+]
+
+/**
+ * Liefert die nächste freie Kunden-ID auf Basis des In-Memory-Speichers.
+ * Sobald die serverseitige ID-Vergabe verfügbar ist, entfällt diese Funktion.
+ *
+ * Retourne le prochain identifiant client libre à partir du stockage en
+ * mémoire. Cette fonction deviendra obsolète dès que l'attribution des
+ * identifiants côté serveur sera disponible.
+ */
+export function getNewKundeId(): number {
+    if (kundenDaten.length === 0) {
+        return 1
+    }
+    return Math.max(...kundenDaten.map((kunde: iKunde) => kunde.id)) + 1
+}
+
+/**
+ * Fügt einen neuen Kunden dem In-Memory-Speicher hinzu.
+ *
+ * Ajoute un nouveau client au stockage en mémoire.
+ */
+export function addKunde(kunde: iKunde): void {
+    kundenDaten.push(kunde)
+}
+
+/**
+ * Aktualisiert einen bestehenden Kunden im In-Memory-Speicher.
+ *
+ * Met à jour un client existant dans le stockage en mémoire.
+ */
+export function updateKunde(kunde: iKunde): void {
+    const index = kundenDaten.findIndex((k: iKunde) => k.id === kunde.id)
+    if (index !== -1) {
+        kundenDaten[index] = kunde
+    }
+}
+
+/**
+ * Liefert eine Kopie aller Kunden aus dem In-Memory-Speicher.
+ *
+ * Retourne une copie de tous les clients du stockage en mémoire.
+ */
+export function getKunden(): iKunde[] {
+    return [...kundenDaten]
+}
+
+/* ------------------------------------------------------------------ */
+/* REST-API-Aufrufe (Client-Seite)                                     */
+/* ------------------------------------------------------------------ */
+/* Die folgenden Funktionen kapseln die Kommunikation mit den           */
+/* serverseitigen REST-Endpunkten. Die Endpunkte sind noch nicht       */
+/* implementiert und werden später nachgereicht.                      */
+/*                                                                      */
+/* Les fonctions suivantes encapsulent la communication avec les       */
+/* points de terminaison REST côté serveur. Ceux-ci ne sont pas encore */
+/* implémentés et seront fournis ultérieurement.                       */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Basis-Pfad der Kunden-REST-Endpunkte.
+ *
+ * Chemin de base des points de terminaison REST des clients.
+ */
+const KUNDE_REST_BASE = "/xhr/kunde"
+
+/**
+ * Lädt die Kundenliste vom Server.
+ *
+ * Charge la liste des clients depuis le serveur.
+ */
+export function fetchKunden(): Promise<iKunde[]> {
+    return m.request({
+        method: "GET",
+        url: KUNDE_REST_BASE + "/list"
+    }).then((result) => result as iKunde[])
+}
+
+/**
+ * Lädt einen einzelnen Kunden anhand seiner ID vom Server.
+ *
+ * Charge un client unique identifié par son id depuis le serveur.
+ */
+export function fetchKundeById(id: number): Promise<iKunde> {
+    return m.request({
+        method: "GET",
+        url: KUNDE_REST_BASE + "/get",
+        params: {id: id}
+    }).then((result) => result as iKunde)
+}
+
+/**
+ * Legt einen neuen Kunden serverseitig an.
+ *
+ * Crée un nouveau client côté serveur.
+ */
+export function createKundeREST(kunde: iKunde): Promise<iKunde> {
+    return m.request({
+        method: "POST",
+        url: KUNDE_REST_BASE + "/create",
+        body: kunde
+    }).then((result) => result as iKunde)
+}
+
+/**
+ * Aktualisiert einen bestehenden Kunden serverseitig.
+ *
+ * Met à jour un client existant côté serveur.
+ */
+export function updateKundeREST(kunde: iKunde): Promise<iKunde> {
+    return m.request({
+        method: "PUT",
+        url: KUNDE_REST_BASE + "/update",
+        body: kunde
+    }).then((result) => result as iKunde)
+}
+
+/**
+ * Löscht einen Kunden serverseitig anhand seiner ID.
+ *
+ * Supprime un client côté serveur identifié par son id.
+ */
+export function deleteKundeREST(id: number): Promise<void> {
+    return m.request({
+        method: "DELETE",
+        url: KUNDE_REST_BASE + "/delete",
+        params: {id: id}
+    }).then(() => undefined)
+}