feat(isdirty): Navigations-Guard gegen ungespeichertes Verlassen von Bearbeitungsmasken
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>
This commit is contained in:
gg committed
1 parent
fd30049a32
commit
a67921ec74
10 files changed
+462
-120
No files matched your search
@@ -10,6 +10,7 @@ import {iProjekt, fetchProjekte, fetchProjektById} from "../models/projekt"
|
||||
import {iKontaktadresse, fetchKontaktadressen} from "../models/kontaktadresse"
|
||||
import {iTag, fetchTags} from "../models/tag"
|
||||
import {showServerError} from "./auth/authmessages"
|
||||
import {guardedNavigate, DirtyMaskHelper} from "./widgets/dirtyguard"
|
||||
|
||||
// Aktualisierungsintervall für die Dauer-Anzeige in Millisekunden.
|
||||
const DAUER_UPDATE_INTERVALL = 1000
|
||||
@@ -241,6 +242,26 @@ export const Call_Log: m.ClosureComponent = (vnode) => {
|
||||
let returnProjektName: string = ""
|
||||
// Breadcrumb-Kette der Vorgänger-Ansichten (aus Route-Param bc).
|
||||
let breadcrumbs: iBreadcrumb[] = []
|
||||
// Route-Params für die Rückkehr zur Notizliste; als Closure an den
|
||||
// DirtyMaskHelper übergeben (greift auf fromListe, returnProjektId,
|
||||
// currentLog, breadcrumbs zu).
|
||||
const backParams = (): any => {
|
||||
const params: any = {}
|
||||
if (fromListe) {
|
||||
if (returnProjektId !== null) {
|
||||
params.projekt_id = returnProjektId
|
||||
params.projekt_name = returnProjektName
|
||||
}
|
||||
} else if (currentLog.projekt_id !== -1) {
|
||||
params.projekt_id = currentLog.projekt_id
|
||||
params.projekt_name = currentLog.projekt_name
|
||||
}
|
||||
const listBc = serializeBc(breadcrumbs.slice(0, -1))
|
||||
if (listBc) params.bc = listBc
|
||||
return params
|
||||
}
|
||||
// DirtyMaskHelper kapselt den isDirty/Guard-Boilerplate.
|
||||
const guard = new DirtyMaskHelper("/calllogliste", backParams)
|
||||
|
||||
/**
|
||||
* Formatiert verstrichene Sekunden als mm:ss.
|
||||
@@ -264,6 +285,7 @@ export const Call_Log: m.ClosureComponent = (vnode) => {
|
||||
}
|
||||
// Breadcrumb-Kette aus Route-Param parsen.
|
||||
breadcrumbs = parseBc(routeParams && routeParams.bc)
|
||||
guard.registerGuard()
|
||||
if (id !== -1) {
|
||||
// Gesprächsnotiz frisch vom Server holen.
|
||||
fetchCallLogById(id).then((result) => {
|
||||
@@ -307,6 +329,7 @@ export const Call_Log: m.ClosureComponent = (vnode) => {
|
||||
},
|
||||
onremove: (vnode) => {
|
||||
if (timerId != null) { window.clearInterval(timerId) }
|
||||
guard.cleanup()
|
||||
},
|
||||
view: (vnode) => {
|
||||
// kunden_id aus dem geladenen Projekt ableiten (fuer abhaengiges
|
||||
@@ -343,29 +366,6 @@ export const Call_Log: m.ClosureComponent = (vnode) => {
|
||||
})
|
||||
const tagColors: Map<number, string> = new Map(tagListe.map((t: iTag) => [t.id, t.color] as [number, string]))
|
||||
|
||||
const goBack = () => {
|
||||
const params: any = {}
|
||||
if (fromListe) {
|
||||
// Rückkehr in den Listenkontext, aus dem die Maske
|
||||
// geöffnet wurde. Ohne return_projekt_id ungefiltert.
|
||||
if (returnProjektId !== null) {
|
||||
params.projekt_id = returnProjektId
|
||||
params.projekt_name = returnProjektName
|
||||
}
|
||||
} else if (currentLog.projekt_id !== -1) {
|
||||
// Fallback: Maske wurde nicht aus der Liste geöffnet
|
||||
// (z.B. addCallLog aus projekt.ts/kontaktadresse.ts).
|
||||
params.projekt_id = currentLog.projekt_id
|
||||
params.projekt_name = currentLog.projekt_name
|
||||
}
|
||||
// Breadcrumb-Kette ohne das letzte Glied (die Notizliste
|
||||
// selbst) an die Liste durchreichen, damit diese die
|
||||
// Vorgänger-Ansichten wieder als Leiste anzeigen kann.
|
||||
const listBc = serializeBc(breadcrumbs.slice(0, -1))
|
||||
if (listBc) params.bc = listBc
|
||||
m.route.set("/calllogliste", params)
|
||||
}
|
||||
|
||||
const submit = (form: HTMLFormElement): boolean => {
|
||||
const formData = new FormData(form)
|
||||
const gespeichertesLog: iCallLog = {
|
||||
@@ -385,23 +385,21 @@ export const Call_Log: m.ClosureComponent = (vnode) => {
|
||||
tag_ids: formData.getAll("tag_ids").map((v) => parseInt(v as string)).filter((n) => !isNaN(n))
|
||||
}
|
||||
if (currentLog.id === -1) {
|
||||
createCallLogREST(gespeichertesLog).then(() => goBack()).catch((e) => showServerError(e))
|
||||
createCallLogREST(gespeichertesLog).then(() => guard.navigateAfterSave()).catch((e) => { showServerError(e); guard.markDirty() })
|
||||
} else {
|
||||
updateCallLogREST(gespeichertesLog).then(() => goBack()).catch((e) => showServerError(e))
|
||||
updateCallLogREST(gespeichertesLog).then(() => guard.navigateAfterSave()).catch((e) => { showServerError(e); guard.markDirty() })
|
||||
}
|
||||
return true
|
||||
}
|
||||
const cancel = (e: Event) => {
|
||||
goBack()
|
||||
}
|
||||
return m("div.w3-container.w3-auto.form-view-container",
|
||||
m("h1", currentLog.id === -1 ? "Neue Gesprächsnotiz anlegen" : "Gesprächsnotiz"),
|
||||
m(BreadcrumbBar, {
|
||||
breadcrumbs: breadcrumbs,
|
||||
current: currentLog.id === -1 ? "Neue Gesprächsnotiz" : "Gesprächsnotiz"
|
||||
current: currentLog.id === -1 ? "Neue Gesprächsnotiz" : "Gesprächsnotiz",
|
||||
onnavigate: guardedNavigate
|
||||
} as iBreadcrumbBar),
|
||||
m("div", {style: {flex: '1', 'min-height': '0'}},
|
||||
m(Form, {showButtons: true, onsubmit: submit, oncancel: cancel} as iForm, [
|
||||
m(Form, guard.formAttrs(submit) as iForm, [
|
||||
m("input", {type: "hidden", name: "projekt_id", value: currentLog.projekt_id}),
|
||||
// Kunde und Projekt als Read-Only-Text, da voreingestellt.
|
||||
m("label", "Kunde",
|
||||
@@ -449,6 +447,7 @@ export const Call_Log: m.ClosureComponent = (vnode) => {
|
||||
if (ka) {
|
||||
currentLog.name_ansprechpartner = ka.name
|
||||
currentLog.telefon = ka.telefon
|
||||
guard.markDirty()
|
||||
}
|
||||
}
|
||||
} as iSelect)),
|
||||
@@ -463,7 +462,8 @@ export const Call_Log: m.ClosureComponent = (vnode) => {
|
||||
colors: tagColors,
|
||||
placeholder: "kein Tag",
|
||||
modalTitle: "Tags auswählen",
|
||||
editTooltip: "Tags bearbeiten"
|
||||
editTooltip: "Tags bearbeiten",
|
||||
onchanged: () => { guard.markDirty() }
|
||||
} as iMultiSelect)),
|
||||
m("label", "Wiedervorlage Datum", m(Input, {name: "wiedervorlage_datum", value: currentLog.wiedervorlage_datum, 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