diff --git a/src/pages/TableView.jsx b/src/pages/TableView.jsx index 66ef77f..f04129d 100644 --- a/src/pages/TableView.jsx +++ b/src/pages/TableView.jsx @@ -1,9 +1,9 @@ -import { useEffect, useState, useMemo } from 'react'; +import { useEffect, useState, useMemo, useCallback } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; import Layout from '../components/Layout'; import RecordModal from '../components/RecordModal'; import CreateModal, { hasCreateForm } from '../components/CreateModal'; -import { fetchAll } from '../lib/api'; +import { fetchAll, apiDelete } from '../lib/api'; import { TABLES, STATUS_COLORS } from '../lib/tables'; function truncate(str, n = 60) { @@ -88,6 +88,8 @@ export default function TableView() { const [highlightId, setHighlightId] = useState(null); const [modalRecord, setModalRecord] = useState(null); const [showCreate, setShowCreate] = useState(false); + const [confirmDeleteId, setConfirmDeleteId] = useState(null); + const [deleting, setDeleting] = useState(false); useEffect(() => { const params = new URLSearchParams(window.location.search); @@ -130,6 +132,21 @@ export default function TableView() { setRows(prev => [newRecord, ...prev]); } + const handleDelete = useCallback(async (id, e) => { + e.stopPropagation(); + setDeleting(true); + try { + await apiDelete(meta.endpoint, id); + setRows(prev => prev.filter(r => r.id !== id)); + setConfirmDeleteId(null); + if (modalRecord?.id === id) setModalRecord(null); + } catch (err) { + alert('Fehler beim Löschen: ' + err.message); + } finally { + setDeleting(false); + } + }, [meta, modalRecord]); + if (!meta) return

Unbekannte Tabelle: {tableKey}

; return ( @@ -198,12 +215,13 @@ export default function TableView() { {col} ))} + {filtered.length === 0 && ( - + Keine Einträge gefunden @@ -212,7 +230,7 @@ export default function TableView() { setModalRecord(row)} - className={`border-b border-slate-100 hover:bg-slate-50 transition-colors cursor-pointer + className={`group border-b border-slate-100 hover:bg-slate-50 transition-colors cursor-pointer ${highlightId && row.id === highlightId ? 'bg-indigo-50 ring-1 ring-indigo-300' : ''}`} > {meta.columns.map(col => ( @@ -225,6 +243,34 @@ export default function TableView() { /> ))} + {/* Delete cell */} + e.stopPropagation()}> + {confirmDeleteId === row.id ? ( + + + + + ) : ( + + )} + ))}