diff --git a/Client/Components/projekt.ts b/Client/Components/projekt.ts index 8e46d82..b720c8d 100644 --- a/Client/Components/projekt.ts +++ b/Client/Components/projekt.ts @@ -1,18 +1,199 @@ 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" -export const Projekt: m.Component = { - 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: "Musterfirma GmbH", type: "text"} as iInput)), - m("label", "Projektname", m(Input, {name: "projektname", value: "Musterprojekt", type: "text"} as iInput)) , - m("label", "Zweck", m(Input, {name: "zweck", value: "Musterzweck", type: "text"} as iInput)), - m("label", "Verantwortlicher", m(Input, {name: "verantwortlicher", value: "König Dickbauch", type: "text"} as iInput)), - m("label", "Startdatum", m(Input, {name: "startdatum", value: "2023-01-01", type: "date"} as iInput)) - ]) - ) +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)) + ]) + ) + } } } \ No newline at end of file