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"
import {BreadcrumbBar, iBreadcrumb, iBreadcrumbBar, parseBc, serializeBc} from "./widgets/breadcrumb"
import {iKunde, fetchKunden, fetchKundeById, createKundeREST, updateKundeREST} from "../models/kunde"
import {showServerError} from "./auth/authmessages"
import {guardedNavigate, DirtyMaskHelper} from "./widgets/dirtyguard"

export const kunde: m.ClosureComponent = (vnode) => {
    let currentKunde: iKunde = {
        id: -1,
        name: "",
        strasse: "",
        plz: "",
        ort: "",
        land: ""
    }
    // Breadcrumb-Kette der Vorgänger-Ansichten (aus Route-Param bc).
    let breadcrumbs: iBreadcrumb[] = []
    // DirtyMaskHelper kapselt den isDirty/Guard-Boilerplate.
    const guard = new DirtyMaskHelper("/kundenliste")

    return {
        oninit: (vnode) => {
            const routeParams = m.route.param()
            const id = routeParams && routeParams.id ? parseInt(routeParams.id) : -1
            // Breadcrumb-Kette aus Route-Param parsen.
            breadcrumbs = parseBc(routeParams && routeParams.bc)
            guard.registerGuard()
            if (id !== -1) {
                // Kundendaten frisch vom Server holen, um zwischenzeitliche
                // Änderungen anderer Nutzer nicht zu überschreiben.
                fetchKundeById(id).then((result) => {
                    currentKunde = result
                }).catch((e) => showServerError(e))
            }
        },
        onremove: (vnode) => {
            guard.cleanup()
        },
        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) {
                    createKundeREST(gespeicherterKunde).then(() => guard.navigateAfterSave()).catch((e) => { showServerError(e); guard.markDirty() })
                } else {
                    updateKundeREST(gespeicherterKunde).then(() => guard.navigateAfterSave()).catch((e) => { showServerError(e); guard.markDirty() })
                }
                return true
            }
            return m("div.w3-container.w3-auto.form-view-container",
                m("div", {style: {display: 'flex', 'align-items': 'center', 'justify-content': 'space-between'}},
                    m("h1", currentKunde.id === -1 ? "Neuen Kunden anlegen" : "Kundenstammblatt"),
                    currentKunde.id !== -1
                        ? m("button.w3-button.w3-theme",
                            {onclick: (e: MouseEvent) => guardedNavigate("/kontaktliste", {kunden_id: currentKunde.id}, e)},
                            m("i.material-icons", "contact_page"), " Kontakte")
                        : null
                ),
                m(BreadcrumbBar, {
                    breadcrumbs: breadcrumbs,
                    current: currentKunde.id === -1 ? "Neuer Kunde" : "Kundenstammblatt",
                    onnavigate: guardedNavigate
                } as iBreadcrumbBar),
                m("div", {style: {flex: '1', 'min-height': '0'}},
                    m(Form, guard.formAttrs(submit) 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))
                    ])
                )
            )
        }
    }
}

export const kundenliste: m.ClosureComponent = (vnode) => {
    let treenodes: iTreenode[] = []
    let selectedNode: iTreenode | null = null
    // Breadcrumb-Kette der Vorgänger-Ansichten (aus Route-Param bc).
    let breadcrumbs: iBreadcrumb[] = []

    const handleRowMarked = (node: iTreenode) => {
        selectedNode = node
    }

    // Eigener Listen-Crumb für die Breadcrumb-Kette.
    const ownCrumb = (): iBreadcrumb => ({
        route: "/kundenliste",
        params: {},
        label: "Kunden"
    })

    const editKunde = (kunde: iKunde, e: Event) => {
        e.stopPropagation()
        // Breadcrumb-Kette um eigene Position erweitern.
        m.route.set("/kunde", {id: kunde.id, bc: serializeBc([...breadcrumbs, ownCrumb()])})
    }

    const showProjekte = (kunde: iKunde, e: Event) => {
        e.stopPropagation()
        // Breadcrumb-Kette: Kundenliste als Vorgänger der Projektliste.
        const bc = serializeBc([...breadcrumbs, ownCrumb()])
        m.route.set("/projektliste", {kunden_id: kunde.id, bc})
    }

    const showKontakte = (kunde: iKunde, e: Event) => {
        e.stopPropagation()
        // Breadcrumb-Kette: Kundenliste als Vorgänger der Kontaktliste.
        const bc = serializeBc([...breadcrumbs, ownCrumb()])
        m.route.set("/kontaktliste", {kunden_id: kunde.id, bc})
    }

    const addKundeRoute = () => {
        // Breadcrumb-Kette um eigene Position erweitern.
        m.route.set("/kunde", {id: -1, bc: serializeBc([...breadcrumbs, ownCrumb()])})
    }
    
    const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
        let kunde: iKunde = node.nodevalue

        return [
            m("div", m("strong", kunde.name)),
            m("span", kunde.strasse),
            m("span", kunde.plz),
            m("span", kunde.ort),
            m("span", kunde.land),
            m("div", {style: {display: 'flex', gap: '0', 'white-space': 'nowrap'}},
                m("button.w3-button.w3-small", {title: "Kunde bearbeiten", style: {padding: '0 2px'}, onclick: (e: Event) => editKunde(kunde, e)}, m("i.material-icons", "edit")),
                m("button.w3-button.w3-small", {title: "Projekte anzeigen", style: {padding: '0 2px'}, onclick: (e: Event) => showProjekte(kunde, e)}, m("i.material-icons", "library_books")),
                m("button.w3-button.w3-small", {title: "Kontakte anzeigen", style: {padding: '0 2px'}, onclick: (e: Event) => showKontakte(kunde, e)}, m("i.material-icons", "contact_page"))
            )
        ]
    }
    
    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 {
        oninit: (vnode) => {
            // Breadcrumb-Kette aus Route-Param parsen (bei Top-Level leer).
            breadcrumbs = parseBc(m.route.param() && m.route.param().bc)
            // Kundenliste asynchron vom Server laden. m.request löst nach
            // Promise-Auflösung automatisch ein Redraw aus.
            fetchKunden().then((kunden: iKunde[]) => {
                treenodes = kunden.map((kunde: iKunde) => new Treenode(kunde, true, []))
            }).catch((e) => showServerError(e))
        },
        view: (vnode) => {
            return m("div.w3-container.w3-auto", {
                style: {
                    display: 'flex',
                    'flex-direction': 'column',
                    height: 'inherit',
                    'overflow-y': 'inherit'}},
                m("h1", "Kundenliste"),
                m(BreadcrumbBar, {
                    breadcrumbs: breadcrumbs,
                    current: "Kunden"
                } as iBreadcrumbBar),
                m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
                    m(Treetable,
                        {
                            treenodes: treenodes,
                            columnmapper: columnmapper,
                            filter: filterFunction,
                            onRowMarked: handleRowMarked,
                            isSelected: (node: iTreenode) => node === selectedNode
                        } as iTreetable,
                        m(TopbarButton, {onclick: addKundeRoute, tooltip: "Neuen Kunden anlegen"} as iTopbarButton,
                            m("i.material-icons", "person_add")
                        )
                    )
                )
            )
        }
    }
}