63 lines
2.4 KiB
TypeScript
63 lines
2.4 KiB
TypeScript
"use client"
|
|
|
|
import { useRouter } from "next/navigation"
|
|
import { useState } from "react"
|
|
import { useMutation } from "convex/react"
|
|
import { api } from "@/convex/_generated/api"
|
|
import type { Id } from "@/convex/_generated/dataModel"
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogTrigger } from "@/components/ui/dialog"
|
|
import { Button } from "@/components/ui/button"
|
|
import { AlertTriangle, Trash2 } from "lucide-react"
|
|
import { toast } from "sonner"
|
|
|
|
export function DeleteTicketDialog({ ticketId }: { ticketId: Id<"tickets"> }) {
|
|
const router = useRouter()
|
|
const remove = useMutation(api.tickets.remove)
|
|
const [open, setOpen] = useState(false)
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
async function confirm() {
|
|
setLoading(true)
|
|
toast.loading("Excluindo ticket...", { id: "del" })
|
|
try {
|
|
await remove({ ticketId })
|
|
toast.success("Ticket excluído.", { id: "del" })
|
|
setOpen(false)
|
|
router.push("/tickets")
|
|
} catch {
|
|
toast.error("Não foi possível excluir o ticket.", { id: "del" })
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
size="icon"
|
|
aria-label="Excluir ticket"
|
|
className="h-9 w-9 rounded-lg border border-transparent bg-transparent text-[#ef4444] transition hover:border-[#fecaca] hover:bg-[#fee2e2] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#fecaca]/50"
|
|
>
|
|
<Trash2 className="size-4 text-current" />
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2 text-destructive">
|
|
<AlertTriangle className="size-5" /> Excluir ticket
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
Esta ação é permanente e removerá o ticket, comentários e eventos associados. Deseja continuar?
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="flex justify-end gap-2 pt-2">
|
|
<Button variant="outline" onClick={() => setOpen(false)}>Cancelar</Button>
|
|
<Button variant="destructive" onClick={confirm} disabled={loading} className="gap-2">
|
|
{loading ? "Excluindo..." : (<><Trash2 className="size-4" /> Excluir</>)}
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|