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

update: revision for displaying average score aspect and sub aspect in assessments

Browse Source
This commit is contained in:
falendikategar 2024-10-22 09:48:24 +07:00
parent 38ea7a580d
commit 4cff4fd759
1 changed files with 58 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
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 }>({});
@ -83,28 +84,50 @@ export default function AssessmentPage() {
useEffect(() => {
const id = getQueryParam("id");
if (!id) {
// Handle if no ID found
setAssessmentId(null);
} else {
setAssessmentId(id);
}
// Check if aspectsQuery.data and aspectsQuery.data.data are defined
// Check if aspectsQuery.data is defined
if (aspectsQuery.data?.data && aspectsQuery.data.data.length > 0) {
// If no sub-aspect is selected, find a suitable default
if (selectedSubAspectId === null) {
const firstMatchingSubAspect = aspectsQuery.data.data
.flatMap(aspect => aspect.subAspects) // Get all sub-aspects
.find(subAspect => data?.data.some(question => question.subAspectId === subAspect.id)); // Filter based on available questions
.flatMap((aspect) => aspect.subAspects) // Get all sub-aspects
.find((subAspect) =>
data?.data.some((question) => question.subAspectId === subAspect.id)
);
if (firstMatchingSubAspect) {
setSelectedSubAspectId(firstMatchingSubAspect.id);
// Find the parent aspect and set its id as the selectedAspectId
const parentAspect = aspectsQuery.data.data.find(aspect =>
aspect.subAspects.some(sub => sub.id === firstMatchingSubAspect.id)
);
if (parentAspect) {
setSelectedAspectId(parentAspect.id); // Use `id` from the parent aspect
}
}
} else {
// Update the aspectId based on the selected sub-aspect
const matchingAspect = aspectsQuery.data.data.find((aspect) =>
aspect.subAspects.some((subAspect) => subAspect.id === selectedSubAspectId)
);
if (matchingAspect) {
setSelectedAspectId(matchingAspect.id); // Use `id` from the matching aspect
} else {
console.warn("No matching aspect found for selected sub-aspect.");
setSelectedAspectId(null);
}
}
}
}, [aspectsQuery.data, selectedSubAspectId, data?.data])
}, [aspectsQuery.data, selectedSubAspectId, data?.data]);
const handleConfirmFinish = () => {
if (assessmentId) {
@ -128,11 +151,16 @@ export default function AssessmentPage() {
// Fetch average scores by aspect
const averageScoreQuery = useQuery(getAverageScoreQueryOptions(assessmentId || ""));
const aspects = averageScoreQuery.data?.aspects || [];
// Filter average score aspect berdasarkan sub-aspect yang dipilih
const filteredAverageScores = averageScoreQuery.data?.aspects?.filter(aspect =>
aspect.subAspects.some(subAspect => subAspect.subAspectId === selectedSubAspectId)
);
// Filter aspects by selected aspectId
const filteredAspects = selectedAspectId
? aspects.filter((aspect) => aspect.aspectId === selectedAspectId) // Use 'id' instead of 'aspectId'
: aspects;
// Get the currently selected aspect to show all related sub-aspects
const currentAspect = aspects.find(aspect => aspect.aspectId === selectedAspectId);
const filteredSubAspects = currentAspect ? currentAspect.subAspects : [];
// Mutation function to toggle flag
const toggleFlagMutation = useMutation<ToggleFlagResponse, Error, string>({
@ -671,24 +699,19 @@ export default function AssessmentPage() {
<Stack>
{/* Skor Aspek */}
<div>
{filteredAverageScores && filteredAverageScores.length > 0 ? (
filteredAverageScores.map((aspect) => (
<div key={aspect.aspectId}>
{/* Aspect Rendering */}
<div 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>
{filteredAspects.length > 0 ? (
filteredAspects.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>
</div>
{/* Garis pembatas */}
<div>
@ -697,25 +720,17 @@ export default function AssessmentPage() {
{/* Skor Sub-Aspek */}
<div>
{filteredAverageScores && filteredAverageScores.length > 0 ? (
filteredAverageScores.flatMap((aspect) =>
aspect.subAspects && aspect.subAspects.length > 0 ? (
aspect.subAspects.map((subAspect) => (
<div key={subAspect.subAspectId} 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">Tidak ada sub-aspek</Text>
)
)
{filteredSubAspects.length > 0 ? (
filteredSubAspects.map((subAspect) => (
<div key={subAspect.subAspectId} className="flex justify-between items-center"> {/* Change key to 'id' */}
<Text className="text-lg text-gray-400">{subAspect.subAspectName}</Text> {/* Change to 'name' */}
<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>
<Text className="text-lg text-gray-400">Data sub-aspek kosong</Text>
)}
</div>
</Stack>