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

update: revision for index lazy

Browse Source
This commit is contained in:
falendikategar 2024-10-11 09:38:00 +07:00
parent 91f9bc4745
commit a9a9b4dfc4
1 changed files with 61 additions and 40 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

@ -61,16 +61,33 @@ export default function AssessmentPage() {
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);
// Fetch aspects and sub-aspects
const aspectsQuery = useQuery({
queryKey: ["aspects"],
queryFn: fetchAspects,
});
useEffect(() => { useEffect(() => {
const id = getQueryParam("id"); const id = getQueryParam("id");
if (!id) { if (!id) {
// Handle if no ID found // Handle if no ID found
setAssessmentId(null); setAssessmentId(null);
} else { } else {
setAssessmentId(id); setAssessmentId(id);
} }
}, []);
// Setel sub-aspek pertama sebagai default saat pertama kali halaman dimuat
// Check if aspectsQuery.data and aspectsQuery.data.data are defined
if (aspectsQuery.data?.data && aspectsQuery.data.data.length > 0 && selectedSubAspectId === null) {
const firstAspect = aspectsQuery.data.data[0];
const firstSubAspect = firstAspect?.subAspects?.[0];
if (firstSubAspect) {
setSelectedSubAspectId(firstSubAspect.id);
}
}
}, [aspectsQuery.data, selectedSubAspectId]);
// Fetching questions data using useQuery // Fetching questions data using useQuery
const { data, isLoading, isError, error } = useQuery( const { data, isLoading, isError, error } = useQuery(
@ -87,12 +104,6 @@ export default function AssessmentPage() {
})); }));
}; };
// Fetch aspects and sub-aspects
const aspectsQuery = useQuery({
queryKey: ["aspects"],
queryFn: fetchAspects,
});
// Fetch average scores berdasarkan assessmentId yang diambil dari URL // Fetch average scores berdasarkan assessmentId yang diambil dari URL
const averageScoreQuery = useQuery( const averageScoreQuery = useQuery(
getAverageScoreQueryOptions(assessmentId || "") getAverageScoreQueryOptions(assessmentId || "")
@ -231,40 +242,50 @@ export default function AssessmentPage() {
{/* Aspek dan Sub-Aspek */} {/* Aspek dan Sub-Aspek */}
<Flex direction="column" gap="xs" className="mr-4 w-52"> <Flex direction="column" gap="xs" className="mr-4 w-52">
<div className="space-y-4"> <div className="space-y-4">
{aspectsQuery.data?.data.map((aspect) => ( {aspectsQuery.data?.data
<div .filter((aspect) =>
key={aspect.id} aspect.subAspects.some((subAspect) =>
className="p-4 bg-gray-50 rounded-lg shadow-md" data?.data.some((question) => question.subAspectId === subAspect.id)
> )
)
.map((aspect) => (
<div <div
className="flex justify-between cursor-pointer" key={aspect.id}
onClick={() => toggleAspect(aspect.id)} className="p-4 bg-gray-50 rounded-lg shadow-md"
> >
<div className="text-lg text-gray-700">{aspect.name}</div> <div
<div> className="flex justify-between cursor-pointer"
{openAspects[aspect.id] ? ( onClick={() => toggleAspect(aspect.id)}
<TbChevronUp size={25} /> >
) : ( <div className="text-lg text-gray-700">{aspect.name}</div>
<TbChevronRight size={25} /> <div>
)} {openAspects[aspect.id] ? (
<TbChevronUp size={25} />
) : (
<TbChevronRight size={25} />
)}
</div>
</div> </div>
</div>
{openAspects[aspect.id] && ( {openAspects[aspect.id] && (
<div className="mt-2 space-y-2"> <div className="mt-2 space-y-2">
{aspect.subAspects.map((subAspect) => ( {aspect.subAspects
<div .filter((subAspect) =>
key={subAspect.id} data?.data.some((question) => question.subAspectId === subAspect.id)
className={`flex justify-between text-gray-600 cursor-pointer ${selectedSubAspectId === subAspect.id ? 'font-bold' : ''}`} )
onClick={() => setSelectedSubAspectId(subAspect.id)} .map((subAspect) => (
> <div
<div>{subAspect.name}</div> key={subAspect.id}
</div> className={`flex justify-between text-gray-600 cursor-pointer ${selectedSubAspectId === subAspect.id ? 'font-bold' : ''}`}
))} onClick={() => setSelectedSubAspectId(subAspect.id)}
</div> >
)} <div>{subAspect.name}</div>
</div> </div>
))} ))}
</div>
)}
</div>
))}
</div> </div>
</Flex> </Flex>
{/* Pertanyaan */} {/* Pertanyaan */}