Kontakte: Modell, Liste und Formular für Ansprechpartner beim Kunden
Neue Entität "Kontakt" (Ansprechpartner, FK kundenId) analog zu Projekte: - Client/models/kontakt.ts: Interface, In-Memory-Mock, CRUD- und REST-Stubs - Client/Components/kontakt.ts: Kontaktliste (Treetable, kundengefiltert) und Stammblatt-Formular - index.ts: Routen /kontaktliste und /kontakt (kein Hauptmenü-Eintrag) - kunde.ts: Kontakte-Button in Kundenliste und im Kunden-Formular (nur bei bestehendem Kunden) Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
This commit is contained in:
gg committed
1 parent
4922984b92
commit
9af789b996
4 files changed
+390
-2
No files matched your search
@@ -0,0 +1,225 @@
|
||||
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 {iKontakt, getKontakteByKundenId, getNewKontaktId, addKontakt, updateKontakt} from "../models/kontakt"
|
||||
import {iKunde, getKunden} from "../models/kunde"
|
||||
|
||||
function createKontaktTreenodes(kundenId: number | null = null): iTreenode[] {
|
||||
let filteredKontakte = getKontakteByKundenId(kundenId)
|
||||
|
||||
return filteredKontakte.map((kontakt: iKontakt) => {
|
||||
return new Treenode(kontakt, true, [])
|
||||
})
|
||||
}
|
||||
|
||||
export const kontaktliste: m.ClosureComponent = (vnode) => {
|
||||
let treenodes: iTreenode[] = createKontaktTreenodes()
|
||||
let selectedNode: iTreenode | null = null
|
||||
let filterKundenId: number | null = null
|
||||
|
||||
const handleRowMarked = (node: iTreenode) => {
|
||||
selectedNode = node
|
||||
}
|
||||
|
||||
const addKontaktRoute = () => {
|
||||
const params: any = {
|
||||
id: -1,
|
||||
anrede: "",
|
||||
name: "",
|
||||
position: "",
|
||||
telefon: "",
|
||||
email: "",
|
||||
notiz: ""
|
||||
}
|
||||
// Nur bei kundengefilterter Liste den Kunden vorbelegen.
|
||||
if (filterKundenId !== null) {
|
||||
const kunde = getKunden().find((k: iKunde) => k.id === filterKundenId)
|
||||
if (kunde) {
|
||||
params.kundenId = kunde.id
|
||||
params.kundenname = kunde.name
|
||||
}
|
||||
}
|
||||
m.route.set("/kontakt", params)
|
||||
}
|
||||
|
||||
const editKontakt = (kontakt: iKontakt, e: Event) => {
|
||||
e.stopPropagation()
|
||||
m.route.set("/kontakt", {
|
||||
id: kontakt.id,
|
||||
kundenId: kontakt.kundenId,
|
||||
kundenname: kontakt.kundenName,
|
||||
anrede: kontakt.anrede,
|
||||
name: kontakt.name,
|
||||
position: kontakt.position,
|
||||
telefon: kontakt.telefon,
|
||||
email: kontakt.email,
|
||||
notiz: kontakt.notiz
|
||||
})
|
||||
}
|
||||
|
||||
const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
|
||||
let kontakt: iKontakt = node.nodevalue
|
||||
const isSelected = selectedNode === node
|
||||
const cellStyle = isSelected ? {backgroundColor: '#e6f7ff'} : {}
|
||||
|
||||
return [
|
||||
m("div", {style: cellStyle}, m("strong", kontakt.name)),
|
||||
m("span", {style: cellStyle}, kontakt.position),
|
||||
m("span", {style: cellStyle}, kontakt.telefon),
|
||||
m("span", {style: cellStyle}, kontakt.email),
|
||||
m("span", {style: cellStyle}, kontakt.kundenName),
|
||||
m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => editKontakt(kontakt, e)}, m("i.material-icons", "edit"))
|
||||
]
|
||||
}
|
||||
|
||||
const filterFunction = (node: iTreenode, searchvalue: string): boolean => {
|
||||
let kontakt: iKontakt = node.nodevalue
|
||||
let searchLower = searchvalue.toLowerCase()
|
||||
return kontakt.name.toLowerCase().includes(searchLower) ||
|
||||
kontakt.position.toLowerCase().includes(searchLower) ||
|
||||
kontakt.telefon.toLowerCase().includes(searchLower) ||
|
||||
kontakt.email.toLowerCase().includes(searchLower) ||
|
||||
kontakt.kundenName.toLowerCase().includes(searchLower)
|
||||
}
|
||||
|
||||
return {
|
||||
oninit: (vnode) => {
|
||||
const routeParams = m.route.param()
|
||||
if (routeParams && routeParams.kundenId) {
|
||||
filterKundenId = parseInt(routeParams.kundenId)
|
||||
} else {
|
||||
filterKundenId = null
|
||||
}
|
||||
treenodes = createKontaktTreenodes(filterKundenId)
|
||||
},
|
||||
view: (vnode) => {
|
||||
return m("div.w3-container.w3-auto", {
|
||||
style: {
|
||||
display: 'flex',
|
||||
'flex-direction': 'column',
|
||||
height: 'inherit',
|
||||
'overflow-y': 'inherit'}},
|
||||
m("h1", "Kontaktliste"),
|
||||
m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
|
||||
m(Treetable,
|
||||
{
|
||||
treenodes: treenodes,
|
||||
columnmapper: columnmapper,
|
||||
filter: filterFunction,
|
||||
onRowMarked: handleRowMarked
|
||||
} as iTreetable,
|
||||
m(TopbarButton, {onclick: addKontaktRoute, tooltip: "Neuen Kontakt anlegen"} as iTopbarButton,
|
||||
m("i.material-icons", "person_add")
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const Kontakt: m.ClosureComponent = (vnode) => {
|
||||
// currentKontakt hält den Formularzustand. kundenId referenziert den
|
||||
// Kunden eindeutig, kundenname dient der Anzeige.
|
||||
let currentKontakt: {
|
||||
id: number
|
||||
kundenId: number
|
||||
kundenname: string
|
||||
anrede: string
|
||||
name: string
|
||||
position: string
|
||||
telefon: string
|
||||
email: string
|
||||
notiz: string
|
||||
} = {
|
||||
id: -1,
|
||||
kundenId: -1,
|
||||
kundenname: "",
|
||||
anrede: "",
|
||||
name: "",
|
||||
position: "",
|
||||
telefon: "",
|
||||
email: "",
|
||||
notiz: ""
|
||||
}
|
||||
// Ist der Kunde voreingestellt (gefilterte Kontaktliste)?
|
||||
let kundeVoreingestellt: boolean = false
|
||||
|
||||
return {
|
||||
oninit: (vnode) => {
|
||||
const routeParams = m.route.param()
|
||||
if (routeParams) {
|
||||
const kundenId = routeParams.kundenId ? parseInt(routeParams.kundenId) : -1
|
||||
kundeVoreingestellt = kundenId !== -1
|
||||
currentKontakt = {
|
||||
id: routeParams.id ? parseInt(routeParams.id) : -1,
|
||||
kundenId: kundenId,
|
||||
kundenname: routeParams.kundenname || "",
|
||||
anrede: routeParams.anrede || "",
|
||||
name: routeParams.name || "",
|
||||
position: routeParams.position || "",
|
||||
telefon: routeParams.telefon || "",
|
||||
email: routeParams.email || "",
|
||||
notiz: routeParams.notiz || ""
|
||||
}
|
||||
}
|
||||
},
|
||||
view: (vnode) => {
|
||||
const submit = (form: HTMLFormElement): boolean => {
|
||||
const formData = new FormData(form)
|
||||
const kundenId = parseInt(formData.get("kundenId") as string)
|
||||
// Kundennamen zur gewählten kundenId auflösen.
|
||||
const kunde = getKunden().find((k: iKunde) => k.id === kundenId)
|
||||
const gespeicherterKontakt: iKontakt = {
|
||||
id: currentKontakt.id,
|
||||
kundenId: kundenId,
|
||||
kundenName: kunde ? kunde.name : "",
|
||||
anrede: (formData.get("anrede") as string) || "",
|
||||
name: (formData.get("name") as string) || "",
|
||||
position: (formData.get("position") as string) || "",
|
||||
telefon: (formData.get("telefon") as string) || "",
|
||||
email: (formData.get("email") as string) || "",
|
||||
notiz: (formData.get("notiz") as string) || ""
|
||||
}
|
||||
if (currentKontakt.id === -1) {
|
||||
gespeicherterKontakt.id = getNewKontaktId()
|
||||
addKontakt(gespeicherterKontakt)
|
||||
} else {
|
||||
updateKontakt(gespeicherterKontakt)
|
||||
}
|
||||
m.route.set("/kontaktliste")
|
||||
return true
|
||||
}
|
||||
const cancel = (e: Event) => {
|
||||
m.route.set("/kontaktliste")
|
||||
}
|
||||
// Select-Optionen aus der Kundenliste aufbauen.
|
||||
const kundenOptionen: iSelectOption[] = getKunden().map((k: iKunde) => {
|
||||
return {value: k.id, label: k.name}
|
||||
})
|
||||
return m("div.w3-container.w3-auto.form-view-container",
|
||||
m("h1", currentKontakt.id === -1 ? "Neuen Kontakt anlegen" : "Kontakt-Stammblatt"),
|
||||
m("div", {style: {flex: '1', 'min-height': '0'}},
|
||||
m(Form, {showButtons: true, onsubmit: submit, oncancel: cancel} as iForm, [
|
||||
m("label", "Kunde",
|
||||
m(Select, {
|
||||
name: "kundenId",
|
||||
value: currentKontakt.kundenId,
|
||||
options: kundenOptionen,
|
||||
readonly: kundeVoreingestellt,
|
||||
required: true
|
||||
} as iSelect)),
|
||||
m("label", "Anrede", m(Input, {name: "anrede", value: currentKontakt.anrede, type: "text"} as iInput)),
|
||||
m("label", "Name", m(Input, {name: "name", value: currentKontakt.name, type: "text", required: true} as iInput)),
|
||||
m("label", "Position", m(Input, {name: "position", value: currentKontakt.position, type: "text"} as iInput)),
|
||||
m("label", "Telefon", m(Input, {name: "telefon", value: currentKontakt.telefon, type: "tel"} as iInput)),
|
||||
m("label", "E-Mail", m(Input, {name: "email", value: currentKontakt.email, type: "email"} as iInput)),
|
||||
m("label", "Notiz", m(Textarea, {name: "notiz", value: currentKontakt.notiz, rows: 4} as iTextarea))
|
||||
])
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -52,7 +52,14 @@ export const kunde: m.ClosureComponent = (vnode) => {
|
||||
m.route.set("/kundenliste")
|
||||
}
|
||||
return m("div.w3-container.w3-auto.form-view-container",
|
||||
m("h1", currentKunde.id === -1 ? "Neuen Kunden anlegen" : "Kundenstammblatt"),
|
||||
m("div", {style: {display: 'flex', 'align-items': 'center', 'justify-content': 'space-between'}},
|
||||
m("h1", currentKunde.id === -1 ? "Neuen Kunden anlegen" : "Kundenstammblatt"),
|
||||
currentKunde.id !== -1
|
||||
? m("button.w3-button.w3-theme",
|
||||
{onclick: () => m.route.set("/kontaktliste", {kundenId: currentKunde.id})},
|
||||
m("i.material-icons", "contact_page"), " Kontakte")
|
||||
: null
|
||||
),
|
||||
m("div", {style: {flex: '1', 'min-height': '0'}},
|
||||
m(Form, {showButtons: true, onsubmit: submit, oncancel: cancel} as iForm, [
|
||||
m("label", "Kundenname", m(Input, {name: "kundenname", value: currentKunde.name, type: "text", required: true} as iInput)),
|
||||
@@ -96,6 +103,11 @@ export const kundenliste: m.ClosureComponent = (vnode) => {
|
||||
e.stopPropagation()
|
||||
m.route.set("/projektliste", {kundenId: kunde.id})
|
||||
}
|
||||
|
||||
const showKontakte = (kunde: iKunde, e: Event) => {
|
||||
e.stopPropagation()
|
||||
m.route.set("/kontaktliste", {kundenId: kunde.id})
|
||||
}
|
||||
|
||||
const addKundeRoute = () => {
|
||||
m.route.set("/kunde", {id: -1, name: "", strasse: "", plz: "", ort: "", land: ""})
|
||||
@@ -113,7 +125,8 @@ export const kundenliste: m.ClosureComponent = (vnode) => {
|
||||
m("span", {style: cellStyle}, kunde.ort),
|
||||
m("span", {style: cellStyle}, kunde.land),
|
||||
m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => editKunde(kunde, e)}, m("i.material-icons", "edit")),
|
||||
m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => showProjekte(kunde, e)}, m("i.material-icons", "library_books"))
|
||||
m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => showProjekte(kunde, e)}, m("i.material-icons", "library_books")),
|
||||
m("button.w3-button.w3-small", {title: "Kontakte anzeigen", style: cellStyle, onclick: (e: Event) => showKontakte(kunde, e)}, m("i.material-icons", "contact_page"))
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user