From 086c1576b649778c88d323340cf17acb0f0a8b31 Mon Sep 17 00:00:00 2001 From: abiyasa05 Date: Thu, 10 Oct 2024 15:28:17 +0700 Subject: [PATCH] update: revision index.lazy for assessment --- .../assessment/index.lazy.tsx | 214 +++++++++++------- 1 file changed, 133 insertions(+), 81 deletions(-) diff --git a/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx index 5ca5be0..9757a23 100644 --- a/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx +++ b/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx @@ -22,7 +22,12 @@ import { toggleFlagAnswer, } from "@/modules/assessmentManagement/queries/assessmentQueries"; import { TbFlag, TbUpload, TbChevronRight, TbChevronUp } from "react-icons/tb"; -import { useState, useRef } from "react"; +import { useState, useRef, useEffect } from "react"; + +const getQueryParam = (param: string) => { + const urlParams = new URLSearchParams(window.location.search); + return urlParams.get(param); +}; export const Route = createLazyFileRoute("/_dashboardLayout/assessment/")({ component: AssessmentPage, @@ -44,7 +49,7 @@ interface ToggleFlagResponse { export default function AssessmentPage() { const [page, setPage] = useState(1); - const limit = 2; + const limit = 10; const questionRefs = useRef<{ [key: string]: HTMLDivElement | null }>({}); const [files, setFiles] = useState([]); const [dragActive, setDragActive] = useState(false); @@ -53,6 +58,20 @@ export default function AssessmentPage() { }>({}); const fileInputRef = useRef(null); + const [selectedSubAspectId, setSelectedSubAspectId] = useState(null); + const [assessmentId, setAssessmentId] = useState(null); + + useEffect(() => { + const id = getQueryParam("id"); + + if (!id) { + // Handle if no ID found + setAssessmentId(null); + } else { + setAssessmentId(id); + } + }, []); + // Fetching questions data using useQuery const { data, isLoading, isError, error } = useQuery( getQuestionsAllQueryOptions(page, limit) @@ -74,15 +93,14 @@ export default function AssessmentPage() { queryFn: fetchAspects, }); - // Fetch average scores - const assessmentId = "aqduqcdc1mhnbz8zrpnmx9oj"; // Replace with actual assessment ID + // Fetch average scores berdasarkan assessmentId yang diambil dari URL const averageScoreQuery = useQuery( - getAverageScoreQueryOptions(assessmentId) + getAverageScoreQueryOptions(assessmentId || "") ); // Fetch average scores for sub-aspects const averageScoreSubAspectQuery = useQuery( - getAverageScoreSubAspectQueryOptions(assessmentId) + getAverageScoreSubAspectQueryOptions(assessmentId || "") ); // Mutation function to toggle flag @@ -106,6 +124,14 @@ export default function AssessmentPage() { // Inside the AssessmentPage function: const submitAnswerMutation = useMutation(submitAnswerMutationOptions()); + const handleAnswerChange = (optionId: string) => { + submitAnswerMutation.mutate({ + optionId: optionId, + assessmentId: assessmentId || "", + validationInformation: "someValidationInfo", // Sesuaikan validasi yang relevan + }); + }; + // Drag and Drop handlers const handleDragOver = (event: React.DragEvent) => { event.preventDefault(); @@ -169,9 +195,24 @@ export default function AssessmentPage() { } const totalQuestions = data?.data?.length || 0; + const totalPages = Math.ceil(totalQuestions / limit); const averageScores = averageScoreQuery.data?.aspects; const averageScoresSubAspect = averageScoreSubAspectQuery.data?.subAspects; + if (!assessmentId) { + return ( + + + Error: Data Asesmen tidak ditemukan. Harap akses halaman melalui link yang valid. + + + ); + } + + const startIndex = (page - 1) * limit; + const endIndex = startIndex + limit; + const paginatedQuestions = data?.data.slice(startIndex, endIndex) || []; + return ( @@ -181,9 +222,49 @@ export default function AssessmentPage() { Semua jawaban Anda akan ditinjau + + {/* LEFT-SIDE */} + {/* Aspek dan Sub-Aspek */} + +
+ {aspectsQuery.data?.data.map((aspect) => ( +
+
toggleAspect(aspect.id)} + > +
{aspect.name}
+
+ {openAspects[aspect.id] ? ( + + ) : ( + + )} +
+
+ + {openAspects[aspect.id] && ( +
+ {aspect.subAspects.map((subAspect) => ( +
+
{subAspect.name}
+
+ ))} +
+ )} +
+ ))} +
+ {/* Pertanyaan */} - {data?.data?.map((question: any, index: number) => { + {paginatedQuestions.map((question: any, index: number) => { const questionId = question.questionId; if (!questionId) return null; @@ -211,7 +292,7 @@ export default function AssessmentPage() { marginRight: "40px", }} > - {index + 1}. {question.questionText} + {startIndex + index + 1}. {question.questionText} { submitAnswerMutation.mutate({ optionId: option.optionId, - assessmentId: "aqduqcdc1mhnbz8zrpnmx9oj", - validationInformation: "jfjforjfocn", + assessmentId: assessmentId || "", + validationInformation: JSON.stringify({ + info: "jfjforjfocn", + questionId: question.questionId // Tambahkan questionId dalam validationInformation + }), }); }} /> @@ -270,37 +354,39 @@ export default function AssessmentPage() {