update: change assessment and verifying, add border on left and right side
This commit is contained in:
parent
563251f8c6
commit
ca4ec0a538
|
|
@ -1,10 +1,6 @@
|
|||
import { createLazyFileRoute } from "@tanstack/react-router";
|
||||
import {
|
||||
Flex,
|
||||
Stack,
|
||||
Text,
|
||||
Loader,
|
||||
ActionIcon,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
Card,
|
||||
|
|
@ -569,9 +565,9 @@ export default function AssessmentPage() {
|
|||
|
||||
if (isError) {
|
||||
return (
|
||||
<Text color="red">
|
||||
<p color="red">
|
||||
Error: {error?.message || "Terjadi kesalahan saat memuat pertanyaan."}
|
||||
</Text>
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -579,9 +575,9 @@ export default function AssessmentPage() {
|
|||
return (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Text color="red" className="text-center">
|
||||
<p color="red" className="text-center">
|
||||
Error: Data Asesmen tidak ditemukan. Harap akses halaman melalui link yang valid.
|
||||
</Text>
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
|
@ -615,8 +611,8 @@ export default function AssessmentPage() {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<Stack gap="md">
|
||||
<Flex justify="space-between" align="flex-start" mt="lg">
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-start">
|
||||
|
||||
{/* LEFT-SIDE */}
|
||||
{/* Aspek dan Sub-Aspek */}
|
||||
|
|
@ -631,7 +627,7 @@ export default function AssessmentPage() {
|
|||
<LeftSheet open={isLeftSidebarOpen} onOpenChange={(open) => setIsLeftSidebarOpen(open)}>
|
||||
<LeftSheetContent className="h-full w-75 overflow-auto">
|
||||
<Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label>
|
||||
<Flex direction="column" gap="xs" className="w-64">
|
||||
<div className="w-64">
|
||||
<div className="space-y-2">
|
||||
{/* Aspek */}
|
||||
{aspectsQuery.data?.data
|
||||
|
|
@ -666,7 +662,7 @@ export default function AssessmentPage() {
|
|||
.map((subAspect) => (
|
||||
<div
|
||||
key={subAspect.id}
|
||||
className={`flex justify-between cursor-pointer p-2 px-6 rounded-sm transition-colors duration-150 ${selectedSubAspectId === subAspect.id ? 'text-black font-medium bg-gray-200' : 'text-gray-500'}`}
|
||||
className={`cursor-pointer p-2 px-6 rounded-sm transition-colors duration-150 ${selectedSubAspectId === subAspect.id ? 'text-black font-medium bg-gray-200' : 'text-gray-500'}`}
|
||||
onClick={() => setSelectedSubAspectId(subAspect.id)}
|
||||
>
|
||||
<div className="text-xs">{subAspect.name}</div>
|
||||
|
|
@ -677,15 +673,15 @@ export default function AssessmentPage() {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Flex>
|
||||
</div>
|
||||
</LeftSheetContent>
|
||||
</LeftSheet>
|
||||
)}
|
||||
|
||||
{/* Sidebar for Desktop (Always Visible) */}
|
||||
<div className="hidden md:block fixed h-screen w-64 overflow-auto">
|
||||
<div className="hidden md:block fixed h-full w-66 overflow-auto border-x">
|
||||
<Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label>
|
||||
<Flex direction="column" gap="xs" className="w-64">
|
||||
<div className="w-64">
|
||||
<div className="space-y-2">
|
||||
{/* Aspek */}
|
||||
{aspectsQuery.data?.data
|
||||
|
|
@ -731,21 +727,21 @@ export default function AssessmentPage() {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Flex>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* MIDDLE */}
|
||||
{/* Pertanyaan */}
|
||||
<div className="ml-0 md:ml-64 mr-0 md:mr-60 flex-1 overflow-y-auto h-full">
|
||||
<Stack gap="sm" style={{ flex: 1 }}>
|
||||
<Text className="text-2xl font-bold ml-6">
|
||||
<div className="space-y-6 flex flex-col">
|
||||
<Label className="text-2xl font-bold ml-6 mt-4">
|
||||
Harap menjawab semua pertanyaan yang tersedia
|
||||
</Text>
|
||||
<Text className="text-gray-400 ml-6 mb-7">Semua jawaban Anda akan ditinjau</Text>
|
||||
</Label>
|
||||
<Label className="text-gray-400 ml-6 mb-7">Semua jawaban Anda akan ditinjau</Label>
|
||||
{filteredQuestions.length === 0 ? (
|
||||
<Text className="text-center p-3">
|
||||
<Label className="text-center p-3">
|
||||
Pertanyaan tidak ada untuk sub-aspek yang dipilih.
|
||||
</Text>
|
||||
</Label>
|
||||
) : (
|
||||
filteredQuestions.map((question: any, index: number) => {
|
||||
const questionId = question.questionId;
|
||||
|
|
@ -757,16 +753,15 @@ export default function AssessmentPage() {
|
|||
ref={(el) => (questionRefs.current[questionId] = el)}
|
||||
className="space-y-4"
|
||||
>
|
||||
<Stack gap="sm">
|
||||
<div className="grid grid-cols-[auto_1fr_auto] gap-2 w-full items-start">
|
||||
{/* Question Number */}
|
||||
<Text className="font-bold p-2 text-sm">{startIndex + index + 1}.</Text>
|
||||
<Label className="font-bold p-2 text-sm">{startIndex + index + 1}.</Label>
|
||||
|
||||
{/* Question Text */}
|
||||
<Text className="font-bold break-words text-sm p-2">{question.questionText}</Text>
|
||||
<Label className="font-bold break-words text-sm p-2">{question.questionText}</Label>
|
||||
|
||||
{/* Action Icon/Flag */}
|
||||
<ActionIcon
|
||||
{/* Action Button/Flag */}
|
||||
<button
|
||||
onClick={() => handleToggleFlag(questionId)}
|
||||
title="Tandai"
|
||||
className={`m-2 rounded-md border-1 flex items-center justify-center h-7 w-7 ${flaggedQuestions[questionId] ? "border-white bg-red-500" : "border-gray-100 bg-white"}`}
|
||||
|
|
@ -775,7 +770,7 @@ export default function AssessmentPage() {
|
|||
size={25}
|
||||
className={`p-1 ${flaggedQuestions[questionId] ? "text-white" : "text-black"}`}
|
||||
/>
|
||||
</ActionIcon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Radio Button Options */}
|
||||
|
|
@ -812,7 +807,7 @@ export default function AssessmentPage() {
|
|||
</RadioGroup>
|
||||
</div>
|
||||
) : (
|
||||
<Text color="red">Tidak ada opsi untuk pertanyaan ini.</Text>
|
||||
<Label color="red">Tidak ada opsi untuk pertanyaan ini.</Label>
|
||||
)}
|
||||
|
||||
{/* Textarea for additional information */}
|
||||
|
|
@ -844,12 +839,11 @@ export default function AssessmentPage() {
|
|||
<div>
|
||||
<hr className="border-t-2 border-gray-300 mx-11 mt-6 mb-6" />
|
||||
</div>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</Stack>
|
||||
</div>
|
||||
{/* Pagination for mobile */}
|
||||
<div className="md:hidden mb-4 flex justify-center">
|
||||
<Pagination
|
||||
|
|
@ -861,7 +855,7 @@ export default function AssessmentPage() {
|
|||
}
|
||||
}}
|
||||
>
|
||||
<Text className="text-sm m-0">Halaman {currentPage} dari {totalPages}</Text>
|
||||
<Label className="text-sm m-0">Halaman {currentPage} dari {totalPages}</Label>
|
||||
</Pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -928,10 +922,9 @@ export default function AssessmentPage() {
|
|||
|
||||
return (
|
||||
<div key={aspect.aspectId} className="flex justify-between items-center">
|
||||
<Text className="text-lg text-gray-700 break-words whitespace-normal">{aspect.aspectName}</Text>
|
||||
<Text
|
||||
className={`text-xl font-bold ${
|
||||
aspectScoreValue >= 4.5
|
||||
<Label className="text-lg text-gray-700 break-words whitespace-normal">{aspect.aspectName}</Label>
|
||||
<Label
|
||||
className={`text-xl font-bold ${aspectScoreValue >= 4.5
|
||||
? "text-green-700"
|
||||
: aspectScoreValue >= 3.5
|
||||
? "text-green-400"
|
||||
|
|
@ -943,12 +936,12 @@ export default function AssessmentPage() {
|
|||
}`}
|
||||
>
|
||||
{aspectScore}
|
||||
</Text>
|
||||
</Label>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Text className="text-base text-gray-700">Data aspek ini kosong</Text>
|
||||
<Label className="text-base text-gray-700">Data aspek ini kosong</Label>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
@ -964,10 +957,9 @@ export default function AssessmentPage() {
|
|||
|
||||
return (
|
||||
<div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
|
||||
<Text className="text-sm text-gray-700 break-words whitespace-normal">{subAspect.subAspectName}</Text>
|
||||
<Text
|
||||
className={`text-sm font-bold ${
|
||||
subAspectScoreValue >= 4.5
|
||||
<Label className="text-sm text-gray-700 break-words whitespace-normal">{subAspect.subAspectName}</Label>
|
||||
<Label
|
||||
className={`text-sm font-bold ${subAspectScoreValue >= 4.5
|
||||
? "text-green-700"
|
||||
: subAspectScoreValue >= 3.5
|
||||
? "text-green-400"
|
||||
|
|
@ -979,12 +971,12 @@ export default function AssessmentPage() {
|
|||
}`}
|
||||
>
|
||||
{subAspectScore}
|
||||
</Text>
|
||||
</Label>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text>
|
||||
<Label className="text-sm text-gray-700">Data sub-aspek ini kosong</Label>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
@ -1019,11 +1011,11 @@ export default function AssessmentPage() {
|
|||
</div>
|
||||
|
||||
{/* Sidebar for desktop (always visible) */}
|
||||
<div className="hidden md:block fixed h-screen right-0 w-60 overflow-auto mr-4">
|
||||
<Flex direction="column" gap="xs" className="mx-4">
|
||||
<Text className="font-medium text-lg text-gray-800 mb-2">
|
||||
<div className="hidden md:block fixed h-screen right-0 w-60 overflow-auto mr-4 border-x">
|
||||
<div className="mx-4 space-y-2">
|
||||
<Label className="font-medium text-lg text-gray-800 mb-2">
|
||||
Nomor Soal
|
||||
</Text>
|
||||
</Label>
|
||||
|
||||
{/* Navigasi (Number of Questions) */}
|
||||
<div className="grid grid-cols-5 gap-2">
|
||||
|
|
@ -1050,8 +1042,10 @@ export default function AssessmentPage() {
|
|||
) : null;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-center">
|
||||
{/* Pagination */}
|
||||
<div className="mt-6 py-2 flex justify-center border-y">
|
||||
<Pagination
|
||||
page={currentPage}
|
||||
totalPages={totalPages}
|
||||
|
|
@ -1061,16 +1055,17 @@ export default function AssessmentPage() {
|
|||
}
|
||||
}}
|
||||
>
|
||||
<Text className="text-xs m-0">Halaman {currentPage} dari {totalPages}</Text>
|
||||
<Label className="text-xs m-0">Halaman {currentPage} dari {totalPages}</Label>
|
||||
</Pagination>
|
||||
</div>
|
||||
|
||||
<div className="mx-4 space-y-2">
|
||||
{/* Skor Aspek dan Sub-Aspek */}
|
||||
<div className="mt-4">
|
||||
<Card>
|
||||
<Text className="text-lg font-extrabold text-center mt-4 mb-2">
|
||||
<p className="text-lg font-extrabold text-center mt-4 mb-2">
|
||||
Nilai Sementara
|
||||
</Text>
|
||||
</p>
|
||||
<CardContent className="max-h-full overflow-hidden">
|
||||
<ScrollArea className="h-[200px] w-full rounded-md p-2">
|
||||
<CardDescription>
|
||||
|
|
@ -1081,10 +1076,9 @@ export default function AssessmentPage() {
|
|||
|
||||
return (
|
||||
<div key={aspect.aspectId} className="flex justify-between items-center">
|
||||
<Text className="text-lg text-gray-700">{aspect.aspectName}</Text>
|
||||
<Text
|
||||
className={`text-xl font-bold ${
|
||||
aspectScoreValue >= 4.5
|
||||
<Label className="text-lg text-gray-700">{aspect.aspectName}</Label>
|
||||
<Label
|
||||
className={`text-xl font-bold ${aspectScoreValue >= 4.5
|
||||
? "text-green-700"
|
||||
: aspectScoreValue >= 3.5
|
||||
? "text-green-400"
|
||||
|
|
@ -1096,12 +1090,12 @@ export default function AssessmentPage() {
|
|||
}`}
|
||||
>
|
||||
{aspectScore}
|
||||
</Text>
|
||||
</Label>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Text className="text-base text-gray-700">Data aspek ini kosong</Text>
|
||||
<Label className="text-base text-gray-700">Data aspek ini kosong</Label>
|
||||
)}
|
||||
</CardDescription>
|
||||
|
||||
|
|
@ -1116,10 +1110,9 @@ export default function AssessmentPage() {
|
|||
|
||||
return (
|
||||
<div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
|
||||
<Text className="text-sm text-gray-700">{subAspect.subAspectName}</Text>
|
||||
<Text
|
||||
className={`text-sm font-bold ${
|
||||
subAspectScoreValue >= 4.5
|
||||
<Label className="text-sm text-gray-700">{subAspect.subAspectName}</Label>
|
||||
<Label
|
||||
className={`text-sm font-bold ${subAspectScoreValue >= 4.5
|
||||
? "text-green-700"
|
||||
: subAspectScoreValue >= 3.5
|
||||
? "text-green-400"
|
||||
|
|
@ -1131,14 +1124,15 @@ export default function AssessmentPage() {
|
|||
}`}
|
||||
>
|
||||
{subAspectScore}
|
||||
</Text>
|
||||
</Label>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text>
|
||||
<Label className="text-sm text-gray-700">Data sub-aspek ini kosong</Label>
|
||||
)}
|
||||
</ScrollArea>
|
||||
|
||||
{/* Tombol Selesai */}
|
||||
<div>
|
||||
<Button
|
||||
|
|
@ -1166,10 +1160,10 @@ export default function AssessmentPage() {
|
|||
/>
|
||||
</Card>
|
||||
</div>
|
||||
</Flex>
|
||||
</div>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,12 +1,6 @@
|
|||
import { createLazyFileRoute } from "@tanstack/react-router";
|
||||
import {
|
||||
Flex,
|
||||
Stack,
|
||||
Text,
|
||||
Loader,
|
||||
ActionIcon,
|
||||
CloseButton,
|
||||
Group,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
Card,
|
||||
|
|
@ -32,11 +26,9 @@ import {
|
|||
} from "@/shadcn/components/ui/leftsheet";
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import {
|
||||
submitAssessmentMutationOptions,
|
||||
uploadFileMutationOptions,
|
||||
fetchAspects,
|
||||
getQuestionsAllQueryOptions,
|
||||
toggleFlagAnswer,
|
||||
} from "@/modules/assessmentManagement/queries/assessmentQueries";
|
||||
import {
|
||||
getAnswersRevisionQueryOptions,
|
||||
|
|
@ -50,7 +42,6 @@ import {
|
|||
import { TbLayoutSidebarLeftCollapseFilled, TbChevronRight, TbChevronDown } from "react-icons/tb";
|
||||
import FinishAssessmentModal from "@/modules/assessmentManagement/modals/ConfirmModal";
|
||||
import ValidationModal from "@/modules/assessmentManagement/modals/ValidationModal";
|
||||
import FileSizeValidationModal from "@/modules/assessmentManagement/modals/FileSizeValidationModal";
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import AppHeader from "@/components/AppHeader";
|
||||
|
||||
|
|
@ -185,17 +176,17 @@ export default function AssessmentPage() {
|
|||
}
|
||||
}, [aspectsQuery.data, selectedSubAspectId, data?.data]);
|
||||
|
||||
// Fetching answers for the assessment
|
||||
const { data: answersData } = useQuery(
|
||||
// Fetching answers for the assessment
|
||||
const { data: answersData } = useQuery(
|
||||
getAnswersRevisionQueryOptions(assessmentId || "")
|
||||
);
|
||||
);
|
||||
|
||||
const formattedResult = answersData?.data.reduce((acc, item) => {
|
||||
const formattedResult = answersData?.data.reduce((acc, item) => {
|
||||
if (item.questionId != null && item.newOptionId != null) {
|
||||
acc[item.questionId] = item.newOptionId;
|
||||
}
|
||||
return acc;
|
||||
}, {} as Record<string, string>);
|
||||
}, {} as Record<string, string>);
|
||||
|
||||
// Effect untuk mengatur answers dari data yang diambil
|
||||
useEffect(() => {
|
||||
|
|
@ -216,7 +207,7 @@ const formattedResult = answersData?.data.reduce((acc, item) => {
|
|||
const unanswered = data?.data.filter(question => {
|
||||
return question.questionId !== null && !answers[question.questionId];
|
||||
}) || [];
|
||||
console.log("unanswered questions:", unanswered.length);
|
||||
console.log("unanswered questions:", unanswered.length);
|
||||
setUnansweredQuestions(unanswered.length);
|
||||
|
||||
// Tampilkan modal berdasarkan jumlah pertanyaan yang belum dijawab
|
||||
|
|
@ -288,29 +279,6 @@ console.log("unanswered questions:", unanswered.length);
|
|||
}
|
||||
}, [flaggedQuestions]);
|
||||
|
||||
// Mutation function to toggle flag
|
||||
// const toggleFlagMutation = useMutation<ToggleFlagResponse, Error, string>({
|
||||
// mutationFn: toggleFlagAnswer,
|
||||
// onSuccess: (response) => {
|
||||
// if (response && response.answer) {
|
||||
// const { answer } = response;
|
||||
// setFlaggedQuestions((prevFlags) => {
|
||||
// const newFlags = {
|
||||
// ...prevFlags,
|
||||
// [answer.id]: answer.isFlagged !== null ? answer.isFlagged : false,
|
||||
// };
|
||||
// // Simpan perubahan ke localStorage
|
||||
// localStorage.setItem("flaggedQuestions", JSON.stringify(newFlags));
|
||||
// return newFlags;
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
|
||||
// onError: (error) => {
|
||||
// console.error("Error toggling flag:", error);
|
||||
// },
|
||||
// });
|
||||
|
||||
// Usage of the mutation in your component
|
||||
const { mutate: submitOption } = useMutation({
|
||||
mutationFn: (form: {
|
||||
|
|
@ -561,9 +529,9 @@ console.log("unanswered questions:", unanswered.length);
|
|||
|
||||
if (isError) {
|
||||
return (
|
||||
<Text color="red">
|
||||
<p color="red">
|
||||
Error: {error?.message || "Terjadi kesalahan saat memuat pertanyaan."}
|
||||
</Text>
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -571,9 +539,9 @@ console.log("unanswered questions:", unanswered.length);
|
|||
return (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Text color="red" className="text-center">
|
||||
<p color="red" className="text-center">
|
||||
Error: Data Asesmen tidak ditemukan. Harap akses halaman melalui link yang valid.
|
||||
</Text>
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
|
@ -607,8 +575,8 @@ console.log("unanswered questions:", unanswered.length);
|
|||
|
||||
return (
|
||||
<div>
|
||||
<Stack gap="md">
|
||||
<Flex justify="space-between" align="flex-start" mt="lg">
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-start">
|
||||
|
||||
{/* LEFT-SIDE */}
|
||||
{/* Aspek dan Sub-Aspek */}
|
||||
|
|
@ -623,7 +591,7 @@ console.log("unanswered questions:", unanswered.length);
|
|||
<LeftSheet open={isLeftSidebarOpen} onOpenChange={(open) => setIsLeftSidebarOpen(open)}>
|
||||
<LeftSheetContent className="h-full w-75 overflow-auto">
|
||||
<Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label>
|
||||
<Flex direction="column" gap="xs" className="w-64">
|
||||
<div className="w-64">
|
||||
<div className="space-y-2">
|
||||
{/* Aspek */}
|
||||
{aspectsQuery.data?.data
|
||||
|
|
@ -658,7 +626,7 @@ console.log("unanswered questions:", unanswered.length);
|
|||
.map((subAspect) => (
|
||||
<div
|
||||
key={subAspect.id}
|
||||
className={`flex justify-between cursor-pointer p-2 px-6 rounded-sm transition-colors duration-150 ${selectedSubAspectId === subAspect.id ? 'text-black font-medium bg-gray-200' : 'text-gray-500'}`}
|
||||
className={`cursor-pointer p-2 px-6 rounded-sm transition-colors duration-150 ${selectedSubAspectId === subAspect.id ? 'text-black font-medium bg-gray-200' : 'text-gray-500'}`}
|
||||
onClick={() => setSelectedSubAspectId(subAspect.id)}
|
||||
>
|
||||
<div className="text-xs">{subAspect.name}</div>
|
||||
|
|
@ -669,15 +637,15 @@ console.log("unanswered questions:", unanswered.length);
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Flex>
|
||||
</div>
|
||||
</LeftSheetContent>
|
||||
</LeftSheet>
|
||||
)}
|
||||
|
||||
{/* Sidebar for Desktop (Always Visible) */}
|
||||
<div className="hidden md:block fixed h-screen w-64 overflow-auto">
|
||||
<div className="hidden md:block fixed h-full w-66 overflow-auto border-x">
|
||||
<Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label>
|
||||
<Flex direction="column" gap="xs" className="w-64">
|
||||
<div className="w-64">
|
||||
<div className="space-y-2">
|
||||
{/* Aspek */}
|
||||
{aspectsQuery.data?.data
|
||||
|
|
@ -723,21 +691,21 @@ console.log("unanswered questions:", unanswered.length);
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Flex>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* MIDDLE */}
|
||||
{/* Pertanyaan */}
|
||||
<div className="ml-0 md:ml-64 mr-0 md:mr-60 flex-1 overflow-y-auto h-full">
|
||||
<Stack gap="sm" style={{ flex: 1 }}>
|
||||
<Text className="text-2xl font-bold ml-6">
|
||||
<div className="space-y-6 flex flex-col">
|
||||
<Label className="text-2xl font-bold ml-6 mt-4">
|
||||
Harap menjawab semua pertanyaan yang tersedia
|
||||
</Text>
|
||||
<Text className="text-gray-400 ml-6 mb-7">Semua jawaban Anda akan ditinjau</Text>
|
||||
</Label>
|
||||
<Label className="text-gray-400 ml-6 mb-7">Semua jawaban Anda akan ditinjau</Label>
|
||||
{filteredQuestions.length === 0 ? (
|
||||
<Text className="text-center p-3">
|
||||
<Label className="text-center p-3">
|
||||
Pertanyaan tidak ada untuk sub-aspek yang dipilih.
|
||||
</Text>
|
||||
</Label>
|
||||
) : (
|
||||
filteredQuestions.map((question: any, index: number) => {
|
||||
const questionId = question.questionId;
|
||||
|
|
@ -749,13 +717,12 @@ console.log("unanswered questions:", unanswered.length);
|
|||
ref={(el) => (questionRefs.current[questionId] = el)}
|
||||
className="space-y-4"
|
||||
>
|
||||
<Stack gap="sm">
|
||||
<div className="grid grid-cols-[auto_1fr_auto] gap-2 w-full items-start">
|
||||
{/* Question Number */}
|
||||
<Text className="font-bold p-2 text-sm">{startIndex + index + 1}.</Text>
|
||||
<Label className="font-bold p-2 text-sm">{startIndex + index + 1}.</Label>
|
||||
|
||||
{/* Question Text */}
|
||||
<Text className="font-bold break-words text-sm p-2">{question.questionText}</Text>
|
||||
<Label className="font-bold break-words text-sm p-2">{question.questionText}</Label>
|
||||
</div>
|
||||
|
||||
{/* Radio Button Options */}
|
||||
|
|
@ -792,7 +759,7 @@ console.log("unanswered questions:", unanswered.length);
|
|||
</RadioGroup>
|
||||
</div>
|
||||
) : (
|
||||
<Text color="red">Tidak ada opsi untuk pertanyaan ini.</Text>
|
||||
<Label color="red">Tidak ada opsi untuk pertanyaan ini.</Label>
|
||||
)}
|
||||
|
||||
{/* Textarea for additional information */}
|
||||
|
|
@ -808,12 +775,11 @@ console.log("unanswered questions:", unanswered.length);
|
|||
<div>
|
||||
<hr className="border-t-2 border-gray-300 mx-11 mt-6 mb-6" />
|
||||
</div>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</Stack>
|
||||
</div>
|
||||
{/* Pagination for mobile */}
|
||||
<div className="md:hidden mb-4 flex justify-center">
|
||||
<Pagination
|
||||
|
|
@ -825,7 +791,7 @@ console.log("unanswered questions:", unanswered.length);
|
|||
}
|
||||
}}
|
||||
>
|
||||
<Text className="text-sm m-0">Halaman {currentPage} dari {totalPages}</Text>
|
||||
<Label className="text-sm m-0">Halaman {currentPage} dari {totalPages}</Label>
|
||||
</Pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -892,10 +858,9 @@ console.log("unanswered questions:", unanswered.length);
|
|||
|
||||
return (
|
||||
<div key={aspect.aspectId} className="flex justify-between items-center">
|
||||
<Text className="text-lg text-gray-700 break-words whitespace-normal">{aspect.aspectName}</Text>
|
||||
<Text
|
||||
className={`text-xl font-bold ${
|
||||
aspectScoreValue >= 4.5
|
||||
<Label className="text-lg text-gray-700 break-words whitespace-normal">{aspect.aspectName}</Label>
|
||||
<Label
|
||||
className={`text-xl font-bold ${aspectScoreValue >= 4.5
|
||||
? "text-green-700"
|
||||
: aspectScoreValue >= 3.5
|
||||
? "text-green-400"
|
||||
|
|
@ -907,12 +872,12 @@ console.log("unanswered questions:", unanswered.length);
|
|||
}`}
|
||||
>
|
||||
{aspectScore}
|
||||
</Text>
|
||||
</Label>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Text className="text-base text-gray-700">Data aspek ini kosong</Text>
|
||||
<Label className="text-base text-gray-700">Data aspek ini kosong</Label>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
@ -928,10 +893,9 @@ console.log("unanswered questions:", unanswered.length);
|
|||
|
||||
return (
|
||||
<div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
|
||||
<Text className="text-sm text-gray-700 break-words whitespace-normal">{subAspect.subAspectName}</Text>
|
||||
<Text
|
||||
className={`text-sm font-bold ${
|
||||
subAspectScoreValue >= 4.5
|
||||
<Label className="text-sm text-gray-700 break-words whitespace-normal">{subAspect.subAspectName}</Label>
|
||||
<Label
|
||||
className={`text-sm font-bold ${subAspectScoreValue >= 4.5
|
||||
? "text-green-700"
|
||||
: subAspectScoreValue >= 3.5
|
||||
? "text-green-400"
|
||||
|
|
@ -943,12 +907,12 @@ console.log("unanswered questions:", unanswered.length);
|
|||
}`}
|
||||
>
|
||||
{subAspectScore}
|
||||
</Text>
|
||||
</Label>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text>
|
||||
<Label className="text-sm text-gray-700">Data sub-aspek ini kosong</Label>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
@ -982,11 +946,11 @@ console.log("unanswered questions:", unanswered.length);
|
|||
</Sheet>
|
||||
</div>
|
||||
{/* Sidebar for desktop (always visible) */}
|
||||
<div className="hidden md:block fixed h-screen right-0 w-60 overflow-auto mr-4">
|
||||
<Flex direction="column" gap="xs" className="mx-4">
|
||||
<Text className="font-medium text-lg text-gray-800 mb-2">
|
||||
<div className="hidden md:block fixed h-screen right-0 w-60 overflow-auto mr-4 border-x">
|
||||
<div className="mx-4 space-y-2">
|
||||
<Label className="font-medium text-lg text-gray-800 mb-2">
|
||||
Nomor Soal
|
||||
</Text>
|
||||
</Label>
|
||||
|
||||
{/* Navigasi (Number of Questions) */}
|
||||
<div className="grid grid-cols-5 gap-2">
|
||||
|
|
@ -1013,8 +977,10 @@ console.log("unanswered questions:", unanswered.length);
|
|||
) : null;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-center">
|
||||
{/* Pagination */}
|
||||
<div className="mt-6 py-2 flex justify-center border-y">
|
||||
<Pagination
|
||||
page={currentPage}
|
||||
totalPages={totalPages}
|
||||
|
|
@ -1024,16 +990,17 @@ console.log("unanswered questions:", unanswered.length);
|
|||
}
|
||||
}}
|
||||
>
|
||||
<Text className="text-xs m-0">Halaman {currentPage} dari {totalPages}</Text>
|
||||
<Label className="text-xs m-0">Halaman {currentPage} dari {totalPages}</Label>
|
||||
</Pagination>
|
||||
</div>
|
||||
|
||||
<div className="mx-4 space-y-2">
|
||||
{/* Skor Aspek dan Sub-Aspek */}
|
||||
<div className="mt-4">
|
||||
<Card>
|
||||
<Text className="text-lg font-extrabold text-center mt-4 mb-2">
|
||||
<p className="text-lg font-extrabold text-center mt-4 mb-2">
|
||||
Nilai Sementara
|
||||
</Text>
|
||||
</p>
|
||||
<CardContent className="max-h-full overflow-hidden">
|
||||
<ScrollArea className="h-[200px] w-full rounded-md p-2">
|
||||
<CardDescription>
|
||||
|
|
@ -1044,10 +1011,9 @@ console.log("unanswered questions:", unanswered.length);
|
|||
|
||||
return (
|
||||
<div key={aspect.aspectId} className="flex justify-between items-center">
|
||||
<Text className="text-lg text-gray-700">{aspect.aspectName}</Text>
|
||||
<Text
|
||||
className={`text-xl font-bold ${
|
||||
aspectScoreValue >= 4.5
|
||||
<Label className="text-lg text-gray-700">{aspect.aspectName}</Label>
|
||||
<Label
|
||||
className={`text-xl font-bold ${aspectScoreValue >= 4.5
|
||||
? "text-green-700"
|
||||
: aspectScoreValue >= 3.5
|
||||
? "text-green-400"
|
||||
|
|
@ -1059,12 +1025,12 @@ console.log("unanswered questions:", unanswered.length);
|
|||
}`}
|
||||
>
|
||||
{aspectScore}
|
||||
</Text>
|
||||
</Label>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Text className="text-base text-gray-700">Data aspek ini kosong</Text>
|
||||
<Label className="text-base text-gray-700">Data aspek ini kosong</Label>
|
||||
)}
|
||||
</CardDescription>
|
||||
|
||||
|
|
@ -1079,10 +1045,9 @@ console.log("unanswered questions:", unanswered.length);
|
|||
|
||||
return (
|
||||
<div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
|
||||
<Text className="text-sm text-gray-700">{subAspect.subAspectName}</Text>
|
||||
<Text
|
||||
className={`text-sm font-bold ${
|
||||
subAspectScoreValue >= 4.5
|
||||
<Label className="text-sm text-gray-700">{subAspect.subAspectName}</Label>
|
||||
<Label
|
||||
className={`text-sm font-bold ${subAspectScoreValue >= 4.5
|
||||
? "text-green-700"
|
||||
: subAspectScoreValue >= 3.5
|
||||
? "text-green-400"
|
||||
|
|
@ -1094,14 +1059,15 @@ console.log("unanswered questions:", unanswered.length);
|
|||
}`}
|
||||
>
|
||||
{subAspectScore}
|
||||
</Text>
|
||||
</Label>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text>
|
||||
<Label className="text-sm text-gray-700">Data sub-aspek ini kosong</Label>
|
||||
)}
|
||||
</ScrollArea>
|
||||
|
||||
{/* Tombol Selesai */}
|
||||
<div>
|
||||
<Button
|
||||
|
|
@ -1129,10 +1095,10 @@ console.log("unanswered questions:", unanswered.length);
|
|||
/>
|
||||
</Card>
|
||||
</div>
|
||||
</Flex>
|
||||
</div>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user