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-10 15:54:21 +07:00
parent 086c1576b6
commit 91f9bc4745
1 changed files with 144 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -213,6 +213,10 @@ export default function AssessmentPage() {
const endIndex = startIndex + limit; const endIndex = startIndex + limit;
const paginatedQuestions = data?.data.slice(startIndex, endIndex) || []; const paginatedQuestions = data?.data.slice(startIndex, endIndex) || [];
const filteredQuestions = paginatedQuestions.filter((question) => {
return question.subAspectId === selectedSubAspectId; // Misalnya, jika `question` memiliki `subAspectId`
});
return ( return (
<Card shadow="sm" p="lg" radius="md" withBorder> <Card shadow="sm" p="lg" radius="md" withBorder>
<Stack gap="md"> <Stack gap="md">
@ -225,7 +229,7 @@ export default function AssessmentPage() {
{/* LEFT-SIDE */} {/* LEFT-SIDE */}
{/* Aspek dan Sub-Aspek */} {/* Aspek dan Sub-Aspek */}
<Flex direction="column" gap="xs" className="mr-4"> <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.map((aspect) => (
<div <div
@ -251,7 +255,8 @@ export default function AssessmentPage() {
{aspect.subAspects.map((subAspect) => ( {aspect.subAspects.map((subAspect) => (
<div <div
key={subAspect.id} key={subAspect.id}
className="flex justify-between text-gray-600" className={`flex justify-between text-gray-600 cursor-pointer ${selectedSubAspectId === subAspect.id ? 'font-bold' : ''}`}
onClick={() => setSelectedSubAspectId(subAspect.id)}
> >
<div>{subAspect.name}</div> <div>{subAspect.name}</div>
</div> </div>
@ -264,7 +269,12 @@ export default function AssessmentPage() {
</Flex> </Flex>
{/* Pertanyaan */} {/* Pertanyaan */}
<Stack gap="sm" style={{ flex: 1 }}> <Stack gap="sm" style={{ flex: 1 }}>
{paginatedQuestions.map((question: any, index: number) => { {filteredQuestions.length === 0 ? (
<Text color="black" className="text-center p-3">
Pertanyaan tidak ada untuk sub-aspek yang dipilih.
</Text>
) : (
filteredQuestions.map((question: any, index: number) => {
const questionId = question.questionId; const questionId = question.questionId;
if (!questionId) return null; if (!questionId) return null;
@ -279,11 +289,7 @@ export default function AssessmentPage() {
style={{ position: "relative" }} style={{ position: "relative" }}
> >
<Stack gap="sm"> <Stack gap="sm">
<Flex <Flex justify="space-between" align="flex-start" style={{ width: "100%" }}>
justify="space-between"
align="flex-start"
style={{ width: "100%" }}
>
<Text <Text
className="font-bold" className="font-bold"
style={{ style={{
@ -320,9 +326,7 @@ export default function AssessmentPage() {
<label <label
key={option.optionId} key={option.optionId}
className="bg-gray-200 border rounded-lg p-4 cursor-pointer transition-transform transform hover:scale-105 shadow-md hover:shadow-lg flex items-center" className="bg-gray-200 border rounded-lg p-4 cursor-pointer transition-transform transform hover:scale-105 shadow-md hover:shadow-lg flex items-center"
onClick={() => onClick={() => document.getElementById(option.optionId)?.click()}
document.getElementById(option.optionId)?.click()
}
> >
<Radio <Radio
id={option.optionId} id={option.optionId}
@ -338,7 +342,7 @@ export default function AssessmentPage() {
assessmentId: assessmentId || "", assessmentId: assessmentId || "",
validationInformation: JSON.stringify({ validationInformation: JSON.stringify({
info: "jfjforjfocn", info: "jfjforjfocn",
questionId: question.questionId // Tambahkan questionId dalam validationInformation questionId: question.questionId,
}), }),
}); });
}} }}
@ -356,8 +360,9 @@ export default function AssessmentPage() {
{/* File Upload */} {/* File Upload */}
{question.needFile === true && ( {question.needFile === true && (
<div <div
className={`pt-5 pb-5 pr-5 pl-2 border-2 border-dashed ${dragActive ? "bg-gray-100" : "bg-transparent" className={`pt-5 pb-5 pr-5 pl-2 border-2 border-dashed ${
} shadow-lg`} // Tambah shadow-lg dragActive ? "bg-gray-100" : "bg-transparent"
} shadow-lg`}
onDragOver={handleDragOver} onDragOver={handleDragOver}
onDragLeave={handleDragLeave} onDragLeave={handleDragLeave}
onDrop={handleDrop} onDrop={handleDrop}
@ -367,8 +372,7 @@ export default function AssessmentPage() {
<TbUpload <TbUpload
size={24} size={24}
style={{ marginLeft: "8px", marginRight: "8px" }} style={{ marginLeft: "8px", marginRight: "8px" }}
/>{" "} />
{/* Tambah marginLeft */}
<div className="flex-grow text-right"> <div className="flex-grow text-right">
<Text className="font-bold"> <Text className="font-bold">
Klik untuk unggah atau geser file disini Klik untuk unggah atau geser file disini
@ -405,7 +409,8 @@ export default function AssessmentPage() {
</Stack> </Stack>
</Card> </Card>
); );
})} })
)}
</Stack> </Stack>
{/* Navigasi dan Pagination */} {/* Navigasi dan Pagination */}