Pull Request branch dev-clone to main #1
|
|
@ -60,6 +60,7 @@ export default function AssessmentPage() {
|
||||||
}>({});
|
}>({});
|
||||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||||
const [modalOpen, setModalOpen] = useState(false);
|
const [modalOpen, setModalOpen] = useState(false);
|
||||||
|
const [selectedAspectId, setSelectedAspectId] = useState<string | null>(null);
|
||||||
const [selectedSubAspectId, setSelectedSubAspectId] = useState<string | null>(null);
|
const [selectedSubAspectId, setSelectedSubAspectId] = useState<string | null>(null);
|
||||||
const [assessmentId, setAssessmentId] = useState<string | null>(null);
|
const [assessmentId, setAssessmentId] = useState<string | null>(null);
|
||||||
const [answers, setAnswers] = useState<{ [key: string]: string }>({});
|
const [answers, setAnswers] = useState<{ [key: string]: string }>({});
|
||||||
|
|
@ -85,26 +86,48 @@ export default function AssessmentPage() {
|
||||||
const id = getQueryParam("id");
|
const id = getQueryParam("id");
|
||||||
|
|
||||||
if (!id) {
|
if (!id) {
|
||||||
// Handle if no ID found
|
|
||||||
setAssessmentId(null);
|
setAssessmentId(null);
|
||||||
} else {
|
} else {
|
||||||
setAssessmentId(id);
|
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 (aspectsQuery.data?.data && aspectsQuery.data.data.length > 0) {
|
||||||
// If no sub-aspect is selected, find a suitable default
|
// If no sub-aspect is selected, find a suitable default
|
||||||
if (selectedSubAspectId === null) {
|
if (selectedSubAspectId === null) {
|
||||||
const firstMatchingSubAspect = aspectsQuery.data.data
|
const firstMatchingSubAspect = aspectsQuery.data.data
|
||||||
.flatMap(aspect => aspect.subAspects) // Get all sub-aspects
|
.flatMap((aspect) => aspect.subAspects) // Get all sub-aspects
|
||||||
.find(subAspect => data?.data.some(question => question.subAspectId === subAspect.id)); // Filter based on available questions
|
.find((subAspect) =>
|
||||||
|
data?.data.some((question) => question.subAspectId === subAspect.id)
|
||||||
|
);
|
||||||
|
|
||||||
if (firstMatchingSubAspect) {
|
if (firstMatchingSubAspect) {
|
||||||
setSelectedSubAspectId(firstMatchingSubAspect.id);
|
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 = () => {
|
const handleConfirmFinish = () => {
|
||||||
if (assessmentId) {
|
if (assessmentId) {
|
||||||
|
|
@ -128,11 +151,16 @@ export default function AssessmentPage() {
|
||||||
|
|
||||||
// Fetch average scores by aspect
|
// Fetch average scores by aspect
|
||||||
const averageScoreQuery = useQuery(getAverageScoreQueryOptions(assessmentId || ""));
|
const averageScoreQuery = useQuery(getAverageScoreQueryOptions(assessmentId || ""));
|
||||||
|
const aspects = averageScoreQuery.data?.aspects || [];
|
||||||
|
|
||||||
// Filter average score aspect berdasarkan sub-aspect yang dipilih
|
// Filter aspects by selected aspectId
|
||||||
const filteredAverageScores = averageScoreQuery.data?.aspects?.filter(aspect =>
|
const filteredAspects = selectedAspectId
|
||||||
aspect.subAspects.some(subAspect => subAspect.subAspectId === selectedSubAspectId)
|
? 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
|
// Mutation function to toggle flag
|
||||||
const toggleFlagMutation = useMutation<ToggleFlagResponse, Error, string>({
|
const toggleFlagMutation = useMutation<ToggleFlagResponse, Error, string>({
|
||||||
|
|
@ -671,19 +699,14 @@ export default function AssessmentPage() {
|
||||||
<Stack>
|
<Stack>
|
||||||
{/* Skor Aspek */}
|
{/* Skor Aspek */}
|
||||||
<div>
|
<div>
|
||||||
{filteredAverageScores && filteredAverageScores.length > 0 ? (
|
{filteredAspects.length > 0 ? (
|
||||||
filteredAverageScores.map((aspect) => (
|
filteredAspects.map((aspect) => (
|
||||||
<div key={aspect.aspectId}>
|
<div key={aspect.aspectId} className="flex justify-between items-center">
|
||||||
{/* Aspect Rendering */}
|
<Text className="text-xl text-gray-400">{aspect.aspectName}</Text>
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<Text className="text-xl text-gray-400">
|
|
||||||
{aspect.aspectName}
|
|
||||||
</Text>
|
|
||||||
<Text className="text-xl font-bold">
|
<Text className="text-xl font-bold">
|
||||||
{parseFloat(aspect.averageScore).toFixed(2)}
|
{parseFloat(aspect.averageScore).toFixed(2)}
|
||||||
</Text>
|
</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>
|
||||||
|
|
@ -697,25 +720,17 @@ export default function AssessmentPage() {
|
||||||
|
|
||||||
{/* Skor Sub-Aspek */}
|
{/* Skor Sub-Aspek */}
|
||||||
<div>
|
<div>
|
||||||
{filteredAverageScores && filteredAverageScores.length > 0 ? (
|
{filteredSubAspects.length > 0 ? (
|
||||||
filteredAverageScores.flatMap((aspect) =>
|
filteredSubAspects.map((subAspect) => (
|
||||||
aspect.subAspects && aspect.subAspects.length > 0 ? (
|
<div key={subAspect.subAspectId} className="flex justify-between items-center"> {/* Change key to 'id' */}
|
||||||
aspect.subAspects.map((subAspect) => (
|
<Text className="text-lg text-gray-400">{subAspect.subAspectName}</Text> {/* Change to 'name' */}
|
||||||
<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">
|
<Text className="text-lg font-bold">
|
||||||
{parseFloat(subAspect.averageScore).toFixed(2)}
|
{parseFloat(subAspect.averageScore).toFixed(2)}
|
||||||
</Text>
|
</Text>
|
||||||
</div>
|
</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>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user