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

update: migration from mantine to shadcn in the assessment request management modal form section

Browse Source
This commit is contained in:
falendikategar 2024-11-01 11:09:06 +07:00
parent a056416adb
commit c2a8c64463
1 changed files with 100 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
apps/frontend/src/modules/assessmentRequestManagement/modals/AssessmentRequestManagementFormModal.tsx
View File

@ -1,4 +1,14 @@
import { Button, Flex, Modal, ScrollArea } from "@mantine/core"; import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/shadcn/components/ui/dialog";
import { Button } from "@/shadcn/components/ui/button";
import { ScrollArea } from "@/shadcn/components/ui/scroll-area";
// import { Button, Flex, Modal, ScrollArea } from "@mantine/core";
import { useForm } from "@mantine/form"; import { useForm } from "@mantine/form";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { getRouteApi } from "@tanstack/react-router"; import { getRouteApi } from "@tanstack/react-router";
@ -124,8 +134,13 @@ export default function AssessmentRequestManagementFormModal({
const { status } = form.values; const { status } = form.values;
return ( return (
<Modal opened={isOpen} onClose={onClose} title="Detail Permohonan Asesmen"> <Dialog open={isOpen} onOpenChange={onClose}>
<ScrollArea style={{ height: "400px", paddingRight: "15px" }} scrollbarSize={8}> <DialogContent>
<DialogHeader>
<DialogTitle>Detail Permohonan Asesmen</DialogTitle>
</DialogHeader>
<DialogDescription>
<ScrollArea className="h-[400px] w-full rounded-md p-4">
{createInputComponents({ {createInputComponents({
disableAll: mutation.isPending, disableAll: mutation.isPending,
readonlyAll: true, readonlyAll: true,
@ -183,32 +198,32 @@ export default function AssessmentRequestManagementFormModal({
], ],
})} })}
<Flex justify="flex-end" align="center" gap="lg" mt="lg"> <div className="flex justify-end gap-4 mt-4">
<Button variant="outline" onClick={onClose} disabled={mutation.isPending}> <Button onClick={onClose} variant="outline" disabled={mutation.isPending}>
Tutup Tutup
</Button> </Button>
{status !== "selesai" && ( {status !== "selesai" && (
<> <>
<Button <Button
variant="filled"
color="red"
onClick={() => handleStatusChange("ditolak")} onClick={() => handleStatusChange("ditolak")}
variant="destructive"
disabled={mutation.isPending} disabled={mutation.isPending}
> >
Tolak Tolak
</Button> </Button>
<Button <Button
variant="filled"
color="blue"
onClick={() => handleStatusChange("diterima")} onClick={() => handleStatusChange("diterima")}
variant="default"
disabled={mutation.isPending} disabled={mutation.isPending}
> >
Terima Terima
</Button> </Button>
</> </>
)} )}
</Flex> </div>
</ScrollArea> </ScrollArea>
</Modal> </DialogDescription>
</DialogContent>
</Dialog>
); );
} }