Kundenkomponente aktualisiert: Dynamische Initialisierung und Anzeige von Kundendaten hinzugefügt
This commit is contained in:
gg committed
1 parent
72055840f7
commit
6f62965750
1 file changed
+129
-12
+129
-12
@@ -1,18 +1,135 @@
|
||||
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"
|
||||
|
||||
export const kunde: m.Component = {
|
||||
view: (vnode) => {
|
||||
return m("div.w3-container.w3-twothird",
|
||||
m("h1", "Kundenstammblatt"),
|
||||
m(Form, {showButtons: true, onsubmit: (null), oncancel: (null)} as iForm, [
|
||||
m("label", "Kundenname (ganz neu)", m(Input, {name: "kundenname", value: "Musterfirma GmbH", type: "text"} as iInput)),
|
||||
m("label", "Straße", m(Input, {name: "strasse", value: "Musterstraße 1", type: "text"} as iInput)) ,
|
||||
m("label", "PLZ", m(Input, {name: "plz", value: "12345", type: "text"} as iInput)),
|
||||
m("label", "Ort", m(Input, {name: "ort", value: "Musterstadt", type: "text"} as iInput)),
|
||||
m("label", "Land", m(Input, {name: "land", value: "Deutschland", type: "text"} as iInput))
|
||||
])
|
||||
)
|
||||
export const kunde: m.ClosureComponent = (vnode) => {
|
||||
let currentKunde: iKunde = {
|
||||
id: -1,
|
||||
name: "",
|
||||
strasse: "",
|
||||
plz: "",
|
||||
ort: "",
|
||||
land: ""
|
||||
}
|
||||
|
||||
return {
|
||||
oninit: (vnode) => {
|
||||
const routeParams = m.route.param()
|
||||
if (routeParams) {
|
||||
currentKunde = {
|
||||
id: routeParams.id ? parseInt(routeParams.id) : -1,
|
||||
name: routeParams.name || "",
|
||||
strasse: routeParams.strasse || "",
|
||||
plz: routeParams.plz || "",
|
||||
ort: routeParams.ort || "",
|
||||
land: routeParams.land || ""
|
||||
}
|
||||
}
|
||||
},
|
||||
view: (vnode) => {
|
||||
return m("div.w3-container.w3-twothird",
|
||||
m("h1", "Kundenstammblatt"),
|
||||
m(Form, {showButtons: true, onsubmit: (null), oncancel: (null)} as iForm, [
|
||||
m("label", "Kundenname", m(Input, {name: "kundenname", value: currentKunde.name, type: "text"} as iInput)),
|
||||
m("label", "Straße", m(Input, {name: "strasse", value: currentKunde.strasse, type: "text"} as iInput)),
|
||||
m("label", "PLZ", m(Input, {name: "plz", value: currentKunde.plz, type: "text"} as iInput)),
|
||||
m("label", "Ort", m(Input, {name: "ort", value: currentKunde.ort, type: "text"} as iInput)),
|
||||
m("label", "Land", m(Input, {name: "land", value: currentKunde.land, type: "text"} as iInput))
|
||||
])
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
interface iKunde {
|
||||
id: number
|
||||
name: string
|
||||
strasse: string
|
||||
plz: string
|
||||
ort: string
|
||||
land: string
|
||||
}
|
||||
|
||||
const kundenDaten: iKunde[] = [
|
||||
{id: 1, name: "Musterfirma GmbH", strasse: "Musterstraße 1", plz: "12345", ort: "Musterstadt", land: "Deutschland"},
|
||||
{id: 2, name: "Beispiel AG", strasse: "Beispielweg 2", plz: "54321", ort: "Beispielstadt", land: "Deutschland"},
|
||||
{id: 3, name: "Test Unternehmen", strasse: "Testallee 3", plz: "67890", ort: "Testdorf", land: "Österreich"}
|
||||
]
|
||||
|
||||
function createKundenTreenodes(): iTreenode[] {
|
||||
return kundenDaten.map((kunde: iKunde) => {
|
||||
return new Treenode(kunde, true, [])
|
||||
})
|
||||
}
|
||||
|
||||
export const kundenliste: m.ClosureComponent = (vnode) => {
|
||||
let treenodes: iTreenode[] = createKundenTreenodes()
|
||||
let selectedNode: iTreenode | null = null
|
||||
|
||||
const handleRowMarked = (node: iTreenode) => {
|
||||
selectedNode = node
|
||||
}
|
||||
|
||||
const editKunde = (kunde: iKunde, e: Event) => {
|
||||
e.stopPropagation()
|
||||
m.route.set("/kunde", {id: kunde.id, name: kunde.name, strasse: kunde.strasse, plz: kunde.plz, ort: kunde.ort, land: kunde.land})
|
||||
}
|
||||
|
||||
const showProjekte = (kunde: iKunde, e: Event) => {
|
||||
e.stopPropagation()
|
||||
m.route.set("/projektliste", {kundenId: kunde.id})
|
||||
}
|
||||
|
||||
const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
|
||||
let kunde: iKunde = node.nodevalue
|
||||
const isSelected = selectedNode === node
|
||||
const cellStyle = isSelected ? {backgroundColor: 'lightgray'} : {}
|
||||
|
||||
return [
|
||||
m("div", {style: cellStyle}, m("strong", kunde.name)),
|
||||
m("span", {style: cellStyle}, kunde.strasse),
|
||||
m("span", {style: cellStyle}, kunde.plz),
|
||||
m("span", {style: cellStyle}, kunde.ort),
|
||||
m("span", {style: cellStyle}, kunde.land),
|
||||
m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => editKunde(kunde, e)}, m("i.material-icons", "edit")),
|
||||
m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => showProjekte(kunde, e)}, m("i.material-icons", "library_books"))
|
||||
]
|
||||
}
|
||||
|
||||
const filterFunction = (node: iTreenode, searchvalue: string): boolean => {
|
||||
let kunde: iKunde = node.nodevalue
|
||||
let searchLower = searchvalue.toLowerCase()
|
||||
return kunde.name.toLowerCase().includes(searchLower) ||
|
||||
kunde.strasse.toLowerCase().includes(searchLower) ||
|
||||
kunde.plz.includes(searchLower) ||
|
||||
kunde.ort.toLowerCase().includes(searchLower) ||
|
||||
kunde.land.toLowerCase().includes(searchLower)
|
||||
}
|
||||
|
||||
return {
|
||||
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", "Kundenliste"),
|
||||
m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
|
||||
m(Treetable,
|
||||
{
|
||||
treenodes: treenodes,
|
||||
columnmapper: columnmapper,
|
||||
filter: filterFunction,
|
||||
onRowMarked: handleRowMarked
|
||||
} as iTreetable
|
||||
)
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user