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

update: revision when displaying the average score of aspects and sub-aspects on the right side

Browse Source
This commit is contained in:
falendikategar 2024-10-17 09:22:06 +07:00
parent a799769af2
commit 318783c71c
1 changed files with 52 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx
View File

@ -60,6 +60,7 @@ export default function AssessmentPage() {
}>({});
const fileInputRef = useRef<HTMLInputElement>(null);
const [modalOpen, setModalOpen] = 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 }>({});
@ -99,10 +100,13 @@ export default function AssessmentPage() {
if (firstMatchingSubAspect) {
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
}
}
}
}, [aspectsQuery.data, selectedSubAspectId, data?.data]);
}, [aspectsQuery.data, selectedSubAspectId, data?.data])
const handleConfirmFinish = () => {
if (assessmentId) {
@ -124,14 +128,21 @@ export default function AssessmentPage() {
}));
};
// Fetch average scores berdasarkan assessmentId yang diambil dari URL
const averageScoreQuery = useQuery(
getAverageScoreQueryOptions(assessmentId || "")
// Fetch average scores by aspect
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
const filteredAverageScores = averageScoreQuery.data?.aspects?.filter(aspect =>
aspect.subAspects.some(subAspect => subAspect.subAspectId === selectedSubAspectId)
);
// Fetch average scores for sub-aspects
const averageScoreSubAspectQuery = useQuery(
getAverageScoreSubAspectQueryOptions(assessmentId || "")
// 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
@ -519,42 +530,46 @@ export default function AssessmentPage() {
<div className="mt-4">
<Card shadow="sm" p="md" radius="md" withBorder>
<Stack>
{averageScores && averageScores.length > 0 ? (
averageScores.map((aspect: any) => (
<div key={aspect.AspectId} className="flex justify-between items-center">
<Text className="text-xl text-gray-400">
{aspect.AspectName}
</Text>
<Text className="text-xl font-bold">
{parseFloat(aspect.averageScore).toFixed(1)}
</Text>
</div>
))
) : (
<Text>Tidak ada data skor.</Text>
)}
{/* Skor Aspek */}
<div>
{filteredAverageScores && filteredAverageScores.length > 0 ? (
filteredAverageScores.map((aspect) => (
<div key={aspect.aspectId} className="flex justify-between items-center">
<Text className="text-xl text-gray-400">
{aspect.aspectName}
</Text>
<Text className="text-xl font-bold">
{parseFloat(aspect.averageScore).toFixed(2)}
</Text>
</div>
))
) : (
<Text className="text-lg text-gray-400">Data aspek kosong</Text>
)}
</div>
{/* Garis pembatas */}
<div>
<hr className="border-t-2 border-gray-300 w-full mx-auto" />
</div>
{averageScoresSubAspect && averageScoresSubAspect.length > 0 && (
<Stack>
{averageScoresSubAspect.map((subAspects: any) => {
return (
<div key={subAspects.subAspectId} className="flex justify-between items-center">
<Text className="text-lg text-gray-400">
{subAspects.subAspectName}
</Text>
<Text className="text-lg font-bold">
{parseFloat(subAspects.averageScore).toFixed(1)}
</Text>
</div>
);
})}
</Stack>
)}
{/* Skor Sub-Aspek */}
<div>
{averageScoresForSelectedSubAspect?.length ? (
averageScoresForSelectedSubAspect.map((subAspect) => (
<div key={subAspect.aspectId} className="flex justify-between items-center">
<Text className="text-lg text-gray-400">
{subAspect.subAspectName}
</Text>
<Text className="text-lg font-bold">
{parseFloat(subAspect.averageScore).toFixed(2)}
</Text>
</div>
))
) : (
<Text className="text-lg text-gray-400">Data sub aspek kosong</Text>
)}
</div>
</Stack>
{/* Tombol Selesai */}