diff --git a/lang/es.json b/lang/es.json index c589d735..9d71af0c 100644 --- a/lang/es.json +++ b/lang/es.json @@ -118,6 +118,7 @@ "Your bank account is connected.": "Tu cuenta bancaria está conectada.", "A filter with that name already exists": "Ya existe un filtro con ese nombre", "Delete saved filter": "Eliminar filtro guardado", + "Are you sure you want to delete “:name”? This action cannot be undone.": "¿Seguro que quieres eliminar «:name»? Esta acción no se puede deshacer.", "Failed to delete the saved filter": "No se pudo eliminar el filtro guardado", "Failed to save the filter": "No se pudo guardar el filtro", "Failed to update the saved filter": "No se pudo actualizar el filtro guardado", diff --git a/resources/js/components/transactions/saved-filters.tsx b/resources/js/components/transactions/saved-filters.tsx index 7514e9f7..e73833ba 100644 --- a/resources/js/components/transactions/saved-filters.tsx +++ b/resources/js/components/transactions/saved-filters.tsx @@ -1,3 +1,13 @@ +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, +} from '@/components/ui/alert-dialog'; import { Button } from '@/components/ui/button'; import { Dialog, @@ -36,7 +46,7 @@ import { Save, Trash2, } from 'lucide-react'; -import { useEffect, useMemo, useState } from 'react'; +import { useEffect, useMemo, useRef, useState } from 'react'; import { toast } from 'sonner'; interface SavedFilter { @@ -54,6 +64,15 @@ export function SavedFilters({ filters, onLoad }: SavedFiltersProps) { const [savedFilters, setSavedFilters] = useState([]); const [activeId, setActiveId] = useState(null); const [saveDialogOpen, setSaveDialogOpen] = useState(false); + const [pendingDelete, setPendingDelete] = useState( + null, + ); + // Retain the last name so it stays visible during the close animation, + // once pendingDelete has already been cleared to null. + const pendingDeleteName = useRef(''); + if (pendingDelete) { + pendingDeleteName.current = pendingDelete.name; + } const [name, setName] = useState(''); const [isSaving, setIsSaving] = useState(false); @@ -253,11 +272,11 @@ export function SavedFilters({ filters, onLoad }: SavedFiltersProps) {