72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
import { Trash2 } from 'lucide-react';
|
|
|
|
import { deleteCourse } from '@kit/course-management/actions/course-actions';
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from '@kit/ui/alert-dialog';
|
|
import { Button } from '@kit/ui/button';
|
|
import { useActionWithToast } from '@kit/ui/use-action-with-toast';
|
|
|
|
interface Props {
|
|
courseId: string;
|
|
accountSlug: string;
|
|
}
|
|
|
|
export function DeleteCourseButton({ courseId, accountSlug }: Props) {
|
|
const router = useRouter();
|
|
|
|
const { execute, isPending } = useActionWithToast(deleteCourse, {
|
|
successMessage: 'Kurs wurde abgesagt',
|
|
errorMessage: 'Fehler beim Absagen',
|
|
onSuccess: () => router.push(`/home/${accountSlug}/courses`),
|
|
});
|
|
|
|
return (
|
|
<AlertDialog>
|
|
<AlertDialogTrigger asChild>
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
disabled={isPending}
|
|
data-test="course-cancel-btn"
|
|
>
|
|
<Trash2 className="mr-2 h-4 w-4" />
|
|
Kurs absagen
|
|
</Button>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Kurs absagen?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Der Kurs wird auf den Status "Abgesagt" gesetzt. Diese
|
|
Aktion kann rückgängig gemacht werden.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel data-test="course-cancel-dismiss-btn">
|
|
Abbrechen
|
|
</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
data-test="course-cancel-confirm-btn"
|
|
onClick={() => execute({ courseId })}
|
|
>
|
|
Absagen
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
);
|
|
}
|