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

Pull Request branch dev-clone to main #1

Merged
gitea merged 429 commits from dev-clone into main 2024-12-23 09:31:34 +00:00
Conversation 0 Commits 429 Files Changed 142 +114 -85
1 changed files with 114 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fe6fe48d7e - Show all commits

199
apps/frontend/src/modules/aspectManagement/modals/AspectFormModal.tsx
View File

@ -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 { 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";
import { createAspect, updateAspect, getAspectByIdQueryOptions } from "../queries/aspectQueries"; import { createAspect, updateAspect, getAspectByIdQueryOptions } from "../queries/aspectQueries";
import { TbDeviceFloppy } from "react-icons/tb";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { notifications } from "@mantine/notifications"; import { notifications } from "@mantine/notifications";
import FormResponseError from "@/errors/FormResponseError"; import FormResponseError from "@/errors/FormResponseError";
@ -17,7 +28,7 @@ export default function AspectFormModal() {
const navigate = routeApi.useNavigate(); const navigate = routeApi.useNavigate();
const searchParams = routeApi.useSearch(); const searchParams = routeApi.useSearch();
const dataId = searchParams.detail || searchParams.edit; 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"; const formType = searchParams.detail ? "detail" : searchParams.edit ? "edit" : "create";
// Fetch aspect data if editing or viewing details // Fetch aspect data if editing or viewing details
@ -93,7 +104,11 @@ export default function AspectFormModal() {
const [isSubmitting, setIsSubmitting] = useState(false); 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 { try {
// Start submit process // Start submit process
setIsSubmitting(true); setIsSubmitting(true);
@ -165,89 +180,103 @@ export default function AspectFormModal() {
}; };
return ( 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>
<TextInput
type="text"
label="Nama"
{...form.getInputProps("name")}
disabled={formType === "detail" || isSubmitting}
error={form.errors.name}
/>
{form.values.subAspects.map((field, index) => ( <ScrollArea className="h-[300px] p-4">
<Group key={index} mt="md" align="center"> <form onSubmit={handleSubmit}>
<TextInput <div className="grid gap-4">
type="text" <div className="mb-4">
label={`Sub Aspek ${index + 1}`} <Label htmlFor="name" className="block text-left mb-1">Nama Aspek</Label>
value={field.name} <TextInput
onChange={(event) => { id="name"
const newSubAspects = [...form.values.subAspects]; type="text"
newSubAspects[index] = { ...newSubAspects[index], name: event.target.value }; {...form.getInputProps("name")}
form.setValues({ subAspects: newSubAspects }); disabled={formType === "detail" || isSubmitting}
}} error={form.errors.name}
disabled={formType === "detail" || isSubmitting} />
style={{ flex: 1 }} </div>
/>
{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>
))}
{formType !== "detail" && ( {form.values.subAspects.map((subAspect, index) => (
<Button <div className="flex justify-between items-center mb-4" key={subAspect.id}>
variant="outline" <div className="flex-grow">
mt="md" <Label htmlFor={`subAspect-${index}`} className="block text-left mb-1">
onClick={() => { Sub Aspek {index + 1}
const newSubAspects = [ </Label>
...form.values.subAspects, <TextInput
{ id: createId(), name: "", questionCount: 0 } id={`subAspect-${index}`}
]; value={subAspect.name}
form.setValues({ subAspects: newSubAspects }); onChange={(event) => {
}} if (formType !== "detail" && !mutation.isPending) {
> const newSubAspects = [...form.values.subAspects];
Tambah Sub Aspek newSubAspects[index] = { ...newSubAspects[index], name: event.target.value };
</Button> 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 */} {formType !== "detail" && (
<Flex justify="flex-end" align="center" gap="lg" mt="lg"> <Button className="mb-4"
<Button variant="outline"
variant="outline" onClick={(e) => {
onClick={() => navigate({ search: {} })} e.preventDefault();
disabled={isSubmitting} const newSubAspects = [
> ...form.values.subAspects,
Tutup { id: createId(), name: "", questionCount: 0 }
</Button> ];
{formType !== "detail" && ( form.setValues({ subAspects: newSubAspects });
<Button }}
variant="filled" >
leftSection={<TbDeviceFloppy size={20} />} Tambah Sub Aspek
type="submit" </Button>
loading={isSubmitting} )}
> </div>
Simpan <AlertDialogFooter>
</Button> <AlertDialogCancel disabled={isSubmitting}>Tutup</AlertDialogCancel>
)} {formType !== "detail" && (
</Flex> <Button type="submit" disabled={isSubmitting}>
</form> {isSubmitting ? "Menyimpan..." : modalTitle}
</Modal> </Button>
)}
</AlertDialogFooter>
</form>
</ScrollArea>
</AlertDialogContent>
</AlertDialog>
); );
} }