gitea/amati
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: change of delete modal from mantine to shadcn

Browse Source
This commit is contained in:
falendikategar 2024-11-05 15:24:35 +07:00
parent b8938cbee8
commit f097609889
1 changed files with 35 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
apps/frontend/src/modules/questionsManagement/modals/QuestionDeleteModal.tsx
View File

@ -1,5 +1,14 @@
import client from "@/honoClient"; import client from "@/honoClient";
import { Button, Flex, Modal, Text } from "@mantine/core"; import {
AlertDialog,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/shadcn/components/ui/alert-dialog";
import { Button } from "@/shadcn/components/ui/button";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { getRouteApi, useSearch } from "@tanstack/react-router"; import { getRouteApi, useSearch } from "@tanstack/react-router";
import { deleteQuestion } from "../queries/questionQueries"; import { deleteQuestion } from "../queries/questionQueries";
@ -60,40 +69,30 @@ export default function QuestionDeleteModal() {
const isModalOpen = Boolean(searchParams.delete && questionQuery.data); const isModalOpen = Boolean(searchParams.delete && questionQuery.data);
return ( return (
<Modal <AlertDialog open={isModalOpen} onOpenChange={() => navigate({ search: {} })}>
opened={isModalOpen} <AlertDialogContent>
onClose={() => navigate({ search: {} })} <AlertDialogHeader>
title={`Delete confirmation`} <AlertDialogTitle>Konfirmasi Hapus</AlertDialogTitle>
> <AlertDialogDescription>
<Text size="sm"> Apakah Anda yakin ingin menghapus pertanyaan ini? Tindakan ini tidak dapat diubah.
Are you sure you want to delete question{" "} </AlertDialogDescription>
<Text span fw={700}> </AlertDialogHeader>
"{questionQuery.data?.question}" <AlertDialogFooter>
</Text> <AlertDialogCancel
{" "}? This action is irreversible.
</Text>
{/* {errorMessage && <Alert color="red">{errorMessage}</Alert>} */}
{/* Buttons */}
<Flex justify="flex-end" align="center" gap="lg" mt="lg">
<Button
variant="outline"
onClick={() => navigate({ search: {} })} onClick={() => navigate({ search: {} })}
disabled={mutation.isPending} disabled={mutation.isPending}
> >
Cancel Batal
</Button> </AlertDialogCancel>
<Button <Button
variant="subtle" variant="destructive"
// leftSection={<TbDeviceFloppy size={20} />}
type="submit"
color="red"
loading={mutation.isPending}
onClick={() => mutation.mutate({ id: questionId })} onClick={() => mutation.mutate({ id: questionId })}
disabled={mutation.isPending}
> >
Delete Question {mutation.isPending ? "Menghapus..." : "Hapus Pertanyaan"}
</Button> </Button>
</Flex> </AlertDialogFooter>
</Modal> </AlertDialogContent>
</AlertDialog>
); );
} }