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

89
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 { createAspect, updateAspect, getAspectByIdQueryOptions } from "../queries/aspectQueries";
import { TbDeviceFloppy } from "react-icons/tb";
import { useEffect } from "react";
import { useEffect, useState } from "react";
import { notifications } from "@mantine/notifications";
import FormResponseError from "@/errors/FormResponseError";
import { createId } from "@paralleldrive/cuid2";
@ -91,16 +91,22 @@ export default function AspectFormModal() {
subAspects?: string;
};
const [isSubmitting, setIsSubmitting] = useState(false);
const handleSubmit = async (values: typeof form.values) => {
try {
// Start submit process
setIsSubmitting(true);
// Name field validation
if (values.name.trim() === "") {
form.setErrors({ name: "Nama aspek harus diisi" });
setIsSubmitting(false);
return;
}
let payload: CreateAspectPayload | EditAspectPayload;
if (formType === "create") {
payload = {
name: values.name,
@ -114,7 +120,6 @@ export default function AspectFormModal() {
};
await createAspect(payload);
} else if (formType === "edit") {
// Add validation for aspect name here
payload = {
id: values.id,
name: values.name,
@ -132,17 +137,17 @@ export default function AspectFormModal() {
};
await updateAspect(payload);
}
queryClient.invalidateQueries({ queryKey: ["management-aspect"] });
notifications.show({
message: `Aspek ${formType === "create" ? "berhasil dibuat" : "berhasil diedit"}`,
});
navigate({ search: {} });
} catch (error) {
console.error("Error during submit:", error);
if (error instanceof Error && error.message === "Aspect name already exists") {
notifications.show({
message: "Nama aspek sudah ada. Silakan gunakan nama lain.",
@ -154,8 +159,10 @@ export default function AspectFormModal() {
color: "red",
});
}
} finally {
setIsSubmitting(false);
}
};
};
return (
<Modal
@ -165,45 +172,43 @@ export default function AspectFormModal() {
scrollAreaComponent={ScrollArea.Autosize}
size="md"
>
<form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
<form onSubmit={formType !== "detail" ? form.onSubmit(handleSubmit) : undefined}>
<TextInput
type="text"
label="Nama"
{...form.getInputProps("name")}
disabled={formType === "detail"}
disabled={formType === "detail" || isSubmitting}
error={form.errors.name}
/>
{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"}
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);
<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 });
}}
>
Hapus
</Button>
)}
</Group>
disabled={formType === "detail" || isSubmitting}
style={{ flex: 1 }}
/>
{formType === "detail" ? (
<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" && (
@ -221,13 +226,13 @@ export default function AspectFormModal() {
Tambah Sub Aspek
</Button>
)}
{/* Buttons */}
<Flex justify="flex-end" align="center" gap="lg" mt="lg">
<Button
variant="outline"
onClick={() => navigate({ search: {} })}
disabled={mutation.isPending}
disabled={isSubmitting}
>
Tutup
</Button>
@ -236,7 +241,7 @@ export default function AspectFormModal() {
variant="filled"
leftSection={<TbDeviceFloppy size={20} />}
type="submit"
loading={mutation.isPending}
loading={isSubmitting}
>
Simpan
</Button>
@ -244,5 +249,5 @@ export default function AspectFormModal() {
</Flex>
</form>
</Modal>
);
);
}