Kontaktadressen: Modell, Liste und Formular für Akquise-Ziele auf Projektebene
Neue Entität "Kontaktadresse" (Akquise-Ziel, FK projektId) analog zu Kontakten: - Client/models/kontaktadresse.ts: Interface, In-Memory-Mock, CRUD- und REST-Stubs - Client/Components/kontaktadresse.ts: Kontaktadressenliste (Treetable, projektgefiltert) und Stammblatt-Formular - index.ts: Routen /kontaktadresseliste und /kontaktadresse (kein Hauptmenü-Eintrag) - projekt.ts: Kontaktadressen-Button in Projektliste (kompakt in einer Zelle) und im Projekt-Formular (nur bei bestehendem Projekt) Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
This commit is contained in:
gg committed
1 parent
68e9de8dc1
commit
3e1791d316
4 files changed
+442
-14
No files matched your search
@@ -0,0 +1,260 @@
|
||||
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} from "../models/projekt"
|
||||
|
||||
function createKontaktadresseTreenodes(projektId: number | null = null): iTreenode[] {
|
||||
let filteredKontaktadressen = getKontaktadressenByProjektId(projektId)
|
||||
|
||||
return filteredKontaktadressen.map((kontaktadresse: iKontaktadresse) => {
|
||||
return new Treenode(kontaktadresse, true, [])
|
||||
})
|
||||
}
|
||||
|
||||
export const kontaktadresseliste: m.ClosureComponent = (vnode) => {
|
||||
let treenodes: iTreenode[] = createKontaktadresseTreenodes()
|
||||
let selectedNode: iTreenode | null = null
|
||||
let filterProjektId: number | null = null
|
||||
|
||||
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.
|
||||
if (filterProjektId !== null) {
|
||||
const projekt = getProjekte().find((p: iProjekt) => p.id === filterProjektId)
|
||||
if (projekt) {
|
||||
params.projektId = projekt.id
|
||||
params.projektname = projekt.projektname
|
||||
}
|
||||
}
|
||||
m.route.set("/kontaktadresse", params)
|
||||
}
|
||||
|
||||
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
|
||||
})
|
||||
}
|
||||
|
||||
const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
|
||||
let kontaktadresse: iKontaktadresse = node.nodevalue
|
||||
const isSelected = selectedNode === node
|
||||
const cellStyle = isSelected ? {backgroundColor: '#e6f7ff'} : {}
|
||||
|
||||
return [
|
||||
m("div", {style: cellStyle}, m("strong", kontaktadresse.name)),
|
||||
m("span", {style: cellStyle}, kontaktadresse.firma),
|
||||
m("span", {style: cellStyle}, kontaktadresse.telefon),
|
||||
m("span", {style: cellStyle}, kontaktadresse.email),
|
||||
m("span", {style: cellStyle}, kontaktadresse.ort),
|
||||
m("span", {style: cellStyle}, kontaktadresse.projektName),
|
||||
m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => editKontaktadresse(kontaktadresse, e)}, m("i.material-icons", "edit"))
|
||||
]
|
||||
}
|
||||
|
||||
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.telefon.toLowerCase().includes(searchLower) ||
|
||||
kontaktadresse.email.toLowerCase().includes(searchLower) ||
|
||||
kontaktadresse.ort.toLowerCase().includes(searchLower) ||
|
||||
kontaktadresse.projektName.toLowerCase().includes(searchLower)
|
||||
}
|
||||
|
||||
return {
|
||||
oninit: (vnode) => {
|
||||
const routeParams = m.route.param()
|
||||
if (routeParams && routeParams.projektId) {
|
||||
filterProjektId = parseInt(routeParams.projektId)
|
||||
} else {
|
||||
filterProjektId = null
|
||||
}
|
||||
treenodes = createKontaktadresseTreenodes(filterProjektId)
|
||||
},
|
||||
view: (vnode) => {
|
||||
return m("div.w3-container.w3-auto", {
|
||||
style: {
|
||||
display: 'flex',
|
||||
'flex-direction': 'column',
|
||||
height: 'inherit',
|
||||
'overflow-y': 'inherit'}},
|
||||
m("h1", "Kontaktadressen"),
|
||||
m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
|
||||
m(Treetable,
|
||||
{
|
||||
treenodes: treenodes,
|
||||
columnmapper: columnmapper,
|
||||
filter: filterFunction,
|
||||
onRowMarked: handleRowMarked
|
||||
} 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. projektId referenziert das
|
||||
// Projekt eindeutig, projektname dient der Anzeige.
|
||||
let currentKontaktadresse: {
|
||||
id: number
|
||||
projektId: number
|
||||
projektname: string
|
||||
anrede: string
|
||||
name: string
|
||||
firma: string
|
||||
telefon: string
|
||||
email: string
|
||||
strasse: string
|
||||
plz: string
|
||||
ort: string
|
||||
land: string
|
||||
notiz: string
|
||||
} = {
|
||||
id: -1,
|
||||
projektId: -1,
|
||||
projektname: "",
|
||||
anrede: "",
|
||||
name: "",
|
||||
firma: "",
|
||||
telefon: "",
|
||||
email: "",
|
||||
strasse: "",
|
||||
plz: "",
|
||||
ort: "",
|
||||
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 || ""
|
||||
}
|
||||
}
|
||||
},
|
||||
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 : "",
|
||||
anrede: (formData.get("anrede") as string) || "",
|
||||
name: (formData.get("name") as string) || "",
|
||||
firma: (formData.get("firma") 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) {
|
||||
gespeicherteKontaktadresse.id = getNewKontaktadresseId()
|
||||
addKontaktadresse(gespeicherteKontaktadresse)
|
||||
} else {
|
||||
updateKontaktadresse(gespeicherteKontaktadresse)
|
||||
}
|
||||
m.route.set("/kontaktadresseliste")
|
||||
return true
|
||||
}
|
||||
const cancel = (e: Event) => {
|
||||
m.route.set("/kontaktadresseliste")
|
||||
}
|
||||
// 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("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("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)),
|
||||
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))
|
||||
])
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user