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

update: component modal for delete on aspect, change modal to alert dialog from shadcn

Browse Source
This commit is contained in:
abiyasa05 2024-11-01 13:11:20 +07:00
parent c2a8c64463
commit 01447db007
1 changed files with 81 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
apps/frontend/src/modules/aspectManagement/modals/AspectDeleteModal.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 { deleteAspect } from "../queries/aspectQueries"; import { deleteAspect } from "../queries/aspectQueries";
@ -10,7 +19,6 @@ const routeApi = getRouteApi("/_dashboardLayout/aspect/");
export default function AspectDeleteModal() { export default function AspectDeleteModal() {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const searchParams = useSearch({ from: "/_dashboardLayout/aspect/" }) as { const searchParams = useSearch({ from: "/_dashboardLayout/aspect/" }) as {
delete: string; delete: string;
}; };
@ -24,9 +32,7 @@ export default function AspectDeleteModal() {
if (!aspectId) return null; if (!aspectId) return null;
return await fetchRPC( return await fetchRPC(
client["management-aspect"][":id"].$get({ client["management-aspect"][":id"].$get({
param: { param: { id: aspectId },
id: aspectId,
},
query: {}, query: {},
}) })
); );
@ -60,38 +66,32 @@ export default function AspectDeleteModal() {
const isModalOpen = Boolean(searchParams.delete && aspectQuery.data); const isModalOpen = Boolean(searchParams.delete && aspectQuery.data);
return ( return (
<Modal <AlertDialog open={isModalOpen} onOpenChange={() => navigate({ search: {} })}>
opened={isModalOpen} <AlertDialogContent>
onClose={() => navigate({ search: {} })} <AlertDialogHeader>
title={`Konfirmasi Hapus`} <AlertDialogTitle>Konfirmasi Hapus</AlertDialogTitle>
> <AlertDialogDescription>
<Text size="sm">
Apakah Anda yakin ingin menghapus aspek{" "} Apakah Anda yakin ingin menghapus aspek{" "}
<Text span fw={700}> <strong>{aspectQuery.data?.name}</strong>? Tindakan ini tidak dapat diubah.
{aspectQuery.data?.name} </AlertDialogDescription>
</Text> </AlertDialogHeader>
? Tindakan ini tidak dapat diubah. <AlertDialogFooter>
</Text> <AlertDialogCancel
{/* 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}
> >
Batal Batal
</Button> </AlertDialogCancel>
<Button <Button
variant="subtle" variant="default"
type="submit"
color="red" color="red"
loading={mutation.isPending}
onClick={() => mutation.mutate({ id: aspectId })} onClick={() => mutation.mutate({ id: aspectId })}
disabled={mutation.isPending}
> >
Hapus Aspek {mutation.isPending ? "Hapus..." : "Hapus Aspek"}
</Button> </Button>
</Flex> </AlertDialogFooter>
</Modal> </AlertDialogContent>
</AlertDialog>
); );
} }