145 lines
4.2 KiB
TypeScript
145 lines
4.2 KiB
TypeScript
import { getClient } from "@/api/AxiosClient";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { toast } from "@/components/ui/use-toast";
|
|
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
|
|
import { DotsHorizontalIcon, ReloadIcon } from "@radix-ui/react-icons";
|
|
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import { useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
type Props = {
|
|
workflowId: string;
|
|
title: string;
|
|
description: string;
|
|
url: string;
|
|
};
|
|
|
|
function SavedTaskCard({ workflowId, title, url, description }: Props) {
|
|
const [open, setOpen] = useState(false);
|
|
const credentialGetter = useCredentialGetter();
|
|
const queryClient = useQueryClient();
|
|
const navigate = useNavigate();
|
|
|
|
const deleteTaskMutation = useMutation({
|
|
mutationFn: async (id: string) => {
|
|
const client = await getClient(credentialGetter);
|
|
return client
|
|
.delete(`/workflows/${id}`)
|
|
.then((response) => response.data);
|
|
},
|
|
onError: (error) => {
|
|
toast({
|
|
variant: "destructive",
|
|
title: "There was an error while deleting the template",
|
|
description: error.message,
|
|
});
|
|
setOpen(false);
|
|
},
|
|
onSuccess: () => {
|
|
toast({
|
|
title: "Template deleted",
|
|
description: "Template deleted successfully",
|
|
});
|
|
queryClient.invalidateQueries({
|
|
queryKey: ["savedTasks"],
|
|
});
|
|
setOpen(false);
|
|
navigate("/create");
|
|
},
|
|
});
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center justify-between">
|
|
<span className="overflow-hidden text-ellipsis whitespace-nowrap">
|
|
{title}
|
|
</span>
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<DotsHorizontalIcon className="cursor-pointer" />
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56">
|
|
<DropdownMenuLabel>Template Actions</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DialogTrigger asChild>
|
|
<DropdownMenuItem
|
|
onSelect={() => {
|
|
setOpen(true);
|
|
}}
|
|
>
|
|
Delete Template
|
|
</DropdownMenuItem>
|
|
</DialogTrigger>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Are you absolutely sure?</DialogTitle>
|
|
<DialogDescription>
|
|
Are you sure you want to delete this task template?
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button variant="secondary" onClick={() => setOpen(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={() => {
|
|
deleteTaskMutation.mutate(workflowId);
|
|
}}
|
|
disabled={deleteTaskMutation.isPending}
|
|
>
|
|
{deleteTaskMutation.isPending && (
|
|
<ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
|
|
)}
|
|
Delete
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</CardTitle>
|
|
<CardDescription className="overflow-hidden text-ellipsis whitespace-nowrap">
|
|
{url}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent
|
|
className="h-48 cursor-pointer overflow-scroll hover:bg-muted/40"
|
|
onClick={() => {
|
|
navigate(workflowId);
|
|
}}
|
|
>
|
|
{description}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export { SavedTaskCard };
|