apps/frontend/src/modules/aspectManagement/modals/AspectFormModal.tsx

@@ -1,9 +1,20 @@
-import { Button, Flex, Modal, ScrollArea, TextInput, Group, Text } from "@mantine/core";
+import {
+    AlertDialog,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/shadcn/components/ui/alert-dialog";
+import { ScrollArea } from "@/shadcn/components/ui/scroll-area";
+import { Button } from "@/shadcn/components/ui/button";
+import { TextInput } from "@mantine/core";
+import { Label } from "@/shadcn/components/ui/label";
 import { useForm } from "@mantine/form";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { getRouteApi } from "@tanstack/react-router";
 import { createAspect, updateAspect, getAspectByIdQueryOptions } from "../queries/aspectQueries";
-import { TbDeviceFloppy } from "react-icons/tb";
 import { useEffect, useState } from "react";
 import { notifications } from "@mantine/notifications";
 import FormResponseError from "@/errors/FormResponseError";
@@ -17,7 +28,7 @@ export default function AspectFormModal() {
     const navigate = routeApi.useNavigate();
     const searchParams = routeApi.useSearch();
     const dataId = searchParams.detail || searchParams.edit;
-    const isModalOpen = Boolean(dataId || searchParams.create);
+    const isDialogOpen = Boolean(dataId || searchParams.create);
     const formType = searchParams.detail ? "detail" : searchParams.edit ? "edit" : "create";
 
     // Fetch aspect data if editing or viewing details
@@ -93,7 +104,11 @@ export default function AspectFormModal() {
 
     const [isSubmitting, setIsSubmitting] = useState(false);
 
-    const handleSubmit = async (values: typeof form.values) => {
+    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+
+        const values = form.values;
+
         try {
             // Start submit process
             setIsSubmitting(true);
@@ -165,57 +180,81 @@ export default function AspectFormModal() {
     };
 
     return (
-        <Modal
+        <AlertDialog open={isDialogOpen} onOpenChange={isOpen => !isOpen && navigate({ search: {} })}>
-            opened={isModalOpen}
+            <AlertDialogContent className="max-h-[80vh] overflow-hidden">
-            onClose={() => navigate({ search: {} })}
+                <AlertDialogHeader>
-            title={modalTitle}
+                    <AlertDialogTitle>{modalTitle}</AlertDialogTitle>
-            scrollAreaComponent={ScrollArea.Autosize}
+                    <AlertDialogDescription>
-            size="md"
+                        {formType === "detail" ? "Detail dari aspek." : "Silakan isi data aspek di bawah ini."}
-        >
+                    </AlertDialogDescription>
-            <form onSubmit={formType !== "detail" ? form.onSubmit(handleSubmit) : undefined}>
+                </AlertDialogHeader>
+
+                <ScrollArea className="h-[300px] p-4">
+                    <form onSubmit={handleSubmit}>
+                        <div className="grid gap-4">
+                            <div className="mb-4">
+                                <Label htmlFor="name" className="block text-left mb-1">Nama Aspek</Label>
                                 <TextInput
+                                    id="name"
                                     type="text"
-                    label="Nama"
                                     {...form.getInputProps("name")}
                                     disabled={formType === "detail" || isSubmitting}
                                     error={form.errors.name}
                                 />
+                            </div>
 
-                {form.values.subAspects.map((field, index) => (
+                            {form.values.subAspects.map((subAspect, index) => (
-                    <Group key={index} mt="md" align="center">
+                                <div className="flex justify-between items-center mb-4" key={subAspect.id}>
+                                    <div className="flex-grow">
+                                        <Label htmlFor={`subAspect-${index}`} className="block text-left mb-1">
+                                            Sub Aspek {index + 1}
+                                        </Label>
                                         <TextInput
-                            type="text"
+                                            id={`subAspect-${index}`}
-                            label={`Sub Aspek ${index + 1}`}
+                                            value={subAspect.name}
-                            value={field.name}
                                             onChange={(event) => {
+                                                if (formType !== "detail" && !mutation.isPending) {
                                                     const newSubAspects = [...form.values.subAspects];
                                                     newSubAspects[index] = { ...newSubAspects[index], name: event.target.value };
                                                     form.setValues({ subAspects: newSubAspects });
+                                                }
                                             }}
                                             disabled={formType === "detail" || isSubmitting}
-                            style={{ flex: 1 }}
                                         />
-                        {formType === "detail" ? (
+                                    </div>
-                            <Text>Jumlah Soal: {field.questionCount}</Text>
+                                    {formType === "detail" && (
-                        ) : (
+                                        <div className="ml-4 flex-shrink-0">
-                            <Button className="mt-6"
+                                            <Label className="block text-left mb-1">Jumlah Soal</Label>
+                                            <TextInput
+                                                value={subAspect.questionCount}
+                                                readOnly
+                                                className="w-full"
+                                                disabled
+                                            />
+                                        </div>
+                                    )}
+                                    {formType !== "detail" && (
+                                        <Button
+                                            className="ml-4 mt-4"
                                             variant="outline"
-                                onClick={() => {
+                                            onClick={(e) => {
+                                                e.preventDefault();
                                                 const newSubAspects = form.values.subAspects.filter((_, i) => i !== index);
                                                 form.setValues({ subAspects: newSubAspects });
                                             }}
+                                            disabled={isSubmitting}
                                         >
                                             Hapus
                                         </Button>
                                     )}
-                    </Group>
+                                </div>
                             ))}
 
                             {formType !== "detail" && (
-                    <Button
+                                <Button className="mb-4"
                                     variant="outline"
-                        mt="md"
+                                    onClick={(e) => {
-                        onClick={() => {
+                                        e.preventDefault();
                                         const newSubAspects = [
                                             ...form.values.subAspects,
                                             { id: createId(), name: "", questionCount: 0 }
@@ -226,28 +265,18 @@ export default function AspectFormModal() {
                                     Tambah Sub Aspek
                                 </Button>
                             )}
-
+                        </div>
-                {/* Buttons */}
+                        <AlertDialogFooter>
-                <Flex justify="flex-end" align="center" gap="lg" mt="lg">
+                            <AlertDialogCancel disabled={isSubmitting}>Tutup</AlertDialogCancel>
-                    <Button
-                        variant="outline"
-                        onClick={() => navigate({ search: {} })}
-                        disabled={isSubmitting}
-                    >
-                        Tutup
-                    </Button>
                             {formType !== "detail" && (
-                        <Button
+                                <Button type="submit" disabled={isSubmitting}>
-                            variant="filled"
+                                    {isSubmitting ? "Menyimpan..." : modalTitle}
-                            leftSection={<TbDeviceFloppy size={20} />}
-                            type="submit"
-                            loading={isSubmitting}
-                        >
-                            Simpan
                                 </Button>
                             )}
-                </Flex>
+                        </AlertDialogFooter>
                     </form>
-        </Modal>
+                </ScrollArea>
+            </AlertDialogContent>
+        </AlertDialog>
     );
 }