update: revision for index lazy
This commit is contained in:
falendikategar
parent
086c1576b6
commit
91f9bc4745
|
|
@ -213,6 +213,10 @@ export default function AssessmentPage() {
|
|||
const endIndex = startIndex + limit;
|
||||
const paginatedQuestions = data?.data.slice(startIndex, endIndex) || [];
|
||||
|
||||
const filteredQuestions = paginatedQuestions.filter((question) => {
|
||||
return question.subAspectId === selectedSubAspectId; // Misalnya, jika `question` memiliki `subAspectId`
|
||||
});
|
||||
|
||||
return (
|
||||
<Card shadow="sm" p="lg" radius="md" withBorder>
|
||||
<Stack gap="md">
|
||||
|
|
@ -225,7 +229,7 @@ export default function AssessmentPage() {
|
|||
|
||||
{/* LEFT-SIDE */}
|
||||
{/* Aspek dan Sub-Aspek */}
|
||||
<Flex direction="column" gap="xs" className="mr-4">
|
||||
<Flex direction="column" gap="xs" className="mr-4 w-52">
|
||||
<div className="space-y-4">
|
||||
{aspectsQuery.data?.data.map((aspect) => (
|
||||
<div
|
||||
|
|
@ -251,7 +255,8 @@ export default function AssessmentPage() {
|
|||
{aspect.subAspects.map((subAspect) => (
|
||||
<div
|
||||
key={subAspect.id}
|
||||
className="flex justify-between text-gray-600"
|
||||
className={`flex justify-between text-gray-600 cursor-pointer ${selectedSubAspectId === subAspect.id ? 'font-bold' : ''}`}
|
||||
onClick={() => setSelectedSubAspectId(subAspect.id)}
|
||||
>
|
||||
<div>{subAspect.name}</div>
|
||||
</div>
|
||||
|
|
@ -264,148 +269,148 @@ export default function AssessmentPage() {
|
|||
</Flex>
|
||||
{/* Pertanyaan */}
|
||||
<Stack gap="sm" style={{ flex: 1 }}>
|
||||
{paginatedQuestions.map((question: any, index: number) => {
|
||||
const questionId = question.questionId;
|
||||
if (!questionId) return null;
|
||||
{filteredQuestions.length === 0 ? (
|
||||
<Text color="black" 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 (
|
||||
<Card
|
||||
key={questionId}
|
||||
shadow="sm"
|
||||
p="lg"
|
||||
radius="md"
|
||||
withBorder
|
||||
ref={(el) => (questionRefs.current[questionId] = el)}
|
||||
style={{ position: "relative" }}
|
||||
>
|
||||
<Stack gap="sm">
|
||||
<Flex
|
||||
justify="space-between"
|
||||
align="flex-start"
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
<Text
|
||||
className="font-bold"
|
||||
style={{
|
||||
flexGrow: 1,
|
||||
wordBreak: "break-word",
|
||||
marginRight: "40px",
|
||||
}}
|
||||
>
|
||||
{startIndex + index + 1}. {question.questionText}
|
||||
</Text>
|
||||
return (
|
||||
<Card
|
||||
key={questionId}
|
||||
shadow="sm"
|
||||
p="lg"
|
||||
radius="md"
|
||||
withBorder
|
||||
ref={(el) => (questionRefs.current[questionId] = el)}
|
||||
style={{ position: "relative" }}
|
||||
>
|
||||
<Stack gap="sm">
|
||||
<Flex justify="space-between" align="flex-start" style={{ width: "100%" }}>
|
||||
<Text
|
||||
className="font-bold"
|
||||
style={{
|
||||
flexGrow: 1,
|
||||
wordBreak: "break-word",
|
||||
marginRight: "40px",
|
||||
}}
|
||||
>
|
||||
{startIndex + index + 1}. {question.questionText}
|
||||
</Text>
|
||||
|
||||
<ActionIcon
|
||||
onClick={() => {
|
||||
setFlaggedQuestions((prevFlags) => ({
|
||||
...prevFlags,
|
||||
[questionId]: !prevFlags[questionId],
|
||||
}));
|
||||
toggleFlagMutation.mutate(questionId);
|
||||
}}
|
||||
title="Tandai"
|
||||
color={flaggedQuestions[questionId] ? "red" : "gray"}
|
||||
>
|
||||
<TbFlag
|
||||
size={24}
|
||||
color={flaggedQuestions[questionId] ? "black" : "inherit"}
|
||||
/>
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
|
||||
{question.options?.length > 0 ? (
|
||||
<Radio.Group>
|
||||
<div className="flex flex-col gap-4">
|
||||
{question.options.map((option: any) => (
|
||||
<label
|
||||
key={option.optionId}
|
||||
className="bg-gray-200 border rounded-lg p-4 cursor-pointer transition-transform transform hover:scale-105 shadow-md hover:shadow-lg flex items-center"
|
||||
onClick={() =>
|
||||
document.getElementById(option.optionId)?.click()
|
||||
}
|
||||
>
|
||||
<Radio
|
||||
id={option.optionId}
|
||||
className="font-bold"
|
||||
value={option.optionId}
|
||||
label={option.optionText}
|
||||
size="md"
|
||||
radius="xl"
|
||||
style={{ pointerEvents: "none" }}
|
||||
onChange={() => {
|
||||
submitAnswerMutation.mutate({
|
||||
optionId: option.optionId,
|
||||
assessmentId: assessmentId || "",
|
||||
validationInformation: JSON.stringify({
|
||||
info: "jfjforjfocn",
|
||||
questionId: question.questionId // Tambahkan questionId dalam validationInformation
|
||||
}),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</Radio.Group>
|
||||
) : (
|
||||
<Text color="red">Tidak ada opsi untuk pertanyaan ini.</Text>
|
||||
)}
|
||||
|
||||
<Textarea placeholder="Berikan keterangan terkait jawaban di atas" />
|
||||
|
||||
{/* File Upload */}
|
||||
{question.needFile === true && (
|
||||
<div
|
||||
className={`pt-5 pb-5 pr-5 pl-2 border-2 border-dashed ${dragActive ? "bg-gray-100" : "bg-transparent"
|
||||
} shadow-lg`} // Tambah shadow-lg
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
onClick={handleClick}
|
||||
>
|
||||
<Flex align="center" justify="space-between" gap="sm">
|
||||
<TbUpload
|
||||
<ActionIcon
|
||||
onClick={() => {
|
||||
setFlaggedQuestions((prevFlags) => ({
|
||||
...prevFlags,
|
||||
[questionId]: !prevFlags[questionId],
|
||||
}));
|
||||
toggleFlagMutation.mutate(questionId);
|
||||
}}
|
||||
title="Tandai"
|
||||
color={flaggedQuestions[questionId] ? "red" : "gray"}
|
||||
>
|
||||
<TbFlag
|
||||
size={24}
|
||||
style={{ marginLeft: "8px", marginRight: "8px" }}
|
||||
/>{" "}
|
||||
{/* Tambah marginLeft */}
|
||||
<div className="flex-grow text-right">
|
||||
<Text className="font-bold">
|
||||
Klik untuk unggah atau geser file disini
|
||||
</Text>
|
||||
<Text className="text-sm text-gray-400">
|
||||
PNG, JPG, PDF
|
||||
</Text>
|
||||
</div>
|
||||
</Flex>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={handleFileChange}
|
||||
style={{ display: "none" }}
|
||||
accept="image/png, image/jpeg, application/pdf"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
color={flaggedQuestions[questionId] ? "black" : "inherit"}
|
||||
/>
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
|
||||
{files.length > 0 && (
|
||||
<Stack gap="sm" mt="sm">
|
||||
<Text className="font-bold">File yang diunggah:</Text>
|
||||
{files.map((file, fileIndex) => (
|
||||
<Group key={fileIndex} align="center">
|
||||
<Text>{file.name}</Text>
|
||||
<CloseButton
|
||||
title="Hapus file"
|
||||
onClick={() => handleRemoveFile(fileIndex)}
|
||||
{question.options?.length > 0 ? (
|
||||
<Radio.Group>
|
||||
<div className="flex flex-col gap-4">
|
||||
{question.options.map((option: any) => (
|
||||
<label
|
||||
key={option.optionId}
|
||||
className="bg-gray-200 border rounded-lg p-4 cursor-pointer transition-transform transform hover:scale-105 shadow-md hover:shadow-lg flex items-center"
|
||||
onClick={() => document.getElementById(option.optionId)?.click()}
|
||||
>
|
||||
<Radio
|
||||
id={option.optionId}
|
||||
className="font-bold"
|
||||
value={option.optionId}
|
||||
label={option.optionText}
|
||||
size="md"
|
||||
radius="xl"
|
||||
style={{ pointerEvents: "none" }}
|
||||
onChange={() => {
|
||||
submitAnswerMutation.mutate({
|
||||
optionId: option.optionId,
|
||||
assessmentId: assessmentId || "",
|
||||
validationInformation: JSON.stringify({
|
||||
info: "jfjforjfocn",
|
||||
questionId: question.questionId,
|
||||
}),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</Radio.Group>
|
||||
) : (
|
||||
<Text color="red">Tidak ada opsi untuk pertanyaan ini.</Text>
|
||||
)}
|
||||
|
||||
<Textarea placeholder="Berikan keterangan terkait jawaban di atas" />
|
||||
|
||||
{/* File Upload */}
|
||||
{question.needFile === true && (
|
||||
<div
|
||||
className={`pt-5 pb-5 pr-5 pl-2 border-2 border-dashed ${
|
||||
dragActive ? "bg-gray-100" : "bg-transparent"
|
||||
} shadow-lg`}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
onClick={handleClick}
|
||||
>
|
||||
<Flex align="center" justify="space-between" gap="sm">
|
||||
<TbUpload
|
||||
size={24}
|
||||
style={{ marginLeft: "8px", marginRight: "8px" }}
|
||||
/>
|
||||
</Group>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
<div className="flex-grow text-right">
|
||||
<Text className="font-bold">
|
||||
Klik untuk unggah atau geser file disini
|
||||
</Text>
|
||||
<Text className="text-sm text-gray-400">
|
||||
PNG, JPG, PDF
|
||||
</Text>
|
||||
</div>
|
||||
</Flex>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={handleFileChange}
|
||||
style={{ display: "none" }}
|
||||
accept="image/png, image/jpeg, application/pdf"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{files.length > 0 && (
|
||||
<Stack gap="sm" mt="sm">
|
||||
<Text className="font-bold">File yang diunggah:</Text>
|
||||
{files.map((file, fileIndex) => (
|
||||
<Group key={fileIndex} align="center">
|
||||
<Text>{file.name}</Text>
|
||||
<CloseButton
|
||||
title="Hapus file"
|
||||
onClick={() => handleRemoveFile(fileIndex)}
|
||||
/>
|
||||
</Group>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
{/* Navigasi dan Pagination */}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user