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

71
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. onClick={() => navigate({ search: {} })}
</Text> disabled={mutation.isPending}
>
{/* {errorMessage && <Alert color="red">{errorMessage}</Alert>} */} Batal
{/* Buttons */} </AlertDialogCancel>
<Flex justify="flex-end" align="center" gap="lg" mt="lg"> <Button
<Button variant="destructive"
variant="outline" onClick={() => mutation.mutate({ id: questionId })}
onClick={() => navigate({ search: {} })} disabled={mutation.isPending}
disabled={mutation.isPending} >
> {mutation.isPending ? "Menghapus..." : "Hapus Pertanyaan"}
Cancel </Button>
</Button> </AlertDialogFooter>
<Button </AlertDialogContent>
variant="subtle" </AlertDialog>
// leftSection={<TbDeviceFloppy size={20} />}
type="submit"
color="red"
loading={mutation.isPending}
onClick={() => mutation.mutate({ id: questionId })}
>
Delete Question
</Button>
</Flex>
</Modal>
); );
} }