Server+Client: REST-API für Kontaktadresse und CallLog, In-Memory vollständig entfernt, CLI-Musterdaten, Route-Param-Fix
- 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
1 parent
e04a52857a
commit
b510c50497
13 files changed
+821
-503
No files matched your search
+186
-188
@@ -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")
|
||||
])
|
||||
)
|
||||
|
||||
Reference in new issue
Block a user