Neue Frontend-Komponenten für Gesprächsnotizen und Tags
- call_log.ts: Komponente zur Verwaltung von Gesprächsnotizen mit Liste und Einzelansicht - tags.ts: Komponente zur hierarchischen Tag-Verwaltung mit Baumstruktur
This commit is contained in:
gg committed
1 parent
9d91915916
commit
72055840f7
2 files changed
+881
No files matched your search
@@ -0,0 +1,204 @@
|
||||
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 iCallLog {
|
||||
id: 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
|
||||
}
|
||||
|
||||
const callLogDaten: iCallLog[] = [
|
||||
{id: 1, kundenName: "Musterfirma GmbH", projektId: 1, projektName: "Website-Relaunch", datum: "2024-01-20", uhrzeitBeginn: "09:30", dauer: "45", betreff: "Anforderungen klären", nameAnsprechpartner: "Herr Schmidt", telefon: "+49 123 45678", notiz: "Kunde möchte responsive Design und neue Farbgestaltung. Budget noch offen.", wiedervorlageDatum: "2024-01-27", erledigt: false},
|
||||
{id: 2, kundenName: "Musterfirma GmbH", projektId: 1, projektName: "Website-Relaunch", datum: "2024-01-25", uhrzeitBeginn: "14:00", dauer: "30", betreff: "Feedback zum Design", nameAnsprechpartner: "Frau Müller", telefon: "+49 123 45679", notiz: "Design-Entwürfe wurden positiv aufgenommen. Kleine Änderungen an der Navigation nötig.", wiedervorlageDatum: "2024-02-01", erledigt: false},
|
||||
{id: 3, kundenName: "Beispiel AG", projektId: 2, projektName: "E-Commerce Plattform", datum: "2024-02-10", uhrzeitBeginn: "10:00", dauer: "60", betreff: "Technische Anforderungen", nameAnsprechpartner: "Herr Weber", telefon: "+49 123 45680", notiz: "Payment-Gateway und Versand-Schnittstellen müssen integriert werden. Zeitplan besprochen.", wiedervorlageDatum: "2024-02-15", erledigt: true},
|
||||
{id: 4, kundenName: "Beispiel AG", projektId: 3, projektName: "CRM-System", datum: "2024-02-18", uhrzeitBeginn: "11:15", dauer: "20", betreff: "Schulungstermin", nameAnsprechpartner: "Frau Bauer", telefon: "+49 123 45681", notiz: "Schulung für 10 Mitarbeiter geplant. Raum noch zu buchen.", wiedervorlageDatum: "2024-02-20", erledigt: false},
|
||||
{id: 5, kundenName: "Test Unternehmen", projektId: 4, projektName: "Mobile App", datum: "2024-03-05", uhrzeitBeginn: "15:45", dauer: "35", betreff: "Feature-Request", nameAnsprechpartner: "Herr König", telefon: "+49 123 45682", notiz: "Kunde wünscht Push-Benachrichtigungen und Offline-Modus.", wiedervorlageDatum: "2024-03-12", erledigt: false}
|
||||
]
|
||||
|
||||
function createCallLogTreenodes(projektId: number | null = null): iTreenode[] {
|
||||
let filteredLogs = projektId
|
||||
? callLogDaten.filter(log => log.projektId === projektId)
|
||||
: callLogDaten
|
||||
|
||||
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 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
|
||||
const isSelected = selectedNode === node
|
||||
const cellStyle = isSelected ? {backgroundColor: '#e6f7ff'} : {}
|
||||
|
||||
return [
|
||||
m("div", {style: cellStyle}, m("strong", log.kundenName + ": " + log.projektName)),
|
||||
m("span", {style: cellStyle}, log.datum),
|
||||
m("span", {style: cellStyle}, log.uhrzeitBeginn),
|
||||
m("span", {style: cellStyle}, log.dauer + " min"),
|
||||
m("span", {style: cellStyle}, log.betreff),
|
||||
m("span", {style: cellStyle}, log.wiedervorlageDatum),
|
||||
m("span", {style: cellStyle}, log.erledigt ? "Erledigt" : "Offen"),
|
||||
m("button.w3-button.w3-small", {style: cellStyle, 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", {
|
||||
style: {
|
||||
'max-width': '80%',
|
||||
'margin-left': 'auto',
|
||||
'margin-right': 'auto',
|
||||
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
|
||||
} as iTreetable
|
||||
)
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const Call_Log: m.ClosureComponent = (vnode) => {
|
||||
let currentLog: {
|
||||
id: 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,
|
||||
kundenName: "",
|
||||
projektId: -1,
|
||||
projektName: "",
|
||||
datum: "",
|
||||
uhrzeitBeginn: "",
|
||||
dauer: "",
|
||||
betreff: "",
|
||||
nameAnsprechpartner: "",
|
||||
telefon: "",
|
||||
notiz: "",
|
||||
wiedervorlageDatum: "",
|
||||
erledigt: false
|
||||
}
|
||||
|
||||
return {
|
||||
oninit: (vnode) => {
|
||||
const routeParams = m.route.param()
|
||||
if (routeParams) {
|
||||
currentLog = {
|
||||
id: routeParams.id ? parseInt(routeParams.id) : -1,
|
||||
kundenName: routeParams.kundenName || "",
|
||||
projektId: routeParams.projektId ? parseInt(routeParams.projektId) : -1,
|
||||
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"
|
||||
}
|
||||
}
|
||||
},
|
||||
view: (vnode) => {
|
||||
return m("div.w3-container.w3-twothird",
|
||||
m("h1", "Gesprächsnotiz"),
|
||||
m(Form, {showButtons: true, onsubmit: (null), oncancel: (null)} as iForm, [
|
||||
m("h4.w3-padding-small", currentLog.kundenName + " / " + currentLog.projektName),
|
||||
m("label", "Datum", m(Input, {name: "datum", value: currentLog.datum, type: "date"} as iInput)),
|
||||
m("label", "Uhrzeit Beginn", m(Input, {name: "uhrzeitBeginn", value: currentLog.uhrzeitBeginn, type: "time"} as iInput)),
|
||||
m("label", "Dauer (Minuten)", m(Input, {name: "dauer", value: currentLog.dauer, type: "number"} as iInput)),
|
||||
m("label", "Betreff", m(Input, {name: "betreff", value: currentLog.betreff, type: "text"} as iInput)),
|
||||
m("label", "Name Ansprechpartner", m(Input, {name: "nameAnsprechpartner", value: currentLog.nameAnsprechpartner, type: "text"} as iInput)),
|
||||
m("label", "Telefon", m(Input, {name: "telefon", value: currentLog.telefon, type: "tel"} as iInput)),
|
||||
m("label", "Notiz", m(Input, {name: "notiz", value: currentLog.notiz, type: "text"} as iInput)),
|
||||
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")
|
||||
])
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user