fix: use in-app delete confirmation dialogs

This commit is contained in:
2026-04-22 07:50:27 +02:00
parent 53427e0b4d
commit 8fd91f1857
3 changed files with 38 additions and 22 deletions
-12
View File
@@ -415,17 +415,6 @@ function mountThemeToggle() {
});
}
function mountDeleteConfirmations() {
document.querySelectorAll("[data-confirm-submit]").forEach((node) => {
node.addEventListener("click", (event) => {
const message = node.dataset.confirmSubmit || "Wirklich löschen?";
if (!window.confirm(message)) {
event.preventDefault();
}
});
});
}
document.addEventListener("DOMContentLoaded", async () => {
await registerServiceWorker();
injectCsrfTokens();
@@ -434,7 +423,6 @@ document.addEventListener("DOMContentLoaded", async () => {
mountDialogs();
mountPersonalSplitSync();
mountAnnualAmountSync();
mountDeleteConfirmations();
document.querySelectorAll("[data-enable-push]").forEach((node) => {
node.addEventListener("click", async (event) => {
event.preventDefault();
+32 -5
View File
@@ -226,10 +226,25 @@
<div class="dialog-action-row dialog-action-spread">
<button class="ghost-button small-button" type="submit">Speichern</button>
{% if month.incomes|length > 1 %}
<button class="ghost-button danger-button small-button" type="submit" formaction="{{ url_for('planning.delete_income', label=month.label, income_id=income.id) }}" formnovalidate data-confirm-submit="Einkommenszeile wirklich löschen?">Löschen</button>
<button class="ghost-button danger-button small-button" type="button" data-open-dialog="confirm-delete-income-{{ income.id }}">Löschen</button>
{% endif %}
</div>
</form>
{% if month.incomes|length > 1 %}
<dialog id="confirm-delete-income-{{ income.id }}" class="app-dialog confirm-dialog">
<form method="dialog" class="dialog-close-row">
<button class="dialog-close-button" type="submit" aria-label="Schließen">×</button>
</form>
<div class="stack-form">
<h3>Einkommenszeile wirklich löschen?</h3>
<p class="muted">`{{ income.label }}` wird aus diesem Monat entfernt.</p>
<form method="post" action="{{ url_for('planning.delete_income', label=month.label, income_id=income.id) }}" class="dialog-action-row dialog-action-spread">
<button class="ghost-button" type="button" data-open-dialog="income-dialog">Zurück</button>
<button class="primary-button danger-fill-button" type="submit">Jetzt löschen</button>
</form>
</div>
</dialog>
{% endif %}
{% endfor %}
</div>
<form method="post" action="{{ url_for('planning.create_income', label=month.label) }}" class="soft-form-section stack-form">
@@ -354,7 +369,7 @@
<p class="muted">`{{ card.community_account.name }}` wird ausgeblendet und seine Budget-Zuordnungen werden gelöst.</p>
<form method="post" action="{{ url_for('planning.delete_community_account', label=month.label, community_account_id=card.community_account.id) }}" class="dialog-action-row dialog-action-spread">
<button class="ghost-button" type="button" data-open-dialog="community-account-item-{{ card.community_account.id }}">Zurück</button>
<button class="primary-button danger-fill-button" type="submit" data-confirm-submit="Konto wirklich löschen?">Jetzt löschen</button>
<button class="primary-button danger-fill-button" type="submit">Jetzt löschen</button>
</form>
</div>
</dialog>
@@ -598,8 +613,20 @@
{% endfor %}
</div>
<form method="post" action="{{ url_for('planning.delete_category', label=month.label, category_id=category_data.category.id) }}">
<button class="ghost-button danger-button" type="submit" data-confirm-submit="Kategorie wirklich löschen?">Kategorie löschen</button>
<button class="ghost-button danger-button" type="button" data-open-dialog="confirm-delete-category-{{ category_data.category.id }}">Kategorie löschen</button>
</div>
</dialog>
<dialog id="confirm-delete-category-{{ category_data.category.id }}" class="app-dialog confirm-dialog">
<form method="dialog" class="dialog-close-row">
<button class="dialog-close-button" type="submit" aria-label="Schließen">×</button>
</form>
<div class="stack-form">
<h3>Kategorie wirklich löschen?</h3>
<p class="muted">`{{ category_data.category.name }}` wird ausgeblendet und ihre Einträge werden mit ausgeblendet.</p>
<form method="post" action="{{ url_for('planning.delete_category', label=month.label, category_id=category_data.category.id) }}" class="dialog-action-row dialog-action-spread">
<button class="ghost-button" type="button" data-open-dialog="{{ category_data.dialog_id }}">Zurück</button>
<button class="primary-button danger-fill-button" type="submit">Jetzt löschen</button>
</form>
</div>
</dialog>
@@ -794,7 +821,7 @@
<form method="post" action="{{ url_for('planning.delete_entry', label=month.label, entry_id=item.entry.id) }}" class="dialog-action-row dialog-action-spread">
<input type="hidden" name="return_dialog" value="{{ category_data.dialog_id }}">
<button class="ghost-button" type="button" data-open-dialog="{{ item.dialog_id }}">Zurück</button>
<button class="primary-button danger-fill-button" type="submit" data-confirm-submit="Eintrag wirklich löschen?">Jetzt löschen</button>
<button class="primary-button danger-fill-button" type="submit">Jetzt löschen</button>
</form>
</div>
</dialog>
+6 -5
View File
@@ -111,14 +111,15 @@ def test_planning_shows_budgets_and_community_accounts(logged_in_client):
assert b"Auszahlung Person B" in response.data
def test_planning_delete_actions_render_confirmation_hooks(logged_in_client):
def test_planning_delete_actions_render_app_confirmation_dialogs(logged_in_client):
response = logged_in_client.get("/planning/2026-04")
assert response.status_code == 200
assert b'data-confirm-submit="Einkommenszeile wirklich l\xc3\xb6schen?' in response.data
assert b'data-confirm-submit="Kategorie wirklich l\xc3\xb6schen?' in response.data
assert b'data-confirm-submit="Konto wirklich l\xc3\xb6schen?' in response.data
assert b'data-confirm-submit="Eintrag wirklich l\xc3\xb6schen?' in response.data
assert b"confirm-delete-income-" in response.data
assert b"confirm-delete-category-" in response.data
assert b"confirm-delete-community-account-" in response.data
assert b"confirm-delete-entry-" in response.data
assert b"data-confirm-submit" not in response.data
def test_community_account_can_assign_budget_categories(logged_in_client):