Projektkomponente aktualisiert: Neue Struktur für Projekt- und Kundendaten implementiert, einschließlich dynamischer Erstellung von Projekt-Treenodes und verbesserter Anzeige in der Projektliste.
This commit is contained in:
gg committed
1 parent
6f62965750
commit
46ce79c551
1 file changed
+193
-12
+193
-12
@@ -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))
|
||||
])
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user