From fe6fe48d7ed54cf903a2c20610c3c027fde9fb2d Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Fri, 1 Nov 2024 13:13:26 +0700
Subject: [PATCH] update: change form modal aspect using component dialog from
 shadcn

---
 .../modals/AspectFormModal.tsx                | 199 ++++++++++--------
 1 file changed, 114 insertions(+), 85 deletions(-)

diff --git a/apps/frontend/src/modules/aspectManagement/modals/AspectFormModal.tsx b/apps/frontend/src/modules/aspectManagement/modals/AspectFormModal.tsx
index 101b17f..db4b420 100644
--- a/apps/frontend/src/modules/aspectManagement/modals/AspectFormModal.tsx
+++ b/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,89 +180,103 @@ export default function AspectFormModal() {
     };
 
     return (
-        <Modal
-            opened={isModalOpen}
-            onClose={() => navigate({ search: {} })}
-            title={modalTitle}
-            scrollAreaComponent={ScrollArea.Autosize}
-            size="md"
-        >
-            <form onSubmit={formType !== "detail" ? form.onSubmit(handleSubmit) : undefined}>
-                <TextInput
-                    type="text"
-                    label="Nama"
-                    {...form.getInputProps("name")}
-                    disabled={formType === "detail" || isSubmitting}
-                    error={form.errors.name}
-                />
+        <AlertDialog open={isDialogOpen} onOpenChange={isOpen => !isOpen && navigate({ search: {} })}>
+            <AlertDialogContent className="max-h-[80vh] overflow-hidden">
+                <AlertDialogHeader>
+                    <AlertDialogTitle>{modalTitle}</AlertDialogTitle>
+                    <AlertDialogDescription>
+                        {formType === "detail" ? "Detail dari aspek." : "Silakan isi data aspek di bawah ini."}
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
 
-                {form.values.subAspects.map((field, index) => (
-                    <Group key={index} mt="md" align="center">
-                        <TextInput
-                            type="text"
-                            label={`Sub Aspek ${index + 1}`}
-                            value={field.name}
-                            onChange={(event) => {
-                                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" ? (
-                            <Text>Jumlah Soal: {field.questionCount}</Text>
-                        ) : (
-                            <Button className="mt-6"
-                                variant="outline"
-                                onClick={() => {
-                                    const newSubAspects = form.values.subAspects.filter((_, i) => i !== index);
-                                    form.setValues({ subAspects: newSubAspects });
-                                }}
-                            >
-                                Hapus
-                            </Button>
-                        )}
-                    </Group>
-                ))}
+                <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"
+                                    {...form.getInputProps("name")}
+                                    disabled={formType === "detail" || isSubmitting}
+                                    error={form.errors.name}
+                                />
+                            </div>
 
-                {formType !== "detail" && (
-                    <Button
-                        variant="outline"
-                        mt="md"
-                        onClick={() => {
-                            const newSubAspects = [
-                                ...form.values.subAspects,
-                                { id: createId(), name: "", questionCount: 0 }
-                            ];
-                            form.setValues({ subAspects: newSubAspects });
-                        }}
-                    >
-                        Tambah Sub Aspek
-                    </Button>
-                )}
+                            {form.values.subAspects.map((subAspect, index) => (
+                                <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
+                                            id={`subAspect-${index}`}
+                                            value={subAspect.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}
+                                        />
+                                    </div>
+                                    {formType === "detail" && (
+                                        <div className="ml-4 flex-shrink-0">
+                                            <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={(e) => {
+                                                e.preventDefault();
+                                                const newSubAspects = form.values.subAspects.filter((_, i) => i !== index);
+                                                form.setValues({ subAspects: newSubAspects });
+                                            }}
+                                            disabled={isSubmitting}
+                                        >
+                                            Hapus
+                                        </Button>
+                                    )}
+                                </div>
+                            ))}
 
-                {/* Buttons */}
-                <Flex justify="flex-end" align="center" gap="lg" mt="lg">
-                    <Button
-                        variant="outline"
-                        onClick={() => navigate({ search: {} })}
-                        disabled={isSubmitting}
-                    >
-                        Tutup
-                    </Button>
-                    {formType !== "detail" && (
-                        <Button
-                            variant="filled"
-                            leftSection={<TbDeviceFloppy size={20} />}
-                            type="submit"
-                            loading={isSubmitting}
-                        >
-                            Simpan
-                        </Button>
-                    )}
-                </Flex>
-            </form>
-        </Modal>
+                            {formType !== "detail" && (
+                                <Button className="mb-4"
+                                    variant="outline"
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        const newSubAspects = [
+                                            ...form.values.subAspects,
+                                            { id: createId(), name: "", questionCount: 0 }
+                                        ];
+                                        form.setValues({ subAspects: newSubAspects });
+                                    }}
+                                >
+                                    Tambah Sub Aspek
+                                </Button>
+                            )}
+                        </div>
+                        <AlertDialogFooter>
+                            <AlertDialogCancel disabled={isSubmitting}>Tutup</AlertDialogCancel>
+                            {formType !== "detail" && (
+                                <Button type="submit" disabled={isSubmitting}>
+                                    {isSubmitting ? "Menyimpan..." : modalTitle}
+                                </Button>
+                            )}
+                        </AlertDialogFooter>
+                    </form>
+                </ScrollArea>
+            </AlertDialogContent>
+        </AlertDialog>
     );
 }
\ No newline at end of file