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

add: validation for aspect management form modal

Browse Source
This commit is contained in:
abiyasa05 2024-09-23 13:50:37 +07:00
parent 6416aeb243
commit b0a77bb1f2
1 changed files with 54 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -93,8 +93,14 @@ export default function AspectFormModal() {
const handleSubmit = async (values: typeof form.values) => { const handleSubmit = async (values: typeof form.values) => {
try { try {
// Name field validation
if (values.name.trim() === "") {
form.setErrors({ name: "Nama aspek harus diisi" });
return;
}
let payload: CreateAspectPayload | EditAspectPayload; let payload: CreateAspectPayload | EditAspectPayload;
if (formType === "create") { if (formType === "create") {
payload = { payload = {
name: values.name, name: values.name,
@ -108,6 +114,7 @@ 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,
@ -125,18 +132,30 @@ export default function AspectFormModal() {
}; };
await updateAspect(payload); await updateAspect(payload);
} }
queryClient.invalidateQueries({ queryKey: ["management-aspect"] }); queryClient.invalidateQueries({ queryKey: ["management-aspect"] });
notifications.show({ notifications.show({
message: `Aspek ${formType === "create" ? "berhasil dibuat" : "berhasil diedit"}`, message: `Aspek ${formType === "create" ? "berhasil dibuat" : "berhasil diedit"}`,
}); });
navigate({ search: {} }); navigate({ search: {} });
} catch (error) { } catch (error) {
console.error("Error during submit:", 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.",
color: "red",
});
} else {
notifications.show({
message: "Terjadi kesalahan saat menyimpan aspek.",
color: "red",
});
}
} }
}; };
return ( return (
<Modal <Modal
@ -152,36 +171,39 @@ export default function AspectFormModal() {
label="Nama" label="Nama"
{...form.getInputProps("name")} {...form.getInputProps("name")}
disabled={formType === "detail"} disabled={formType === "detail"}
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"} >
/> Hapus
{formType === "detail" && ( </Button>
<Text>Jumlah Soal: {field.questionCount}</Text> )}
)} </Group>
{formType !== "detail" && (
<Button
variant="outline"
onClick={() => {
const newSubAspects = form.values.subAspects.filter((_, i) => i !== index);
form.setValues({ subAspects: newSubAspects });
}}
>
Hapus
</Button>
)}
</Group>
))} ))}
{formType !== "detail" && ( {formType !== "detail" && (
@ -199,7 +221,7 @@ export default function AspectFormModal() {
Tambah Sub Aspek Tambah Sub Aspek
</Button> </Button>
)} )}
{/* Buttons */} {/* Buttons */}
<Flex justify="flex-end" align="center" gap="lg" mt="lg"> <Flex justify="flex-end" align="center" gap="lg" mt="lg">
<Button <Button
@ -222,5 +244,5 @@ export default function AspectFormModal() {
</Flex> </Flex>
</form> </form>
</Modal> </Modal>
); );
} }