Files
stats/apps/web/src/components/projects/ProjectActions.tsx
2023-10-26 20:53:11 +02:00

71 lines
2.0 KiB
TypeScript

import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "../ui/dropdown-menu";
import { Button } from "../ui/button";
import { MoreHorizontal } from "lucide-react";
import { pushModal, showConfirm } from "@/modals";
import { type IProject } from "@/types";
import { clipboard } from "@/utils/clipboard";
import { useRefetchActive } from "@/hooks/useRefetchActive";
import { api } from "@/utils/api";
import { toast } from "../ui/use-toast";
export function ProjectActions({ id }: IProject) {
const refetch = useRefetchActive()
const deletion = api.project.remove.useMutation({
onSuccess() {
toast({
title: 'Success',
description: 'Project deleted successfully.',
})
refetch()
}
})
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Open menu</span>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem onClick={() => clipboard(id)}>
Copy project ID
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
pushModal("EditProject", { id });
}}
>
Edit
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
className="text-destructive"
onClick={() => {
showConfirm({
title: 'Delete project',
text: 'This will delete all events for this project. This action cannot be undone.',
onConfirm() {
deletion.mutate({
id,
})
}
})
}}
>
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}