From 8122fa10a504031e67c7b6c1823bd40308636f0d Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Wed, 23 Oct 2024 14:09:48 +0700
Subject: [PATCH] update: index lazy for validation question on assesment

---
 .../assessment/index.lazy.tsx                 | 89 +++++++++++++++----
 1 file changed, 73 insertions(+), 16 deletions(-)

diff --git a/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx b/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
index 260dd75..d4d86c7 100644
--- a/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
+++ b/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
@@ -25,8 +25,8 @@ import {
 } from "@/modules/assessmentManagement/queries/assessmentQueries";
 import { TbFlagFilled, TbUpload, TbChevronRight, TbChevronUp } from "react-icons/tb";
 import FinishAssessmentModal from "@/modules/assessmentManagement/modals/ConfirmModal";
+import ValidationModal from "@/modules/assessmentManagement/modals/ValidationModal";
 import { useState, useRef, useEffect } from "react";
-import AppHeader from "@/components/AppHeader";
 
 const getQueryParam = (param: string) => {
   const urlParams = new URLSearchParams(window.location.search);
@@ -68,6 +68,8 @@ export default function AssessmentPage() {
   const [answers, setAnswers] = useState<{ [key: string]: string }>({});
   const [validationInformation, setValidationInformation] = useState<{ [key: string]: string }>({});
   const [uploadedFiles, setUploadedFiles] = useState<{ [key: string]: File | null }>({});
+  const [unansweredQuestions, setUnansweredQuestions] = useState(0);
+  const [validationModalOpen, setValidationModalOpen] = useState(false);
 
   // Fetch aspects and sub-aspects
   const aspectsQuery = useQuery({
@@ -80,10 +82,34 @@ export default function AssessmentPage() {
     getQuestionsAllQueryOptions(page, limit)
   );
 
-  const handleFinishClick = () => {
-    setModalOpen(true);
+  // const handleFinishClick = () => {
+  //   setModalOpen(true);
+  // };
+
+  // Fungsi untuk memeriksa pertanyaan yang belum dijawab
+  const checkUnansweredQuestions = () => {
+    // Misalkan data berisi pertanyaan dan jawaban
+    const unanswered = data?.data.filter(question => {
+        // Pastikan questionId tidak null dan tidak ada jawaban untuk questionId tersebut
+        return question.questionId !== null && !answers[question.questionId];
+    }) || []; // Ganti question.id dengan question.questionId dan tambahkan pengecekan null
+    setUnansweredQuestions(unanswered.length); // Aman, karena unanswered selalu array
+
+    // Jika ada pertanyaan yang belum dijawab, buka modal peringatan
+    if (unanswered.length > 0) {
+        setValidationModalOpen(true);
+    } else {
+        setModalOpen(true); // Jika tidak ada, buka modal konfirmasi selesai asesmen
+    }
   };
 
+  const handleFinishClick = () => {
+    // Memanggil fungsi untuk memeriksa pertanyaan yang belum dijawab
+    checkUnansweredQuestions();
+  };
+
+
+
   useEffect(() => {
     const id = getQueryParam("id");
   
@@ -133,21 +159,45 @@ export default function AssessmentPage() {
 
   const handleConfirmFinish = async (assessmentId: string) => {
     try {
-      // Memanggil mutation untuk mengubah status asesmen menjadi 'selesai' di backend
-      const mutation = submitAssessmentMutationOptions(assessmentId);
-      
-      const response = await mutation.mutationFn();
-  
-      // Setelah status diubah, navigasikan ke halaman hasil asesmen
-      const newUrl = `/assessmentResult?id=${assessmentId}`;
-      window.history.pushState({}, "", newUrl);
-      // Setelah mengubah URL, Anda bisa menjalankan logika lain jika diperlukan
-      console.log("Navigated to:", newUrl);
-      console.log(response.message);
+        // Cek pertanyaan yang belum dijawab
+        let unansweredCount = 0;
+
+        // Cek radio button
+        data?.data.forEach((question) => {
+            // Pastikan questionId tidak null sebelum memeriksa answers
+            if (question.questionId && !answers[question.questionId]) {
+                unansweredCount += 1;
+            }
+        });
+
+        // Cek textarea
+        Object.keys(validationInformation).forEach((key) => {
+            // Pastikan key tidak null dan tidak ada validasi informasi untuk key tersebut
+            if (key && !validationInformation[key]) {
+                unansweredCount += 1;
+            }
+        });
+
+        if (unansweredCount > 0) {
+            // Tampilkan modal validasi jika ada pertanyaan yang belum dijawab
+            setUnansweredQuestions(unansweredCount);
+            setValidationModalOpen(true);
+            return;
+        }
+
+        // Memanggil mutation untuk mengubah status asesmen menjadi 'selesai' di backend
+        const mutation = submitAssessmentMutationOptions(assessmentId);
+        const response = await mutation.mutationFn();
+
+        // Setelah status diubah, navigasikan ke halaman hasil asesmen
+        const newUrl = `/assessmentResult?id=${assessmentId}`;
+        window.history.pushState({}, "", newUrl);
+        console.log("Navigated to:", newUrl);
+        console.log(response.message);
     } catch (error) {
-      console.error("Error finishing assessment:", error);
+        console.error("Error finishing assessment:", error);
     } finally {
-      setModalOpen(false); // Menutup modal setelah selesai
+        setModalOpen(false); // Menutup modal setelah selesai
     }
   };
 
@@ -776,6 +826,13 @@ export default function AssessmentPage() {
                   onConfirm={handleConfirmFinish}
                   assessmentId={assessmentId}
                 />
+
+                {/* Modal untuk peringatan jika ada pertanyaan yang belum dijawab */}
+                  <ValidationModal
+                      opened={validationModalOpen}
+                      onClose={() => setValidationModalOpen(false)}
+                      unansweredQuestions={unansweredQuestions}
+                  />
               </Card>
             </div>
           </Flex>