feat(feedback): Fehler-melden-Dialog + ID-kopieren (Stammbaum/Akte/Wurf)
Rechtsklick auf eine Maus im Stammbaum öffnet ein Kontextmenü mit „ID kopieren" (Clipboard + Toast) und „Fehler melden". Zusätzlich „Fehler melden"-Buttons in der Rennmausakte und der Wurf-Ansicht. Der Dialog erfasst eine Beschreibung und sendet sie samt Debug-Kontext (Ansicht, Tier-/Wurf-ID + Name, URL, Zeitstempel, User-Agent) an POST /feedback; gespeichert in einer neuen Feedback-Tabelle. Backend: Feedback-Entity (lose nullable GerbilId/LitterId ohne FK), Endpoints POST/GET /feedback, EF-Migration AddFeedback. Die Tabelle wird vom Import-Ingest NICHT geleert — Feedback überlebt Re-Ingests (Test deckt das ab). Tests: FeedbackEndpointTests (persistiert, 400 bei leer, übersteht Ingest-Wipe); e2e feedback.spec.ts. tsc/eslint/vitest(129)/playwright(6)/dotnet(212) grün. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
171
gerbil-manager-web/src/components/ReportErrorDialog.tsx
Normal file
171
gerbil-manager-web/src/components/ReportErrorDialog.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
/**
|
||||
* FEEDBACK: "Fehler melden" — a small accessible modal with a textarea + submit.
|
||||
*
|
||||
* The caller passes the debug context (which view, the gerbil/litter id + name); the
|
||||
* dialog captures the current URL and a client timestamp itself and POSTs everything
|
||||
* to /feedback. Success/error is surfaced via the existing toast system.
|
||||
*/
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { de } from '../strings/de'
|
||||
import { ApiError } from '../api/client'
|
||||
import { submitFeedback, type FeedbackContext } from '../api/feedback'
|
||||
import { useToast } from './toast'
|
||||
import './reportErrorDialog.css'
|
||||
|
||||
export interface ReportErrorContext {
|
||||
context: FeedbackContext
|
||||
gerbilId?: string | null
|
||||
litterId?: string | null
|
||||
entityName?: string | null
|
||||
}
|
||||
|
||||
interface ReportErrorDialogProps {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
context: ReportErrorContext
|
||||
}
|
||||
|
||||
/**
|
||||
* Thin wrapper: mounts the dialog body only while open, so its form state starts
|
||||
* fresh on every open (no reset-in-effect needed).
|
||||
*/
|
||||
export default function ReportErrorDialog({ open, onClose, context }: ReportErrorDialogProps) {
|
||||
if (!open) return null
|
||||
return <ReportErrorDialogBody onClose={onClose} context={context} />
|
||||
}
|
||||
|
||||
function ReportErrorDialogBody({
|
||||
onClose,
|
||||
context,
|
||||
}: {
|
||||
onClose: () => void
|
||||
context: ReportErrorContext
|
||||
}) {
|
||||
const t = de.feedback
|
||||
const toast = useToast()
|
||||
const [message, setMessage] = useState('')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const textareaRef = useRef<HTMLTextAreaElement | null>(null)
|
||||
|
||||
// Focus the textarea once on mount.
|
||||
useEffect(() => {
|
||||
const id = window.setTimeout(() => textareaRef.current?.focus(), 0)
|
||||
return () => window.clearTimeout(id)
|
||||
}, [])
|
||||
|
||||
// Close on Escape.
|
||||
useEffect(() => {
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose()
|
||||
}
|
||||
window.addEventListener('keydown', onKey)
|
||||
return () => window.removeEventListener('keydown', onKey)
|
||||
}, [onClose])
|
||||
|
||||
const contextLabel = t.contexts[context.context]
|
||||
|
||||
async function handleSubmit() {
|
||||
const trimmed = message.trim()
|
||||
if (!trimmed) {
|
||||
toast.error(t.emptyMessage)
|
||||
textareaRef.current?.focus()
|
||||
return
|
||||
}
|
||||
setSubmitting(true)
|
||||
try {
|
||||
await submitFeedback({
|
||||
message: trimmed,
|
||||
context: context.context,
|
||||
gerbilId: context.gerbilId ?? null,
|
||||
litterId: context.litterId ?? null,
|
||||
entityName: context.entityName ?? null,
|
||||
url: window.location.href,
|
||||
clientTimestamp: new Date().toISOString(),
|
||||
})
|
||||
toast.success(t.success)
|
||||
onClose()
|
||||
} catch (err) {
|
||||
toast.error(err instanceof ApiError ? err.message : t.error)
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="report-error__backdrop"
|
||||
onClick={onClose}
|
||||
role="presentation"
|
||||
>
|
||||
<div
|
||||
className="report-error__dialog"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="report-error-title"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="report-error__header">
|
||||
<h2 id="report-error-title" className="report-error__title">
|
||||
{t.dialogTitle}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
className="report-error__close"
|
||||
onClick={onClose}
|
||||
aria-label={t.close}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="report-error__intro">{t.intro}</p>
|
||||
|
||||
<label className="report-error__label" htmlFor="report-error-message">
|
||||
{t.label}
|
||||
</label>
|
||||
<textarea
|
||||
id="report-error-message"
|
||||
ref={textareaRef}
|
||||
className="report-error__textarea"
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
placeholder={t.placeholder}
|
||||
rows={5}
|
||||
/>
|
||||
|
||||
<div className="report-error__debug">
|
||||
<div className="report-error__debug-title">{t.debugTitle}</div>
|
||||
<dl className="report-error__debug-list">
|
||||
<div className="report-error__debug-row">
|
||||
<dt>{t.debugFields.context}</dt>
|
||||
<dd>{contextLabel}</dd>
|
||||
</div>
|
||||
{context.entityName && (
|
||||
<div className="report-error__debug-row">
|
||||
<dt>{t.debugFields.entity}</dt>
|
||||
<dd>{context.entityName}</dd>
|
||||
</div>
|
||||
)}
|
||||
<div className="report-error__debug-row">
|
||||
<dt>{t.debugFields.url}</dt>
|
||||
<dd className="report-error__debug-url">{window.location.href}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div className="report-error__actions">
|
||||
<button type="button" className="btn" onClick={onClose} disabled={submitting}>
|
||||
{t.cancel}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn--primary"
|
||||
onClick={handleSubmit}
|
||||
disabled={submitting}
|
||||
>
|
||||
{submitting ? t.submitting : t.submit}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
149
gerbil-manager-web/src/components/reportErrorDialog.css
Normal file
149
gerbil-manager-web/src/components/reportErrorDialog.css
Normal file
@@ -0,0 +1,149 @@
|
||||
/* FEEDBACK: "Fehler melden" modal dialog. */
|
||||
.report-error__backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
background: rgba(43, 33, 25, 0.45);
|
||||
}
|
||||
|
||||
.report-error__dialog {
|
||||
width: 100%;
|
||||
max-width: 32rem;
|
||||
max-height: calc(100vh - 2rem);
|
||||
overflow-y: auto;
|
||||
background: var(--color-bg, #fff);
|
||||
color: var(--color-text);
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 12px 40px rgba(43, 33, 25, 0.32);
|
||||
padding: 1.25rem;
|
||||
animation: reportErrorIn 0.18s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
@keyframes reportErrorIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.report-error__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.report-error__title {
|
||||
margin: 0;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.report-error__close {
|
||||
background: none;
|
||||
border: none;
|
||||
font: inherit;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-muted, #666);
|
||||
padding: 0.25rem 0.4rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.report-error__close:hover {
|
||||
background: var(--color-border, #eee);
|
||||
}
|
||||
|
||||
.report-error__intro {
|
||||
margin: 0 0 0.85rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-muted, #666);
|
||||
}
|
||||
|
||||
.report-error__label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.report-error__textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
font: inherit;
|
||||
font-size: 0.95rem;
|
||||
padding: 0.6rem 0.7rem;
|
||||
border: 1px solid var(--color-border, #ccc);
|
||||
border-radius: 8px;
|
||||
resize: vertical;
|
||||
min-height: 5.5rem;
|
||||
background: var(--color-bg, #fff);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.report-error__textarea:focus {
|
||||
outline: 2px solid var(--color-accent, #2563eb);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.report-error__debug {
|
||||
margin-top: 0.9rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
border: 1px solid var(--color-border, #e5e5e5);
|
||||
border-radius: 8px;
|
||||
background: var(--color-surface-2, rgba(0, 0, 0, 0.03));
|
||||
}
|
||||
|
||||
.report-error__debug-title {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--color-text-muted, #888);
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.report-error__debug-list {
|
||||
margin: 0;
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.report-error__debug-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.report-error__debug-row dt {
|
||||
flex: 0 0 5.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-muted, #777);
|
||||
}
|
||||
|
||||
.report-error__debug-row dd {
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.report-error__debug-url {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.report-error__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1.1rem;
|
||||
}
|
||||
Reference in New Issue
Block a user