Datenmodelle für Kunden und Projekte ausgelagert, responsives Design und Projekt-Neuanlage
Kunden- und Projekt-Datenmodelle inkl. In-Memory-Funktionen und REST-API-Gerüst
in Client/models/{kunde,projekt}.ts ausgelagert. Views (kunde.ts, projekt.ts) nutzen
diese Modelle; Container auf w3-container.w3-auto (responsive) umgestellt.
Projektliste: TopbarButton zur Neuanlage; Projektformular mit Select-Widget zur
Kundenwahl (voreingestellt bei kundengefilterter Liste), submit/cancel aktiviert.
Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
This commit is contained in:
gg committed
1 parent
d4319de445
commit
de7e6948f8
4 files changed
+222
-81
No files matched your search
@@ -1,41 +1,14 @@
|
||||
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"}
|
||||
]
|
||||
import {Select, iSelect, iSelectOption} from "./widgets/select"
|
||||
import {Treenode, iTreenode, Treetable, iTreetable, TopbarButton, iTopbarButton} from "./widgets/Treetable_V2"
|
||||
import {iProjekt, getProjekteByKundenId, getNewProjektId, addProjekt, updateProjekt} from "../models/projekt"
|
||||
import {iKunde, getKunden} from "../models/kunde"
|
||||
|
||||
function createProjektTreenodes(kundenId: number | null = null): iTreenode[] {
|
||||
let filteredProjekte = kundenId
|
||||
? projektDaten.filter(p => p.kundenId === kundenId)
|
||||
: projektDaten
|
||||
|
||||
let filteredProjekte = getProjekteByKundenId(kundenId)
|
||||
|
||||
return filteredProjekte.map((projekt: iProjekt) => {
|
||||
return new Treenode(projekt, true, [])
|
||||
})
|
||||
@@ -49,11 +22,32 @@ export const projektliste: m.ClosureComponent = (vnode) => {
|
||||
const handleRowMarked = (node: iTreenode) => {
|
||||
selectedNode = node
|
||||
}
|
||||
|
||||
const addProjektRoute = () => {
|
||||
const params: any = {
|
||||
id: -1,
|
||||
kundenname: "",
|
||||
projektname: "",
|
||||
zweck: "",
|
||||
verantwortlicher: "",
|
||||
startdatum: ""
|
||||
}
|
||||
// Nur bei kundengefilterter Liste den Kunden vorbelegen.
|
||||
if (filterKundenId !== null) {
|
||||
const kunde = getKunden().find((k: iKunde) => k.id === filterKundenId)
|
||||
if (kunde) {
|
||||
params.kundenId = kunde.id
|
||||
params.kundenname = kunde.name
|
||||
}
|
||||
}
|
||||
m.route.set("/projekt", params)
|
||||
}
|
||||
|
||||
const editProjekt = (projekt: iProjekt, e: Event) => {
|
||||
e.stopPropagation()
|
||||
m.route.set("/projekt", {
|
||||
id: projekt.id,
|
||||
kundenId: projekt.kundenId,
|
||||
kundenname: projekt.kundenName,
|
||||
projektname: projekt.projektname,
|
||||
zweck: projekt.zweck,
|
||||
@@ -127,11 +121,8 @@ export const projektliste: m.ClosureComponent = (vnode) => {
|
||||
treenodes = createProjektTreenodes(filterKundenId)
|
||||
},
|
||||
view: (vnode) => {
|
||||
return m("div.w3-container", {
|
||||
return m("div.w3-container.w3-auto", {
|
||||
style: {
|
||||
'max-width': '80%',
|
||||
'margin-left': 'auto',
|
||||
'margin-right': 'auto',
|
||||
display: 'flex',
|
||||
'flex-direction': 'column',
|
||||
height: 'inherit',
|
||||
@@ -144,7 +135,10 @@ export const projektliste: m.ClosureComponent = (vnode) => {
|
||||
columnmapper: columnmapper,
|
||||
filter: filterFunction,
|
||||
onRowMarked: handleRowMarked
|
||||
} as iTreetable
|
||||
} as iTreetable,
|
||||
m(TopbarButton, {onclick: addProjektRoute, tooltip: "Neues Projekt anlegen"} as iTopbarButton,
|
||||
m("i.material-icons", "post_add")
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
@@ -153,8 +147,11 @@ export const projektliste: m.ClosureComponent = (vnode) => {
|
||||
}
|
||||
|
||||
export const Projekt: m.ClosureComponent = (vnode) => {
|
||||
// currentProjekt hält den Formularzustand. kundenId referenziert den
|
||||
// Kunden eindeutig, kundenname dient der Anzeige.
|
||||
let currentProjekt: {
|
||||
id: number
|
||||
kundenId: number
|
||||
kundenname: string
|
||||
projektname: string
|
||||
zweck: string
|
||||
@@ -162,19 +159,25 @@ export const Projekt: m.ClosureComponent = (vnode) => {
|
||||
startdatum: string
|
||||
} = {
|
||||
id: -1,
|
||||
kundenId: -1,
|
||||
kundenname: "",
|
||||
projektname: "",
|
||||
zweck: "",
|
||||
verantwortlicher: "",
|
||||
startdatum: ""
|
||||
}
|
||||
|
||||
// Ist der Kunde voreingestellt (gefilterte Projektliste)?
|
||||
let kundeVoreingestellt: boolean = false
|
||||
|
||||
return {
|
||||
oninit: (vnode) => {
|
||||
const routeParams = m.route.param()
|
||||
if (routeParams) {
|
||||
const kundenId = routeParams.kundenId ? parseInt(routeParams.kundenId) : -1
|
||||
kundeVoreingestellt = kundenId !== -1
|
||||
currentProjekt = {
|
||||
id: routeParams.id ? parseInt(routeParams.id) : -1,
|
||||
kundenId: kundenId,
|
||||
kundenname: routeParams.kundenname || "",
|
||||
projektname: routeParams.projektname || "",
|
||||
zweck: routeParams.zweck || "",
|
||||
@@ -184,15 +187,52 @@ export const Projekt: m.ClosureComponent = (vnode) => {
|
||||
}
|
||||
},
|
||||
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)),
|
||||
const submit = (form: HTMLFormElement): boolean => {
|
||||
const formData = new FormData(form)
|
||||
const kundenId = parseInt(formData.get("kundenId") as string)
|
||||
// Kundennamen zur gewählten kundenId auflösen.
|
||||
const kunde = getKunden().find((k: iKunde) => k.id === kundenId)
|
||||
const gespeichertesProjekt: iProjekt = {
|
||||
id: currentProjekt.id,
|
||||
kundenId: kundenId,
|
||||
kundenName: kunde ? kunde.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) || ""
|
||||
}
|
||||
if (currentProjekt.id === -1) {
|
||||
gespeichertesProjekt.id = getNewProjektId()
|
||||
addProjekt(gespeichertesProjekt)
|
||||
} else {
|
||||
updateProjekt(gespeichertesProjekt)
|
||||
}
|
||||
m.route.set("/projektliste")
|
||||
return true
|
||||
}
|
||||
const cancel = (e: Event) => {
|
||||
m.route.set("/projektliste")
|
||||
}
|
||||
// Select-Optionen aus der Kundenliste aufbauen.
|
||||
const kundenOptionen: iSelectOption[] = getKunden().map((k: iKunde) => {
|
||||
return {value: k.id, label: k.name}
|
||||
})
|
||||
return m("div.w3-container.w3-auto",
|
||||
m("h1", currentProjekt.id === -1 ? "Neues Projekt anlegen" : "Projekt-Stammblatt"),
|
||||
m(Form, {showButtons: true, onsubmit: submit, oncancel: cancel} as iForm, [
|
||||
m("label", "Kunde",
|
||||
m(Select, {
|
||||
name: "kundenId",
|
||||
value: currentProjekt.kundenId,
|
||||
options: kundenOptionen,
|
||||
readonly: kundeVoreingestellt,
|
||||
required: true
|
||||
} as iSelect)),
|
||||
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))
|
||||
])
|
||||
])
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user