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} from "./widgets/Treetable_V2"

interface iKunde {
    id: number
    name: string
}

interface iProjekt {
    id: number
    kundenId: number
    kundenName: string
    projektname: string
    zweck: string
    verantwortlicher: string
    startdatum: string
}

const kundenDaten: iKunde[] = [
    {id: 1, name: "Musterfirma GmbH"},
    {id: 2, name: "Beispiel AG"},
    {id: 3, name: "Test Unternehmen"}
]

const projektDaten: iProjekt[] = [
    {id: 1, kundenId: 1, kundenName: "Musterfirma GmbH", projektname: "Website-Relaunch", zweck: "Neugestaltung der Unternehmenswebsite", verantwortlicher: "Max Mustermann", startdatum: "2024-01-15"},
    {id: 2, kundenId: 1, kundenName: "Musterfirma GmbH", projektname: "E-Commerce Plattform", zweck: "Online-Shop Entwicklung", verantwortlicher: "Anna Schmidt", startdatum: "2024-03-01"},
    {id: 3, kundenId: 2, kundenName: "Beispiel AG", projektname: "CRM-System", zweck: "Kundenbeziehungsmanagement", verantwortlicher: "Peter Müller", startdatum: "2024-02-20"},
    {id: 4, kundenId: 3, kundenName: "Test Unternehmen", projektname: "Mobile App", zweck: "iOS und Android Entwicklung", verantwortlicher: "Lisa Bauer", startdatum: "2024-04-10"}
]

function createProjektTreenodes(kundenId: number | null = null): iTreenode[] {
    let filteredProjekte = kundenId 
        ? projektDaten.filter(p => p.kundenId === kundenId)
        : projektDaten
    
    return filteredProjekte.map((projekt: iProjekt) => {
        return new Treenode(projekt, true, [])
    })
}

export const projektliste: m.ClosureComponent = (vnode) => {
    let treenodes: iTreenode[] = createProjektTreenodes()
    let selectedNode: iTreenode | null = null
    let filterKundenId: number | null = null
    
    const handleRowMarked = (node: iTreenode) => {
        selectedNode = node
    }
    
    const editProjekt = (projekt: iProjekt, e: Event) => {
        e.stopPropagation()
        m.route.set("/projekt", {
            id: projekt.id,
            kundenname: projekt.kundenName,
            projektname: projekt.projektname,
            zweck: projekt.zweck,
            verantwortlicher: projekt.verantwortlicher,
            startdatum: projekt.startdatum
        })
    }
    
    const showCallLogs = (projekt: iProjekt, e: Event) => {
        e.stopPropagation()
        m.route.set("/calllogliste", {projektId: projekt.id})
    }
    
    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]
        m.route.set("/call_log", {
            id: -1,
            kundenName: projekt.kundenName,
            projektId: projekt.id,
            projektName: projekt.projektname,
            datum: datum,
            uhrzeitBeginn: uhrzeit,
            dauer: "",
            betreff: "",
            nameAnsprechpartner: "",
            telefon: "",
            notiz: "",
            wiedervorlageDatum: "",
            erledigt: false
        })
    }
    
    const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
        let projekt: iProjekt = node.nodevalue
        const isSelected = selectedNode === node
        const cellStyle = isSelected ? {backgroundColor: '#e6f7ff'} : {}
        
        return [
            m("div", {style: cellStyle}, m("strong", projekt.kundenName)),
            m("span", {style: cellStyle}, projekt.projektname),
            m("span", {style: cellStyle}, projekt.zweck),
            m("span", {style: cellStyle}, projekt.verantwortlicher),
            m("span", {style: cellStyle}, projekt.startdatum),
            m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => editProjekt(projekt, e)}, m("i.material-icons", "edit")),
            m("button.w3-button.w3-small", {title: "Gesprächsnotizen anzeigen", style: cellStyle, onclick: (e: Event) => showCallLogs(projekt, e)}, m("i.material-icons", "call_log")),
            m("button.w3-button.w3-small", {title: "Gesprächsnotiz hinzufügen", style: cellStyle, 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.kundenName.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.kundenId) {
                filterKundenId = parseInt(routeParams.kundenId)
            } else {
                filterKundenId = null
            }
            treenodes = createProjektTreenodes(filterKundenId)
        },
        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", "Projektliste"),
                m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
                    m(Treetable, 
                        {
                            treenodes: treenodes,
                            columnmapper: columnmapper,
                            filter: filterFunction,
                            onRowMarked: handleRowMarked
                        } as iTreetable
                    )
                )
            )
        }
    }
}

export const Projekt: m.ClosureComponent = (vnode) => {
    let currentProjekt: {
        id: number
        kundenname: string
        projektname: string
        zweck: string
        verantwortlicher: string
        startdatum: string
    } = {
        id: -1,
        kundenname: "",
        projektname: "",
        zweck: "",
        verantwortlicher: "",
        startdatum: ""
    }
    
    return {
        oninit: (vnode) => {
            const routeParams = m.route.param()
            if (routeParams) {
                currentProjekt = {
                    id: routeParams.id ? parseInt(routeParams.id) : -1,
                    kundenname: routeParams.kundenname || "",
                    projektname: routeParams.projektname || "",
                    zweck: routeParams.zweck || "",
                    verantwortlicher: routeParams.verantwortlicher || "",
                    startdatum: routeParams.startdatum || ""
                }
            }
        },
        view: (vnode) => {
            return m("div.w3-container.w3-twothird", 
                m("h1", "Projekt-Stammblatt"),
                m(Form, {showButtons: true, onsubmit: (null), oncancel: (null)} as iForm, [
                    m("label", "Kundenname", m(Input, {name: "kundenname", value: currentProjekt.kundenname, type: "text"} as iInput)),
                    m("label", "Projektname", m(Input, {name: "projektname", value: currentProjekt.projektname, type: "text"} 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))
                ])  
            )
        }
    }
}