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

update: add the text input to disable after submit

Browse Source
This commit is contained in:
abiyasa05 2024-10-29 15:28:26 +07:00
parent 2248cc9a60
commit d223595f74
1 changed files with 47 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,7 @@ 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 { TbDeviceFloppy } from "react-icons/tb";
import { useEffect } 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";
import { createId } from "@paralleldrive/cuid2"; import { createId } from "@paralleldrive/cuid2";
@ -91,11 +91,17 @@ export default function AspectFormModal() {
subAspects?: string; subAspects?: string;
}; };
const [isSubmitting, setIsSubmitting] = useState(false);
const handleSubmit = async (values: typeof form.values) => { const handleSubmit = async (values: typeof form.values) => {
try { try {
// Start submit process
setIsSubmitting(true);
// Name field validation // Name field validation
if (values.name.trim() === "") { if (values.name.trim() === "") {
form.setErrors({ name: "Nama aspek harus diisi" }); form.setErrors({ name: "Nama aspek harus diisi" });
setIsSubmitting(false);
return; return;
} }
@ -114,7 +120,6 @@ export default function AspectFormModal() {
}; };
await createAspect(payload); await createAspect(payload);
} else if (formType === "edit") { } else if (formType === "edit") {
// Add validation for aspect name here
payload = { payload = {
id: values.id, id: values.id,
name: values.name, name: values.name,
@ -154,6 +159,8 @@ export default function AspectFormModal() {
color: "red", color: "red",
}); });
} }
} finally {
setIsSubmitting(false);
} }
}; };
@ -165,45 +172,43 @@ export default function AspectFormModal() {
scrollAreaComponent={ScrollArea.Autosize} scrollAreaComponent={ScrollArea.Autosize}
size="md" size="md"
> >
<form onSubmit={form.onSubmit((values) => handleSubmit(values))}> <form onSubmit={formType !== "detail" ? form.onSubmit(handleSubmit) : undefined}>
<TextInput <TextInput
type="text" type="text"
label="Nama" label="Nama"
{...form.getInputProps("name")} {...form.getInputProps("name")}
disabled={formType === "detail"} disabled={formType === "detail" || isSubmitting}
error={form.errors.name} error={form.errors.name}
/> />
{form.values.subAspects.map((field, index) => ( {form.values.subAspects.map((field, index) => (
<Group key={index} mt="md" align="center"> <Group key={index} mt="md" align="center">
<TextInput <TextInput
type="text" type="text"
label={`Sub Aspek ${index + 1}`} label={`Sub Aspek ${index + 1}`}
value={field.name} value={field.name}
onChange={(event) => { onChange={(event) => {
const newSubAspects = [...form.values.subAspects]; const newSubAspects = [...form.values.subAspects];
newSubAspects[index] = { ...newSubAspects[index], name: event.target.value }; newSubAspects[index] = { ...newSubAspects[index], name: event.target.value };
form.setValues({ subAspects: newSubAspects });
}}
disabled={formType === "detail"}
style={{ flex: 1 }}
/>
{formType === "detail" && (
<Text>Jumlah Soal: {field.questionCount}</Text>
)}
{formType !== "detail" && (
<Button
className="mt-6"
variant="outline"
onClick={() => {
const newSubAspects = form.values.subAspects.filter((_, i) => i !== index);
form.setValues({ subAspects: newSubAspects }); form.setValues({ subAspects: newSubAspects });
}} }}
> disabled={formType === "detail" || isSubmitting}
Hapus style={{ flex: 1 }}
</Button> />
)} {formType === "detail" ? (
</Group> <Text>Jumlah Soal: {field.questionCount}</Text>
) : (
<Button
variant="outline"
onClick={() => {
const newSubAspects = form.values.subAspects.filter((_, i) => i !== index);
form.setValues({ subAspects: newSubAspects });
}}
>
Hapus
</Button>
)}
</Group>
))} ))}
{formType !== "detail" && ( {formType !== "detail" && (
@ -227,7 +232,7 @@ export default function AspectFormModal() {
<Button <Button
variant="outline" variant="outline"
onClick={() => navigate({ search: {} })} onClick={() => navigate({ search: {} })}
disabled={mutation.isPending} disabled={isSubmitting}
> >
Tutup Tutup
</Button> </Button>
@ -236,7 +241,7 @@ export default function AspectFormModal() {
variant="filled" variant="filled"
leftSection={<TbDeviceFloppy size={20} />} leftSection={<TbDeviceFloppy size={20} />}
type="submit" type="submit"
loading={mutation.isPending} loading={isSubmitting}
> >
Simpan Simpan
</Button> </Button>