gg
e04a52857a
- 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>
369 lines
17 KiB
TypeScript
369 lines
17 KiB
TypeScript
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 {iCallLog, getCallLogsByProjektId, getNewCallLogId, addCallLogData, updateCallLogData} from "../models/call_log"
|
|
import {iKunde, fetchKunden} from "../models/kunde"
|
|
import {getProjekteByKundenId, getProjektById} from "../models/projekt"
|
|
import {getKontaktadressenByProjektId, getKontaktadresseById} 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 selectedNode: iTreenode | null = null
|
|
let filterProjektId: number | null = null
|
|
|
|
const handleRowMarked = (node: iTreenode) => {
|
|
selectedNode = node
|
|
}
|
|
|
|
const addCallLogRoute = () => {
|
|
const now = new Date()
|
|
const datum = now.toISOString().split('T')[0]
|
|
const uhrzeit = now.toTimeString().split(':')[0] + ':' + now.toTimeString().split(':')[1]
|
|
const params: any = {
|
|
id: -1,
|
|
datum: datum,
|
|
uhrzeitBeginn: uhrzeit,
|
|
dauer: "",
|
|
betreff: "",
|
|
nameAnsprechpartner: "",
|
|
telefon: "",
|
|
notiz: "",
|
|
wiedervorlageDatum: "",
|
|
erledigt: false
|
|
}
|
|
// Bei projektgefilterter Liste Kunde und Projekt vorbelegen.
|
|
if (filterProjektId !== null) {
|
|
const projekt = getProjektById(filterProjektId)
|
|
if (projekt) {
|
|
params.kundenName = projekt.kunden_name
|
|
params.projektId = projekt.id
|
|
params.projektName = projekt.projektname
|
|
}
|
|
}
|
|
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
|
|
})
|
|
}
|
|
|
|
const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
|
|
let log: iCallLog = node.nodevalue
|
|
|
|
return [
|
|
m("div", m("strong", log.kundenName + ": " + log.projektName)),
|
|
m("span", log.datum),
|
|
m("span", log.uhrzeitBeginn),
|
|
m("span", log.dauer + " min"),
|
|
m("span", log.betreff),
|
|
m("span", log.wiedervorlageDatum),
|
|
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) ||
|
|
log.datum.includes(searchLower) ||
|
|
log.uhrzeitBeginn.toLowerCase().includes(searchLower) ||
|
|
log.betreff.toLowerCase().includes(searchLower) ||
|
|
log.nameAnsprechpartner.toLowerCase().includes(searchLower) ||
|
|
log.notiz.toLowerCase().includes(searchLower) ||
|
|
log.wiedervorlageDatum.includes(searchLower)
|
|
}
|
|
|
|
return {
|
|
oninit: (vnode) => {
|
|
const routeParams = m.route.param()
|
|
if (routeParams && routeParams.projektId) {
|
|
filterProjektId = parseInt(routeParams.projektId)
|
|
} else {
|
|
filterProjektId = null
|
|
}
|
|
treenodes = createCallLogTreenodes(filterProjektId)
|
|
},
|
|
view: (vnode) => {
|
|
return m("div.w3-container.w3-auto", {
|
|
style: {
|
|
display: 'flex',
|
|
'flex-direction': 'column',
|
|
height: 'inherit',
|
|
'overflow-y': 'inherit'}},
|
|
m("h1", "Gesprächsnotizen"),
|
|
m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
|
|
m(Treetable,
|
|
{
|
|
treenodes: treenodes,
|
|
columnmapper: columnmapper,
|
|
filter: filterFunction,
|
|
onRowMarked: handleRowMarked,
|
|
isSelected: (node: iTreenode) => node === selectedNode
|
|
} as iTreetable,
|
|
m(TopbarButton, {onclick: addCallLogRoute, tooltip: "Neue Gesprächsnotiz anlegen"} as iTopbarButton,
|
|
m("i.material-icons", "add_call")
|
|
)
|
|
)
|
|
)
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
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.
|
|
let currentLog: {
|
|
id: number
|
|
kundenId: number
|
|
kundenName: string
|
|
projektId: number
|
|
projektName: string
|
|
datum: string
|
|
uhrzeitBeginn: string
|
|
dauer: string
|
|
betreff: string
|
|
nameAnsprechpartner: string
|
|
telefon: string
|
|
notiz: string
|
|
wiedervorlageDatum: string
|
|
erledigt: boolean
|
|
} = {
|
|
id: -1,
|
|
kundenId: -1,
|
|
kundenName: "",
|
|
projektId: -1,
|
|
projektName: "",
|
|
datum: "",
|
|
uhrzeitBeginn: "",
|
|
dauer: "",
|
|
betreff: "",
|
|
nameAnsprechpartner: "",
|
|
telefon: "",
|
|
notiz: "",
|
|
wiedervorlageDatum: "",
|
|
erledigt: false
|
|
}
|
|
// Sind Kunde und Projekt voreingestellt (Liste wurde projektgefiltert
|
|
// oder aus der Projektliste aufgerufen)?
|
|
let kundeVoreingestellt: 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).
|
|
let dauerInput: HTMLInputElement | null = null
|
|
// Kundenliste asynchron vom Server laden, für Select-Optionen.
|
|
let kundenListe: iKunde[] = []
|
|
|
|
/**
|
|
* Formatiert verstrichene Sekunden als mm:ss (Minuten:Sekunden).
|
|
*/
|
|
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')
|
|
}
|
|
|
|
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"
|
|
}
|
|
// 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)
|
|
}
|
|
}
|
|
// Kundenliste asynchron vom Server laden.
|
|
fetchKunden().then((result) => {
|
|
kundenListe = 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.
|
|
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 + ")" : "")}
|
|
})
|
|
: []
|
|
// Einheit der Dauer-Anzeige im Format mm:ss.
|
|
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("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("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)),
|
|
// 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("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",
|
|
value: currentLog.dauer,
|
|
oncreate: (vnode: m.VnodeDOM) => {
|
|
dauerInput = vnode.dom as HTMLInputElement
|
|
}
|
|
}))
|
|
),
|
|
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(Select, {
|
|
name: "kontaktadresseId",
|
|
value: -1,
|
|
options: kontaktadressenOptionen,
|
|
onchanged: (kontaktadresseId: number) => {
|
|
const ka = getKontaktadresseById(kontaktadresseId)
|
|
if (ka) {
|
|
currentLog.nameAnsprechpartner = ka.name
|
|
currentLog.telefon = ka.telefon
|
|
}
|
|
}
|
|
} as iSelect)),
|
|
m("label", {style: {flex: '1'}}, "Telefon",
|
|
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", m(Input, {name: "erledigt", type: "checkbox", value: currentLog.erledigt} as iInput), "Erledigt")
|
|
])
|
|
)
|
|
)
|
|
}
|
|
}
|
|
}
|