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,8 +611,8 @@ 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 */}
|
||||||
|
|
@ -631,7 +627,7 @@ export default function AssessmentPage() {
|
||||||
<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,15 +673,15 @@ 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
|
||||||
|
|
@ -731,21 +727,21 @@ export default function AssessmentPage() {
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</Flex>
|
</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,16 +753,15 @@ 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 */}
|
||||||
<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 */}
|
{/* 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"}`}
|
||||||
|
|
@ -775,7 +770,7 @@ export default function AssessmentPage() {
|
||||||
size={25}
|
size={25}
|
||||||
className={`p-1 ${flaggedQuestions[questionId] ? "text-white" : "text-black"}`}
|
className={`p-1 ${flaggedQuestions[questionId] ? "text-white" : "text-black"}`}
|
||||||
/>
|
/>
|
||||||
</ActionIcon>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Radio Button Options */}
|
{/* Radio Button Options */}
|
||||||
|
|
@ -812,7 +807,7 @@ export default function AssessmentPage() {
|
||||||
</RadioGroup>
|
</RadioGroup>
|
||||||
</div>
|
</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 */}
|
{/* Textarea for additional information */}
|
||||||
|
|
@ -844,12 +839,11 @@ export default function AssessmentPage() {
|
||||||
<div>
|
<div>
|
||||||
<hr className="border-t-2 border-gray-300 mx-11 mt-6 mb-6" />
|
<hr className="border-t-2 border-gray-300 mx-11 mt-6 mb-6" />
|
||||||
</div>
|
</div>
|
||||||
</Stack>
|
|
||||||
</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>
|
||||||
|
|
@ -928,10 +922,9 @@ export default function AssessmentPage() {
|
||||||
|
|
||||||
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"
|
||||||
|
|
@ -943,12 +936,12 @@ export default function AssessmentPage() {
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{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>
|
||||||
|
|
||||||
|
|
@ -964,10 +957,9 @@ export default function AssessmentPage() {
|
||||||
|
|
||||||
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"
|
||||||
|
|
@ -979,12 +971,12 @@ export default function AssessmentPage() {
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{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>
|
||||||
|
|
||||||
|
|
@ -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,8 +1042,10 @@ export default function AssessmentPage() {
|
||||||
) : null;
|
) : null;
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="mt-4 flex justify-center">
|
{/* Pagination */}
|
||||||
|
<div className="mt-6 py-2 flex justify-center border-y">
|
||||||
<Pagination
|
<Pagination
|
||||||
page={currentPage}
|
page={currentPage}
|
||||||
totalPages={totalPages}
|
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>
|
</Pagination>
|
||||||
</div>
|
</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>
|
||||||
|
|
@ -1081,10 +1076,9 @@ export default function AssessmentPage() {
|
||||||
|
|
||||||
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">{aspect.aspectName}</Text>
|
<Label className="text-lg text-gray-700">{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"
|
||||||
|
|
@ -1096,12 +1090,12 @@ export default function AssessmentPage() {
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{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>
|
||||||
)}
|
)}
|
||||||
</CardDescription>
|
</CardDescription>
|
||||||
|
|
||||||
|
|
@ -1116,10 +1110,9 @@ export default function AssessmentPage() {
|
||||||
|
|
||||||
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">{subAspect.subAspectName}</Text>
|
<Label className="text-sm text-gray-700">{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"
|
||||||
|
|
@ -1131,14 +1124,15 @@ export default function AssessmentPage() {
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{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>
|
||||||
)}
|
)}
|
||||||
</ScrollArea>
|
</ScrollArea>
|
||||||
|
|
||||||
{/* Tombol Selesai */}
|
{/* Tombol Selesai */}
|
||||||
<div>
|
<div>
|
||||||
<Button
|
<Button
|
||||||
|
|
@ -1166,10 +1160,10 @@ export default function AssessmentPage() {
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
</Flex>
|
|
||||||
</div>
|
</div>
|
||||||
</Flex>
|
</div>
|
||||||
</Stack>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -1,12 +1,6 @@
|
||||||
import { createLazyFileRoute } from "@tanstack/react-router";
|
import { createLazyFileRoute } from "@tanstack/react-router";
|
||||||
import {
|
import {
|
||||||
Flex,
|
|
||||||
Stack,
|
|
||||||
Text,
|
|
||||||
Loader,
|
Loader,
|
||||||
ActionIcon,
|
|
||||||
CloseButton,
|
|
||||||
Group,
|
|
||||||
} from "@mantine/core";
|
} from "@mantine/core";
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
|
|
@ -32,11 +26,9 @@ import {
|
||||||
} from "@/shadcn/components/ui/leftsheet";
|
} from "@/shadcn/components/ui/leftsheet";
|
||||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||||
import {
|
import {
|
||||||
submitAssessmentMutationOptions,
|
|
||||||
uploadFileMutationOptions,
|
uploadFileMutationOptions,
|
||||||
fetchAspects,
|
fetchAspects,
|
||||||
getQuestionsAllQueryOptions,
|
getQuestionsAllQueryOptions,
|
||||||
toggleFlagAnswer,
|
|
||||||
} from "@/modules/assessmentManagement/queries/assessmentQueries";
|
} from "@/modules/assessmentManagement/queries/assessmentQueries";
|
||||||
import {
|
import {
|
||||||
getAnswersRevisionQueryOptions,
|
getAnswersRevisionQueryOptions,
|
||||||
|
|
@ -50,7 +42,6 @@ import {
|
||||||
import { TbLayoutSidebarLeftCollapseFilled, TbChevronRight, TbChevronDown } from "react-icons/tb";
|
import { TbLayoutSidebarLeftCollapseFilled, TbChevronRight, TbChevronDown } from "react-icons/tb";
|
||||||
import FinishAssessmentModal from "@/modules/assessmentManagement/modals/ConfirmModal";
|
import FinishAssessmentModal from "@/modules/assessmentManagement/modals/ConfirmModal";
|
||||||
import ValidationModal from "@/modules/assessmentManagement/modals/ValidationModal";
|
import ValidationModal from "@/modules/assessmentManagement/modals/ValidationModal";
|
||||||
import FileSizeValidationModal from "@/modules/assessmentManagement/modals/FileSizeValidationModal";
|
|
||||||
import { useState, useRef, useEffect } from "react";
|
import { useState, useRef, useEffect } from "react";
|
||||||
import AppHeader from "@/components/AppHeader";
|
import AppHeader from "@/components/AppHeader";
|
||||||
|
|
||||||
|
|
@ -288,29 +279,6 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
}
|
}
|
||||||
}, [flaggedQuestions]);
|
}, [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
|
// Usage of the mutation in your component
|
||||||
const { mutate: submitOption } = useMutation({
|
const { mutate: submitOption } = useMutation({
|
||||||
mutationFn: (form: {
|
mutationFn: (form: {
|
||||||
|
|
@ -561,9 +529,9 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
|
|
||||||
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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -571,9 +539,9 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
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>
|
||||||
);
|
);
|
||||||
|
|
@ -607,8 +575,8 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
|
|
||||||
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 */}
|
||||||
|
|
@ -623,7 +591,7 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
<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
|
||||||
|
|
@ -658,7 +626,7 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
.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>
|
||||||
|
|
@ -669,15 +637,15 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
</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
|
||||||
|
|
@ -723,21 +691,21 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</Flex>
|
</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;
|
||||||
|
|
@ -749,13 +717,12 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
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 */}
|
||||||
<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 */}
|
{/* 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>
|
</div>
|
||||||
|
|
||||||
{/* Radio Button Options */}
|
{/* Radio Button Options */}
|
||||||
|
|
@ -792,7 +759,7 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
</RadioGroup>
|
</RadioGroup>
|
||||||
</div>
|
</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 */}
|
{/* Textarea for additional information */}
|
||||||
|
|
@ -808,12 +775,11 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
<div>
|
<div>
|
||||||
<hr className="border-t-2 border-gray-300 mx-11 mt-6 mb-6" />
|
<hr className="border-t-2 border-gray-300 mx-11 mt-6 mb-6" />
|
||||||
</div>
|
</div>
|
||||||
</Stack>
|
|
||||||
</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
|
||||||
|
|
@ -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>
|
</Pagination>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -892,10 +858,9 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
|
|
||||||
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"
|
||||||
|
|
@ -907,12 +872,12 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{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>
|
||||||
|
|
||||||
|
|
@ -928,10 +893,9 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
|
|
||||||
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"
|
||||||
|
|
@ -943,12 +907,12 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{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>
|
||||||
|
|
||||||
|
|
@ -982,11 +946,11 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
</Sheet>
|
</Sheet>
|
||||||
</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">
|
||||||
|
|
@ -1013,8 +977,10 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
) : null;
|
) : null;
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="mt-4 flex justify-center">
|
{/* Pagination */}
|
||||||
|
<div className="mt-6 py-2 flex justify-center border-y">
|
||||||
<Pagination
|
<Pagination
|
||||||
page={currentPage}
|
page={currentPage}
|
||||||
totalPages={totalPages}
|
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>
|
</Pagination>
|
||||||
</div>
|
</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>
|
||||||
|
|
@ -1044,10 +1011,9 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
|
|
||||||
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">{aspect.aspectName}</Text>
|
<Label className="text-lg text-gray-700">{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"
|
||||||
|
|
@ -1059,12 +1025,12 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{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>
|
||||||
)}
|
)}
|
||||||
</CardDescription>
|
</CardDescription>
|
||||||
|
|
||||||
|
|
@ -1079,10 +1045,9 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
|
|
||||||
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">{subAspect.subAspectName}</Text>
|
<Label className="text-sm text-gray-700">{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"
|
||||||
|
|
@ -1094,14 +1059,15 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{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>
|
||||||
)}
|
)}
|
||||||
</ScrollArea>
|
</ScrollArea>
|
||||||
|
|
||||||
{/* Tombol Selesai */}
|
{/* Tombol Selesai */}
|
||||||
<div>
|
<div>
|
||||||
<Button
|
<Button
|
||||||
|
|
@ -1129,10 +1095,10 @@ console.log("unanswered questions:", unanswered.length);
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
</Flex>
|
|
||||||
</div>
|
</div>
|
||||||
</Flex>
|
</div>
|
||||||
</Stack>
|
</div>
|
||||||
|
</div>
|
||||||
</div >
|
</div >
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user