chmln-app-dev/kbcrm
5
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Server+Client: REST-API für Kontaktadresse und CallLog, In-Memory vollständig entfernt, CLI-Musterdaten, Route-Param-Fix

Browse Source 
- Server: ORM-Modelle Kontaktadresse (kontaktadressen) und CallLog (call_logs) mit FK projekt_id
- Server: Geschäftslogik kontaktadresse.py und call_log.py (get/create/update/delete)
- Server: DB-Migration V01_03 (kontaktadressen + call_logs Tabellen)
- Server: REST-Endpunkte /xhr/kontaktadresse/* und /xhr/calllog/* mit Autorisierung
- Server: CLI init-db legt Muster-Kontaktadressen (1-3/Projekt) und Muster-Gesprächsnotizen (2-5/Projekt) an
- Client: kontaktadresse.ts auf REST umgestellt, snake_case, In-Memory entfernt
- Client: call_log.ts auf REST umgestellt, snake_case, In-Memory entfernt, Submit-Handler implementiert
- Client: projekt.ts In-Memory vollständig entfernt (keine weiteren Verbraucher)
- Client: Route-Params projektId → projekt_id korrigiert (3 Stellen in projekt.ts)
- Client: addCallLog in projekt.ts Route-Params auf snake_case angepasst
- AGENTS.md: Erinnerung client-build-Skill nach .ts-Änderungen hinzugefügt

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
This commit is contained in:
gg committed 2026-09-04 12:35:07 +02:00
1 parent e04a52857a
commit b510c50497
13 files changed
+821 -503
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/Components/call_log.ts
+186 -188
View File
@@ -3,28 +3,23 @@ import {Form, iForm} from "./widgets/form"
import { Input, iInput, Textarea, iTextarea} from "./widgets/inputs"
import {Select, iSelect, iSelectOption} from "./widgets/select"
import {Treenode, iTreenode, Treetable, iTreetable, TopbarButton, iTopbarButton} from "./widgets/Treetable_V2"
import {iCallLog, getCallLogsByProjektId, getNewCallLogId, addCallLogData, updateCallLogData} from "../models/call_log"
import {iCallLog, fetchCallLogs, fetchCallLogById, createCallLogREST, updateCallLogREST} from "../models/call_log"
import {iKunde, fetchKunden} from "../models/kunde"
import {getProjekteByKundenId, getProjektById} from "../models/projekt"
import {getKontaktadressenByProjektId, getKontaktadresseById} from "../models/kontaktadresse"
import {iProjekt, fetchProjekte} from "../models/projekt"
import {iKontaktadresse, fetchKontaktadressen} from "../models/kontaktadresse"
// Aktualisierungsintervall für die Dauer-Anzeige in Millisekunden.
// 1000 = jede Sekunde, 60000 = jede Minute.
const DAUER_UPDATE_INTERVALL = 1000
function createCallLogTreenodes(projektId: number | null = null): iTreenode[] {
let filteredLogs = getCallLogsByProjektId(projektId)
return filteredLogs.map((log: iCallLog) => {
return new Treenode(log, true, [])
})
}
export const call_log_liste: m.ClosureComponent = (vnode) => {
let treenodes: iTreenode[] = createCallLogTreenodes()
let treenodes: iTreenode[] = []
let selectedNode: iTreenode | null = null
let filterProjektId: number | null = null
// Projektname für die Überschrift, asynchron aufgelöst.
let projektName: string = ""
// Projektliste asynchron laden, für Projektauflösung beim Neuanlegen.
let projektListe: iProjekt[] = []
const handleRowMarked = (node: iTreenode) => {
selectedNode = node
}
@@ -36,92 +31,96 @@ export const call_log_liste: m.ClosureComponent = (vnode) => {
const params: any = {
id: -1,
datum: datum,
uhrzeitBeginn: uhrzeit,
uhrzeit_beginn: uhrzeit,
dauer: "",
betreff: "",
nameAnsprechpartner: "",
name_ansprechpartner: "",
telefon: "",
notiz: "",
wiedervorlageDatum: "",
wiedervorlage_datum: "",
erledigt: false
}
// Bei projektgefilterter Liste Kunde und Projekt vorbelegen.
if (filterProjektId !== null) {
const projekt = getProjektById(filterProjektId)
const projekt = projektListe.find((p: iProjekt) => p.id === filterProjektId)
if (projekt) {
params.kundenName = projekt.kunden_name
params.projektId = projekt.id
params.projektName = projekt.projektname
params.projekt_id = projekt.id
params.projekt_name = projekt.projektname
params.kunden_name = projekt.kunden_name
}
}
m.route.set("/call_log", params)
}
const editCallLog = (log: iCallLog, e: Event) => {
e.stopPropagation()
m.route.set("/call_log", {
id: log.id,
kundenName: log.kundenName,
projektId: log.projektId,
projektName: log.projektName,
datum: log.datum,
uhrzeitBeginn: log.uhrzeitBeginn,
dauer: log.dauer,
betreff: log.betreff,
nameAnsprechpartner: log.nameAnsprechpartner,
telefon: log.telefon,
notiz: log.notiz,
wiedervorlageDatum: log.wiedervorlageDatum,
erledigt: log.erledigt
})
m.route.set("/call_log", {id: log.id})
}
const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
let log: iCallLog = node.nodevalue
return [
m("div", m("strong", log.kundenName + ": " + log.projektName)),
m("div", m("strong", log.kunden_name + ": " + log.projekt_name)),
m("span", log.datum),
m("span", log.uhrzeitBeginn),
m("span", log.uhrzeit_beginn),
m("span", log.dauer + " min"),
m("span", log.betreff),
m("span", log.wiedervorlageDatum),
m("span", log.wiedervorlage_datum),
m("span", log.erledigt ? "Erledigt" : "Offen"),
m("button.w3-button.w3-small", {title: "Gesprächsnotiz bearbeiten", style: {padding: '0 2px'}, onclick: (e: Event) => editCallLog(log, e)}, m("i.material-icons", "edit"))
]
}
const filterFunction = (node: iTreenode, searchvalue: string): boolean => {
let log: iCallLog = node.nodevalue
let searchLower = searchvalue.toLowerCase()
return log.kundenName.toLowerCase().includes(searchLower) ||
log.projektName.toLowerCase().includes(searchLower) ||
return log.kunden_name.toLowerCase().includes(searchLower) ||
log.projekt_name.toLowerCase().includes(searchLower) ||
log.datum.includes(searchLower) ||
log.uhrzeitBeginn.toLowerCase().includes(searchLower) ||
log.uhrzeit_beginn.toLowerCase().includes(searchLower) ||
log.betreff.toLowerCase().includes(searchLower) ||
log.nameAnsprechpartner.toLowerCase().includes(searchLower) ||
log.name_ansprechpartner.toLowerCase().includes(searchLower) ||
log.notiz.toLowerCase().includes(searchLower) ||
log.wiedervorlageDatum.includes(searchLower)
log.wiedervorlage_datum.includes(searchLower)
}
return {
oninit: (vnode) => {
const routeParams = m.route.param()
if (routeParams && routeParams.projektId) {
filterProjektId = parseInt(routeParams.projektId)
if (routeParams && routeParams.projekt_id) {
filterProjektId = parseInt(routeParams.projekt_id)
projektName = routeParams.projekt_name || ""
} else {
filterProjektId = null
projektName = ""
}
treenodes = createCallLogTreenodes(filterProjektId)
// Gesprächsnotizen asynchron vom Server laden.
fetchCallLogs().then((result) => {
let filtered = result
if (filterProjektId !== null) {
filtered = result.filter((l: iCallLog) => l.projekt_id === filterProjektId)
}
treenodes = filtered.map((log: iCallLog) => new Treenode(log, true, []))
})
// Projektliste asynchron laden, für Projektnamen-Auflösung.
fetchProjekte().then((result) => {
projektListe = result
if (filterProjektId !== null && projektName === "") {
const projekt = projektListe.find((p: iProjekt) => p.id === filterProjektId)
if (projekt) {
projektName = projekt.projektname
}
}
})
},
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", "Gesprächsnotizen"),
m("h1", projektName ? "Gesprächsnotizen für " + projektName : "Gesprächsnotizen"),
m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
m(Treetable,
{
@@ -142,187 +141,190 @@ export const call_log_liste: m.ClosureComponent = (vnode) => {
}
export const Call_Log: m.ClosureComponent = (vnode) => {
// currentLog hält den Formularzustand. kundenId ist intern und wird über
// das Projekt aufgelöst; kundenName/projektName dienen der Anzeige.
// currentLog hält den Formularzustand. projekt_id referenziert das
// Projekt, kunden_name und projekt_name dienen der Anzeige.
let currentLog: {
id: number
kundenId: number
kundenName: string
projektId: number
projektName: string
projekt_id: number
projekt_name: string
kunden_name: string
datum: string
uhrzeitBeginn: string
uhrzeit_beginn: string
dauer: string
betreff: string
nameAnsprechpartner: string
name_ansprechpartner: string
telefon: string
notiz: string
wiedervorlageDatum: string
wiedervorlage_datum: string
erledigt: boolean
} = {
id: -1,
kundenId: -1,
kundenName: "",
projektId: -1,
projektName: "",
projekt_id: -1,
projekt_name: "",
kunden_name: "",
datum: "",
uhrzeitBeginn: "",
uhrzeit_beginn: "",
dauer: "",
betreff: "",
nameAnsprechpartner: "",
name_ansprechpartner: "",
telefon: "",
notiz: "",
wiedervorlageDatum: "",
wiedervorlage_datum: "",
erledigt: false
}
// Sind Kunde und Projekt voreingestellt (Liste wurde projektgefiltert
// oder aus der Projektliste aufgerufen)?
let kundeVoreingestellt: boolean = false
// Ist das Projekt voreingestellt (Liste wurde projektgefiltert)?
let projektVoreingestellt: boolean = false
// Ist der Ansprechpartner voreingestellt (aus Kontaktadressenliste)?
// Wenn ja, wird ein readonly Input gezeigt; sonst ein Select, das die
// Kontaktadressen des gewählten Projekts anbietet.
let ansprechpartnerVoreingestellt: boolean = false
// Startzeit für die Dauer-Messung (nur bei Neuanlage gesetzt).
let startZeit: Date | null = null
// Timer-Handle für die Dauer-Aktualisierung.
let timerId: number | null = null
// Direkte DOM-Referenz auf das Dauer-Feld, damit der Timer den Wert
// ohne Redraw aktualisieren kann (ein Redraw würde die übrigen Felder
// mit den veralteten currentLog-Werten überschreiben).
// Direkte DOM-Referenz auf das Dauer-Feld.
let dauerInput: HTMLInputElement | null = null
// Kundenliste asynchron vom Server laden, für Select-Optionen.
// Asynchron geladene Listen für Select-Optionen.
let kundenListe: iKunde[] = []
let projektListe: iProjekt[] = []
let kontaktadressenListe: iKontaktadresse[] = []
/**
* Formatiert verstrichene Sekunden als mm:ss (Minuten:Sekunden).
* Formatiert verstrichene Sekunden als mm:ss.
*/
const formatDauer = (sekunden: number): string => {
const m = Math.floor(sekunden / 60)
const s = sekunden % 60
return m.toString().padStart(2, '0') + ':' + s.toString().padStart(2, '0')
const min = Math.floor(sekunden / 60)
const sek = sekunden % 60
return min.toString().padStart(2, '0') + ':' + sek.toString().padStart(2, '0')
}
return {
oninit: (vnode) => {
const routeParams = m.route.param()
if (routeParams) {
const projektId = routeParams.projektId ? parseInt(routeParams.projektId) : -1
kundeVoreingestellt = projektId !== -1
// kundenId aus dem Projekt ableiten, falls nicht direkt gesetzt.
let kundenId = -1
if (kundeVoreingestellt) {
const projekt = getProjektById(projektId)
if (projekt) { kundenId = projekt.kunden_id }
}
currentLog = {
id: routeParams.id ? parseInt(routeParams.id) : -1,
kundenId: kundenId,
kundenName: routeParams.kundenName || "",
projektId: projektId,
projektName: routeParams.projektName || "",
datum: routeParams.datum || "",
uhrzeitBeginn: routeParams.uhrzeitBeginn || "",
dauer: routeParams.dauer || "",
betreff: routeParams.betreff || "",
nameAnsprechpartner: routeParams.nameAnsprechpartner || "",
telefon: routeParams.telefon || "",
notiz: routeParams.notiz || "",
wiedervorlageDatum: routeParams.wiedervorlageDatum || "",
erledigt: routeParams.erledigt === true || routeParams.erledigt === "true"
}
const id = routeParams && routeParams.id ? parseInt(routeParams.id) : -1
if (id !== -1) {
// Gesprächsnotiz frisch vom Server holen.
fetchCallLogById(id).then((result) => {
currentLog = result
projektVoreingestellt = true
ansprechpartnerVoreingestellt = currentLog.name_ansprechpartner !== ""
})
} else {
projektVoreingestellt = routeParams && routeParams.projekt_id ? parseInt(routeParams.projekt_id) !== -1 : false
currentLog.projekt_id = routeParams && routeParams.projekt_id ? parseInt(routeParams.projekt_id) : -1
currentLog.projekt_name = routeParams && routeParams.projekt_name ? routeParams.projekt_name : ""
currentLog.kunden_name = routeParams && routeParams.kunden_name ? routeParams.kunden_name : ""
currentLog.datum = routeParams && routeParams.datum ? routeParams.datum : ""
currentLog.uhrzeit_beginn = routeParams && routeParams.uhrzeit_beginn ? routeParams.uhrzeit_beginn : ""
currentLog.dauer = routeParams && routeParams.dauer ? routeParams.dauer : ""
currentLog.betreff = routeParams && routeParams.betreff ? routeParams.betreff : ""
currentLog.name_ansprechpartner = routeParams && routeParams.name_ansprechpartner ? routeParams.name_ansprechpartner : ""
currentLog.telefon = routeParams && routeParams.telefon ? routeParams.telefon : ""
currentLog.notiz = routeParams && routeParams.notiz ? routeParams.notiz : ""
currentLog.wiedervorlage_datum = routeParams && routeParams.wiedervorlage_datum ? routeParams.wiedervorlage_datum : ""
currentLog.erledigt = routeParams && (routeParams.erledigt === true || routeParams.erledigt === "true")
ansprechpartnerVoreingestellt = currentLog.name_ansprechpartner !== ""
// Bei Neuanlage Startzeit merken und Dauer-Timer starten.
ansprechpartnerVoreingestellt = currentLog.nameAnsprechpartner !== ""
if (currentLog.id === -1) {
startZeit = new Date()
timerId = window.setInterval(() => {
if (startZeit) {
// Verstrichene Sekunden berechnen; das Intervall
// steuert nur die Update-Frequenz.
const sekunden = Math.floor((Date.now() - startZeit.getTime()) / 1000)
const dauer = formatDauer(sekunden)
currentLog.dauer = dauer
// Nur das Dauer-Feld direkt im DOM aktualisieren,
// ohne redraw (sonst werden andere Felder zurückgesetzt).
if (dauerInput) { dauerInput.value = dauer }
}
}, DAUER_UPDATE_INTERVALL)
}
startZeit = new Date()
timerId = window.setInterval(() => {
if (startZeit) {
const sekunden = Math.floor((Date.now() - startZeit.getTime()) / 1000)
const dauer = formatDauer(sekunden)
currentLog.dauer = dauer
if (dauerInput) { dauerInput.value = dauer }
}
}, DAUER_UPDATE_INTERVALL)
}
// Kundenliste asynchron vom Server laden.
fetchKunden().then((result) => {
kundenListe = result
})
// Alle Listen asynchron laden, für Select-Optionen.
fetchKunden().then((result) => { kundenListe = result })
fetchProjekte().then((result) => { projektListe = result })
fetchKontaktadressen().then((result) => { kontaktadressenListe = result })
},
onremove: (vnode) => {
// Timer stoppen, damit er nach Verlassen des Views nicht weiterläuft.
if (timerId != null) { window.clearInterval(timerId) }
},
view: (vnode) => {
// Select-Optionen aus Kunden- und Projektliste aufbauen.
// kunden_id aus dem geladenen Projekt ableiten (fuer abhaengiges
// Projekt-Select). Wird nur bei nicht voreingestelltem Projekt
// benoetigt.
const internKundenId = (() => {
if (currentLog.projekt_id !== -1) {
const p = projektListe.find((p: iProjekt) => p.id === currentLog.projekt_id)
return p ? p.kunden_id : -1
}
return -1
})()
const kundenOptionen: iSelectOption[] = kundenListe.map((k: iKunde) => {
return {value: k.id, label: k.name}
})
// Projekt-Optionen sind vom gewählten Kunden abhängig.
const projektOptionen: iSelectOption[] = getProjekteByKundenId(currentLog.kundenId).map((p) => {
return {value: p.id, label: p.projektname}
})
// Kontaktadressen-Optionen sind vom gewählten Projekt abhängig.
// Werden nur benötigt, wenn der Ansprechpartner nicht voreingestellt ist.
const kontaktadressenOptionen: iSelectOption[] = !ansprechpartnerVoreingestellt
? getKontaktadressenByProjektId(currentLog.projektId).map((ka) => {
return {value: ka.id, label: ka.name + (ka.firma ? " (" + ka.firma + ")" : "")}
const projektOptionen: iSelectOption[] = projektListe
.filter((p: iProjekt) => internKundenId === -1 || p.kunden_id === internKundenId)
.map((p: iProjekt) => {
return {value: p.id, label: p.projektname}
})
// Kontaktadressen-Optionen sind vom gewählten Projekt abhängig.
const kontaktadressenOptionen: iSelectOption[] = !ansprechpartnerVoreingestellt
? kontaktadressenListe
.filter((ka: iKontaktadresse) => ka.projekt_id === currentLog.projekt_id)
.map((ka: iKontaktadresse) => {
return {value: ka.id, label: ka.name + (ka.firma ? " (" + ka.firma + ")" : "")}
})
: []
// Einheit der Dauer-Anzeige im Format mm:ss.
const submit = (form: HTMLFormElement): boolean => {
const formData = new FormData(form)
const gespeichertesLog: iCallLog = {
id: currentLog.id,
projekt_id: currentLog.projekt_id,
projekt_name: "",
kunden_name: "",
datum: (formData.get("datum") as string) || "",
uhrzeit_beginn: (formData.get("uhrzeit_beginn") as string) || "",
dauer: (formData.get("dauer") as string) || "",
betreff: (formData.get("betreff") as string) || "",
name_ansprechpartner: (formData.get("name_ansprechpartner") as string) || "",
telefon: (formData.get("telefon") as string) || "",
notiz: (formData.get("notiz") as string) || "",
wiedervorlage_datum: (formData.get("wiedervorlage_datum") as string) || "",
erledigt: formData.get("erledigt") === "on"
}
if (currentLog.id === -1) {
createCallLogREST(gespeichertesLog).then(() => m.route.set("/calllogliste", {projekt_id: currentLog.projekt_id, projekt_name: currentLog.projekt_name}))
} else {
updateCallLogREST(gespeichertesLog).then(() => m.route.set("/calllogliste", {projekt_id: currentLog.projekt_id, projekt_name: currentLog.projekt_name}))
}
return true
}
const cancel = (e: Event) => {
m.route.set("/calllogliste", {projekt_id: currentLog.projekt_id, projekt_name: currentLog.projekt_name})
}
return m("div.w3-container.w3-auto.form-view-container",
m("h1", currentLog.id === -1 ? "Neue Gesprächsnotiz anlegen" : "Gesprächsnotiz"),
// Form füllt den verbleibenden Platz; das Form-Widget selbst
// sorgt (mit stickyButtons, Default) dafür, dass nur der
// Inhalt scrollt und die Buttons fixiert bleiben.
m("div", {style: {flex: '1', 'min-height': '0'}},
m(Form, {showButtons: true, onsubmit: (null), oncancel: (null)} as iForm, [
m(Form, {showButtons: true, onsubmit: submit, oncancel: cancel} as iForm, [
m("input", {type: "hidden", name: "projekt_id", value: currentLog.projekt_id}),
// Kunde und Projekt als Read-Only-Text, da voreingestellt.
m("label", "Kunde",
m(Select, {
name: "kundenId",
value: currentLog.kundenId,
options: kundenOptionen,
readonly: kundeVoreingestellt,
required: true,
onchanged: (kundenId: number) => {
// Bei Kundenwechsel die kundenId übernehmen
// und projektId zurücksetzen, da die Projekte
// kundenabhängig sind.
currentLog.kundenId = kundenId
currentLog.projektId = -1
}
} as iSelect)),
m("input.w3-input.w3-border", {
type: "text",
value: currentLog.kunden_name,
readonly: true,
style: {'margin-bottom': '5px'}
})),
m("label", "Projekt",
m(Select, {
name: "projektId",
value: currentLog.projektId,
options: projektOptionen,
readonly: kundeVoreingestellt,
required: true,
onchanged: (projektId: number) => {
currentLog.projektId = projektId
// Bei Projektwechsel Ansprechpartner und Telefon
// zurücksetzen, falls nicht voreingestellt.
if (!ansprechpartnerVoreingestellt) {
currentLog.nameAnsprechpartner = ""
currentLog.telefon = ""
}
}
} as iSelect)),
m("input.w3-input.w3-border", {
type: "text",
value: currentLog.projekt_name,
readonly: true,
style: {'margin-bottom': '5px'}
})),
// Datum, Startzeit und Dauer in einer Zeile.
m("div", {style: {display: 'flex', gap: '8px', 'margin-bottom': '5px'}},
m("label", {style: {flex: '1'}}, "Datum",
m(Input, {name: "datum", value: currentLog.datum, type: "date"} as iInput)),
m("label", {style: {flex: '1'}}, "Uhrzeit Beginn",
m(Input, {name: "uhrzeitBeginn", value: currentLog.uhrzeitBeginn, type: "time"} as iInput)),
m(Input, {name: "uhrzeit_beginn", value: currentLog.uhrzeit_beginn, type: "time"} as iInput)),
m("label", {style: {flex: '1'}}, "Dauer (mm:ss)",
// Raw input statt Input-Widget, damit oncreate die
// DOM-Referenz für den Timer greifen kann. Text-Typ,
// da das Format mm:ss keine Zahl ist.
m("input.w3-input.w3-border", {
name: "dauer",
type: "text",
@@ -334,22 +336,18 @@ export const Call_Log: m.ClosureComponent = (vnode) => {
),
m("label", "Betreff", m(Input, {name: "betreff", value: currentLog.betreff, type: "text"} as iInput)),
// Ansprechpartner und Telefon in einer Zeile.
// Wenn der Ansprechpartner voreingestellt ist (aus Kontaktadressenliste),
// wird ein readonly Input gezeigt; sonst ein Select, das die
// Kontaktadressen des gewählten Projekts anbietet. Bei Auswahl
// werden Name und Telefon automatisch übernommen.
m("div", {style: {display: 'flex', gap: '8px', 'margin-bottom': '5px'}},
m("label", {style: {flex: '1'}}, "Name Ansprechpartner",
ansprechpartnerVoreingestellt
? m(Input, {name: "nameAnsprechpartner", value: currentLog.nameAnsprechpartner, type: "text", readonly: true} as iInput)
? m(Input, {name: "name_ansprechpartner", value: currentLog.name_ansprechpartner, type: "text", readonly: true} as iInput)
: m(Select, {
name: "kontaktadresseId",
name: "kontaktadresse_id",
value: -1,
options: kontaktadressenOptionen,
onchanged: (kontaktadresseId: number) => {
const ka = getKontaktadresseById(kontaktadresseId)
const ka = kontaktadressenListe.find((k: iKontaktadresse) => k.id === kontaktadresseId)
if (ka) {
currentLog.nameAnsprechpartner = ka.name
currentLog.name_ansprechpartner = ka.name
currentLog.telefon = ka.telefon
}
}
@@ -358,7 +356,7 @@ export const Call_Log: m.ClosureComponent = (vnode) => {
m(Input, {name: "telefon", value: currentLog.telefon, type: "tel"} as iInput))
),
m("label", "Notiz", m(Textarea, {name: "notiz", value: currentLog.notiz, rows: 4} as iTextarea)),
m("label", "Wiedervorlage Datum", m(Input, {name: "wiedervorlageDatum", value: currentLog.wiedervorlageDatum, type: "date"} as iInput)),
m("label", "Wiedervorlage Datum", m(Input, {name: "wiedervorlage_datum", value: currentLog.wiedervorlage_datum, type: "date"} as iInput)),
m("label", m(Input, {name: "erledigt", type: "checkbox", value: currentLog.erledigt} as iInput), "Erledigt")
])
)
Client/Components/kontaktadresse.ts
+69 -108
View File
@@ -1,48 +1,32 @@
import m from "mithril"
import {Form, iForm} from "./widgets/form"
import { Input, iInput, Textarea, iTextarea} from "./widgets/inputs"
import {Select, iSelect, iSelectOption} from "./widgets/select"
import {Treenode, iTreenode, Treetable, iTreetable, TopbarButton, iTopbarButton} from "./widgets/Treetable_V2"
import {iKontaktadresse, getKontaktadressenByProjektId, getNewKontaktadresseId, addKontaktadresse, updateKontaktadresse} from "../models/kontaktadresse"
import {iProjekt, getProjekte, getProjektById} from "../models/projekt"
function createKontaktadresseTreenodes(projektId: number | null = null): iTreenode[] {
let filteredKontaktadressen = getKontaktadressenByProjektId(projektId)
return filteredKontaktadressen.map((kontaktadresse: iKontaktadresse) => {
return new Treenode(kontaktadresse, true, [])
})
}
import {iKontaktadresse, fetchKontaktadressen, fetchKontaktadresseById, createKontaktadresseREST, updateKontaktadresseREST} from "../models/kontaktadresse"
import {iProjekt, fetchProjekte} from "../models/projekt"
export const kontaktadresseliste: m.ClosureComponent = (vnode) => {
let treenodes: iTreenode[] = createKontaktadresseTreenodes()
let treenodes: iTreenode[] = []
let selectedNode: iTreenode | null = null
let filterProjektId: number | null = null
// Projektname für die Überschrift, asynchron aus der Projektliste
// aufgelöst.
let projektName: string = ""
// Projektliste asynchron vom Server laden, für die Projektauflösung
// beim Anlegen einer neuen Kontaktadresse.
let projektListe: iProjekt[] = []
const handleRowMarked = (node: iTreenode) => {
selectedNode = node
}
const addKontaktadresseRoute = () => {
const params: any = {
id: -1,
anrede: "",
name: "",
firma: "",
telefon: "",
email: "",
strasse: "",
plz: "",
ort: "",
land: "",
notiz: ""
}
// Nur bei projektgefilterter Liste das Projekt vorbelegen.
const params: any = {id: -1}
if (filterProjektId !== null) {
const projekt = getProjekte().find((p: iProjekt) => p.id === filterProjektId)
const projekt = projektListe.find((p: iProjekt) => p.id === filterProjektId)
if (projekt) {
params.projektId = projekt.id
params.projektname = projekt.projektname
params.projekt_id = projekt.id
params.projekt_name = projekt.projektname
}
}
m.route.set("/kontaktadresse", params)
@@ -50,21 +34,7 @@ export const kontaktadresseliste: m.ClosureComponent = (vnode) => {
const editKontaktadresse = (kontaktadresse: iKontaktadresse, e: Event) => {
e.stopPropagation()
m.route.set("/kontaktadresse", {
id: kontaktadresse.id,
projektId: kontaktadresse.projektId,
projektname: kontaktadresse.projektName,
anrede: kontaktadresse.anrede,
name: kontaktadresse.name,
firma: kontaktadresse.firma,
telefon: kontaktadresse.telefon,
email: kontaktadresse.email,
strasse: kontaktadresse.strasse,
plz: kontaktadresse.plz,
ort: kontaktadresse.ort,
land: kontaktadresse.land,
notiz: kontaktadresse.notiz
})
m.route.set("/kontaktadresse", {id: kontaktadresse.id})
}
const addCallLog = (kontaktadresse: iKontaktadresse, e: Event) => {
@@ -72,21 +42,18 @@ export const kontaktadresseliste: m.ClosureComponent = (vnode) => {
const now = new Date()
const datum = now.toISOString().split('T')[0]
const uhrzeit = now.toTimeString().split(':')[0] + ':' + now.toTimeString().split(':')[1]
// Kundennamen über das Projekt auflösen.
const projekt = getProjektById(kontaktadresse.projektId)
m.route.set("/call_log", {
id: -1,
kundenName: projekt ? projekt.kunden_name : "",
projektId: kontaktadresse.projektId,
projektName: kontaktadresse.projektName,
projekt_id: kontaktadresse.projekt_id,
projekt_name: kontaktadresse.projekt_name,
datum: datum,
uhrzeitBeginn: uhrzeit,
uhrzeit_beginn: uhrzeit,
dauer: "",
betreff: "",
nameAnsprechpartner: kontaktadresse.name,
name_ansprechpartner: kontaktadresse.name,
telefon: kontaktadresse.telefon,
notiz: "",
wiedervorlageDatum: "",
wiedervorlage_datum: "",
erledigt: false
})
}
@@ -100,7 +67,7 @@ export const kontaktadresseliste: m.ClosureComponent = (vnode) => {
m("span", kontaktadresse.telefon),
m("span", kontaktadresse.email),
m("span", kontaktadresse.ort),
m("span", kontaktadresse.projektName),
m("span", kontaktadresse.projekt_name),
m("div", {style: {display: 'flex', gap: '0', 'white-space': 'nowrap'}},
m("button.w3-button.w3-small", {style: {padding: '0 2px'}, onclick: (e: Event) => editKontaktadresse(kontaktadresse, e)}, m("i.material-icons", "edit")),
m("button.w3-button.w3-small", {title: "Gesprächsnotiz hinzufügen", style: {padding: '0 2px'}, onclick: (e: Event) => addCallLog(kontaktadresse, e)}, m("i.material-icons", "add_call"))
@@ -116,18 +83,37 @@ export const kontaktadresseliste: m.ClosureComponent = (vnode) => {
kontaktadresse.telefon.toLowerCase().includes(searchLower) ||
kontaktadresse.email.toLowerCase().includes(searchLower) ||
kontaktadresse.ort.toLowerCase().includes(searchLower) ||
kontaktadresse.projektName.toLowerCase().includes(searchLower)
kontaktadresse.projekt_name.toLowerCase().includes(searchLower)
}
return {
oninit: (vnode) => {
const routeParams = m.route.param()
if (routeParams && routeParams.projektId) {
filterProjektId = parseInt(routeParams.projektId)
if (routeParams && routeParams.projekt_id) {
filterProjektId = parseInt(routeParams.projekt_id)
projektName = routeParams.projekt_name || ""
} else {
filterProjektId = null
projektName = ""
}
treenodes = createKontaktadresseTreenodes(filterProjektId)
// Kontaktadressen asynchron vom Server laden.
fetchKontaktadressen().then((result) => {
let filtered = result
if (filterProjektId !== null) {
filtered = result.filter((k: iKontaktadresse) => k.projekt_id === filterProjektId)
}
treenodes = filtered.map((kontaktadresse: iKontaktadresse) => new Treenode(kontaktadresse, true, []))
})
// Projektliste asynchron vom Server laden.
fetchProjekte().then((result) => {
projektListe = result
if (filterProjektId !== null && projektName === "") {
const projekt = projektListe.find((p: iProjekt) => p.id === filterProjektId)
if (projekt) {
projektName = projekt.projektname
}
}
})
},
view: (vnode) => {
return m("div.w3-container.w3-auto", {
@@ -136,7 +122,7 @@ export const kontaktadresseliste: m.ClosureComponent = (vnode) => {
'flex-direction': 'column',
height: 'inherit',
'overflow-y': 'inherit'}},
m("h1", "Kontaktadressen"),
m("h1", projektName ? "Kontaktadressen für " + projektName : "Kontaktadressen"),
m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
m(Treetable,
{
@@ -157,12 +143,12 @@ export const kontaktadresseliste: m.ClosureComponent = (vnode) => {
}
export const Kontaktadresse: m.ClosureComponent = (vnode) => {
// currentKontaktadresse hält den Formularzustand. projektId referenziert das
// Projekt eindeutig, projektname dient der Anzeige.
// currentKontaktadresse hält den Formularzustand. projekt_id referenziert
// das Projekt eindeutig, projekt_name dient der Anzeige in der Überschrift.
let currentKontaktadresse: {
id: number
projektId: number
projektname: string
projekt_id: number
projekt_name: string
anrede: string
name: string
firma: string
@@ -175,8 +161,8 @@ export const Kontaktadresse: m.ClosureComponent = (vnode) => {
notiz: string
} = {
id: -1,
projektId: -1,
projektname: "",
projekt_id: -1,
projekt_name: "",
anrede: "",
name: "",
firma: "",
@@ -188,42 +174,29 @@ export const Kontaktadresse: m.ClosureComponent = (vnode) => {
land: "",
notiz: ""
}
// Ist das Projekt voreingestellt (gefilterte Kontaktadressenliste)?
let projektVoreingestellt: boolean = false
return {
oninit: (vnode) => {
const routeParams = m.route.param()
if (routeParams) {
const projektId = routeParams.projektId ? parseInt(routeParams.projektId) : -1
projektVoreingestellt = projektId !== -1
currentKontaktadresse = {
id: routeParams.id ? parseInt(routeParams.id) : -1,
projektId: projektId,
projektname: routeParams.projektname || "",
anrede: routeParams.anrede || "",
name: routeParams.name || "",
firma: routeParams.firma || "",
telefon: routeParams.telefon || "",
email: routeParams.email || "",
strasse: routeParams.strasse || "",
plz: routeParams.plz || "",
ort: routeParams.ort || "",
land: routeParams.land || "",
notiz: routeParams.notiz || ""
}
const id = routeParams && routeParams.id ? parseInt(routeParams.id) : -1
if (id !== -1) {
// Kontaktadresse frisch vom Server holen.
fetchKontaktadresseById(id).then((result) => {
currentKontaktadresse = result
})
} else {
// Neuanlegen: projekt_id und projekt_name aus Route-Params.
currentKontaktadresse.projekt_id = routeParams && routeParams.projekt_id ? parseInt(routeParams.projekt_id) : -1
currentKontaktadresse.projekt_name = routeParams && routeParams.projekt_name ? routeParams.projekt_name : ""
}
},
view: (vnode) => {
const submit = (form: HTMLFormElement): boolean => {
const formData = new FormData(form)
const projektId = parseInt(formData.get("projektId") as string)
// Projektnamen zur gewählten projektId auflösen.
const projekt = getProjekte().find((p: iProjekt) => p.id === projektId)
const gespeicherteKontaktadresse: iKontaktadresse = {
id: currentKontaktadresse.id,
projektId: projektId,
projektName: projekt ? projekt.projektname : "",
projekt_id: currentKontaktadresse.projekt_id,
projekt_name: "",
anrede: (formData.get("anrede") as string) || "",
name: (formData.get("name") as string) || "",
firma: (formData.get("firma") as string) || "",
@@ -236,40 +209,28 @@ export const Kontaktadresse: m.ClosureComponent = (vnode) => {
notiz: (formData.get("notiz") as string) || ""
}
if (currentKontaktadresse.id === -1) {
gespeicherteKontaktadresse.id = getNewKontaktadresseId()
addKontaktadresse(gespeicherteKontaktadresse)
createKontaktadresseREST(gespeicherteKontaktadresse).then(() => m.route.set("/kontaktadresseliste", {projekt_id: currentKontaktadresse.projekt_id, projekt_name: currentKontaktadresse.projekt_name}))
} else {
updateKontaktadresse(gespeicherteKontaktadresse)
updateKontaktadresseREST(gespeicherteKontaktadresse).then(() => m.route.set("/kontaktadresseliste", {projekt_id: currentKontaktadresse.projekt_id, projekt_name: currentKontaktadresse.projekt_name}))
}
m.route.set("/kontaktadresseliste")
return true
}
const cancel = (e: Event) => {
m.route.set("/kontaktadresseliste")
m.route.set("/kontaktadresseliste", {projekt_id: currentKontaktadresse.projekt_id, projekt_name: currentKontaktadresse.projekt_name})
}
// Select-Optionen aus der Projektliste aufbauen.
const projektOptionen: iSelectOption[] = getProjekte().map((p: iProjekt) => {
return {value: p.id, label: p.projektname}
})
return m("div.w3-container.w3-auto.form-view-container",
m("h1", currentKontaktadresse.id === -1 ? "Neue Kontaktadresse anlegen" : "Kontaktadresse-Stammblatt"),
m("h1", currentKontaktadresse.id === -1
? "Neue Kontaktadresse für " + currentKontaktadresse.projekt_name
: "Kontaktadresse-Stammblatt"),
m("div", {style: {flex: '1', 'min-height': '0'}},
m(Form, {showButtons: true, onsubmit: submit, oncancel: cancel} as iForm, [
m("label", "Projekt",
m(Select, {
name: "projektId",
value: currentKontaktadresse.projektId,
options: projektOptionen,
readonly: projektVoreingestellt,
required: true
} as iSelect)),
m("input", {type: "hidden", name: "projekt_id", value: currentKontaktadresse.projekt_id}),
m("label", "Anrede", m(Input, {name: "anrede", value: currentKontaktadresse.anrede, type: "text"} as iInput)),
m("label", "Name", m(Input, {name: "name", value: currentKontaktadresse.name, type: "text", required: true} as iInput)),
m("label", "Firma", m(Input, {name: "firma", value: currentKontaktadresse.firma, type: "text"} as iInput)),
m("label", "Telefon", m(Input, {name: "telefon", value: currentKontaktadresse.telefon, type: "tel"} as iInput)),
m("label", "E-Mail", m(Input, {name: "email", value: currentKontaktadresse.email, type: "email"} as iInput)),
m("label", "Straße", m(Input, {name: "strasse", value: currentKontaktadresse.strasse, type: "text"} as iInput)),
// PLZ und Ort in einer Zeile.
m("div", {style: {display: 'flex', gap: '8px', 'margin-bottom': '5px'}},
m("label", {style: {flex: '0 0 120px'}}, "PLZ",
m(Input, {name: "plz", value: currentKontaktadresse.plz, type: "text"} as iInput)),
Client/Components/projekt.ts
+9 -9
View File
@@ -40,12 +40,12 @@ export const projektliste: m.ClosureComponent = (vnode) => {
const showCallLogs = (projekt: iProjekt, e: Event) => {
e.stopPropagation()
m.route.set("/calllogliste", {projektId: projekt.id})
m.route.set("/calllogliste", {projekt_id: projekt.id})
}
const showKontaktadressen = (projekt: iProjekt, e: Event) => {
e.stopPropagation()
m.route.set("/kontaktadresseliste", {projektId: projekt.id})
m.route.set("/kontaktadresseliste", {projekt_id: projekt.id})
}
const addCallLog = (projekt: iProjekt, e: Event) => {
@@ -55,17 +55,17 @@ 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.kunden_name,
projektId: projekt.id,
projektName: projekt.projektname,
kunden_name: projekt.kunden_name,
projekt_id: projekt.id,
projekt_name: projekt.projektname,
datum: datum,
uhrzeitBeginn: uhrzeit,
uhrzeit_beginn: uhrzeit,
dauer: "",
betreff: "",
nameAnsprechpartner: "",
name_ansprechpartner: "",
telefon: "",
notiz: "",
wiedervorlageDatum: "",
wiedervorlage_datum: "",
erledigt: false
})
}
@@ -221,7 +221,7 @@ export const Projekt: m.ClosureComponent = (vnode) => {
: "Projekt-Stammblatt"),
currentProjekt.id !== -1
? m("button.w3-button.w3-theme",
{onclick: () => m.route.set("/kontaktadresseliste", {projektId: currentProjekt.id})},
{onclick: () => m.route.set("/kontaktadresseliste", {projekt_id: currentProjekt.id})},
m("i.material-icons", "contact_page"), " Kontaktadressen")
: null
),