kbcrm/Client/Components/kunde.ts

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"

export const kunde: m.ClosureComponent = (vnode) => {
    let currentKunde: iKunde = {
        id: -1,
        name: "",
        strasse: "",
        plz: "",
        ort: "",
        land: ""
    }
    
    return {
        oninit: (vnode) => {
            const routeParams = m.route.param()
            if (routeParams) {
                currentKunde = {
                    id: routeParams.id ? parseInt(routeParams.id) : -1,
                    name: routeParams.name || "",
                    strasse: routeParams.strasse || "",
                    plz: routeParams.plz || "",
                    ort: routeParams.ort || "",
                    land: routeParams.land || ""
                }
            }
        },
        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", 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)),
                    m("label", "Land", m(Input, {name: "land", value: currentKunde.land, type: "text"} as iInput))
                ])  
            )
        }
    }
}

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
 * (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, [])
    })
}

export const kundenliste: m.ClosureComponent = (vnode) => {
    let treenodes: iTreenode[] = createKundenTreenodes()
    let selectedNode: iTreenode | null = null
    
    const handleRowMarked = (node: iTreenode) => {
        selectedNode = node
    }
    
    const editKunde = (kunde: iKunde, e: Event) => {
        e.stopPropagation()
        m.route.set("/kunde", {id: kunde.id, name: kunde.name, strasse: kunde.strasse, plz: kunde.plz, ort: kunde.ort, land: kunde.land})
    }
    
    const showProjekte = (kunde: iKunde, e: Event) => {
        e.stopPropagation()
        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
        const cellStyle = isSelected ? {backgroundColor: 'lightgray'} : {}
        
        return [
            m("div", {style: cellStyle}, m("strong", kunde.name)),
            m("span", {style: cellStyle}, kunde.strasse),
            m("span", {style: cellStyle}, kunde.plz),
            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"))
        ]
    }
    
    const filterFunction = (node: iTreenode, searchvalue: string): boolean => {
        let kunde: iKunde = node.nodevalue
        let searchLower = searchvalue.toLowerCase()
        return kunde.name.toLowerCase().includes(searchLower) ||
               kunde.strasse.toLowerCase().includes(searchLower) ||
               kunde.plz.includes(searchLower) ||
               kunde.ort.toLowerCase().includes(searchLower) ||
               kunde.land.toLowerCase().includes(searchLower)
    }
    
    return {
        view: (vnode) => {
            return m("div.w3-container", {
                style: {
                    'max-width': '80%', 
                    'margin-left': 'auto',
                    'margin-right': 'auto',
                    display: 'flex', 
                    'flex-direction': 'column', 
                    height: 'inherit', 
                    'overflow-y': 'inherit'}},
                m("h1", "Kundenliste"),
                m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
                    m(Treetable, 
                        {
                            treenodes: treenodes,
                            columnmapper: columnmapper,
                            filter: filterFunction,
                            onRowMarked: handleRowMarked
                        } as iTreetable,
                        m(TopbarButton, {onclick: addKundeRoute, tooltip: "Neuen Kunden anlegen"} as iTopbarButton,
                            m("i.material-icons", "person_add")
                        )
                    )
                )
            )
        }
    }
}