update: revision to display the average score of sub-aspects when different aspects

This commit is contained in:
falendikategar 2024-10-18 11:03:14 +07:00
parent 3dcbd2810a
commit b1521fb563

View File

@ -99,9 +99,6 @@ export default function AssessmentPage() {
if (firstMatchingSubAspect) { if (firstMatchingSubAspect) {
setSelectedSubAspectId(firstMatchingSubAspect.id); setSelectedSubAspectId(firstMatchingSubAspect.id);
setSelectedAspectId(aspectsQuery.data.data.find(aspect =>
aspect.subAspects.some(sub => sub.id === firstMatchingSubAspect.id)
)?.id || null); // Set selectedAspectId based on the found sub-aspect
} }
} }
} }
@ -130,20 +127,11 @@ export default function AssessmentPage() {
// Fetch average scores by aspect // Fetch average scores by aspect
const averageScoreQuery = useQuery(getAverageScoreQueryOptions(assessmentId || "")); const averageScoreQuery = useQuery(getAverageScoreQueryOptions(assessmentId || ""));
// Fetch average scores by sub-aspect
const averageScoreSubAspectQuery = useQuery(getAverageScoreSubAspectQueryOptions(assessmentId || ""));
// Filter average score aspect berdasarkan sub-aspect yang dipilih // Filter average score aspect berdasarkan sub-aspect yang dipilih
const filteredAverageScores = averageScoreQuery.data?.aspects?.filter(aspect => const filteredAverageScores = averageScoreQuery.data?.aspects?.filter(aspect =>
aspect.subAspects.some(subAspect => subAspect.subAspectId === selectedSubAspectId) aspect.subAspects.some(subAspect => subAspect.subAspectId === selectedSubAspectId)
); );
// Filter average scores for the selected sub-aspect
const averageScoresForSelectedSubAspect = averageScoreSubAspectQuery.data?.subAspects?.filter(
(subAspect) =>
subAspect.aspectId === selectedAspectId // Use the appropriate property for filtering
);
// Mutation function to toggle flag // Mutation function to toggle flag
const toggleFlagMutation = useMutation<ToggleFlagResponse, Error, string>({ const toggleFlagMutation = useMutation<ToggleFlagResponse, Error, string>({
mutationFn: toggleFlagAnswer, mutationFn: toggleFlagAnswer,
@ -546,19 +534,22 @@ export default function AssessmentPage() {
<div> <div>
{filteredAverageScores && filteredAverageScores.length > 0 ? ( {filteredAverageScores && filteredAverageScores.length > 0 ? (
filteredAverageScores.map((aspect) => ( filteredAverageScores.map((aspect) => (
<div key={aspect.aspectId} className="flex justify-between items-center"> <div key={aspect.aspectId}>
<Text className="text-xl text-gray-400"> {/* Aspect Rendering */}
{aspect.aspectName} <div className="flex justify-between items-center">
</Text> <Text className="text-xl text-gray-400">
<Text className="text-xl font-bold"> {aspect.aspectName}
{parseFloat(aspect.averageScore).toFixed(2)} </Text>
</Text> <Text className="text-xl font-bold">
{parseFloat(aspect.averageScore).toFixed(2)}
</Text>
</div>
</div> </div>
)) ))
) : ( ) : (
<Text className="text-lg text-gray-400">Data aspek kosong</Text> <Text className="text-lg text-gray-400">Data aspek kosong</Text>
)} )}
</div> </div>
{/* Garis pembatas */} {/* Garis pembatas */}
<div> <div>
@ -567,17 +558,23 @@ export default function AssessmentPage() {
{/* Skor Sub-Aspek */} {/* Skor Sub-Aspek */}
<div> <div>
{averageScoresForSelectedSubAspect?.length ? ( {filteredAverageScores && filteredAverageScores.length > 0 ? (
averageScoresForSelectedSubAspect.map((subAspect) => ( filteredAverageScores.flatMap((aspect) =>
<div key={subAspect.aspectId} className="flex justify-between items-center"> aspect.subAspects && aspect.subAspects.length > 0 ? (
<Text className="text-lg text-gray-400"> aspect.subAspects.map((subAspect) => (
{subAspect.subAspectName} <div key={subAspect.subAspectId} className="flex justify-between items-center">
</Text> <Text className="text-lg text-gray-400">
<Text className="text-lg font-bold"> {subAspect.subAspectName}
{parseFloat(subAspect.averageScore).toFixed(2)} </Text>
</Text> <Text className="text-lg font-bold">
</div> {parseFloat(subAspect.averageScore).toFixed(2)}
)) </Text>
</div>
))
) : (
<Text className="text-lg text-gray-400">Tidak ada sub-aspek</Text>
)
)
) : ( ) : (
<Text className="text-lg text-gray-400">Data sub aspek kosong</Text> <Text className="text-lg text-gray-400">Data sub aspek kosong</Text>
)} )}