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 && (