fix(ux): modal error dialog for server-refused actions + ESC closes only the topmost
- Duplicate-tag create/rename hit the uq_tags_user_name constraint and 500'd; now caught and
returned as a clear 409 ('You already have a tag named …').
- New global error dialog (errorDialog store + ErrorDialog modal) for definitive server refusals;
the api layer wiring + mount land with the rest of the round.
- Modal now keeps a stack so ESC dismisses only the top modal — an error over the tag editor
closes the error and leaves the editor open.
This commit is contained in:
npeter83
parent
edd8c85132
commit
b55a944e7c
7 changed files with 102 additions and 5 deletions
|
|
@ -1,5 +1,6 @@
|
||||||
from fastapi import APIRouter, Depends, HTTPException
|
from fastapi import APIRouter, Depends, HTTPException
|
||||||
from sqlalchemy import func, or_, select
|
from sqlalchemy import func, or_, select
|
||||||
|
from sqlalchemy.exc import IntegrityError
|
||||||
from sqlalchemy.orm import Session
|
from sqlalchemy.orm import Session
|
||||||
|
|
||||||
from app.auth import current_user
|
from app.auth import current_user
|
||||||
|
|
@ -49,7 +50,11 @@ def create_tag(
|
||||||
category=category if category in ("language", "topic", "other") else "other",
|
category=category if category in ("language", "topic", "other") else "other",
|
||||||
)
|
)
|
||||||
db.add(tag)
|
db.add(tag)
|
||||||
|
try:
|
||||||
db.commit()
|
db.commit()
|
||||||
|
except IntegrityError:
|
||||||
|
db.rollback()
|
||||||
|
raise HTTPException(status_code=409, detail=f"You already have a tag named “{name}”.")
|
||||||
return {"id": tag.id, "name": tag.name, "color": tag.color, "category": tag.category}
|
return {"id": tag.id, "name": tag.name, "color": tag.color, "category": tag.category}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -76,7 +81,11 @@ def update_tag(
|
||||||
tag.name = name
|
tag.name = name
|
||||||
if "color" in payload:
|
if "color" in payload:
|
||||||
tag.color = payload.get("color")
|
tag.color = payload.get("color")
|
||||||
|
try:
|
||||||
db.commit()
|
db.commit()
|
||||||
|
except IntegrityError:
|
||||||
|
db.rollback()
|
||||||
|
raise HTTPException(status_code=409, detail=f"You already have a tag named “{tag.name}”.")
|
||||||
return {"id": tag.id, "name": tag.name, "color": tag.color, "category": tag.category}
|
return {"id": tag.id, "name": tag.name, "color": tag.color, "category": tag.category}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
24
frontend/src/components/ErrorDialog.tsx
Normal file
24
frontend/src/components/ErrorDialog.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { useSyncExternalStore } from "react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { dismissError, getError, subscribeError } from "../lib/errorDialog";
|
||||||
|
import Modal from "./Modal";
|
||||||
|
|
||||||
|
// Renders the current app error (if any) as a modal the user must acknowledge.
|
||||||
|
export default function ErrorDialog() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const err = useSyncExternalStore(subscribeError, getError, getError);
|
||||||
|
if (!err) return null;
|
||||||
|
return (
|
||||||
|
<Modal title={err.title} onClose={dismissError} maxWidth="max-w-md">
|
||||||
|
<p className="text-sm leading-relaxed text-fg/90">{err.message}</p>
|
||||||
|
<div className="flex justify-end mt-5">
|
||||||
|
<button
|
||||||
|
onClick={dismissError}
|
||||||
|
className="px-4 py-2 rounded-lg bg-accent text-accent-fg text-sm font-medium hover:opacity-90 transition"
|
||||||
|
>
|
||||||
|
{t("errors.ok")}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,7 +1,12 @@
|
||||||
import { useEffect, type ReactNode } from "react";
|
import { useEffect, useRef, type ReactNode } from "react";
|
||||||
import { createPortal } from "react-dom";
|
import { createPortal } from "react-dom";
|
||||||
import { X } from "lucide-react";
|
import { X } from "lucide-react";
|
||||||
|
|
||||||
|
// Stack of open modals so ESC only closes the topmost one — e.g. an error dialog over the
|
||||||
|
// tag editor: pressing ESC dismisses just the error and returns to the editor underneath.
|
||||||
|
let modalStack: number[] = [];
|
||||||
|
let nextModalId = 1;
|
||||||
|
|
||||||
// Small centered modal shell (portaled to <body>): backdrop + ESC + scroll-lock close.
|
// Small centered modal shell (portaled to <body>): backdrop + ESC + scroll-lock close.
|
||||||
export default function Modal({
|
export default function Modal({
|
||||||
title,
|
title,
|
||||||
|
|
@ -14,18 +19,27 @@ export default function Modal({
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
maxWidth?: string;
|
maxWidth?: string;
|
||||||
}) {
|
}) {
|
||||||
|
// Keep a stable handler across renders so the stack id is assigned once per mount.
|
||||||
|
const onCloseRef = useRef(onClose);
|
||||||
|
onCloseRef.current = onClose;
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
const id = nextModalId++;
|
||||||
|
modalStack.push(id);
|
||||||
const onKey = (e: KeyboardEvent) => {
|
const onKey = (e: KeyboardEvent) => {
|
||||||
if (e.key === "Escape") onClose();
|
if (e.key === "Escape" && modalStack[modalStack.length - 1] === id) {
|
||||||
|
e.stopPropagation();
|
||||||
|
onCloseRef.current();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
window.addEventListener("keydown", onKey);
|
window.addEventListener("keydown", onKey);
|
||||||
const prev = document.body.style.overflow;
|
const prev = document.body.style.overflow;
|
||||||
document.body.style.overflow = "hidden";
|
document.body.style.overflow = "hidden";
|
||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener("keydown", onKey);
|
window.removeEventListener("keydown", onKey);
|
||||||
|
modalStack = modalStack.filter((x) => x !== id);
|
||||||
document.body.style.overflow = prev;
|
document.body.style.overflow = prev;
|
||||||
};
|
};
|
||||||
}, [onClose]);
|
}, []);
|
||||||
|
|
||||||
return createPortal(
|
return createPortal(
|
||||||
<div
|
<div
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,8 @@
|
||||||
{
|
{
|
||||||
|
"title": "Nicht möglich",
|
||||||
|
"generic": "Der Server konnte die Aktion nicht ausführen. Bitte erneut versuchen.",
|
||||||
|
"server": "Serverfehler",
|
||||||
|
"ok": "OK",
|
||||||
"boundary": {
|
"boundary": {
|
||||||
"title": "Etwas ist schiefgelaufen.",
|
"title": "Etwas ist schiefgelaufen.",
|
||||||
"subtitle": "Die App ist auf einen unerwarteten Fehler gestoßen.",
|
"subtitle": "Die App ist auf einen unerwarteten Fehler gestoßen.",
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,8 @@
|
||||||
{
|
{
|
||||||
|
"title": "Couldn't complete that",
|
||||||
|
"generic": "The server couldn't carry out that action. Please try again.",
|
||||||
|
"server": "Server error",
|
||||||
|
"ok": "OK",
|
||||||
"boundary": {
|
"boundary": {
|
||||||
"title": "Something went wrong.",
|
"title": "Something went wrong.",
|
||||||
"subtitle": "The app hit an unexpected error.",
|
"subtitle": "The app hit an unexpected error.",
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,8 @@
|
||||||
{
|
{
|
||||||
|
"title": "Nem sikerült",
|
||||||
|
"generic": "A szerver nem tudta végrehajtani a műveletet. Próbáld újra.",
|
||||||
|
"server": "Szerverhiba",
|
||||||
|
"ok": "OK",
|
||||||
"boundary": {
|
"boundary": {
|
||||||
"title": "Hiba történt.",
|
"title": "Hiba történt.",
|
||||||
"subtitle": "Az alkalmazás váratlan hibába ütközött.",
|
"subtitle": "Az alkalmazás váratlan hibába ütközött.",
|
||||||
|
|
|
||||||
38
frontend/src/lib/errorDialog.ts
Normal file
38
frontend/src/lib/errorDialog.ts
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
import i18n from "../i18n";
|
||||||
|
|
||||||
|
// A single, self-explanatory error dialog (modal) the user must acknowledge — used when the
|
||||||
|
// server can't carry out an action (a definitive 4xx/5xx response). Distinct from toasts
|
||||||
|
// (transient, e.g. connection blips) and from silent handling. Module-level so the non-React
|
||||||
|
// api layer can raise it; an <ErrorDialog> mounted at the app root renders the current one.
|
||||||
|
export interface AppError {
|
||||||
|
title: string;
|
||||||
|
message: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
let current: AppError | null = null;
|
||||||
|
let listeners: Array<() => void> = [];
|
||||||
|
const emit = () => listeners.forEach((l) => l());
|
||||||
|
|
||||||
|
export function reportError(message?: string, title?: string): void {
|
||||||
|
current = {
|
||||||
|
title: title || i18n.t("errors.title"),
|
||||||
|
message: message || i18n.t("errors.generic"),
|
||||||
|
};
|
||||||
|
emit();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function dismissError(): void {
|
||||||
|
current = null;
|
||||||
|
emit();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function subscribeError(listener: () => void): () => void {
|
||||||
|
listeners.push(listener);
|
||||||
|
return () => {
|
||||||
|
listeners = listeners.filter((l) => l !== listener);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getError(): AppError | null {
|
||||||
|
return current;
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue