kbcrm/Client/Components/projekt.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 {iProjekt, fetchProjekte, fetchProjektById, createProjektREST, updateProjektREST} from "../models/projekt"
import {iKunde, fetchKundeById} from "../models/kunde"
import {showServerError} from "./auth/authmessages"
import {guardedNavigate, DirtyMaskHelper} from "./widgets/dirtyguard"

export const projektliste: m.ClosureComponent = (vnode) => {
    let treenodes: iTreenode[] = []
    let selectedNode: iTreenode | null = null
    let filterKundenId: number | null = null
    // Kundenname für die Überschrift, asynchron per fetchKundeById
    // aufgelöst, falls nicht in den Route-Params enthalten.
    let kundenName: string = ""
    // 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: "/projektliste",
        params: filterKundenId !== null ? {kunden_id: filterKundenId, kunden_name: kundenName} : {},
        label: filterKundenId !== null ? "Projekte: " + kundenName : "Projekte"
    })

    const addProjektRoute = () => {
        const params: any = {id: -1}
        // Nur bei kundengefilterter Liste den Kunden vorbelegen.
        if (filterKundenId !== null) {
            params.kunden_id = filterKundenId
            params.kunden_name = kundenName
        }
        // Breadcrumb-Kette um eigene Position erweitern.
        params.bc = serializeBc([...breadcrumbs, ownCrumb()])
        m.route.set("/projekt", params)
    }

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

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

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

    const addCallLog = (projekt: iProjekt, e: Event) => {
        e.stopPropagation()
        const now = new Date()
        const datum = now.toISOString().split('T')[0]
        const uhrzeit = now.toTimeString().split(':')[0] + ':' + now.toTimeString().split(':')[1]
        // Breadcrumb-Kette um Projektliste und Notizliste erweitern, da
        // die Maske nach Speichern/Abbrechen in die projektgefilterte
        // Notizliste zurückkehrt.
        const chain = [...breadcrumbs, ownCrumb(), {
            route: "/calllogliste",
            params: {projekt_id: projekt.id},
            label: "Notizen: " + projekt.projektname
        } as iBreadcrumb]
        m.route.set("/call_log", {
            id: -1,
            kunden_name: projekt.kunden_name,
            projekt_id: projekt.id,
            projekt_name: projekt.projektname,
            datum: datum,
            uhrzeit_beginn: uhrzeit,
            dauer: "",
            betreff: "",
            name_ansprechpartner: "",
            telefon: "",
            notiz: "",
            wiedervorlage_datum: "",
            erledigt: false,
            bc: serializeBc(chain)
        })
    }

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

        return [
            m("div", m("strong", projekt.kunden_name)),
            m("span", projekt.projektname),
            m("span", projekt.zweck),
            m("span", projekt.verantwortlicher),
            m("span", projekt.startdatum),
            m("div", {style: {display: 'flex', gap: '0', 'white-space': 'nowrap'}},
                m("button.w3-button.w3-small", {title: "Projekt bearbeiten", style: {padding: '0 2px'}, onclick: (e: Event) => editProjekt(projekt, e)}, m("i.material-icons", "edit")),
                m("button.w3-button.w3-small", {title: "Kontaktadressen anzeigen", style: {padding: '0 2px'}, onclick: (e: Event) => showKontaktadressen(projekt, e)}, m("i.material-icons", "contact_page")),
                m("button.w3-button.w3-small", {title: "Gesprächsnotizen anzeigen", style: {padding: '0 2px'}, onclick: (e: Event) => showCallLogs(projekt, e)}, m("i.material-icons", "call_log")),
                m("button.w3-button.w3-small", {title: "Gesprächsnotiz hinzufügen", style: {padding: '0 2px'}, onclick: (e: Event) => addCallLog(projekt, e)}, m("i.material-icons", "add_call"))
            )
        ]
    }

    const filterFunction = (node: iTreenode, searchvalue: string): boolean => {
        let projekt: iProjekt = node.nodevalue
        let searchLower = searchvalue.toLowerCase()
        return (projekt.kunden_name || "").toLowerCase().includes(searchLower) ||
               (projekt.projektname || "").toLowerCase().includes(searchLower) ||
               (projekt.zweck || "").toLowerCase().includes(searchLower) ||
               (projekt.verantwortlicher || "").toLowerCase().includes(searchLower) ||
               (projekt.startdatum || "").includes(searchLower)
    }

    return {
        oninit: (vnode) => {
            const routeParams = m.route.param()
            if (routeParams && routeParams.kunden_id) {
                filterKundenId = parseInt(routeParams.kunden_id)
                kundenName = routeParams.kunden_name || ""
            } else {
                filterKundenId = null
                kundenName = ""
            }
            // Breadcrumb-Kette aus Route-Param parsen.
            breadcrumbs = parseBc(routeParams && routeParams.bc)
            // Projekte asynchron vom Server laden. Die Filterung nach
            // kunden_id erfolgt serverseitig, sofern ein Filter gesetzt ist.
            fetchProjekte(filterKundenId !== null ? filterKundenId : undefined).then((result) => {
                treenodes = result.map((projekt: iProjekt) => new Treenode(projekt, true, []))
            }).catch((e) => showServerError(e))
            // Kundennamen asynchron auflösen, falls nicht in Route-Params.
            if (filterKundenId !== null && kundenName === "") {
                fetchKundeById(filterKundenId).then((kunde: iKunde) => {
                    kundenName = kunde.name
                }).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", kundenName ? "Projektliste für " + kundenName : "Projektliste"),
                m(BreadcrumbBar, {
                    breadcrumbs: breadcrumbs,
                    current: kundenName ? "Projekte: " + kundenName : "Projekte"
                } 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: addProjektRoute, tooltip: "Neues Projekt anlegen"} as iTopbarButton,
                            m("i.material-icons", "post_add")
                        )
                    )
                )
            )
        }
    }
}

export const Projekt: m.ClosureComponent = (vnode) => {
    // currentProjekt hält den Formularzustand. kunden_id referenziert den
    // Kunden eindeutig, kunden_name dient der Anzeige in der Überschrift.
    let currentProjekt: {
        id: number
        kunden_id: number
        kunden_name: string
        projektname: string
        zweck: string
        verantwortlicher: string
        startdatum: string
    } = {
        id: -1,
        kunden_id: -1,
        kunden_name: "",
        projektname: "",
        zweck: "",
        verantwortlicher: "",
        startdatum: ""
    }
    // Breadcrumb-Kette der Vorgänger-Ansichten (aus Route-Param bc).
    let breadcrumbs: iBreadcrumb[] = []
    // Route-Params für die Rückkehr zur Projektliste; als Closure an den
    // DirtyMaskHelper übergeben.
    const backParams = (): any => {
        const listBc = serializeBc(breadcrumbs.slice(0, -1))
        const params: any = {kunden_id: currentProjekt.kunden_id, kunden_name: currentProjekt.kunden_name}
        if (listBc) params.bc = listBc
        return params
    }
    // DirtyMaskHelper kapselt den isDirty/Guard-Boilerplate.
    const guard = new DirtyMaskHelper("/projektliste", backParams)

    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) {
                // Projektdaten frisch vom Server holen, um zwischenzeitliche
                // Änderungen anderer Nutzer nicht zu überschreiben.
                fetchProjektById(id).then((result) => {
                    currentProjekt = result
                }).catch((e) => showServerError(e))
            } else {
                // Neuanlegen: kunden_id und kunden_name aus Route-Params
                // (voreingestellt aus der Projektliste).
                currentProjekt.kunden_id = routeParams && routeParams.kunden_id ? parseInt(routeParams.kunden_id) : -1
                currentProjekt.kunden_name = routeParams && routeParams.kunden_name ? routeParams.kunden_name : ""
            }
        },
        onremove: (vnode) => {
            guard.cleanup()
        },
        view: (vnode) => {
            const submit = (form: HTMLFormElement): boolean => {
                const formData = new FormData(form)
                const gespeichertesProjekt: iProjekt = {
                    id: currentProjekt.id,
                    kunden_id: currentProjekt.kunden_id,
                    kunden_name: "",
                    projektname: (formData.get("projektname") as string) || "",
                    zweck: (formData.get("zweck") as string) || "",
                    verantwortlicher: (formData.get("verantwortlicher") as string) || "",
                    startdatum: (formData.get("startdatum") as string) || "",
                    // Server-seitig dynamisch berechnet; Platzhalter beim Senden.
                    is_erledigt: false
                }
                if (currentProjekt.id === -1) {
                    createProjektREST(gespeichertesProjekt).then(() => guard.navigateAfterSave()).catch((e) => { showServerError(e); guard.markDirty() })
                } else {
                    updateProjektREST(gespeichertesProjekt).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", currentProjekt.id === -1
                        ? "Neues Projekt für " + currentProjekt.kunden_name
                        : "Projekt-Stammblatt"),
                    currentProjekt.id !== -1
                        ? [
                            m("button.w3-button.w3-theme",
                                {onclick: (e: MouseEvent) => guardedNavigate("/kontaktadresseliste", {projekt_id: currentProjekt.id}, e)},
                                m("i.material-icons", "contact_page"), " Kontaktadressen"),
                            m("button.w3-button.w3-theme",
                                {style: {'margin-left': '4px'},
                                 onclick: (e: MouseEvent) => guardedNavigate("/projektuserliste", {projekt_id: currentProjekt.id}, e)},
                                m("i.material-icons", "group"), " Nutzerberechtigungen")
                        ]
                        : null
                ),
                m(BreadcrumbBar, {
                    breadcrumbs: breadcrumbs,
                    current: currentProjekt.id === -1 ? "Neues Projekt" : "Projekt-Stammblatt",
                    onnavigate: guardedNavigate
                } as iBreadcrumbBar),
                m("div", {style: {flex: '1', 'min-height': '0'}},
                    m(Form, guard.formAttrs(submit) as iForm, [
                    m("input", {type: "hidden", name: "kunden_id", value: currentProjekt.kunden_id}),
                    m("label", "Projektname", m(Input, {name: "projektname", value: currentProjekt.projektname, type: "text", required: true} as iInput)),
                    m("label", "Zweck", m(Input, {name: "zweck", value: currentProjekt.zweck, type: "text"} as iInput)),
                    m("label", "Verantwortlicher", m(Input, {name: "verantwortlicher", value: currentProjekt.verantwortlicher, type: "text"} as iInput)),
                    m("label", "Startdatum", m(Input, {name: "startdatum", value: currentProjekt.startdatum, type: "date"} as iInput))
                    ])
                )
            )
        }
    }
}