1196 lines
46 KiB
TypeScript
1196 lines
46 KiB
TypeScript
import { createLazyFileRoute } from "@tanstack/react-router";
|
|
import {
|
|
Flex,
|
|
Stack,
|
|
Text,
|
|
Loader,
|
|
ActionIcon,
|
|
CloseButton,
|
|
Group,
|
|
} from "@mantine/core";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardTitle,
|
|
} from "@/shadcn/components/ui/card";
|
|
import { Button } from "@/shadcn/components/ui/button";
|
|
import { Textarea } from "@/shadcn/components/ui/textarea";
|
|
import { Label } from "@/shadcn/components/ui/label";
|
|
import { RadioGroup, RadioGroupItem } from "@/shadcn/components/ui/radio-group";
|
|
import { ScrollArea } from "@/shadcn/components/ui/scroll-area";
|
|
import {
|
|
Pagination,
|
|
} from "@/shadcn/components/ui/pagination-assessment";
|
|
import { useQuery, useMutation } from "@tanstack/react-query";
|
|
import {
|
|
getAnswersQueryOptions,
|
|
submitAssessmentMutationOptions,
|
|
uploadFileMutationOptions,
|
|
submitValidationQuery,
|
|
submitOptionMutationOptions,
|
|
getAverageScoreQueryOptions,
|
|
fetchAspects,
|
|
getQuestionsAllQueryOptions,
|
|
toggleFlagAnswer,
|
|
} from "@/modules/assessmentManagement/queries/assessmentQueries";
|
|
import { TbFlagFilled, TbUpload, TbChevronRight, TbChevronDown, TbLayoutSidebarLeftCollapseFilled, TbMenu2 } from "react-icons/tb";
|
|
import FinishAssessmentModal from "@/modules/assessmentManagement/modals/ConfirmModal";
|
|
import FileUpload from "@/modules/assessmentManagement/fileUpload/fileUpload";
|
|
import ValidationModal from "@/modules/assessmentManagement/modals/ValidationModal";
|
|
import FileSizeValidationModal from "@/modules/assessmentManagement/modals/FileSizeValidationModal";
|
|
import {
|
|
Sheet,
|
|
SheetClose,
|
|
SheetContent,
|
|
SheetDescription,
|
|
SheetFooter,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
SheetTrigger,
|
|
} from "@/shadcn/components/ui/sheet";
|
|
import {
|
|
LeftSheet,
|
|
LeftSheetClose,
|
|
LeftSheetContent,
|
|
LeftSheetDescription,
|
|
LeftSheetFooter,
|
|
LeftSheetHeader,
|
|
LeftSheetTitle,
|
|
LeftSheetTrigger,
|
|
} from "@/shadcn/components/ui/leftsheet";
|
|
import { useState, useRef, useEffect } from "react";
|
|
import AppHeader from "@/components/AppHeader";
|
|
|
|
const getQueryParam = (param: string) => {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
return urlParams.get(param);
|
|
};
|
|
|
|
export const Route = createLazyFileRoute("/_assessmentLayout/assessment/")({
|
|
component: AssessmentPage,
|
|
});
|
|
|
|
interface ToggleFlagResponse {
|
|
message: string;
|
|
answer: {
|
|
id: string;
|
|
createdAt: string | null;
|
|
updatedAt: string | null;
|
|
optionId: string | null;
|
|
assessmentId: string | null;
|
|
isFlagged: boolean | null;
|
|
filename: string | null;
|
|
validationInformation: string;
|
|
};
|
|
}
|
|
|
|
export interface SubmitOptionResponse {
|
|
message: string;
|
|
answer: {
|
|
id: string;
|
|
isFlagged: boolean | null;
|
|
};
|
|
}
|
|
|
|
export default function AssessmentPage() {
|
|
const [page, setPage] = useState(1);
|
|
const limit = 10;
|
|
const questionRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
|
|
const [files, setFiles] = useState<File[]>([]);
|
|
const [dragActive, setDragActive] = useState(false);
|
|
const [flaggedQuestions, setFlaggedQuestions] = useState<{
|
|
[key: string]: boolean;
|
|
}>({});
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
const [modalOpenFileSize, setModalOpenFileSize] = useState(false);
|
|
const [selectedAspectId, setSelectedAspectId] = useState<string | null>(null);
|
|
const [selectedSubAspectId, setSelectedSubAspectId] = useState<string | null>(null);
|
|
const [assessmentId, setAssessmentId] = useState<string | null>(null);
|
|
const [answers, setAnswers] = useState<{ [key: string]: string }>({});
|
|
const [validationInformation, setValidationInformation] = useState<{ [key: string]: string }>({});
|
|
const [uploadedFiles, setUploadedFiles] = useState<{ [key: string]: File | null }>({});
|
|
const [unansweredQuestions, setUnansweredQuestions] = useState(0);
|
|
const [validationModalOpen, setValidationModalOpen] = useState(false);
|
|
const [exceededFileName, setExceededFileName] = useState("");
|
|
const [currentPagePerSubAspect, setCurrentPagePerSubAspect] = useState<{ [subAspectId: string]: number }>({});
|
|
const currentPage = currentPagePerSubAspect[selectedSubAspectId || ""] || 1;
|
|
const questionsPerPage = 10;
|
|
const [isMobile, setIsMobile] = useState(window.innerWidth <= 768); // Check for mobile screen
|
|
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
|
|
const [openNavbar, setOpenNavbar] = useState(false);
|
|
const [isLeftSidebarOpen, setIsLeftSidebarOpen] = useState(false);
|
|
|
|
// Toggle the sidebar open/close on mobile
|
|
const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
|
|
|
|
const toggleLeftSidebar = () => setIsLeftSidebarOpen(!isLeftSidebarOpen);
|
|
|
|
const toggleSidebarLeftSide = () => {
|
|
setIsSidebarOpen((prevState) => !prevState);
|
|
};
|
|
|
|
// Fungsi toggle untuk membuka/menutup navbar
|
|
const toggle = () => {
|
|
setOpenNavbar((prevState) => !prevState);
|
|
};
|
|
|
|
// Adjust layout on screen resize
|
|
window.addEventListener('resize', () => {
|
|
setIsMobile(window.innerWidth <= 768);
|
|
});
|
|
|
|
// Fetch aspects and sub-aspects
|
|
const aspectsQuery = useQuery({
|
|
queryKey: ["aspects"],
|
|
queryFn: fetchAspects,
|
|
});
|
|
|
|
// Fetching questions data using useQuery
|
|
const { data, isLoading, isError, error } = useQuery(
|
|
getQuestionsAllQueryOptions(page, limit)
|
|
);
|
|
|
|
const handleFinishClick = () => {
|
|
// Memanggil fungsi untuk memeriksa pertanyaan yang belum dijawab
|
|
checkUnansweredQuestions();
|
|
};
|
|
|
|
useEffect(() => {
|
|
const id = getQueryParam("id");
|
|
|
|
if (!id) {
|
|
setAssessmentId(null);
|
|
} else {
|
|
setAssessmentId(id);
|
|
}
|
|
|
|
// Check if aspectsQuery.data is defined
|
|
if (aspectsQuery.data?.data && aspectsQuery.data.data.length > 0) {
|
|
// If no sub-aspect is selected, find a suitable default
|
|
if (selectedSubAspectId === null) {
|
|
const firstMatchingSubAspect = aspectsQuery.data.data
|
|
.flatMap((aspect) => aspect.subAspects) // Get all sub-aspects
|
|
.find((subAspect) =>
|
|
data?.data.some((question) => question.subAspectId === subAspect.id)
|
|
);
|
|
|
|
if (firstMatchingSubAspect) {
|
|
setSelectedSubAspectId(firstMatchingSubAspect.id);
|
|
|
|
// Find the parent aspect and set its id as the selectedAspectId
|
|
const parentAspect = aspectsQuery.data.data.find((aspect) =>
|
|
aspect.subAspects.some((sub) => sub.id === firstMatchingSubAspect.id)
|
|
);
|
|
|
|
if (parentAspect) {
|
|
setSelectedAspectId(parentAspect.id); // Use `id` from the parent aspect
|
|
setOpenAspects({ [parentAspect.id]: true }); // Open only relevant aspects
|
|
}
|
|
}
|
|
} else {
|
|
// Update the aspectId based on the selected sub-aspect
|
|
const matchingAspect = aspectsQuery.data.data.find((aspect) =>
|
|
aspect.subAspects.some((subAspect) => subAspect.id === selectedSubAspectId)
|
|
);
|
|
|
|
if (matchingAspect) {
|
|
setSelectedAspectId(matchingAspect.id); // Use `id` from the matching aspect
|
|
setOpenAspects({ [matchingAspect.id]: true }); // Close all other dropdowns and open only the newly selected aspect
|
|
} else {
|
|
console.warn("No matching aspect found for selected sub-aspect.");
|
|
setSelectedAspectId(null);
|
|
setOpenAspects({}); // Close all dropdowns if none of them match
|
|
}
|
|
}
|
|
}
|
|
}, [aspectsQuery.data, selectedSubAspectId, data?.data]);
|
|
|
|
// Fetching answers for the assessment
|
|
const { data: answersData } = useQuery(
|
|
getAnswersQueryOptions(assessmentId || "", page, limit),
|
|
);
|
|
|
|
if (answersData && answersData.data) {
|
|
const transformedData = answersData.data.reduce(
|
|
(acc: Record<string, string>, item: any) => {
|
|
if (item.questionId && item.optionId) {
|
|
acc[item.questionId] = item.optionId;
|
|
}
|
|
return acc;
|
|
},
|
|
{}
|
|
);
|
|
|
|
}
|
|
|
|
// Effect untuk mengatur answers dari data yang diambil
|
|
useEffect(() => {
|
|
const assessmentId = getQueryParam("id");
|
|
if (!assessmentId) {
|
|
console.error("Assessment ID tidak ditemukan");
|
|
return;
|
|
}
|
|
|
|
// Set answers from `answersData` if data is available
|
|
if (answersData && Array.isArray(answersData.data)) {
|
|
const answersFromDatabase = answersData.data.reduce(
|
|
(acc: Record<string, string>, item: any) => {
|
|
if (item.questionId && item.optionId) {
|
|
acc[item.questionId] = item.optionId;
|
|
}
|
|
return acc;
|
|
},
|
|
{}
|
|
);
|
|
setAnswers(answersFromDatabase); // Set the transformed data directly to state
|
|
}
|
|
}, [answersData]);
|
|
|
|
// Fungsi untuk memeriksa pertanyaan yang belum dijawab
|
|
const checkUnansweredQuestions = () => {
|
|
|
|
// Filter pertanyaan yang belum dijawab berdasarkan data `answers`
|
|
const unanswered = data?.data.filter(question => {
|
|
return question.questionId !== null && !answers[question.questionId];
|
|
}) || [];
|
|
|
|
setUnansweredQuestions(unanswered.length);
|
|
|
|
// Tampilkan modal berdasarkan jumlah pertanyaan yang belum dijawab
|
|
if (unanswered.length > 0) {
|
|
setValidationModalOpen(true);
|
|
} else {
|
|
setModalOpen(true);
|
|
}
|
|
};
|
|
|
|
const handleConfirmFinish = async (assessmentId: string) => {
|
|
try {
|
|
// Skip counting unanswered questions here to prevent duplication
|
|
const mutation = submitAssessmentMutationOptions(assessmentId);
|
|
const response = await mutation.mutationFn();
|
|
|
|
// Navigate to results
|
|
const newUrl = `/assessmentResult?id=${assessmentId}`;
|
|
window.history.pushState({}, "", newUrl);
|
|
console.log("Navigated to:", newUrl);
|
|
console.log(response.message);
|
|
} catch (error) {
|
|
console.error("Error finishing assessment:", error);
|
|
} finally {
|
|
setModalOpen(false);
|
|
}
|
|
};
|
|
|
|
// Tambahkan state untuk aspek yang terbuka
|
|
const [openAspects, setOpenAspects] = useState<{ [key: string]: boolean }>({});
|
|
|
|
const toggleAspect = (aspectId: string) => {
|
|
setOpenAspects((prev) => ({
|
|
...prev,
|
|
[aspectId]: !prev[aspectId], // Toggle state untuk aspek yang diklik
|
|
}));
|
|
};
|
|
|
|
// Fetch average scores by aspect
|
|
const averageScoreQuery = useQuery(getAverageScoreQueryOptions(assessmentId || ""));
|
|
const aspects = averageScoreQuery.data?.aspects || [];
|
|
|
|
// Filter aspects by selected aspectId
|
|
const filteredAspects = selectedAspectId
|
|
? aspects.filter((aspect) => aspect.aspectId === selectedAspectId) // Use 'id' instead of 'aspectId'
|
|
: aspects;
|
|
|
|
// Get the currently selected aspect to show all related sub-aspects
|
|
const currentAspect = aspects.find(aspect => aspect.aspectId === selectedAspectId);
|
|
const filteredSubAspects = currentAspect ? currentAspect.subAspects : [];
|
|
|
|
// Inisialisasi flaggedQuestions dari database saat komponen dimuat
|
|
useEffect(() => {
|
|
const initialFlagData = answersData?.data.reduce((acc, item) => {
|
|
if (item.questionId != null && item.isFlagged != null) {
|
|
acc[item.questionId] = item.isFlagged;
|
|
}
|
|
return acc;
|
|
}, {} as Record<string, boolean>);
|
|
|
|
if (initialFlagData) {
|
|
setFlaggedQuestions(initialFlagData);
|
|
}
|
|
}, [answersData]);
|
|
|
|
// Mutation function to toggle flag
|
|
const { mutate: toggleFlag } = useMutation({
|
|
mutationFn: (formData: { assessmentId: string; questionId: string; isFlagged: boolean }) =>
|
|
toggleFlagAnswer(formData),
|
|
onSuccess: (response: SubmitOptionResponse) => {
|
|
if (response.answer) {
|
|
const { answer } = response;
|
|
setFlaggedQuestions((prevFlags) => ({
|
|
...prevFlags,
|
|
[answer.id]: answer.isFlagged ?? false,
|
|
}));
|
|
}
|
|
},
|
|
onError: (error) => {
|
|
console.error("Error toggling flag:", error);
|
|
},
|
|
});
|
|
|
|
// Fungsi untuk toggle flag
|
|
const handleToggleFlag = (questionId: string) => {
|
|
const newFlagState = !flaggedQuestions[questionId];
|
|
const assessmentId = getQueryParam("id");
|
|
|
|
if (!assessmentId) {
|
|
console.error("Assessment ID tidak ditemukan");
|
|
return;
|
|
}
|
|
|
|
// Update flaggedQuestions di state
|
|
setFlaggedQuestions((prevFlags) => ({
|
|
...prevFlags,
|
|
[questionId]: newFlagState,
|
|
}));
|
|
|
|
// Kirim perubahan flag ke server
|
|
toggleFlag({
|
|
assessmentId,
|
|
questionId,
|
|
isFlagged: newFlagState,
|
|
});
|
|
};
|
|
|
|
// Usage of the mutation in your component
|
|
const submitOptionMutation = useMutation({
|
|
...submitOptionMutationOptions, // Spread the mutation options here
|
|
onSuccess: () => {
|
|
// Refetch the average scores after a successful submission
|
|
averageScoreQuery.refetch();
|
|
},
|
|
onError: (error) => {
|
|
console.error("Error submitting option:", error);
|
|
},
|
|
});
|
|
|
|
const handleAnswerChange = (questionId: string, optionId: string) => {
|
|
const assessmentId = getQueryParam("id");
|
|
if (!assessmentId) {
|
|
console.error("Assessment ID tidak ditemukan");
|
|
return;
|
|
}
|
|
|
|
// Update answers in the state
|
|
const updatedAnswers = { ...answers, [questionId]: optionId };
|
|
setAnswers(updatedAnswers);
|
|
|
|
// Send the updated answer to the backend
|
|
submitOptionMutation.mutate({
|
|
optionId,
|
|
assessmentId,
|
|
questionId,
|
|
isFlagged: false,
|
|
filename: undefined,
|
|
});
|
|
};
|
|
|
|
const validationResult = answersData?.data.reduce((acc, item) => {
|
|
if (item.questionId != null && item.validationInformation != null) {
|
|
acc[item.questionId] = item.validationInformation;
|
|
}
|
|
return acc;
|
|
}, {} as Record<string, string>);
|
|
|
|
// Mengambil data dari database saat komponen dimuat
|
|
useEffect(() => {
|
|
if (validationResult) {
|
|
setValidationInformation(validationResult);
|
|
}
|
|
}, [answersData, assessmentId]);
|
|
|
|
// Mutation untuk mengirim data ke backend
|
|
const { mutate: submitValidation } = useMutation({
|
|
mutationFn: (form: {
|
|
assessmentId: string;
|
|
questionId: string;
|
|
validationInformation: string;
|
|
}) => submitValidationQuery(form),
|
|
onSuccess: () => {
|
|
// Tindakan yang diambil setelah berhasil
|
|
console.log("Validation updated successfully!");
|
|
},
|
|
onError: (error) => {
|
|
console.error("Error updating validation:", error);
|
|
},
|
|
});
|
|
|
|
// Handle perubahan di Textarea
|
|
const handleTextareaChange = (questionId: string, value: string) => {
|
|
// Memperbarui state validationInformation
|
|
setValidationInformation((prev) => ({
|
|
...prev,
|
|
[questionId]: value,
|
|
}));
|
|
|
|
// Pastikan assessmentId tidak null sebelum mengirimkan data ke server
|
|
if (assessmentId) {
|
|
// Kirim data validasi ke server
|
|
submitValidation({
|
|
assessmentId,
|
|
questionId,
|
|
validationInformation: value,
|
|
});
|
|
} else {
|
|
console.error("Assessment ID tidak ditemukan");
|
|
}
|
|
};
|
|
|
|
// Mutation for file upload
|
|
const uploadFileMutation = useMutation(uploadFileMutationOptions());
|
|
|
|
// Inisialisasi uploadedFiles dari data yang diterima (answersData)
|
|
useEffect(() => {
|
|
if (answersData && answersData.data) {
|
|
|
|
const transformedFileData = answersData.data.reduce((acc, item) => {
|
|
|
|
if (item.questionId && item.filename) {
|
|
acc[item.questionId] = new File([""], item.filename, { type: "application/pdf" });
|
|
}
|
|
|
|
return acc;
|
|
}, {} as Record<string, File | null>);
|
|
|
|
setUploadedFiles(transformedFileData);
|
|
}
|
|
}, [answersData]);
|
|
|
|
// Drag and Drop handlers
|
|
const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
|
|
event.preventDefault();
|
|
setDragActive(true);
|
|
};
|
|
|
|
const handleDragLeave = () => {
|
|
setDragActive(false);
|
|
};
|
|
|
|
// Max file size in bytes (64 MB)
|
|
const MAX_FILE_SIZE = 64 * 1024 * 1024;
|
|
|
|
const handleDrop = (event: React.DragEvent<HTMLDivElement>, question: { questionId: string }) => {
|
|
event.preventDefault();
|
|
setDragActive(false);
|
|
const droppedFiles = Array.from(event.dataTransfer.files);
|
|
|
|
if (droppedFiles.length > 0) {
|
|
const file = droppedFiles[0];
|
|
|
|
// Validate file size
|
|
if (file.size > MAX_FILE_SIZE) {
|
|
setExceededFileName(file.name);
|
|
setModalOpenFileSize(true);
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
if (assessmentId) {
|
|
formData.append('assessmentId', assessmentId);
|
|
} else {
|
|
console.error("assessmentId is null");
|
|
return;
|
|
}
|
|
|
|
if (question.questionId) {
|
|
formData.append('questionId', question.questionId);
|
|
} else {
|
|
console.error("questionId is null");
|
|
return;
|
|
}
|
|
|
|
uploadFileMutation.mutate(formData); // Upload file
|
|
|
|
// Update state to reflect the uploaded file (store the File object, not just the name)
|
|
setUploadedFiles(prev => ({
|
|
...prev,
|
|
[question.questionId]: file, // Store the file itself
|
|
}));
|
|
}
|
|
};
|
|
|
|
const handleClick = () => {
|
|
if (fileInputRef.current) {
|
|
fileInputRef.current.click();
|
|
}
|
|
};
|
|
|
|
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>, question: { questionId: string }) => {
|
|
if (event.target.files) {
|
|
const fileArray = Array.from(event.target.files);
|
|
if (fileArray.length > 0) {
|
|
const file = fileArray[0];
|
|
|
|
// Validate file size
|
|
if (file.size > MAX_FILE_SIZE) {
|
|
setExceededFileName(file.name);
|
|
setModalOpenFileSize(true);
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
if (assessmentId) {
|
|
formData.append('assessmentId', assessmentId);
|
|
} else {
|
|
console.error("assessmentId is null");
|
|
return;
|
|
}
|
|
|
|
if (question.questionId) {
|
|
formData.append('questionId', question.questionId);
|
|
} else {
|
|
console.error("questionId is null");
|
|
return;
|
|
}
|
|
|
|
uploadFileMutation.mutate(formData); // Upload file
|
|
|
|
// Update state to reflect the uploaded file (store the File object)
|
|
setUploadedFiles(prev => ({
|
|
...prev,
|
|
[question.questionId]: file, // Store the File object, not just the name
|
|
}));
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleRemoveFile = (question: { questionId: string }) => {
|
|
setUploadedFiles((prev) => ({
|
|
...prev,
|
|
[question.questionId]: null,
|
|
}));
|
|
};
|
|
|
|
// Function to scroll to the specific question
|
|
const scrollToQuestion = (questionId: string) => {
|
|
const questionElement = questionRefs.current[questionId];
|
|
if (questionElement) {
|
|
questionElement.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
};
|
|
|
|
// Render conditions
|
|
if (isLoading) {
|
|
return <Loader />;
|
|
}
|
|
|
|
if (isError) {
|
|
return (
|
|
<Text color="red">
|
|
Error: {error?.message || "Terjadi kesalahan saat memuat pertanyaan."}
|
|
</Text>
|
|
);
|
|
}
|
|
|
|
if (!assessmentId) {
|
|
return (
|
|
<Card>
|
|
<CardContent>
|
|
<Text color="red" className="text-center">
|
|
Error: Data Asesmen tidak ditemukan. Harap akses halaman melalui link yang valid.
|
|
</Text>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
const startIndex = (currentPage - 1) * questionsPerPage;
|
|
|
|
// Fungsi untuk mengubah halaman pada sub-aspek
|
|
const handlePageChange = (subAspectId: string, newPage: number) => {
|
|
setCurrentPagePerSubAspect((prev) => ({
|
|
...prev,
|
|
[subAspectId]: newPage,
|
|
}));
|
|
};
|
|
|
|
// Filter pertanyaan berdasarkan halaman saat ini
|
|
const filteredQuestions = data?.data?.filter((question) => {
|
|
// Filter berdasarkan sub-aspek yang dipilih
|
|
return question.subAspectId === selectedSubAspectId;
|
|
})?.slice(
|
|
(currentPage - 1) * questionsPerPage,
|
|
currentPage * questionsPerPage
|
|
) || [];
|
|
|
|
// Perbarui jumlah halaman untuk sub-aspek saat ini
|
|
const totalQuestionsInSubAspect = data?.data?.filter(
|
|
(question) => question.subAspectId === selectedSubAspectId
|
|
)?.length || 0;
|
|
|
|
const totalPages = Math.ceil(totalQuestionsInSubAspect / questionsPerPage);
|
|
|
|
return (
|
|
<div>
|
|
<Stack gap="md">
|
|
<Flex justify="space-between" align="flex-start" mt="lg">
|
|
|
|
{/* LEFT-SIDE */}
|
|
{/* Aspek dan Sub-Aspek */}
|
|
<TbMenu2
|
|
onClick={toggleLeftSidebar}
|
|
className="ml-4 w-6 h-fit pb-4 mb-4 cursor-pointer"
|
|
/>
|
|
|
|
{/* Sidebar for Mobile */}
|
|
{isMobile && (
|
|
<LeftSheet open={isLeftSidebarOpen} onOpenChange={(open) => setIsLeftSidebarOpen(open)}>
|
|
<LeftSheetContent className="h-full w-75 overflow-auto mt-8">
|
|
<Flex direction="column" gap="xs" className="w-64">
|
|
<div className="space-y-2">
|
|
{/* Aspek */}
|
|
{aspectsQuery.data?.data
|
|
.filter((aspect) =>
|
|
aspect.subAspects.some((subAspect) =>
|
|
data?.data.some((question) => question.subAspectId === subAspect.id)
|
|
)
|
|
)
|
|
.map((aspect) => (
|
|
<div key={aspect.id} className="p-2 ">
|
|
<div
|
|
className="flex justify-between cursor-pointer"
|
|
onClick={() => toggleAspect(aspect.id)}
|
|
>
|
|
<div className="text-sm font-bold px-3">{aspect.name}</div>
|
|
<div>
|
|
{openAspects[aspect.id] ? (
|
|
<TbChevronDown size={25} />
|
|
) : (
|
|
<TbChevronRight size={25} />
|
|
)}
|
|
</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>
|
|
</Flex>
|
|
</LeftSheetContent>
|
|
</LeftSheet>
|
|
)}
|
|
|
|
{/* Sidebar for Desktop (Always Visible) */}
|
|
<div className="hidden md:block fixed h-screen w-64 overflow-auto mt-8">
|
|
<Flex direction="column" gap="xs" className="w-64">
|
|
<div className="space-y-2">
|
|
{/* Aspek */}
|
|
{aspectsQuery.data?.data
|
|
.filter((aspect) =>
|
|
aspect.subAspects.some((subAspect) =>
|
|
data?.data.some((question) => question.subAspectId === subAspect.id)
|
|
)
|
|
)
|
|
.map((aspect) => (
|
|
<div key={aspect.id} className="p-2 ">
|
|
<div
|
|
className="flex justify-between cursor-pointer"
|
|
onClick={() => toggleAspect(aspect.id)}
|
|
>
|
|
<div className="text-sm font-bold px-3">{aspect.name}</div>
|
|
<div>
|
|
{openAspects[aspect.id] ? (
|
|
<TbChevronDown size={25} />
|
|
) : (
|
|
<TbChevronRight size={25} />
|
|
)}
|
|
</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>
|
|
</Flex>
|
|
</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">
|
|
Harap menjawab semua pertanyaan yang tersedia
|
|
</Text>
|
|
<Text className="text-gray-400 ml-6 mb-7">Semua jawaban Anda akan ditinjau</Text>
|
|
{filteredQuestions.length === 0 ? (
|
|
<Text className="text-center p-3">
|
|
Pertanyaan tidak ada untuk sub-aspek yang dipilih.
|
|
</Text>
|
|
) : (
|
|
filteredQuestions.map((question: any, index: number) => {
|
|
const questionId = question.questionId;
|
|
if (!questionId) return null;
|
|
|
|
return (
|
|
<div
|
|
key={questionId}
|
|
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-1 text-sm">{startIndex + index + 1}.</Text>
|
|
|
|
{/* Question Text */}
|
|
<Text className="font-bold break-words text-sm p-1">{question.questionText}</Text>
|
|
|
|
{/* Action Icon/Flag */}
|
|
<ActionIcon
|
|
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"}`}
|
|
>
|
|
<TbFlagFilled
|
|
size={25}
|
|
className={`p-1 ${flaggedQuestions[questionId] ? "text-white" : "text-black"}`}
|
|
/>
|
|
</ActionIcon>
|
|
</div>
|
|
|
|
{/* Radio Button Options */}
|
|
{question.options?.length > 0 ? (
|
|
<div className="mx-8">
|
|
<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>
|
|
|
|
{/* File Upload */}
|
|
<FileUpload
|
|
question={question}
|
|
handleFileChange={handleFileChange}
|
|
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>
|
|
</Stack>
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</Stack>
|
|
</div>
|
|
|
|
{/* RIGHT-SIDE */}
|
|
{/* Navigasi dan Pagination */}
|
|
{isMobile && (
|
|
<button
|
|
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
|
|
className="fixed bottom-4 right-4 bg-[--primary-color] text-white p-3 rounded-full shadow-md z-50"
|
|
>
|
|
<TbLayoutSidebarLeftCollapseFilled size={30} />
|
|
</button>
|
|
)}
|
|
|
|
{/* Sidebar for mobile (only when toggled) */}
|
|
<div className="hidden md:block">
|
|
<Sheet open={isSidebarOpen} onOpenChange={(open) => setIsSidebarOpen(open)}>
|
|
<SheetContent className="h-full w-70 overflow-auto mr-4">
|
|
<SheetTitle className="font-medium text-lg text-gray-800 mb-2">
|
|
Nomor Soal
|
|
</SheetTitle>
|
|
{/* <Text className="font-medium text-lg text-gray-800 mb-2">Nomor Soal</Text> */}
|
|
|
|
{/* Navigasi (Number of Questions) */}
|
|
<div className="grid grid-cols-5 gap-2">
|
|
{Array.from({ length: totalQuestionsInSubAspect }).map((_, i) => {
|
|
const questionNumber = startIndex + i + 1;
|
|
const questionId = filteredQuestions[i]?.questionId;
|
|
|
|
return questionId ? (
|
|
<div key={questionId} className="flex justify-center relative">
|
|
<button
|
|
className={`
|
|
w-9 h-9 border rounded-sm flex items-center justify-center relative text-md
|
|
${answers[questionId] && flaggedQuestions[questionId] ? "bg-white text-black" : ""}
|
|
${answers[questionId] && !flaggedQuestions[questionId] ? "bg-[--primary-color] text-white" : ""}
|
|
${!answers[questionId] && !flaggedQuestions[questionId] ? "bg-transparent text-black" : ""}
|
|
${flaggedQuestions[questionId] ? "border-gray-50" : ""}
|
|
`}
|
|
onClick={() => scrollToQuestion(questionId)}
|
|
>
|
|
{questionNumber}
|
|
</button>
|
|
{flaggedQuestions[questionId] && (
|
|
<div className="absolute top-0 right-0 w-0 h-0 border-b-[20px] border-b-transparent border-r-[20px] border-r-red-600 rounded-tr-sm" />
|
|
)}
|
|
</div>
|
|
) : null;
|
|
})}
|
|
</div>
|
|
|
|
<div className="mt-4 flex justify-center">
|
|
<Pagination
|
|
page={currentPage}
|
|
totalPages={totalPages}
|
|
onPageChange={(newPage) => {
|
|
if (selectedSubAspectId) {
|
|
handlePageChange(selectedSubAspectId, newPage);
|
|
}
|
|
}}
|
|
>
|
|
<Text className="text-xs m-0">Halaman {currentPage} dari {totalPages}</Text>
|
|
</Pagination>
|
|
</div>
|
|
|
|
{/* Skor Aspek dan Sub-Aspek */}
|
|
<div className="mt-4">
|
|
<Card>
|
|
<CardTitle className="text-lg font-extrabold text-center mt-4 mb-2">
|
|
Nilai Sementara
|
|
</CardTitle>
|
|
<CardContent className="max-h-full overflow-hidden">
|
|
<ScrollArea className="h-[200px] w-full rounded-md p-2">
|
|
<CardDescription>
|
|
{filteredAspects.length > 0 ? (
|
|
filteredAspects.map((aspect) => {
|
|
const aspectScore = parseFloat(aspect.averageScore).toFixed(2);
|
|
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>
|
|
|
|
{/* Divider */}
|
|
<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 (
|
|
<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
|
|
? "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}
|
|
</Text>
|
|
</div>
|
|
);
|
|
})
|
|
) : (
|
|
<Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text>
|
|
)}
|
|
</ScrollArea>
|
|
|
|
{/* Finish Button */}
|
|
<div>
|
|
<Button
|
|
onClick={handleFinishClick}
|
|
className="bg-[--primary-color] text-white font-bold rounded-md w-full text-sm"
|
|
>
|
|
Selesai
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
|
|
{/* Finish Assessment Modal */}
|
|
<FinishAssessmentModal
|
|
opened={modalOpen}
|
|
onClose={() => setModalOpen(false)}
|
|
onConfirm={handleConfirmFinish}
|
|
assessmentId={assessmentId}
|
|
/>
|
|
|
|
{/* Validation Modal */}
|
|
<ValidationModal
|
|
opened={validationModalOpen}
|
|
onClose={() => setValidationModalOpen(false)}
|
|
unansweredQuestions={unansweredQuestions}
|
|
/>
|
|
</Card>
|
|
</div>
|
|
</SheetContent>
|
|
</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">
|
|
Nomor Soal
|
|
</Text>
|
|
|
|
{/* Navigasi (Number of Questions) */}
|
|
<div className="grid grid-cols-5 gap-2">
|
|
{Array.from({ length: totalQuestionsInSubAspect }).map((_, i) => {
|
|
const questionNumber = startIndex + i + 1;
|
|
const questionId = filteredQuestions[i]?.questionId;
|
|
|
|
return questionId ? (
|
|
<div key={questionId} className="flex justify-center relative">
|
|
<button
|
|
className={`w-9 h-9 border rounded-sm flex items-center justify-center relative text-md
|
|
${answers[questionId] && flaggedQuestions[questionId] ? "bg-white text-black" : ""}
|
|
${answers[questionId] && !flaggedQuestions[questionId] ? "bg-[--primary-color] text-white" : ""}
|
|
${!answers[questionId] && !flaggedQuestions[questionId] ? "bg-transparent text-black" : ""}
|
|
${flaggedQuestions[questionId] ? "border-gray-50" : ""}`}
|
|
onClick={() => scrollToQuestion(questionId)}
|
|
>
|
|
{questionNumber}
|
|
</button>
|
|
{flaggedQuestions[questionId] && (
|
|
<div className="absolute top-0 right-0 w-0 h-0 border-b-[20px] border-b-transparent border-r-[20px] border-r-red-600 rounded-tr-sm" />
|
|
)}
|
|
</div>
|
|
) : null;
|
|
})}
|
|
</div>
|
|
|
|
<div className="mt-4 flex justify-center">
|
|
<Pagination
|
|
page={currentPage}
|
|
totalPages={totalPages}
|
|
onPageChange={(newPage) => {
|
|
if (selectedSubAspectId) {
|
|
handlePageChange(selectedSubAspectId, newPage);
|
|
}
|
|
}}
|
|
>
|
|
<Text className="text-xs m-0">Halaman {currentPage} dari {totalPages}</Text>
|
|
</Pagination>
|
|
</div>
|
|
|
|
{/* Skor Aspek dan Sub-Aspek */}
|
|
<div className="mt-4">
|
|
<Card>
|
|
<Text className="text-lg font-extrabold text-center mt-4 mb-2">
|
|
Nilai Sementara
|
|
</Text>
|
|
<CardContent className="max-h-full overflow-hidden">
|
|
<ScrollArea className="h-[200px] w-full rounded-md p-2">
|
|
<CardDescription>
|
|
{filteredAspects.length > 0 ? (
|
|
filteredAspects.map((aspect) => {
|
|
const aspectScore = parseFloat(aspect.averageScore).toFixed(2);
|
|
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 (
|
|
<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
|
|
? "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}
|
|
</Text>
|
|
</div>
|
|
);
|
|
})
|
|
) : (
|
|
<Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text>
|
|
)}
|
|
</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>
|
|
</div>
|
|
</Flex>
|
|
</div>
|
|
</Flex>
|
|
</Stack>
|
|
</div>
|
|
);
|
|
} |