gitea/amati
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: add color for aspect and sub aspect score, add boder on action icon flag

Browse Source
This commit is contained in:
abiyasa05 2024-10-29 11:57:04 +07:00
parent c2a7124cd2
commit 4033f4e219
1 changed files with 53 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
View File

@ -662,21 +662,12 @@ export default function AssessmentPage() {
? "Pilih jawaban terlebih dahulu" ? "Pilih jawaban terlebih dahulu"
: "Tandai" : "Tandai"
} }
color={flaggedQuestions[questionId] ? "red" : "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"}`}
style={{
margin: "2px 10px",
borderRadius: "4px",
backgroundColor: flaggedQuestions[questionId] ? "red" : "white",
}}
disabled={!answers[question.questionId]} disabled={!answers[question.questionId]}
> >
<TbFlagFilled <TbFlagFilled
size={20} size={25}
color={flaggedQuestions[questionId] ? "white" : "black"} className={`p-1 ${flaggedQuestions[questionId] ? "text-white" : "text-black"}`} // Mengurangi padding untuk ikon
style={{
padding: "2px",
}}
/> />
</ActionIcon> </ActionIcon>
</Flex> </Flex>
@ -852,14 +843,31 @@ export default function AssessmentPage() {
{/* Skor Aspek */} {/* Skor Aspek */}
<div> <div>
{filteredAspects.length > 0 ? ( {filteredAspects.length > 0 ? (
filteredAspects.map((aspect) => ( filteredAspects.map((aspect) => {
<div key={aspect.aspectId} className="flex justify-between items-center"> const aspectScore = parseFloat(aspect.averageScore).toFixed(2);
<Text className="text-base text-gray-400">{aspect.aspectName}</Text> const aspectScoreValue = parseFloat(aspectScore);
<Text className="text-base font-bold">
{parseFloat(aspect.averageScore).toFixed(2)} return (
</Text> <div key={aspect.aspectId} className="flex justify-between items-center">
</div> <Text className="text-base text-gray-400">{aspect.aspectName}</Text>
)) <Text
className={`text-base font-bold ${
aspectScoreValue >= 4.01
? "text-green-700"
: aspectScoreValue >= 3.01
? "text-green-400"
: aspectScoreValue >= 2.01
? "text-yellow-400"
: aspectScoreValue >= 1.01
? "text-orange-500"
: "text-red-500"
}`}
>
{aspectScore}
</Text>
</div>
);
})
) : ( ) : (
<Text className="text-base text-gray-400">Data aspek ini kosong</Text> <Text className="text-base text-gray-400">Data aspek ini kosong</Text>
)} )}
@ -873,14 +881,31 @@ export default function AssessmentPage() {
{/* Skor Sub-Aspek */} {/* Skor Sub-Aspek */}
<div> <div>
{filteredSubAspects.length > 0 ? ( {filteredSubAspects.length > 0 ? (
filteredSubAspects.map((subAspect) => ( filteredSubAspects.map((subAspect) => {
<div key={subAspect.subAspectId} className="flex justify-between items-center"> {/* Change key to 'id' */} const subAspectScore = parseFloat(subAspect.averageScore).toFixed(2);
<Text className="text-sm text-gray-400">{subAspect.subAspectName}</Text> {/* Change to 'name' */} const subAspectScoreValue = parseFloat(subAspectScore);
<Text className="text-sm font-bold">
{parseFloat(subAspect.averageScore).toFixed(2)} return (
</Text> <div key={subAspect.subAspectId} className="flex justify-between items-center">
</div> <Text className="text-sm text-gray-400">{subAspect.subAspectName}</Text>
)) <Text
className={`text-sm font-bold ${
subAspectScoreValue >= 4.01
? "text-green-700"
: subAspectScoreValue >= 3.01
? "text-green-400"
: subAspectScoreValue >= 2.01
? "text-yellow-400"
: subAspectScoreValue >= 1.01
? "text-orange-500"
: "text-red-500"
}`}
>
{subAspectScore}
</Text>
</div>
);
})
) : ( ) : (
<Text className="text-sm text-gray-400">Data sub-aspek ini kosong</Text> <Text className="text-sm text-gray-400">Data sub-aspek ini kosong</Text>
)} )}