update: change form modal aspect using component dialog from shadcn
This commit is contained in:
parent
91cd8c2fba
commit
fe6fe48d7e
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user