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

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

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