diff --git a/components/WerteList.tsx b/components/WerteList.tsx index c19efee..7ec757f 100644 --- a/components/WerteList.tsx +++ b/components/WerteList.tsx @@ -1,5 +1,6 @@ 'use client'; +import { useState } from 'react'; import { WerteEntry } from '@/types/werte'; interface WerteListProps { @@ -8,7 +9,38 @@ interface WerteListProps { onEdit?: (entry: WerteEntry) => void; } +function ConfirmDialog({ + onConfirm, + onCancel, +}: { + onConfirm: () => void; + onCancel: () => void; +}) { + return ( +
+
+

Eintrag wirklich löschen?

+
+ + +
+
+
+ ); +} + export default function WerteList({ entries, onDelete, onEdit }: WerteListProps) { + const [confirmId, setConfirmId] = useState(null); const formatValue = (value: number | string | null | undefined) => { if (value === null || value === undefined || value === '' || value === '0' || value === '0.0') { return '-'; @@ -44,10 +76,6 @@ export default function WerteList({ entries, onDelete, onEdit }: WerteListProps) }; const handleDelete = async (id: number) => { - if (!confirm('Eintrag wirklich löschen?')) { - return; - } - try { const response = await fetch(`/api/werte/${id}`, { method: 'DELETE', @@ -61,6 +89,8 @@ export default function WerteList({ entries, onDelete, onEdit }: WerteListProps) } catch (error) { console.error('Error:', error); alert('Fehler beim Löschen!'); + } finally { + setConfirmId(null); } }; @@ -74,6 +104,12 @@ export default function WerteList({ entries, onDelete, onEdit }: WerteListProps) return (
+ {confirmId !== null && ( + handleDelete(confirmId)} + onCancel={() => setConfirmId(null)} + /> + )} @@ -117,7 +153,7 @@ export default function WerteList({ entries, onDelete, onEdit }: WerteListProps) )} {onDelete && (