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 [assessmentId, setAssessmentId] = useState<string | null>(null);
// Fetch aspects and sub-aspects
const aspectsQuery = useQuery({
queryKey: ["aspects"],
queryFn: fetchAspects,
});
useEffect(() => {
const id = getQueryParam("id");
if (!id) {
// Handle if no ID found
setAssessmentId(null);
// Handle if no ID found
setAssessmentId(null);
} 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
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
const averageScoreQuery = useQuery(
getAverageScoreQueryOptions(assessmentId || "")
@ -231,40 +242,50 @@ export default function AssessmentPage() {
{/* Aspek dan Sub-Aspek */}
<Flex direction="column" gap="xs" className="mr-4 w-52">
<div className="space-y-4">
{aspectsQuery.data?.data.map((aspect) => (
<div
key={aspect.id}
className="p-4 bg-gray-50 rounded-lg shadow-md"
>
{aspectsQuery.data?.data
.filter((aspect) =>
aspect.subAspects.some((subAspect) =>
data?.data.some((question) => question.subAspectId === subAspect.id)
)
)
.map((aspect) => (
<div
className="flex justify-between cursor-pointer"
onClick={() => toggleAspect(aspect.id)}
key={aspect.id}
className="p-4 bg-gray-50 rounded-lg shadow-md"
>
<div className="text-lg text-gray-700">{aspect.name}</div>
<div>
{openAspects[aspect.id] ? (
<TbChevronUp size={25} />
) : (
<TbChevronRight size={25} />
)}
<div
className="flex justify-between cursor-pointer"
onClick={() => toggleAspect(aspect.id)}
>
<div className="text-lg text-gray-700">{aspect.name}</div>
<div>
{openAspects[aspect.id] ? (
<TbChevronUp size={25} />
) : (
<TbChevronRight size={25} />
)}
</div>
</div>
</div>
{openAspects[aspect.id] && (
<div className="mt-2 space-y-2">
{aspect.subAspects.map((subAspect) => (
<div
key={subAspect.id}
className={`flex justify-between text-gray-600 cursor-pointer ${selectedSubAspectId === subAspect.id ? 'font-bold' : ''}`}
onClick={() => setSelectedSubAspectId(subAspect.id)}
>
<div>{subAspect.name}</div>
</div>
))}
</div>
)}
</div>
))}
{openAspects[aspect.id] && (
<div className="mt-2 space-y-2">
{aspect.subAspects
.filter((subAspect) =>
data?.data.some((question) => question.subAspectId === subAspect.id)
)
.map((subAspect) => (
<div
key={subAspect.id}
className={`flex justify-between text-gray-600 cursor-pointer ${selectedSubAspectId === subAspect.id ? 'font-bold' : ''}`}
onClick={() => setSelectedSubAspectId(subAspect.id)}
>
<div>{subAspect.name}</div>
</div>
))}
</div>
)}
</div>
))}
</div>
</Flex>
{/* Pertanyaan */}