gg
e9a2f48ede
- Server: Neue Spalte position in Kontaktadresse-Modell (String(200), nullable) - Server: Migration V01_04 (ALTER TABLE kontaktadressen ADD COLUMN position) - Server: position in Geschäftslogik create/update aufgenommen - Server: CLI-Musterdaten um Position ergänzt (Geschäftsführer, IT-Leiter etc.) - Client: position in iKontaktadresse-Interface, View nach Firma, Columnmapper, Filter - Client: Projektnamen-Spalte aus Kontaktadressenliste entfernt (steht in Überschrift) - Client: Filter-Funktionen in allen Listen null-sicher (kunde, kontakt, projekt, kontaktadresse, call_log) Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
253 lines
12 KiB
TypeScript
253 lines
12 KiB
TypeScript
import m from "mithril"
|
|
import {Form, iForm} from "./widgets/form"
|
|
import { Input, iInput, Textarea, iTextarea} from "./widgets/inputs"
|
|
import {Treenode, iTreenode, Treetable, iTreetable, TopbarButton, iTopbarButton} from "./widgets/Treetable_V2"
|
|
import {iKontaktadresse, fetchKontaktadressen, fetchKontaktadresseById, createKontaktadresseREST, updateKontaktadresseREST} from "../models/kontaktadresse"
|
|
import {iProjekt, fetchProjekte} from "../models/projekt"
|
|
|
|
export const kontaktadresseliste: m.ClosureComponent = (vnode) => {
|
|
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}
|
|
if (filterProjektId !== null) {
|
|
const projekt = projektListe.find((p: iProjekt) => p.id === filterProjektId)
|
|
if (projekt) {
|
|
params.projekt_id = projekt.id
|
|
params.projekt_name = projekt.projektname
|
|
}
|
|
}
|
|
m.route.set("/kontaktadresse", params)
|
|
}
|
|
|
|
const editKontaktadresse = (kontaktadresse: iKontaktadresse, e: Event) => {
|
|
e.stopPropagation()
|
|
m.route.set("/kontaktadresse", {id: kontaktadresse.id})
|
|
}
|
|
|
|
const addCallLog = (kontaktadresse: iKontaktadresse, e: Event) => {
|
|
e.stopPropagation()
|
|
const now = new Date()
|
|
const datum = now.toISOString().split('T')[0]
|
|
const uhrzeit = now.toTimeString().split(':')[0] + ':' + now.toTimeString().split(':')[1]
|
|
m.route.set("/call_log", {
|
|
id: -1,
|
|
projekt_id: kontaktadresse.projekt_id,
|
|
projekt_name: kontaktadresse.projekt_name,
|
|
datum: datum,
|
|
uhrzeit_beginn: uhrzeit,
|
|
dauer: "",
|
|
betreff: "",
|
|
name_ansprechpartner: kontaktadresse.name,
|
|
telefon: kontaktadresse.telefon,
|
|
notiz: "",
|
|
wiedervorlage_datum: "",
|
|
erledigt: false
|
|
})
|
|
}
|
|
|
|
const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
|
|
let kontaktadresse: iKontaktadresse = node.nodevalue
|
|
|
|
return [
|
|
m("div", m("strong", kontaktadresse.name)),
|
|
m("span", kontaktadresse.firma),
|
|
m("span", kontaktadresse.position),
|
|
m("span", kontaktadresse.telefon),
|
|
m("span", kontaktadresse.email),
|
|
m("span", kontaktadresse.ort),
|
|
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"))
|
|
)
|
|
]
|
|
}
|
|
|
|
const filterFunction = (node: iTreenode, searchvalue: string): boolean => {
|
|
let kontaktadresse: iKontaktadresse = node.nodevalue
|
|
let searchLower = searchvalue.toLowerCase()
|
|
return (kontaktadresse.name || "").toLowerCase().includes(searchLower) ||
|
|
(kontaktadresse.firma || "").toLowerCase().includes(searchLower) ||
|
|
(kontaktadresse.position || "").toLowerCase().includes(searchLower) ||
|
|
(kontaktadresse.telefon || "").toLowerCase().includes(searchLower) ||
|
|
(kontaktadresse.email || "").toLowerCase().includes(searchLower) ||
|
|
(kontaktadresse.ort || "").toLowerCase().includes(searchLower) ||
|
|
(kontaktadresse.projekt_name || "").toLowerCase().includes(searchLower)
|
|
}
|
|
|
|
return {
|
|
oninit: (vnode) => {
|
|
const routeParams = m.route.param()
|
|
if (routeParams && routeParams.projekt_id) {
|
|
filterProjektId = parseInt(routeParams.projekt_id)
|
|
projektName = routeParams.projekt_name || ""
|
|
} else {
|
|
filterProjektId = null
|
|
projektName = ""
|
|
}
|
|
// 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", {
|
|
style: {
|
|
display: 'flex',
|
|
'flex-direction': 'column',
|
|
height: 'inherit',
|
|
'overflow-y': 'inherit'}},
|
|
m("h1", projektName ? "Kontaktadressen für " + projektName : "Kontaktadressen"),
|
|
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: addKontaktadresseRoute, tooltip: "Neue Kontaktadresse anlegen"} as iTopbarButton,
|
|
m("i.material-icons", "person_add")
|
|
)
|
|
)
|
|
)
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
export const Kontaktadresse: m.ClosureComponent = (vnode) => {
|
|
// currentKontaktadresse hält den Formularzustand. projekt_id referenziert
|
|
// das Projekt eindeutig, projekt_name dient der Anzeige in der Überschrift.
|
|
let currentKontaktadresse: {
|
|
id: number
|
|
projekt_id: number
|
|
projekt_name: string
|
|
anrede: string
|
|
name: string
|
|
firma: string
|
|
position: string
|
|
telefon: string
|
|
email: string
|
|
strasse: string
|
|
plz: string
|
|
ort: string
|
|
land: string
|
|
notiz: string
|
|
} = {
|
|
id: -1,
|
|
projekt_id: -1,
|
|
projekt_name: "",
|
|
anrede: "",
|
|
name: "",
|
|
firma: "",
|
|
position: "",
|
|
telefon: "",
|
|
email: "",
|
|
strasse: "",
|
|
plz: "",
|
|
ort: "",
|
|
land: "",
|
|
notiz: ""
|
|
}
|
|
|
|
return {
|
|
oninit: (vnode) => {
|
|
const routeParams = m.route.param()
|
|
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 gespeicherteKontaktadresse: iKontaktadresse = {
|
|
id: currentKontaktadresse.id,
|
|
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) || "",
|
|
position: (formData.get("position") as string) || "",
|
|
telefon: (formData.get("telefon") as string) || "",
|
|
email: (formData.get("email") as string) || "",
|
|
strasse: (formData.get("strasse") as string) || "",
|
|
plz: (formData.get("plz") as string) || "",
|
|
ort: (formData.get("ort") as string) || "",
|
|
land: (formData.get("land") as string) || "",
|
|
notiz: (formData.get("notiz") as string) || ""
|
|
}
|
|
if (currentKontaktadresse.id === -1) {
|
|
createKontaktadresseREST(gespeicherteKontaktadresse).then(() => m.route.set("/kontaktadresseliste", {projekt_id: currentKontaktadresse.projekt_id, projekt_name: currentKontaktadresse.projekt_name}))
|
|
} else {
|
|
updateKontaktadresseREST(gespeicherteKontaktadresse).then(() => m.route.set("/kontaktadresseliste", {projekt_id: currentKontaktadresse.projekt_id, projekt_name: currentKontaktadresse.projekt_name}))
|
|
}
|
|
return true
|
|
}
|
|
const cancel = (e: Event) => {
|
|
m.route.set("/kontaktadresseliste", {projekt_id: currentKontaktadresse.projekt_id, projekt_name: currentKontaktadresse.projekt_name})
|
|
}
|
|
return m("div.w3-container.w3-auto.form-view-container",
|
|
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("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", "Position", m(Input, {name: "position", value: currentKontaktadresse.position, 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)),
|
|
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)),
|
|
m("label", {style: {flex: '1'}}, "Ort",
|
|
m(Input, {name: "ort", value: currentKontaktadresse.ort, type: "text"} as iInput))
|
|
),
|
|
m("label", "Land", m(Input, {name: "land", value: currentKontaktadresse.land, type: "text"} as iInput)),
|
|
m("label", "Notiz", m(Textarea, {name: "notiz", value: currentKontaktadresse.notiz, rows: 4} as iTextarea))
|
|
])
|
|
)
|
|
)
|
|
}
|
|
}
|
|
}
|