Server+Client: REST-API für Entität Projekt, Kontakt auf REST umgestellt, ID-basiertes Laden, CLI-Musterprojekte, VS-Code Task
- Server: ORM-Modell Projekt (Tabelle projekte) mit FK kunden_id, Relationship zu Kunde - Server: Geschäftslogik projekt.py (get/create/update/delete) - Server: DB-Migration V01_02 (projekte-Tabelle) - Server: REST-Endpunkte /xhr/projekt/* mit Autorisierung - Server: CLI init-db legt Muster-Projekte je Kunde an (1-3) - Client: kontakt.ts auf REST umgestellt, In-Memory entfernt, snake_case - Client: projekt.ts auf REST umgestellt, In-Memory behalten für call_log/kontaktadresse - Client: ID-basiertes Laden (nur ID in Route-Params, fetchById im oninit) - Client: Kundenname in Überschrift von Kontaktliste/View und Projektliste/View - Client: Select-Widget entfernt (Kunde voreingestellt), Hidden-Input für kunden_id - Client: kunde.ts showProjekte/showKontakte auf kunden_id geändert - Client: call_log.ts/kontaktadresse.ts Feldzugriffe auf iProjekt snake_case angepasst - AGENTS.md: Vorgehensweise ID-basiertes Laden hinterlegt, Branch-Regel formuliert - VS-Code Task "Flask: init-db" mit venv-Pfaden Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
This commit is contained in:
gg committed
1 parent
4b172081b9
commit
e04a52857a
15 files changed
+647
-287
No files matched your search
@@ -1,23 +1,17 @@
|
||||
import m from "mithril"
|
||||
import {Form, iForm} from "./widgets/form"
|
||||
import { Input, iInput} from "./widgets/inputs"
|
||||
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 {iProjekt, fetchProjekte, fetchProjektById, createProjektREST, updateProjektREST} from "../models/projekt"
|
||||
import {iKunde, fetchKunden} from "../models/kunde"
|
||||
|
||||
function createProjektTreenodes(kundenId: number | null = null): iTreenode[] {
|
||||
let filteredProjekte = getProjekteByKundenId(kundenId)
|
||||
|
||||
return filteredProjekte.map((projekt: iProjekt) => {
|
||||
return new Treenode(projekt, true, [])
|
||||
})
|
||||
}
|
||||
|
||||
export const projektliste: m.ClosureComponent = (vnode) => {
|
||||
let treenodes: iTreenode[] = createProjektTreenodes()
|
||||
let treenodes: iTreenode[] = []
|
||||
let selectedNode: iTreenode | null = null
|
||||
let filterKundenId: number | null = null
|
||||
// Kundenname für die Überschrift, asynchron aus der Kundenliste
|
||||
// aufgelöst.
|
||||
let kundenName: string = ""
|
||||
// Kundenliste asynchron vom Server laden, für die Kundenauflösung
|
||||
// beim Anlegen eines neuen Projekts.
|
||||
let kundenListe: iKunde[] = []
|
||||
@@ -27,38 +21,23 @@ export const projektliste: m.ClosureComponent = (vnode) => {
|
||||
}
|
||||
|
||||
const addProjektRoute = () => {
|
||||
const params: any = {
|
||||
id: -1,
|
||||
kundenname: "",
|
||||
projektname: "",
|
||||
zweck: "",
|
||||
verantwortlicher: "",
|
||||
startdatum: ""
|
||||
}
|
||||
const params: any = {id: -1}
|
||||
// Nur bei kundengefilterter Liste den Kunden vorbelegen.
|
||||
if (filterKundenId !== null) {
|
||||
const kunde = kundenListe.find((k: iKunde) => k.id === filterKundenId)
|
||||
if (kunde) {
|
||||
params.kundenId = kunde.id
|
||||
params.kundenname = kunde.name
|
||||
params.kunden_id = kunde.id
|
||||
params.kunden_name = 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,
|
||||
verantwortlicher: projekt.verantwortlicher,
|
||||
startdatum: projekt.startdatum
|
||||
})
|
||||
m.route.set("/projekt", {id: projekt.id})
|
||||
}
|
||||
|
||||
|
||||
const showCallLogs = (projekt: iProjekt, e: Event) => {
|
||||
e.stopPropagation()
|
||||
m.route.set("/calllogliste", {projektId: projekt.id})
|
||||
@@ -68,7 +47,7 @@ export const projektliste: m.ClosureComponent = (vnode) => {
|
||||
e.stopPropagation()
|
||||
m.route.set("/kontaktadresseliste", {projektId: projekt.id})
|
||||
}
|
||||
|
||||
|
||||
const addCallLog = (projekt: iProjekt, e: Event) => {
|
||||
e.stopPropagation()
|
||||
const now = new Date()
|
||||
@@ -76,7 +55,7 @@ export const projektliste: m.ClosureComponent = (vnode) => {
|
||||
const uhrzeit = now.toTimeString().split(':')[0] + ':' + now.toTimeString().split(':')[1]
|
||||
m.route.set("/call_log", {
|
||||
id: -1,
|
||||
kundenName: projekt.kundenName,
|
||||
kundenName: projekt.kunden_name,
|
||||
projektId: projekt.id,
|
||||
projektName: projekt.projektname,
|
||||
datum: datum,
|
||||
@@ -90,12 +69,12 @@ export const projektliste: m.ClosureComponent = (vnode) => {
|
||||
erledigt: false
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
|
||||
let projekt: iProjekt = node.nodevalue
|
||||
|
||||
return [
|
||||
m("div", m("strong", projekt.kundenName)),
|
||||
m("div", m("strong", projekt.kunden_name)),
|
||||
m("span", projekt.projektname),
|
||||
m("span", projekt.zweck),
|
||||
m("span", projekt.verantwortlicher),
|
||||
@@ -108,39 +87,54 @@ export const projektliste: m.ClosureComponent = (vnode) => {
|
||||
)
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
const filterFunction = (node: iTreenode, searchvalue: string): boolean => {
|
||||
let projekt: iProjekt = node.nodevalue
|
||||
let searchLower = searchvalue.toLowerCase()
|
||||
return projekt.kundenName.toLowerCase().includes(searchLower) ||
|
||||
return projekt.kunden_name.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)
|
||||
if (routeParams && routeParams.kunden_id) {
|
||||
filterKundenId = parseInt(routeParams.kunden_id)
|
||||
kundenName = routeParams.kunden_name || ""
|
||||
} else {
|
||||
filterKundenId = null
|
||||
kundenName = ""
|
||||
}
|
||||
treenodes = createProjektTreenodes(filterKundenId)
|
||||
// Projekte asynchron vom Server laden.
|
||||
fetchProjekte().then((result) => {
|
||||
let filtered = result
|
||||
if (filterKundenId !== null) {
|
||||
filtered = result.filter((p: iProjekt) => p.kunden_id === filterKundenId)
|
||||
}
|
||||
treenodes = filtered.map((projekt: iProjekt) => new Treenode(projekt, true, []))
|
||||
})
|
||||
// Kundenliste asynchron vom Server laden.
|
||||
fetchKunden().then((result) => {
|
||||
kundenListe = result
|
||||
if (filterKundenId !== null && kundenName === "") {
|
||||
const kunde = kundenListe.find((k: iKunde) => k.id === filterKundenId)
|
||||
if (kunde) {
|
||||
kundenName = kunde.name
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
view: (vnode) => {
|
||||
return m("div.w3-container.w3-auto", {
|
||||
style: {
|
||||
display: 'flex',
|
||||
'flex-direction': 'column',
|
||||
height: 'inherit',
|
||||
display: 'flex',
|
||||
'flex-direction': 'column',
|
||||
height: 'inherit',
|
||||
'overflow-y': 'inherit'}},
|
||||
m("h1", "Projektliste"),
|
||||
m("h1", kundenName ? "Projektliste für " + kundenName : "Projektliste"),
|
||||
m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
|
||||
m(Treetable,
|
||||
{
|
||||
@@ -161,85 +155,70 @@ 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.
|
||||
// currentProjekt hält den Formularzustand. kunden_id referenziert den
|
||||
// Kunden eindeutig, kunden_name dient der Anzeige in der Überschrift.
|
||||
let currentProjekt: {
|
||||
id: number
|
||||
kundenId: number
|
||||
kundenname: string
|
||||
kunden_id: number
|
||||
kunden_name: string
|
||||
projektname: string
|
||||
zweck: string
|
||||
verantwortlicher: string
|
||||
startdatum: string
|
||||
} = {
|
||||
id: -1,
|
||||
kundenId: -1,
|
||||
kundenname: "",
|
||||
kunden_id: -1,
|
||||
kunden_name: "",
|
||||
projektname: "",
|
||||
zweck: "",
|
||||
verantwortlicher: "",
|
||||
startdatum: ""
|
||||
}
|
||||
// Ist der Kunde voreingestellt (gefilterte Projektliste)?
|
||||
let kundeVoreingestellt: boolean = false
|
||||
// Kundenliste asynchron vom Server laden, für Select-Optionen und
|
||||
// Namensauflösung im submit-Handler.
|
||||
let kundenListe: iKunde[] = []
|
||||
|
||||
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 || "",
|
||||
verantwortlicher: routeParams.verantwortlicher || "",
|
||||
startdatum: routeParams.startdatum || ""
|
||||
}
|
||||
const id = routeParams && routeParams.id ? parseInt(routeParams.id) : -1
|
||||
if (id !== -1) {
|
||||
// Projektdaten frisch vom Server holen, um zwischenzeitliche
|
||||
// Änderungen anderer Nutzer nicht zu überschreiben.
|
||||
fetchProjektById(id).then((result) => {
|
||||
currentProjekt = result
|
||||
})
|
||||
} else {
|
||||
// Neuanlegen: kunden_id und kunden_name aus Route-Params
|
||||
// (voreingestellt aus der Projektliste).
|
||||
currentProjekt.kunden_id = routeParams && routeParams.kunden_id ? parseInt(routeParams.kunden_id) : -1
|
||||
currentProjekt.kunden_name = routeParams && routeParams.kunden_name ? routeParams.kunden_name : ""
|
||||
}
|
||||
fetchKunden().then((result) => {
|
||||
kundenListe = result
|
||||
})
|
||||
},
|
||||
view: (vnode) => {
|
||||
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 = kundenListe.find((k: iKunde) => k.id === kundenId)
|
||||
const gespeichertesProjekt: iProjekt = {
|
||||
id: currentProjekt.id,
|
||||
kundenId: kundenId,
|
||||
kundenName: kunde ? kunde.name : "",
|
||||
kunden_id: currentProjekt.kunden_id,
|
||||
kunden_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)
|
||||
createProjektREST(gespeichertesProjekt).then(() => m.route.set("/projektliste", {kunden_id: currentProjekt.kunden_id, kunden_name: currentProjekt.kunden_name}))
|
||||
} else {
|
||||
updateProjekt(gespeichertesProjekt)
|
||||
updateProjektREST(gespeichertesProjekt).then(() => m.route.set("/projektliste", {kunden_id: currentProjekt.kunden_id, kunden_name: currentProjekt.kunden_name}))
|
||||
}
|
||||
m.route.set("/projektliste")
|
||||
return true
|
||||
}
|
||||
const cancel = (e: Event) => {
|
||||
m.route.set("/projektliste")
|
||||
m.route.set("/projektliste", {kunden_id: currentProjekt.kunden_id, kunden_name: currentProjekt.kunden_name})
|
||||
}
|
||||
// Select-Optionen aus der Kundenliste aufbauen.
|
||||
const kundenOptionen: iSelectOption[] = kundenListe.map((k: iKunde) => {
|
||||
return {value: k.id, label: k.name}
|
||||
})
|
||||
return m("div.w3-container.w3-auto.form-view-container",
|
||||
m("div", {style: {display: 'flex', 'align-items': 'center', 'justify-content': 'space-between'}},
|
||||
m("h1", currentProjekt.id === -1 ? "Neues Projekt anlegen" : "Projekt-Stammblatt"),
|
||||
m("h1", currentProjekt.id === -1
|
||||
? "Neues Projekt für " + currentProjekt.kunden_name
|
||||
: "Projekt-Stammblatt"),
|
||||
currentProjekt.id !== -1
|
||||
? m("button.w3-button.w3-theme",
|
||||
{onclick: () => m.route.set("/kontaktadresseliste", {projektId: currentProjekt.id})},
|
||||
@@ -248,14 +227,7 @@ export const Projekt: m.ClosureComponent = (vnode) => {
|
||||
),
|
||||
m("div", {style: {flex: '1', 'min-height': '0'}},
|
||||
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("input", {type: "hidden", name: "kunden_id", value: currentProjekt.kunden_id}),
|
||||
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)),
|
||||
|
||||
Reference in new issue
Block a user