update: revision index.lazy for assessment
This commit is contained in:
parent
68a3bbd3cc
commit
086c1576b6
|
|
@ -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<File[]>([]);
|
||||
const [dragActive, setDragActive] = useState(false);
|
||||
|
|
@ -53,6 +58,20 @@ export default function AssessmentPage() {
|
|||
}>({});
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const [selectedSubAspectId, setSelectedSubAspectId] = useState<string | null>(null);
|
||||
const [assessmentId, setAssessmentId] = useState<string | null>(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<HTMLDivElement>) => {
|
||||
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 (
|
||||
<Card shadow="sm" p="lg" radius="md" withBorder>
|
||||
<Text color="red" className="text-center">
|
||||
Error: Data Asesmen tidak ditemukan. Harap akses halaman melalui link yang valid.
|
||||
</Text>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const startIndex = (page - 1) * limit;
|
||||
const endIndex = startIndex + limit;
|
||||
const paginatedQuestions = data?.data.slice(startIndex, endIndex) || [];
|
||||
|
||||
return (
|
||||
<Card shadow="sm" p="lg" radius="md" withBorder>
|
||||
<Stack gap="md">
|
||||
|
|
@ -181,9 +222,49 @@ export default function AssessmentPage() {
|
|||
<Text className="text-gray-400">Semua jawaban Anda akan ditinjau</Text>
|
||||
|
||||
<Flex justify="space-between" align="flex-start" mt="lg">
|
||||
|
||||
{/* LEFT-SIDE */}
|
||||
{/* Aspek dan Sub-Aspek */}
|
||||
<Flex direction="column" gap="xs" className="mr-4">
|
||||
<div className="space-y-4">
|
||||
{aspectsQuery.data?.data.map((aspect) => (
|
||||
<div
|
||||
key={aspect.id}
|
||||
className="p-4 bg-gray-50 rounded-lg shadow-md"
|
||||
>
|
||||
<div
|
||||
className="flex justify-between cursor-pointer"
|
||||
onClick={() => toggleAspect(aspect.id)}
|
||||
>
|
||||
<div className="text-lg text-gray-700">{aspect.name}</div>
|
||||
<div>
|
||||
{openAspects[aspect.id] ? (
|
||||
<TbChevronUp size={25} />
|
||||
) : (
|
||||
<TbChevronRight size={25} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{openAspects[aspect.id] && (
|
||||
<div className="mt-2 space-y-2">
|
||||
{aspect.subAspects.map((subAspect) => (
|
||||
<div
|
||||
key={subAspect.id}
|
||||
className="flex justify-between text-gray-600"
|
||||
>
|
||||
<div>{subAspect.name}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Flex>
|
||||
{/* Pertanyaan */}
|
||||
<Stack gap="sm" style={{ flex: 1 }}>
|
||||
{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}
|
||||
</Text>
|
||||
|
||||
<ActionIcon
|
||||
|
|
@ -254,8 +335,11 @@ export default function AssessmentPage() {
|
|||
onChange={() => {
|
||||
submitAnswerMutation.mutate({
|
||||
optionId: option.optionId,
|
||||
assessmentId: "aqduqcdc1mhnbz8zrpnmx9oj",
|
||||
validationInformation: "jfjforjfocn",
|
||||
assessmentId: assessmentId || "",
|
||||
validationInformation: JSON.stringify({
|
||||
info: "jfjforjfocn",
|
||||
questionId: question.questionId // Tambahkan questionId dalam validationInformation
|
||||
}),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
|
@ -270,6 +354,7 @@ export default function AssessmentPage() {
|
|||
<Textarea placeholder="Berikan keterangan terkait jawaban di atas" />
|
||||
|
||||
{/* File Upload */}
|
||||
{question.needFile === true && (
|
||||
<div
|
||||
className={`pt-5 pb-5 pr-5 pl-2 border-2 border-dashed ${dragActive ? "bg-gray-100" : "bg-transparent"
|
||||
} shadow-lg`} // Tambah shadow-lg
|
||||
|
|
@ -301,6 +386,7 @@ export default function AssessmentPage() {
|
|||
accept="image/png, image/jpeg, application/pdf"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{files.length > 0 && (
|
||||
<Stack gap="sm" mt="sm">
|
||||
|
|
@ -325,10 +411,13 @@ export default function AssessmentPage() {
|
|||
{/* Navigasi dan Pagination */}
|
||||
<Flex direction="column" gap="xs" className="ml-4">
|
||||
<div className="grid grid-cols-5 gap-2">
|
||||
{Array.from({ length: totalQuestions }, (_, index) => {
|
||||
const questionId = data?.data[index]?.questionId;
|
||||
{paginatedQuestions.map((question, index) => {
|
||||
const questionId = question.questionId;
|
||||
if (!questionId) return null;
|
||||
|
||||
// Menentukan nomor soal berdasarkan pagination
|
||||
const questionNumber = startIndex + index + 1; // Sesuaikan nomor berdasarkan halaman
|
||||
|
||||
return (
|
||||
<div key={questionId} className="flex justify-center relative">
|
||||
<button
|
||||
|
|
@ -336,7 +425,7 @@ export default function AssessmentPage() {
|
|||
${flaggedQuestions[questionId] ? "text-black" : "bg-transparent text-black"}`}
|
||||
onClick={() => scrollToQuestion(questionId)}
|
||||
>
|
||||
{index + 1}
|
||||
{questionNumber}
|
||||
</button>
|
||||
|
||||
{flaggedQuestions[questionId] && (
|
||||
|
|
@ -355,43 +444,6 @@ export default function AssessmentPage() {
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Aspek dan Sub-Aspek */}
|
||||
<div className="space-y-4">
|
||||
{aspectsQuery.data?.data.map((aspect) => (
|
||||
<div
|
||||
key={aspect.id}
|
||||
className="p-4 bg-gray-50 rounded-lg shadow-md"
|
||||
>
|
||||
<div
|
||||
className="flex justify-between cursor-pointer"
|
||||
onClick={() => toggleAspect(aspect.id)}
|
||||
>
|
||||
<div className="text-lg text-gray-700">{aspect.name}</div>
|
||||
<div>
|
||||
{openAspects[aspect.id] ? (
|
||||
<TbChevronUp size={25} />
|
||||
) : (
|
||||
<TbChevronRight size={25} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{openAspects[aspect.id] && (
|
||||
<div className="mt-2 space-y-2">
|
||||
{aspect.subAspects.map((subAspect) => (
|
||||
<div
|
||||
key={subAspect.id}
|
||||
className="flex justify-between text-gray-600"
|
||||
>
|
||||
<div>{subAspect.name}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Skor Aspek dan Sub-Aspek */}
|
||||
<div className="mt-4">
|
||||
<Card shadow="sm" p="md" radius="md" withBorder>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user