kbcrm/Client/Components/kontakt.ts

import m from "mithril"
import {Form, iForm} from "./widgets/form"
import { Input, iInput, Textarea, iTextarea} from "./widgets/inputs"
import {Select, iSelect, iSelectOption} from "./widgets/select"
import {Treenode, iTreenode, Treetable, iTreetable, TopbarButton, iTopbarButton} from "./widgets/Treetable_V2"
import {iKontakt, getKontakteByKundenId, getNewKontaktId, addKontakt, updateKontakt} from "../models/kontakt"
import {iKunde, fetchKunden} from "../models/kunde"

function createKontaktTreenodes(kundenId: number | null = null): iTreenode[] {
    let filteredKontakte = getKontakteByKundenId(kundenId)

    return filteredKontakte.map((kontakt: iKontakt) => {
        return new Treenode(kontakt, true, [])
    })
}

export const kontaktliste: m.ClosureComponent = (vnode) => {
    let treenodes: iTreenode[] = createKontaktTreenodes()
    let selectedNode: iTreenode | null = null
    let filterKundenId: number | null = null
    // Kundenliste asynchron vom Server laden, für die Kundenauflösung
    // beim Anlegen eines neuen Kontakts.
    let kundenListe: iKunde[] = []

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

    const addKontaktRoute = () => {
        const params: any = {
            id: -1,
            anrede: "",
            name: "",
            position: "",
            telefon: "",
            email: "",
            notiz: ""
        }
        // Nur bei kundengefilterter Liste den Kunden vorbelegen.
        if (filterKundenId !== null) {
            const kunde = kundenListe.find((k: iKunde) => k.id === filterKundenId)
            if (kunde) {
                params.kundenId = kunde.id
                params.kundenname = kunde.name
            }
        }
        m.route.set("/kontakt", params)
    }

    const editKontakt = (kontakt: iKontakt, e: Event) => {
        e.stopPropagation()
        m.route.set("/kontakt", {
            id: kontakt.id,
            kundenId: kontakt.kundenId,
            kundenname: kontakt.kundenName,
            anrede: kontakt.anrede,
            name: kontakt.name,
            position: kontakt.position,
            telefon: kontakt.telefon,
            email: kontakt.email,
            notiz: kontakt.notiz
        })
    }

    const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
        let kontakt: iKontakt = node.nodevalue

        return [
            m("div", m("strong", kontakt.name)),
            m("span", kontakt.position),
            m("span", kontakt.telefon),
            m("span", kontakt.email),
            m("span", kontakt.kundenName),
            m("button.w3-button.w3-small", {style: {padding: '0 2px'}, onclick: (e: Event) => editKontakt(kontakt, e)}, m("i.material-icons", "edit"))
        ]
    }

    const filterFunction = (node: iTreenode, searchvalue: string): boolean => {
        let kontakt: iKontakt = node.nodevalue
        let searchLower = searchvalue.toLowerCase()
        return kontakt.name.toLowerCase().includes(searchLower) ||
               kontakt.position.toLowerCase().includes(searchLower) ||
               kontakt.telefon.toLowerCase().includes(searchLower) ||
               kontakt.email.toLowerCase().includes(searchLower) ||
               kontakt.kundenName.toLowerCase().includes(searchLower)
    }

    return {
        oninit: (vnode) => {
            const routeParams = m.route.param()
            if (routeParams && routeParams.kundenId) {
                filterKundenId = parseInt(routeParams.kundenId)
            } else {
                filterKundenId = null
            }
            treenodes = createKontaktTreenodes(filterKundenId)
            // Kundenliste asynchron vom Server laden.
            fetchKunden().then((result) => {
                kundenListe = result
            })
        },
        view: (vnode) => {
            return m("div.w3-container.w3-auto", {
                style: {
                    display: 'flex',
                    'flex-direction': 'column',
                    height: 'inherit',
                    'overflow-y': 'inherit'}},
                m("h1", "Kontaktliste"),
                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: addKontaktRoute, tooltip: "Neuen Kontakt anlegen"} as iTopbarButton,
                            m("i.material-icons", "person_add")
                        )
                    )
                )
            )
        }
    }
}

export const Kontakt: m.ClosureComponent = (vnode) => {
    // currentKontakt hält den Formularzustand. kundenId referenziert den
    // Kunden eindeutig, kundenname dient der Anzeige.
    let currentKontakt: {
        id: number
        kundenId: number
        kundenname: string
        anrede: string
        name: string
        position: string
        telefon: string
        email: string
        notiz: string
    } = {
        id: -1,
        kundenId: -1,
        kundenname: "",
        anrede: "",
        name: "",
        position: "",
        telefon: "",
        email: "",
        notiz: ""
    }
    // Ist der Kunde voreingestellt (gefilterte Kontaktliste)?
    let kundeVoreingestellt: boolean = false
    // Kundenliste asynchron vom Server laden, für Select-Optionen und
    // Namensauflösung im submit-Handler.
    let kundenListe: iKunde[] = []

    return {
        oninit: (vnode) => {
            const routeParams = m.route.param()
            if (routeParams) {
                const kundenId = routeParams.kundenId ? parseInt(routeParams.kundenId) : -1
                kundeVoreingestellt = kundenId !== -1
                currentKontakt = {
                    id: routeParams.id ? parseInt(routeParams.id) : -1,
                    kundenId: kundenId,
                    kundenname: routeParams.kundenname || "",
                    anrede: routeParams.anrede || "",
                    name: routeParams.name || "",
                    position: routeParams.position || "",
                    telefon: routeParams.telefon || "",
                    email: routeParams.email || "",
                    notiz: routeParams.notiz || ""
                }
            }
            fetchKunden().then((result) => {
                kundenListe = result
            })
        },
        view: (vnode) => {
            const submit = (form: HTMLFormElement): boolean => {
                const formData = new FormData(form)
                const kundenId = parseInt(formData.get("kundenId") as string)
                // Kundennamen zur gewählten kundenId auflösen.
                const kunde = kundenListe.find((k: iKunde) => k.id === kundenId)
                const gespeicherterKontakt: iKontakt = {
                    id: currentKontakt.id,
                    kundenId: kundenId,
                    kundenName: kunde ? kunde.name : "",
                    anrede: (formData.get("anrede") as string) || "",
                    name: (formData.get("name") as string) || "",
                    position: (formData.get("position") as string) || "",
                    telefon: (formData.get("telefon") as string) || "",
                    email: (formData.get("email") as string) || "",
                    notiz: (formData.get("notiz") as string) || ""
                }
                if (currentKontakt.id === -1) {
                    gespeicherterKontakt.id = getNewKontaktId()
                    addKontakt(gespeicherterKontakt)
                } else {
                    updateKontakt(gespeicherterKontakt)
                }
                m.route.set("/kontaktliste")
                return true
            }
            const cancel = (e: Event) => {
                m.route.set("/kontaktliste")
            }
            // Select-Optionen aus der Kundenliste aufbauen.
            const kundenOptionen: iSelectOption[] = kundenListe.map((k: iKunde) => {
                return {value: k.id, label: k.name}
            })
            return m("div.w3-container.w3-auto.form-view-container",
                m("h1", currentKontakt.id === -1 ? "Neuen Kontakt anlegen" : "Kontakt-Stammblatt"),
                m("div", {style: {flex: '1', 'min-height': '0'}},
                    m(Form, {showButtons: true, onsubmit: submit, oncancel: cancel} as iForm, [
                    m("label", "Kunde",
                        m(Select, {
                            name: "kundenId",
                            value: currentKontakt.kundenId,
                            options: kundenOptionen,
                            readonly: kundeVoreingestellt,
                            required: true
                        } as iSelect)),
                    m("label", "Anrede", m(Input, {name: "anrede", value: currentKontakt.anrede, type: "text"} as iInput)),
                    m("label", "Name", m(Input, {name: "name", value: currentKontakt.name, type: "text", required: true} as iInput)),
                    m("label", "Position", m(Input, {name: "position", value: currentKontakt.position, type: "text"} as iInput)),
                    m("label", "Telefon", m(Input, {name: "telefon", value: currentKontakt.telefon, type: "tel"} as iInput)),
                    m("label", "E-Mail", m(Input, {name: "email", value: currentKontakt.email, type: "email"} as iInput)),
                    m("label", "Notiz", m(Textarea, {name: "notiz", value: currentKontakt.notiz, rows: 4} as iTextarea))
                    ])
                )
            )
        }
    }
}