gg
a67921ec74
Zentraler DirtyGuard (dirtyguard.ts) mit DirtyMaskHelper-Klasse und 3-Button-Bestätigungs-Modal (Speichern/Verwerden/Abbrechen). Form meldet Dirty-State via onDirtyChange nach oben; input-Event ergänzt change für frühzeitiges Dirty-Marking. Alle App-Navigationen (Breadcrumb, Menü, In-Masken-Buttons, Abbrechen) laufen über guardedNavigate. Auto-Redraw bei dirty per e.redraw=false unterbunden, damit DOM-Eingaben erhalten bleiben (Input-Widget hat kein Live-Binding). Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
293 lines
14 KiB
TypeScript
293 lines
14 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 {BreadcrumbBar, iBreadcrumb, iBreadcrumbBar, parseBc, serializeBc} from "./widgets/breadcrumb"
|
|
import {iKontaktadresse, fetchKontaktadressen, fetchKontaktadresseById, createKontaktadresseREST, updateKontaktadresseREST} from "../models/kontaktadresse"
|
|
import {iProjekt, fetchProjektById} from "../models/projekt"
|
|
import {showServerError} from "./auth/authmessages"
|
|
import {guardedNavigate, DirtyMaskHelper} from "./widgets/dirtyguard"
|
|
|
|
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 per fetchProjektById
|
|
// aufgelöst, falls nicht in den Route-Params enthalten.
|
|
let projektName: string = ""
|
|
// Breadcrumb-Kette der Vorgänger-Ansichten (aus Route-Param bc).
|
|
let breadcrumbs: iBreadcrumb[] = []
|
|
|
|
const handleRowMarked = (node: iTreenode) => {
|
|
selectedNode = node
|
|
}
|
|
|
|
// Eigener Listen-Crumb für die Breadcrumb-Kette.
|
|
const ownCrumb = (): iBreadcrumb => ({
|
|
route: "/kontaktadresseliste",
|
|
params: filterProjektId !== null ? {projekt_id: filterProjektId} : {},
|
|
label: filterProjektId !== null ? "Kontaktadressen: " + projektName : "Kontaktadressen"
|
|
})
|
|
|
|
const addKontaktadresseRoute = () => {
|
|
const params: any = {id: -1}
|
|
if (filterProjektId !== null) {
|
|
params.projekt_id = filterProjektId
|
|
params.projekt_name = projektName
|
|
}
|
|
// Breadcrumb-Kette um eigene Position erweitern.
|
|
params.bc = serializeBc([...breadcrumbs, ownCrumb()])
|
|
m.route.set("/kontaktadresse", params)
|
|
}
|
|
|
|
const editKontaktadresse = (kontaktadresse: iKontaktadresse, e: Event) => {
|
|
e.stopPropagation()
|
|
// Breadcrumb-Kette um eigene Position erweitern.
|
|
m.route.set("/kontaktadresse", {id: kontaktadresse.id, bc: serializeBc([...breadcrumbs, ownCrumb()])})
|
|
}
|
|
|
|
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]
|
|
// Breadcrumb-Kette um Kontaktadressenliste und Notizliste
|
|
// erweitern, da die Maske nach Speichern/Abbrechen in die
|
|
// projektgefilterte Notizliste zurückkehrt.
|
|
const chain = [...breadcrumbs, ownCrumb(), {
|
|
route: "/calllogliste",
|
|
params: {projekt_id: kontaktadresse.projekt_id},
|
|
label: "Notizen: " + kontaktadresse.projekt_name
|
|
} as iBreadcrumb]
|
|
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,
|
|
bc: serializeBc(chain)
|
|
})
|
|
}
|
|
|
|
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 = ""
|
|
}
|
|
// Breadcrumb-Kette aus Route-Param parsen.
|
|
breadcrumbs = parseBc(routeParams && routeParams.bc)
|
|
// Kontaktadressen asynchron vom Server laden. Die Filterung
|
|
// nach projekt_id erfolgt serverseitig, sofern ein Filter
|
|
// gesetzt ist.
|
|
fetchKontaktadressen(filterProjektId !== null ? filterProjektId : undefined).then((result) => {
|
|
treenodes = result.map((kontaktadresse: iKontaktadresse) => new Treenode(kontaktadresse, true, []))
|
|
}).catch((e) => showServerError(e))
|
|
// Projektnamen asynchron auflösen, falls nicht in Route-Params.
|
|
if (filterProjektId !== null && projektName === "") {
|
|
fetchProjektById(filterProjektId).then((projekt: iProjekt) => {
|
|
projektName = projekt.projektname
|
|
}).catch((e) => showServerError(e))
|
|
}
|
|
},
|
|
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(BreadcrumbBar, {
|
|
breadcrumbs: breadcrumbs,
|
|
current: filterProjektId !== null ? "Kontaktadressen: " + projektName : "Kontaktadressen"
|
|
} as iBreadcrumbBar),
|
|
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: ""
|
|
}
|
|
// Breadcrumb-Kette der Vorgänger-Ansichten (aus Route-Param bc).
|
|
let breadcrumbs: iBreadcrumb[] = []
|
|
// Route-Params für die Rückkehr zur Kontaktadressenliste; als Closure
|
|
// an den DirtyMaskHelper übergeben.
|
|
const backParams = (): any => {
|
|
const listBc = serializeBc(breadcrumbs.slice(0, -1))
|
|
const params: any = {projekt_id: currentKontaktadresse.projekt_id, projekt_name: currentKontaktadresse.projekt_name}
|
|
if (listBc) params.bc = listBc
|
|
return params
|
|
}
|
|
// DirtyMaskHelper kapselt den isDirty/Guard-Boilerplate.
|
|
const guard = new DirtyMaskHelper("/kontaktadresseliste", backParams)
|
|
|
|
return {
|
|
oninit: (vnode) => {
|
|
const routeParams = m.route.param()
|
|
const id = routeParams && routeParams.id ? parseInt(routeParams.id) : -1
|
|
// Breadcrumb-Kette aus Route-Param parsen.
|
|
breadcrumbs = parseBc(routeParams && routeParams.bc)
|
|
guard.registerGuard()
|
|
if (id !== -1) {
|
|
// Kontaktadresse frisch vom Server holen.
|
|
fetchKontaktadresseById(id).then((result) => {
|
|
currentKontaktadresse = result
|
|
}).catch((e) => showServerError(e))
|
|
} 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 : ""
|
|
}
|
|
},
|
|
onremove: (vnode) => {
|
|
guard.cleanup()
|
|
},
|
|
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(() => guard.navigateAfterSave()).catch((e) => { showServerError(e); guard.markDirty() })
|
|
} else {
|
|
updateKontaktadresseREST(gespeicherteKontaktadresse).then(() => guard.navigateAfterSave()).catch((e) => { showServerError(e); guard.markDirty() })
|
|
}
|
|
return true
|
|
}
|
|
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(BreadcrumbBar, {
|
|
breadcrumbs: breadcrumbs,
|
|
current: currentKontaktadresse.id === -1
|
|
? "Neue Kontaktadresse"
|
|
: "Kontaktadresse-Stammblatt",
|
|
onnavigate: guardedNavigate
|
|
} as iBreadcrumbBar),
|
|
m("div", {style: {flex: '1', 'min-height': '0'}},
|
|
m(Form, guard.formAttrs(submit) 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))
|
|
])
|
|
)
|
|
)
|
|
}
|
|
}
|
|
}
|