From 046def0ae497fd27df160e55384da45d8f0497e3 Mon Sep 17 00:00:00 2001
From: falendikategar <falendikapratama@gmail.com>
Date: Tue, 8 Oct 2024 10:01:19 +0700
Subject: [PATCH] update: adding validation to the modal form

---
 .../modals/QuestionFormModal.tsx              | 42 ++++++++++++++-----
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/apps/frontend/src/modules/questionsManagement/modals/QuestionFormModal.tsx b/apps/frontend/src/modules/questionsManagement/modals/QuestionFormModal.tsx
index 73355c0..ed7650f 100644
--- a/apps/frontend/src/modules/questionsManagement/modals/QuestionFormModal.tsx
+++ b/apps/frontend/src/modules/questionsManagement/modals/QuestionFormModal.tsx
@@ -25,9 +25,6 @@ import {
   fetchSubAspects,
 } from "../queries/questionQueries";
 
-/**
- * Change this
- */
 const routeApi = getRouteApi("/_dashboardLayout/questions/");
 
 interface Option {
@@ -41,15 +38,15 @@ interface CreateQuestionPayload {
   subAspectId: string;
   question: string;
   needFile: boolean;
-  options: Option[];     // Array of options (text and score)
+  options: Option[];
 }
 
 interface UpdateQuestionPayload {
-	id: string;           // The ID of the question to update
+	id: string;
 	subAspectId: string;
 	question: string;
 	needFile: boolean;
-	options?: Option[];   // Optional array of options (text and score)
+	options?: Option[];
 }
 
 export default function QuestionFormModal() {
@@ -71,6 +68,15 @@ export default function QuestionFormModal() {
       subAspectId: "",
       options: [] as { id: string; text: string; score: number; questionId: string }[],
     },
+    validate: {
+      aspectId: (value) => (value ? null : "Nama Aspek harus dipilih."),
+      subAspectId: (value) => (value ? null : "Nama Sub Aspek harus dipilih."),
+      question: (value) => (value ? null : "Pertanyaan tidak boleh kosong."),
+      options: {
+        text: (value) => (value ? null : "Jawaban tidak boleh kosong."),
+        score: (value) => (value >= 0 ? null : "Skor harus diisi dengan angka."),
+      },
+    },
   });
 
   // Fetch aspects and sub-aspects
@@ -148,7 +154,7 @@ export default function QuestionFormModal() {
       needFile: values.needFile,
       subAspectId: values.subAspectId,
       options: values.options.map((option) => ({
-        questionId: values.id || "", // Ensure questionId is included
+        questionId: values.id || "",
         text: option.text,
         score: option.score,
       })),
@@ -214,12 +220,14 @@ export default function QuestionFormModal() {
               : {
                   type: "select",
                   label: "Nama Aspek",
+                  placeholder: "Pilih Aspek",
                   data: aspectsQuery.data?.map((aspect) => ({
                     value: aspect.id,
                     label: aspect.name,
                   })) || [],
                   disabled: mutation.isPending,
                   ...form.getInputProps("aspectId"),
+                  required: true,
                 },
             formType === "detail"
               ? {
@@ -231,16 +239,19 @@ export default function QuestionFormModal() {
               : {
                   type: "select",
                   label: "Nama Sub Aspek",
+                  placeholder: "Pilih Sub Aspek",
                   data: filteredSubAspects.map((subAspect) => ({
                     value: subAspect.id,
                     label: subAspect.name,
                   })),
                   disabled: mutation.isPending,
                   ...form.getInputProps("subAspectId"),
+                  required: true,
                 },
             {
               type: "textarea",
               label: "Pertanyaan",
+              placeholder: "Tulis Pertanyaan",
               ...form.getInputProps("question"),
             },
             formType === "detail"
@@ -251,10 +262,17 @@ export default function QuestionFormModal() {
                   value: form.values.needFile ? "Ya" : "Tidak",
                 }
               : {
-                  type: "checkbox",
+                  type: "select",
                   label: "Dibutuhkan Upload File?",
-                  checked: form.values.needFile,
-                  ...form.getInputProps("needFile"),
+                  placeholder: "Pilih opsi",
+                  data: [
+                    { value: "true", label: "Ya" },
+                    { value: "false", label: "Tidak" },
+                  ],
+                  value: form.values.needFile ? "true" : "false",
+                  onChange: (value) => form.setFieldValue("needFile", value === "true"),
+                  disabled: mutation.isPending,
+                  required: true,
                 },
           ],
         })}
@@ -274,6 +292,10 @@ export default function QuestionFormModal() {
                 label="Skor"
                 placeholder="Skor"
                 readOnly={formType === "detail"}
+                min={0}
+                max={999}
+                allowDecimal={false}
+                allowNegative={false}
                 {...form.getInputProps(`options.${index}.score`)}
                 required
               />