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

update: change card on score aspect and sub aspect add scrool area using shadcn

Browse Source
This commit is contained in:
abiyasa05 2024-11-04 12:59:02 +07:00
parent 50f5c042c3
commit 2de5b84669
1 changed files with 91 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
View File

@ -12,12 +12,12 @@ import {
Card, Card,
CardContent, CardContent,
CardDescription, CardDescription,
CardHeader,
} from "@/shadcn/components/ui/card"; } from "@/shadcn/components/ui/card";
import { Button } from "@/shadcn/components/ui/button"; import { Button } from "@/shadcn/components/ui/button";
import { Textarea } from "@/shadcn/components/ui/textarea"; import { Textarea } from "@/shadcn/components/ui/textarea";
import { Label } from "@/shadcn/components/ui/label"; import { Label } from "@/shadcn/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/shadcn/components/ui/radio-group"; import { RadioGroup, RadioGroupItem } from "@/shadcn/components/ui/radio-group";
import { ScrollArea } from "@/shadcn/components/ui/scroll-area";
import { import {
Pagination, Pagination,
} from "@/shadcn/components/ui/pagination-assessment"; } from "@/shadcn/components/ui/pagination-assessment";
@ -864,102 +864,102 @@ export default function AssessmentPage() {
{/* Skor Aspek dan Sub-Aspek */} {/* Skor Aspek dan Sub-Aspek */}
<div className="mt-4"> <div className="mt-4">
<Card> <Card>
<CardHeader> <Text className="text-lg font-extrabold text-center mt-4 mb-2">
<Text className="text-lg font-extrabold text-center">Nilai Sementara</Text> Nilai Sementara
</CardHeader> </Text>
<CardContent className="max-h-full overflow-hidden">
<ScrollArea className="h-[200px] w-full rounded-md p-2">
<CardDescription>
{filteredAspects.length > 0 ? (
filteredAspects.map((aspect) => {
const aspectScore = parseFloat(aspect.averageScore).toFixed(2);
const aspectScoreValue = parseFloat(aspectScore);
<CardContent> return (
<CardDescription> <div key={aspect.aspectId} className="flex justify-between items-center">
{filteredAspects.length > 0 ? ( <Text className="text-lg text-gray-700">{aspect.aspectName}</Text>
filteredAspects.map((aspect) => { <Text
const aspectScore = parseFloat(aspect.averageScore).toFixed(2); className={`text-lg font-bold ${
const aspectScoreValue = parseFloat(aspectScore); aspectScoreValue >= 4.5
? "text-green-700"
: aspectScoreValue >= 3.5
? "text-green-400"
: aspectScoreValue >= 2.5
? "text-yellow-400"
: aspectScoreValue >= 1.5
? "text-orange-500"
: "text-red-500"
}`}
>
{aspectScore}
</Text>
</div>
);
})
) : (
<Text className="text-base text-gray-700">Data aspek ini kosong</Text>
)}
</CardDescription>
return ( {/* Garis pembatas */}
<div key={aspect.aspectId} className="flex justify-between items-center"> <div className="border-t-2 border-gray-300 my-4" />
<Text className="text-lg text-gray-700">{aspect.aspectName}</Text>
<Text
className={`text-lg font-bold ${
aspectScoreValue >= 4.01
? "text-green-700"
: aspectScoreValue >= 3.01
? "text-green-400"
: aspectScoreValue >= 2.01
? "text-yellow-400"
: aspectScoreValue >= 1.01
? "text-orange-500"
: "text-red-500"
}`}
>
{aspectScore}
</Text>
</div>
);
})
) : (
<Text className="text-base text-gray-700">Data aspek ini kosong</Text>
)}
</CardDescription>
{/* Garis pembatas */} {/* Skor Sub-Aspek */}
<div className="border-t-2 border-gray-300 my-4" /> {filteredSubAspects.length > 0 ? (
filteredSubAspects.map((subAspect) => {
const subAspectScore = parseFloat(subAspect.averageScore).toFixed(2);
const subAspectScoreValue = parseFloat(subAspectScore);
{/* Skor Sub-Aspek */} return (
{filteredSubAspects.length > 0 ? ( <div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
filteredSubAspects.map((subAspect) => { <Text className="text-sm text-gray-700">{subAspect.subAspectName}</Text>
const subAspectScore = parseFloat(subAspect.averageScore).toFixed(2); <Text
const subAspectScoreValue = parseFloat(subAspectScore); className={`text-sm font-bold ${
subAspectScoreValue >= 4.5
? "text-green-700"
: subAspectScoreValue >= 3.5
? "text-green-400"
: subAspectScoreValue >= 2.5
? "text-yellow-400"
: subAspectScoreValue >= 1.5
? "text-orange-500"
: "text-red-500"
}`}
>
{subAspectScore}
</Text>
</div>
);
})
) : (
<Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text>
)}
</ScrollArea>
{/* Tombol Selesai */}
<div>
<Button
onClick={handleFinishClick}
className="bg-[--primary-color] text-white font-bold rounded-md w-full text-sm"
>
Selesai
</Button>
</div>
</CardContent>
return ( {/* Modal untuk konfirmasi selesai asesmen */}
<div key={subAspect.subAspectId} className="flex justify-between items-center my-2"> <FinishAssessmentModal
<Text className="text-sm text-gray-700">{subAspect.subAspectName}</Text> opened={modalOpen}
<Text onClose={() => setModalOpen(false)}
className={`text-sm font-bold ${ onConfirm={handleConfirmFinish}
subAspectScoreValue >= 4.01 assessmentId={assessmentId}
? "text-green-700" />
: subAspectScoreValue >= 3.01
? "text-green-400"
: subAspectScoreValue >= 2.01
? "text-yellow-400"
: subAspectScoreValue >= 1.01
? "text-orange-500"
: "text-red-500"
}`}
>
{subAspectScore}
</Text>
</div>
);
})
) : (
<Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text>
)}
{/* Tombol Selesai */} {/* Modal untuk peringatan jika ada pertanyaan yang belum dijawab */}
<div className="pt-4"> <ValidationModal
<Button opened={validationModalOpen}
onClick={handleFinishClick} onClose={() => setValidationModalOpen(false)}
className="bg-[--primary-color] text-white font-bold rounded-md w-full text-sm" unansweredQuestions={unansweredQuestions}
> />
Selesai
</Button>
</div>
</CardContent>
{/* Modal untuk konfirmasi selesai asesmen */}
<FinishAssessmentModal
opened={modalOpen}
onClose={() => setModalOpen(false)}
onConfirm={handleConfirmFinish}
assessmentId={assessmentId}
/>
{/* Modal untuk peringatan jika ada pertanyaan yang belum dijawab */}
<ValidationModal
opened={validationModalOpen}
onClose={() => setValidationModalOpen(false)}
unansweredQuestions={unansweredQuestions}
/>
</Card> </Card>
</div> </div>
</Flex> </Flex>