better loading states, BUGFIX: person edit link

This commit is contained in:
Simon Martens
2026-01-24 13:45:23 +01:00
parent e7e547327b
commit 87dc77e990
8 changed files with 22 additions and 17 deletions

View File

@@ -17,8 +17,9 @@ import (
)
const (
URL_PERSON_EDIT = "edit"
TEMPLATE_PERSON_EDIT = "/person/edit/"
URL_PERSON_EDIT = "edit"
URL_PERSON_EDIT_SLASH = "edit/"
TEMPLATE_PERSON_EDIT = "/person/edit/"
)
func init() {
@@ -42,7 +43,9 @@ func (p *PersonEditPage) Setup(router *router.Router[*core.RequestEvent], ia pag
rg := router.Group("/person/{id}/")
rg.BindFunc(middleware.IsAdminOrEditor())
rg.GET(URL_PERSON_EDIT, p.GET(engine, app))
rg.GET(URL_PERSON_EDIT_SLASH, p.GET(engine, app))
rg.POST(URL_PERSON_EDIT, p.POST(engine, app))
rg.POST(URL_PERSON_EDIT_SLASH, p.POST(engine, app))
rg.POST(URL_PERSON_EDIT+"/delete", p.POSTDelete(engine, app))
return nil
}
@@ -354,7 +357,7 @@ func (p *PersonEditPage) POST(engine *templating.Engine, app core.App) HandleFun
return e.Redirect(http.StatusSeeOther, redirect)
}
setFlashSuccess(e, "Änderungen gespeichert.")
redirect := fmt.Sprintf("/person/%s/edit", id)
redirect := fmt.Sprintf("/person/%s/edit/", id)
return e.Redirect(http.StatusSeeOther, redirect)
}
}

View File

@@ -8914,7 +8914,7 @@ class rc extends HTMLElement {
<div class="px-3 py-1.5 text-xs font-semibold text-gray-500 uppercase tracking-wider">
Person
</div>
<a href="/person/${h}/edit" class="flex items-center px-4 py-2 hover:bg-gray-100 transition-colors no-underline text-sm">
<a href="/person/${h}/edit/" class="flex items-center px-4 py-2 hover:bg-gray-100 transition-colors no-underline text-sm">
<i class="ri-edit-line text-base text-gray-700 mr-2.5"></i>
<span class="text-gray-900">Bearbeiten</span>
</a>
@@ -10006,7 +10006,7 @@ function Kc() {
return h || (h = document.createElement("div"), h.id = "global-notice", h.className = "global-notice hidden", h.setAttribute("role", "status"), h.setAttribute("aria-live", "polite"), h.setAttribute("aria-atomic", "true"), h.dataset.state = "", h.innerHTML = `
<div class="global-notice-inner">
<i class="ri-loader-4-line spinning" aria-hidden="true"></i>
<span data-role="global-notice-text">Laden&#8230;</span>
<span data-role="global-notice-text">Lädt</span>
</div>
`, document.body?.appendChild(h)), h;
};
@@ -10026,16 +10026,16 @@ function Kc() {
n && (clearTimeout(n), n = null);
};
document.addEventListener("htmx:beforeRequest", (h) => {
i += 1, u(), l(!0), a("loading", "Laden..."), c(h.detail?.elt, !0);
i += 1, u(), l(!0), a("loading", "Lädt"), c(h.detail?.elt, !0);
}), document.addEventListener("htmx:afterRequest", (h) => {
c(h.detail?.elt, !1), i = Math.max(0, i - 1), i === 0 && (l(!1), t.dataset.state !== "error" && o());
}), document.addEventListener("htmx:responseError", () => {
l(!1), a("error", "Laden fehlgeschlagen."), u(), n = setTimeout(() => {
i === 0 ? o() : a("loading", "Laden...");
i === 0 ? o() : a("loading", "Lädt");
}, 2e3);
}), document.addEventListener("htmx:sendError", () => {
l(!1), a("error", "Verbindung fehlgeschlagen."), u(), n = setTimeout(() => {
i === 0 ? o() : a("loading", "Laden...");
i === 0 ? o() : a("loading", "Lädt");
}, 2e3);
}), document.addEventListener("htmx:afterSwap", () => {
t = s(), t && !e && (e = t.querySelector("[data-role='global-notice-text']"));

File diff suppressed because one or more lines are too long

View File

@@ -7,6 +7,6 @@
data-state="">
<div class="global-notice-inner">
<i class="ri-loader-4-line spinning" aria-hidden="true"></i>
<span data-role="global-notice-text">Laden&#8230;</span>
<span data-role="global-notice-text">Lädt</span>
</div>
</div>

View File

@@ -108,7 +108,7 @@
class="w-full dbform form-with-action-bar"
id="changepersonform"
method="POST"
action="{{ if $model.is_new }}/personen/new/{{ else }}/person/{{ $agent.Id }}/edit{{ end }}"
action="{{ if $model.is_new }}/personen/new/{{ else }}/person/{{ $agent.Id }}/edit/{{ end }}"
{{- if not $model.is_new -}}
data-delete-endpoint="/person/{{ $agent.Id }}/edit/delete"
{{- end -}}>

View File

@@ -150,7 +150,7 @@ export class FabMenu extends HTMLElement {
<div class="px-3 py-1.5 text-xs font-semibold text-gray-500 uppercase tracking-wider">
Person
</div>
<a href="/person/${personId}/edit" class="flex items-center px-4 py-2 hover:bg-gray-100 transition-colors no-underline text-sm">
<a href="/person/${personId}/edit/" class="flex items-center px-4 py-2 hover:bg-gray-100 transition-colors no-underline text-sm">
<i class="ri-edit-line text-base text-gray-700 mr-2.5"></i>
<span class="text-gray-900">Bearbeiten</span>
</a>

View File

@@ -341,7 +341,7 @@ function InitGlobalHtmxNotice() {
noticeEl.innerHTML = `
<div class="global-notice-inner">
<i class="ri-loader-4-line spinning" aria-hidden="true"></i>
<span data-role="global-notice-text">Laden&#8230;</span>
<span data-role="global-notice-text">Lädt</span>
</div>
`;
document.body?.appendChild(noticeEl);
@@ -437,7 +437,7 @@ function InitGlobalHtmxNotice() {
pending += 1;
clearErrorTimeout();
setBodyBusy(true);
showNotice("loading", "Laden...");
showNotice("loading", "Lädt");
markElementBusy(event.detail?.elt, true);
});
@@ -460,7 +460,7 @@ function InitGlobalHtmxNotice() {
if (pending === 0) {
hideNotice();
} else {
showNotice("loading", "Laden...");
showNotice("loading", "Lädt");
}
}, 2000);
});
@@ -473,7 +473,7 @@ function InitGlobalHtmxNotice() {
if (pending === 0) {
hideNotice();
} else {
showNotice("loading", "Laden...");
showNotice("loading", "Lädt");
}
}, 2000);
});

View File

@@ -641,14 +641,16 @@
@apply block;
}
/* Overlay disabled for now.
html[data-htmx-busy="true"]::before {
content: "";
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.18);
background: rgba(15, 23, 42, 0.08);
z-index: 40;
pointer-events: auto;
}
*/
[data-htmx-busy="true"]:not(html):not(body) {
pointer-events: none;