Add delete session functionality
- DELETE /api/v1/sessions/{id}: only closed sessions, user-scoped
- Returns 404 if not found/wrong user, 409 if session still open
- Deletes session_logs first, then session (no CASCADE)
- Frontend: trash button per session in SessionList (closed sessions only)
- Confirm dialog before delete, toast feedback, list reloads after
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Christoph K.
@@ -189,6 +189,12 @@ export const api = {
|
||||
method: 'DELETE',
|
||||
});
|
||||
},
|
||||
|
||||
delete(id: number): Promise<void> {
|
||||
return request<void>(`/api/v1/sessions/${id}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
stats: {
|
||||
|
||||
@@ -2,12 +2,14 @@ import { useEffect, useState } from 'react';
|
||||
import { useHistoryStore } from '../../stores/historyStore';
|
||||
import { SessionDetail } from './SessionDetail';
|
||||
import type { Session } from '../../types';
|
||||
import { api } from '../../api/client';
|
||||
import { api, ApiError } from '../../api/client';
|
||||
import { useToastStore } from '../../stores/toastStore';
|
||||
|
||||
export function SessionList() {
|
||||
const { sessions, loading, fetchSessions } = useHistoryStore();
|
||||
const [expandedId, setExpandedId] = useState<number | null>(null);
|
||||
const [expandedSession, setExpandedSession] = useState<Session | null>(null);
|
||||
const [deletingId, setDeletingId] = useState<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchSessions(50);
|
||||
@@ -38,6 +40,31 @@ export function SessionList() {
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = async (e: React.MouseEvent, id: number) => {
|
||||
e.stopPropagation();
|
||||
if (!confirm('Session wirklich löschen? Alle Sätze werden unwiderruflich entfernt.')) return;
|
||||
|
||||
setDeletingId(id);
|
||||
try {
|
||||
await api.sessions.delete(id);
|
||||
useToastStore.getState().addToast('success', 'Session erfolgreich gelöscht');
|
||||
// Aufgeklappte Session schließen falls sie gerade gelöscht wurde
|
||||
if (expandedId === id) {
|
||||
setExpandedId(null);
|
||||
setExpandedSession(null);
|
||||
}
|
||||
fetchSessions(50);
|
||||
} catch (err) {
|
||||
const message =
|
||||
err instanceof ApiError
|
||||
? err.message
|
||||
: 'Session konnte nicht gelöscht werden';
|
||||
useToastStore.getState().addToast('error', message);
|
||||
} finally {
|
||||
setDeletingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDuration = (start: string, end?: string) => {
|
||||
if (!end) return 'laufend';
|
||||
const ms = new Date(end).getTime() - new Date(start).getTime();
|
||||
@@ -68,33 +95,55 @@ export function SessionList() {
|
||||
key={session.id}
|
||||
className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden"
|
||||
>
|
||||
<button
|
||||
onClick={() => toggleSession(session.id)}
|
||||
className="w-full px-4 py-3 min-h-[44px] text-left hover:bg-gray-800/50"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="font-semibold text-gray-100">{session.set_name}</div>
|
||||
<div className="text-sm text-gray-400 mt-0.5">
|
||||
{formatDate(session.started_at)}
|
||||
<div className="flex items-stretch">
|
||||
<button
|
||||
onClick={() => toggleSession(session.id)}
|
||||
className="flex-1 px-4 py-3 min-h-[44px] text-left hover:bg-gray-800/50"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="font-semibold text-gray-100">{session.set_name}</div>
|
||||
<div className="text-sm text-gray-400 mt-0.5">
|
||||
{formatDate(session.started_at)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-sm text-gray-400">
|
||||
{formatDuration(session.started_at, session.ended_at)}
|
||||
</div>
|
||||
<svg
|
||||
className={`w-5 h-5 text-gray-400 transition-transform ml-auto ${expandedId === session.id ? 'rotate-180' : ''}`}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-sm text-gray-400">
|
||||
{formatDuration(session.started_at, session.ended_at)}
|
||||
</div>
|
||||
<svg
|
||||
className={`w-5 h-5 text-gray-400 transition-transform ml-auto ${expandedId === session.id ? 'rotate-180' : ''}`}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</button>
|
||||
{session.ended_at && (
|
||||
<button
|
||||
onClick={(e) => handleDelete(e, session.id)}
|
||||
disabled={deletingId === session.id}
|
||||
className="flex items-center justify-center w-11 min-h-[44px] text-gray-500 hover:text-red-400 hover:bg-gray-800/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors border-l border-gray-800"
|
||||
title="Session löschen"
|
||||
aria-label="Session löschen"
|
||||
>
|
||||
{deletingId === session.id ? (
|
||||
<svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{expandedId === session.id && expandedSession && (
|
||||
<div className="px-4 pb-4 border-t border-gray-800 pt-3">
|
||||
<SessionDetail logs={expandedSession.logs || []} />
|
||||
|
||||
Reference in New Issue
Block a user