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 { createLazyFileRoute } from "@tanstack/react-router";
|
||||||
import {
|
import {
|
||||||
Flex,
|
|
||||||
Stack,
|
|
||||||
Text,
|
|
||||||
Loader,
|
Loader,
|
||||||
ActionIcon,
|
|
||||||
} from "@mantine/core";
|
} from "@mantine/core";
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
|
|
@ -569,9 +565,9 @@ export default function AssessmentPage() {
|
||||||
|
|
||||||
if (isError) {
|
if (isError) {
|
||||||
return (
|
return (
|
||||||
<Text color="red">
|
<p color="red">
|
||||||
Error: {error?.message || "Terjadi kesalahan saat memuat pertanyaan."}
|
Error: {error?.message || "Terjadi kesalahan saat memuat pertanyaan."}
|
||||||
</Text>
|
</p>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -579,9 +575,9 @@ export default function AssessmentPage() {
|
||||||
return (
|
return (
|
||||||
<Card>
|
<Card>
|
||||||
<CardContent>
|
<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.
|
Error: Data Asesmen tidak ditemukan. Harap akses halaman melalui link yang valid.
|
||||||
</Text>
|
</p>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
|
|
@ -615,23 +611,23 @@ export default function AssessmentPage() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Stack gap="md">
|
<div className="space-y-4">
|
||||||
<Flex justify="space-between" align="flex-start" mt="lg">
|
<div className="flex justify-between items-start">
|
||||||
|
|
||||||
{/* LEFT-SIDE */}
|
{/* LEFT-SIDE */}
|
||||||
{/* Aspek dan Sub-Aspek */}
|
{/* Aspek dan Sub-Aspek */}
|
||||||
<AppHeader
|
<AppHeader
|
||||||
openNavbar={isLeftSidebarOpen}
|
openNavbar={isLeftSidebarOpen}
|
||||||
toggle={toggleLeftSidebar}
|
toggle={toggleLeftSidebar}
|
||||||
toggleLeftSidebar={toggleLeftSidebar}
|
toggleLeftSidebar={toggleLeftSidebar}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Sidebar for Mobile */}
|
{/* Sidebar for Mobile */}
|
||||||
{isMobile && (
|
{isMobile && (
|
||||||
<LeftSheet open={isLeftSidebarOpen} onOpenChange={(open) => setIsLeftSidebarOpen(open)}>
|
<LeftSheet open={isLeftSidebarOpen} onOpenChange={(open) => setIsLeftSidebarOpen(open)}>
|
||||||
<LeftSheetContent className="h-full w-75 overflow-auto">
|
<LeftSheetContent className="h-full w-75 overflow-auto">
|
||||||
<Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label>
|
<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">
|
<div className="space-y-2">
|
||||||
{/* Aspek */}
|
{/* Aspek */}
|
||||||
{aspectsQuery.data?.data
|
{aspectsQuery.data?.data
|
||||||
|
|
@ -666,7 +662,7 @@ export default function AssessmentPage() {
|
||||||
.map((subAspect) => (
|
.map((subAspect) => (
|
||||||
<div
|
<div
|
||||||
key={subAspect.id}
|
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)}
|
onClick={() => setSelectedSubAspectId(subAspect.id)}
|
||||||
>
|
>
|
||||||
<div className="text-xs">{subAspect.name}</div>
|
<div className="text-xs">{subAspect.name}</div>
|
||||||
|
|
@ -677,75 +673,75 @@ export default function AssessmentPage() {
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</Flex>
|
</div>
|
||||||
</LeftSheetContent>
|
</LeftSheetContent>
|
||||||
</LeftSheet>
|
</LeftSheet>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Sidebar for Desktop (Always Visible) */}
|
{/* 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>
|
<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">
|
<div className="space-y-2">
|
||||||
{/* Aspek */}
|
{/* Aspek */}
|
||||||
{aspectsQuery.data?.data
|
{aspectsQuery.data?.data
|
||||||
.filter((aspect) =>
|
.filter((aspect) =>
|
||||||
aspect.subAspects.some((subAspect) =>
|
aspect.subAspects.some((subAspect) =>
|
||||||
data?.data.some((question) => question.subAspectId === subAspect.id)
|
data?.data.some((question) => question.subAspectId === subAspect.id)
|
||||||
)
|
|
||||||
)
|
)
|
||||||
.map((aspect) => (
|
)
|
||||||
<div key={aspect.id} className="p-2 ">
|
.map((aspect) => (
|
||||||
<div
|
<div key={aspect.id} className="p-2 ">
|
||||||
className="flex justify-between cursor-pointer"
|
<div
|
||||||
onClick={() => toggleAspect(aspect.id)}
|
className="flex justify-between cursor-pointer"
|
||||||
>
|
onClick={() => toggleAspect(aspect.id)}
|
||||||
<div className="text-sm font-bold px-3">{aspect.name}</div>
|
>
|
||||||
<div>
|
<div className="text-sm font-bold px-3">{aspect.name}</div>
|
||||||
{openAspects[aspect.id] ? (
|
<div>
|
||||||
<TbChevronDown size={25} />
|
{openAspects[aspect.id] ? (
|
||||||
) : (
|
<TbChevronDown size={25} />
|
||||||
<TbChevronRight size={25} />
|
) : (
|
||||||
)}
|
<TbChevronRight size={25} />
|
||||||
</div>
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Sub-Aspek */}
|
|
||||||
{openAspects[aspect.id] && (
|
|
||||||
<div className="mt-2 space-y-2">
|
|
||||||
{aspect.subAspects
|
|
||||||
.filter((subAspect) =>
|
|
||||||
data?.data.some((question) => question.subAspectId === subAspect.id)
|
|
||||||
)
|
|
||||||
.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'}`}
|
|
||||||
onClick={() => setSelectedSubAspectId(subAspect.id)}
|
|
||||||
>
|
|
||||||
<div className="text-xs">{subAspect.name}</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
|
||||||
</div>
|
{/* Sub-Aspek */}
|
||||||
</Flex>
|
{openAspects[aspect.id] && (
|
||||||
|
<div className="mt-2 space-y-2">
|
||||||
|
{aspect.subAspects
|
||||||
|
.filter((subAspect) =>
|
||||||
|
data?.data.some((question) => question.subAspectId === subAspect.id)
|
||||||
|
)
|
||||||
|
.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'}`}
|
||||||
|
onClick={() => setSelectedSubAspectId(subAspect.id)}
|
||||||
|
>
|
||||||
|
<div className="text-xs">{subAspect.name}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* MIDDLE */}
|
{/* MIDDLE */}
|
||||||
{/* Pertanyaan */}
|
{/* Pertanyaan */}
|
||||||
<div className="ml-0 md:ml-64 mr-0 md:mr-60 flex-1 overflow-y-auto h-full">
|
<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 }}>
|
<div className="space-y-6 flex flex-col">
|
||||||
<Text className="text-2xl font-bold ml-6">
|
<Label className="text-2xl font-bold ml-6 mt-4">
|
||||||
Harap menjawab semua pertanyaan yang tersedia
|
Harap menjawab semua pertanyaan yang tersedia
|
||||||
</Text>
|
</Label>
|
||||||
<Text className="text-gray-400 ml-6 mb-7">Semua jawaban Anda akan ditinjau</Text>
|
<Label className="text-gray-400 ml-6 mb-7">Semua jawaban Anda akan ditinjau</Label>
|
||||||
{filteredQuestions.length === 0 ? (
|
{filteredQuestions.length === 0 ? (
|
||||||
<Text className="text-center p-3">
|
<Label className="text-center p-3">
|
||||||
Pertanyaan tidak ada untuk sub-aspek yang dipilih.
|
Pertanyaan tidak ada untuk sub-aspek yang dipilih.
|
||||||
</Text>
|
</Label>
|
||||||
) : (
|
) : (
|
||||||
filteredQuestions.map((question: any, index: number) => {
|
filteredQuestions.map((question: any, index: number) => {
|
||||||
const questionId = question.questionId;
|
const questionId = question.questionId;
|
||||||
|
|
@ -757,99 +753,97 @@ export default function AssessmentPage() {
|
||||||
ref={(el) => (questionRefs.current[questionId] = el)}
|
ref={(el) => (questionRefs.current[questionId] = el)}
|
||||||
className="space-y-4"
|
className="space-y-4"
|
||||||
>
|
>
|
||||||
<Stack gap="sm">
|
<div className="grid grid-cols-[auto_1fr_auto] gap-2 w-full items-start">
|
||||||
<div className="grid grid-cols-[auto_1fr_auto] gap-2 w-full items-start">
|
{/* Question Number */}
|
||||||
{/* Question Number */}
|
<Label className="font-bold p-2 text-sm">{startIndex + index + 1}.</Label>
|
||||||
<Text className="font-bold p-2 text-sm">{startIndex + index + 1}.</Text>
|
|
||||||
|
|
||||||
{/* Question Text */}
|
{/* 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 */}
|
{/* Action Button/Flag */}
|
||||||
<ActionIcon
|
<button
|
||||||
onClick={() => handleToggleFlag(questionId)}
|
onClick={() => handleToggleFlag(questionId)}
|
||||||
title="Tandai"
|
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"}`}
|
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"}`}
|
||||||
>
|
>
|
||||||
<TbFlagFilled
|
<TbFlagFilled
|
||||||
size={25}
|
size={25}
|
||||||
className={`p-1 ${flaggedQuestions[questionId] ? "text-white" : "text-black"}`}
|
className={`p-1 ${flaggedQuestions[questionId] ? "text-white" : "text-black"}`}
|
||||||
/>
|
|
||||||
</ActionIcon>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Radio Button Options */}
|
|
||||||
{question.options?.length > 0 ? (
|
|
||||||
<div className="mx-11">
|
|
||||||
<RadioGroup
|
|
||||||
value={answers[question.questionId] || ""}
|
|
||||||
onValueChange={(value) => handleAnswerChange(question.questionId, value)}
|
|
||||||
className="flex flex-col gap-2"
|
|
||||||
>
|
|
||||||
{question.options.map((option: any) => (
|
|
||||||
<div
|
|
||||||
key={option.optionId}
|
|
||||||
className={`cursor-pointer transition-transform transform hover:scale-105 shadow-md hover:shadow-lg flex items-center border-4 rounded-lg p-3 text-sm ${answers[question.questionId] === option.optionId
|
|
||||||
? "bg-[--primary-color] text-white border-[--primary-color]"
|
|
||||||
: "bg-gray-200 text-black border-gray-200"
|
|
||||||
}`}
|
|
||||||
onClick={() => handleAnswerChange(question.questionId, option.optionId)}
|
|
||||||
>
|
|
||||||
<RadioGroupItem
|
|
||||||
value={option.optionId}
|
|
||||||
id={option.optionId}
|
|
||||||
checked={answers[question.questionId] === option.optionId}
|
|
||||||
className="bg-white checked:bg-white checked:border-[--primary-color] pointer-events-none rounded-full"
|
|
||||||
/>
|
|
||||||
<Label
|
|
||||||
htmlFor={option.optionId}
|
|
||||||
className="ml-2 font-bold cursor-pointer flex-1"
|
|
||||||
>
|
|
||||||
{option.optionText}
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</RadioGroup>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<Text color="red">Tidak ada opsi untuk pertanyaan ini.</Text>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Textarea for additional information */}
|
|
||||||
<div className="mx-11">
|
|
||||||
<Textarea
|
|
||||||
placeholder="Berikan keterangan terkait jawaban di atas"
|
|
||||||
value={validationInformation[question.questionId] || ""}
|
|
||||||
onChange={(event) => handleTextareaChange(question.questionId, event.currentTarget.value)}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* File Upload */}
|
{/* Radio Button Options */}
|
||||||
<FileUpload
|
{question.options?.length > 0 ? (
|
||||||
question={question}
|
<div className="mx-11">
|
||||||
handleFileChange={handleFileChange}
|
<RadioGroup
|
||||||
handleRemoveFile={handleRemoveFile}
|
value={answers[question.questionId] || ""}
|
||||||
uploadedFiles={uploadedFiles}
|
onValueChange={(value) => handleAnswerChange(question.questionId, value)}
|
||||||
dragActive={dragActive}
|
className="flex flex-col gap-2"
|
||||||
handleDragOver={handleDragOver}
|
>
|
||||||
handleDragLeave={handleDragLeave}
|
{question.options.map((option: any) => (
|
||||||
handleDrop={handleDrop}
|
<div
|
||||||
modalOpenFileSize={modalOpenFileSize}
|
key={option.optionId}
|
||||||
setModalOpenFileSize={setModalOpenFileSize}
|
className={`cursor-pointer transition-transform transform hover:scale-105 shadow-md hover:shadow-lg flex items-center border-4 rounded-lg p-3 text-sm ${answers[question.questionId] === option.optionId
|
||||||
exceededFileName={exceededFileName}
|
? "bg-[--primary-color] text-white border-[--primary-color]"
|
||||||
handleClick={handleClick}
|
: "bg-gray-200 text-black border-gray-200"
|
||||||
|
}`}
|
||||||
|
onClick={() => handleAnswerChange(question.questionId, option.optionId)}
|
||||||
|
>
|
||||||
|
<RadioGroupItem
|
||||||
|
value={option.optionId}
|
||||||
|
id={option.optionId}
|
||||||
|
checked={answers[question.questionId] === option.optionId}
|
||||||
|
className="bg-white checked:bg-white checked:border-[--primary-color] pointer-events-none rounded-full"
|
||||||
|
/>
|
||||||
|
<Label
|
||||||
|
htmlFor={option.optionId}
|
||||||
|
className="ml-2 font-bold cursor-pointer flex-1"
|
||||||
|
>
|
||||||
|
{option.optionText}
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</RadioGroup>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Label color="red">Tidak ada opsi untuk pertanyaan ini.</Label>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Textarea for additional information */}
|
||||||
|
<div className="mx-11">
|
||||||
|
<Textarea
|
||||||
|
placeholder="Berikan keterangan terkait jawaban di atas"
|
||||||
|
value={validationInformation[question.questionId] || ""}
|
||||||
|
onChange={(event) => handleTextareaChange(question.questionId, event.currentTarget.value)}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Divider between questions */}
|
{/* File Upload */}
|
||||||
<div>
|
<FileUpload
|
||||||
<hr className="border-t-2 border-gray-300 mx-11 mt-6 mb-6" />
|
question={question}
|
||||||
</div>
|
handleFileChange={handleFileChange}
|
||||||
</Stack>
|
handleRemoveFile={handleRemoveFile}
|
||||||
|
uploadedFiles={uploadedFiles}
|
||||||
|
dragActive={dragActive}
|
||||||
|
handleDragOver={handleDragOver}
|
||||||
|
handleDragLeave={handleDragLeave}
|
||||||
|
handleDrop={handleDrop}
|
||||||
|
modalOpenFileSize={modalOpenFileSize}
|
||||||
|
setModalOpenFileSize={setModalOpenFileSize}
|
||||||
|
exceededFileName={exceededFileName}
|
||||||
|
handleClick={handleClick}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Divider between questions */}
|
||||||
|
<div>
|
||||||
|
<hr className="border-t-2 border-gray-300 mx-11 mt-6 mb-6" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
)}
|
)}
|
||||||
</Stack>
|
</div>
|
||||||
{/* Pagination for mobile */}
|
{/* Pagination for mobile */}
|
||||||
<div className="md:hidden mb-4 flex justify-center">
|
<div className="md:hidden mb-4 flex justify-center">
|
||||||
<Pagination
|
<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>
|
</Pagination>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -920,73 +914,71 @@ export default function AssessmentPage() {
|
||||||
<div className="mt-4">
|
<div className="mt-4">
|
||||||
<h2 className="text-lg font-extrabold mt-4 mb-2">Nilai Sementara</h2>
|
<h2 className="text-lg font-extrabold mt-4 mb-2">Nilai Sementara</h2>
|
||||||
<div className="max-h-full overflow-hidden">
|
<div className="max-h-full overflow-hidden">
|
||||||
<div>
|
<div>
|
||||||
{filteredAspects.length > 0 ? (
|
{filteredAspects.length > 0 ? (
|
||||||
filteredAspects.map((aspect) => {
|
filteredAspects.map((aspect) => {
|
||||||
const aspectScore = parseFloat(aspect.averageScore).toFixed(2);
|
const aspectScore = parseFloat(aspect.averageScore).toFixed(2);
|
||||||
const aspectScoreValue = parseFloat(aspectScore);
|
const aspectScoreValue = parseFloat(aspectScore);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key={aspect.aspectId} className="flex justify-between items-center">
|
<div key={aspect.aspectId} className="flex justify-between items-center">
|
||||||
<Text className="text-lg text-gray-700 break-words whitespace-normal">{aspect.aspectName}</Text>
|
<Label className="text-lg text-gray-700 break-words whitespace-normal">{aspect.aspectName}</Label>
|
||||||
<Text
|
<Label
|
||||||
className={`text-xl font-bold ${
|
className={`text-xl font-bold ${aspectScoreValue >= 4.5
|
||||||
aspectScoreValue >= 4.5
|
? "text-green-700"
|
||||||
? "text-green-700"
|
: aspectScoreValue >= 3.5
|
||||||
: aspectScoreValue >= 3.5
|
? "text-green-400"
|
||||||
? "text-green-400"
|
: aspectScoreValue >= 2.5
|
||||||
: aspectScoreValue >= 2.5
|
|
||||||
? "text-yellow-400"
|
? "text-yellow-400"
|
||||||
: aspectScoreValue >= 1.5
|
: aspectScoreValue >= 1.5
|
||||||
? "text-orange-500"
|
? "text-orange-500"
|
||||||
: "text-red-500"
|
: "text-red-500"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{aspectScore}
|
{aspectScore}
|
||||||
</Text>
|
</Label>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
{/* Divider */}
|
{/* Divider */}
|
||||||
<div className="border-t-2 border-gray-300 my-4" />
|
<div className="border-t-2 border-gray-300 my-4" />
|
||||||
|
|
||||||
{/* Skor Sub-Aspek */}
|
{/* Skor Sub-Aspek */}
|
||||||
<div>
|
<div>
|
||||||
{filteredSubAspects.length > 0 ? (
|
{filteredSubAspects.length > 0 ? (
|
||||||
filteredSubAspects.map((subAspect) => {
|
filteredSubAspects.map((subAspect) => {
|
||||||
const subAspectScore = parseFloat(subAspect.averageScore).toFixed(2);
|
const subAspectScore = parseFloat(subAspect.averageScore).toFixed(2);
|
||||||
const subAspectScoreValue = parseFloat(subAspectScore);
|
const subAspectScoreValue = parseFloat(subAspectScore);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
|
<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>
|
<Label className="text-sm text-gray-700 break-words whitespace-normal">{subAspect.subAspectName}</Label>
|
||||||
<Text
|
<Label
|
||||||
className={`text-sm font-bold ${
|
className={`text-sm font-bold ${subAspectScoreValue >= 4.5
|
||||||
subAspectScoreValue >= 4.5
|
? "text-green-700"
|
||||||
? "text-green-700"
|
: subAspectScoreValue >= 3.5
|
||||||
: subAspectScoreValue >= 3.5
|
? "text-green-400"
|
||||||
? "text-green-400"
|
: subAspectScoreValue >= 2.5
|
||||||
: subAspectScoreValue >= 2.5
|
|
||||||
? "text-yellow-400"
|
? "text-yellow-400"
|
||||||
: subAspectScoreValue >= 1.5
|
: subAspectScoreValue >= 1.5
|
||||||
? "text-orange-500"
|
? "text-orange-500"
|
||||||
: "text-red-500"
|
: "text-red-500"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{subAspectScore}
|
{subAspectScore}
|
||||||
</Text>
|
</Label>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
{/* Finish Button */}
|
{/* Finish Button */}
|
||||||
<div className="mt-4">
|
<div className="mt-4">
|
||||||
|
|
@ -1019,11 +1011,11 @@ export default function AssessmentPage() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Sidebar for desktop (always visible) */}
|
{/* Sidebar for desktop (always visible) */}
|
||||||
<div className="hidden md:block fixed h-screen right-0 w-60 overflow-auto mr-4">
|
<div className="hidden md:block fixed h-screen right-0 w-60 overflow-auto mr-4 border-x">
|
||||||
<Flex direction="column" gap="xs" className="mx-4">
|
<div className="mx-4 space-y-2">
|
||||||
<Text className="font-medium text-lg text-gray-800 mb-2">
|
<Label className="font-medium text-lg text-gray-800 mb-2">
|
||||||
Nomor Soal
|
Nomor Soal
|
||||||
</Text>
|
</Label>
|
||||||
|
|
||||||
{/* Navigasi (Number of Questions) */}
|
{/* Navigasi (Number of Questions) */}
|
||||||
<div className="grid grid-cols-5 gap-2">
|
<div className="grid grid-cols-5 gap-2">
|
||||||
|
|
@ -1050,126 +1042,128 @@ export default function AssessmentPage() {
|
||||||
) : null;
|
) : null;
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="mt-4 flex justify-center">
|
{/* Pagination */}
|
||||||
<Pagination
|
<div className="mt-6 py-2 flex justify-center border-y">
|
||||||
page={currentPage}
|
<Pagination
|
||||||
totalPages={totalPages}
|
page={currentPage}
|
||||||
onPageChange={(newPage) => {
|
totalPages={totalPages}
|
||||||
if (selectedSubAspectId) {
|
onPageChange={(newPage) => {
|
||||||
handlePageChange(selectedSubAspectId, newPage);
|
if (selectedSubAspectId) {
|
||||||
}
|
handlePageChange(selectedSubAspectId, newPage);
|
||||||
}}
|
}
|
||||||
>
|
}}
|
||||||
<Text className="text-xs m-0">Halaman {currentPage} dari {totalPages}</Text>
|
>
|
||||||
</Pagination>
|
<Label className="text-xs m-0">Halaman {currentPage} dari {totalPages}</Label>
|
||||||
</div>
|
</Pagination>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mx-4 space-y-2">
|
||||||
{/* Skor Aspek dan Sub-Aspek */}
|
{/* Skor Aspek dan Sub-Aspek */}
|
||||||
<div className="mt-4">
|
<div className="mt-4">
|
||||||
<Card>
|
<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
|
Nilai Sementara
|
||||||
</Text>
|
</p>
|
||||||
<CardContent className="max-h-full overflow-hidden">
|
<CardContent className="max-h-full overflow-hidden">
|
||||||
<ScrollArea className="h-[200px] w-full rounded-md p-2">
|
<ScrollArea className="h-[200px] w-full rounded-md p-2">
|
||||||
<CardDescription>
|
<CardDescription>
|
||||||
{filteredAspects.length > 0 ? (
|
{filteredAspects.length > 0 ? (
|
||||||
filteredAspects.map((aspect) => {
|
filteredAspects.map((aspect) => {
|
||||||
const aspectScore = parseFloat(aspect.averageScore).toFixed(2);
|
const aspectScore = parseFloat(aspect.averageScore).toFixed(2);
|
||||||
const aspectScoreValue = parseFloat(aspectScore);
|
const aspectScoreValue = parseFloat(aspectScore);
|
||||||
|
|
||||||
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
|
|
||||||
? "text-green-700"
|
|
||||||
: aspectScoreValue >= 3.5
|
|
||||||
? "text-green-400"
|
|
||||||
: aspectScoreValue >= 2.5
|
|
||||||
? "text-yellow-400"
|
|
||||||
: aspectScoreValue >= 1.5
|
|
||||||
? "text-orange-500"
|
|
||||||
: "text-red-500"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{aspectScore}
|
|
||||||
</Text>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
) : (
|
|
||||||
<Text className="text-base text-gray-700">Data aspek ini kosong</Text>
|
|
||||||
)}
|
|
||||||
</CardDescription>
|
|
||||||
|
|
||||||
{/* Garis pembatas */}
|
|
||||||
<div className="border-t-2 border-gray-300 my-4" />
|
|
||||||
|
|
||||||
{/* Skor Sub-Aspek */}
|
|
||||||
{filteredSubAspects.length > 0 ? (
|
|
||||||
filteredSubAspects.map((subAspect) => {
|
|
||||||
const subAspectScore = parseFloat(subAspect.averageScore).toFixed(2);
|
|
||||||
const subAspectScoreValue = parseFloat(subAspectScore);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
|
<div key={aspect.aspectId} className="flex justify-between items-center">
|
||||||
<Text className="text-sm text-gray-700">{subAspect.subAspectName}</Text>
|
<Label className="text-lg text-gray-700">{aspect.aspectName}</Label>
|
||||||
<Text
|
<Label
|
||||||
className={`text-sm font-bold ${
|
className={`text-xl font-bold ${aspectScoreValue >= 4.5
|
||||||
subAspectScoreValue >= 4.5
|
? "text-green-700"
|
||||||
? "text-green-700"
|
: aspectScoreValue >= 3.5
|
||||||
: subAspectScoreValue >= 3.5
|
|
||||||
? "text-green-400"
|
? "text-green-400"
|
||||||
: subAspectScoreValue >= 2.5
|
: aspectScoreValue >= 2.5
|
||||||
? "text-yellow-400"
|
? "text-yellow-400"
|
||||||
: subAspectScoreValue >= 1.5
|
: aspectScoreValue >= 1.5
|
||||||
? "text-orange-500"
|
? "text-orange-500"
|
||||||
: "text-red-500"
|
: "text-red-500"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{subAspectScore}
|
{aspectScore}
|
||||||
</Text>
|
</Label>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
) : (
|
) : (
|
||||||
<Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text>
|
<Label className="text-base text-gray-700">Data aspek ini kosong</Label>
|
||||||
)}
|
)}
|
||||||
</ScrollArea>
|
</CardDescription>
|
||||||
{/* Tombol Selesai */}
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
onClick={handleFinishClick}
|
|
||||||
className="bg-[--primary-color] text-white font-bold rounded-md w-full text-sm"
|
|
||||||
>
|
|
||||||
Selesai
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
|
|
||||||
{/* Modal untuk konfirmasi selesai asesmen */}
|
{/* Garis pembatas */}
|
||||||
<FinishAssessmentModal
|
<div className="border-t-2 border-gray-300 my-4" />
|
||||||
opened={modalOpen}
|
|
||||||
onClose={() => setModalOpen(false)}
|
|
||||||
onConfirm={handleConfirmFinish}
|
|
||||||
assessmentId={assessmentId}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Modal untuk peringatan jika ada pertanyaan yang belum dijawab */}
|
{/* Skor Sub-Aspek */}
|
||||||
<ValidationModal
|
{filteredSubAspects.length > 0 ? (
|
||||||
opened={validationModalOpen}
|
filteredSubAspects.map((subAspect) => {
|
||||||
onClose={() => setValidationModalOpen(false)}
|
const subAspectScore = parseFloat(subAspect.averageScore).toFixed(2);
|
||||||
unansweredQuestions={unansweredQuestions}
|
const subAspectScoreValue = parseFloat(subAspectScore);
|
||||||
/>
|
|
||||||
|
return (
|
||||||
|
<div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
|
||||||
|
<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"
|
||||||
|
: subAspectScoreValue >= 2.5
|
||||||
|
? "text-yellow-400"
|
||||||
|
: subAspectScoreValue >= 1.5
|
||||||
|
? "text-orange-500"
|
||||||
|
: "text-red-500"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{subAspectScore}
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
) : (
|
||||||
|
<Label className="text-sm text-gray-700">Data sub-aspek ini kosong</Label>
|
||||||
|
)}
|
||||||
|
</ScrollArea>
|
||||||
|
|
||||||
|
{/* Tombol Selesai */}
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
onClick={handleFinishClick}
|
||||||
|
className="bg-[--primary-color] text-white font-bold rounded-md w-full text-sm"
|
||||||
|
>
|
||||||
|
Selesai
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
|
||||||
|
{/* Modal untuk konfirmasi selesai asesmen */}
|
||||||
|
<FinishAssessmentModal
|
||||||
|
opened={modalOpen}
|
||||||
|
onClose={() => setModalOpen(false)}
|
||||||
|
onConfirm={handleConfirmFinish}
|
||||||
|
assessmentId={assessmentId}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Modal untuk peringatan jika ada pertanyaan yang belum dijawab */}
|
||||||
|
<ValidationModal
|
||||||
|
opened={validationModalOpen}
|
||||||
|
onClose={() => setValidationModalOpen(false)}
|
||||||
|
unansweredQuestions={unansweredQuestions}
|
||||||
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
</Flex>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Flex>
|
</div>
|
||||||
</Stack>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user