update: change position on pagination when device is responsive
This commit is contained in:
parent
dab3423cec
commit
830ea9f635
|
|
@ -5,14 +5,11 @@ import {
|
|||
Text,
|
||||
Loader,
|
||||
ActionIcon,
|
||||
CloseButton,
|
||||
Group,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardTitle,
|
||||
} from "@/shadcn/components/ui/card";
|
||||
import { Button } from "@/shadcn/components/ui/button";
|
||||
import { Textarea } from "@/shadcn/components/ui/textarea";
|
||||
|
|
@ -34,30 +31,18 @@ import {
|
|||
getQuestionsAllQueryOptions,
|
||||
toggleFlagAnswer,
|
||||
} from "@/modules/assessmentManagement/queries/assessmentQueries";
|
||||
import { TbFlagFilled, TbUpload, TbChevronRight, TbChevronDown, TbLayoutSidebarLeftCollapseFilled, TbMenu2 } from "react-icons/tb";
|
||||
import { TbFlagFilled, TbChevronRight, TbChevronDown, TbLayoutSidebarLeftCollapseFilled } from "react-icons/tb";
|
||||
import FinishAssessmentModal from "@/modules/assessmentManagement/modals/ConfirmModal";
|
||||
import FileUpload from "@/modules/assessmentManagement/fileUpload/fileUpload";
|
||||
import ValidationModal from "@/modules/assessmentManagement/modals/ValidationModal";
|
||||
import FileSizeValidationModal from "@/modules/assessmentManagement/modals/FileSizeValidationModal";
|
||||
import {
|
||||
Sheet,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetFooter,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from "@/shadcn/components/ui/sheet";
|
||||
import {
|
||||
LeftSheet,
|
||||
LeftSheetClose,
|
||||
LeftSheetContent,
|
||||
LeftSheetDescription,
|
||||
LeftSheetFooter,
|
||||
LeftSheetHeader,
|
||||
LeftSheetTitle,
|
||||
LeftSheetTrigger,
|
||||
} from "@/shadcn/components/ui/leftsheet";
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import AppHeader from "@/components/AppHeader";
|
||||
|
|
@ -93,12 +78,6 @@ export interface SubmitOptionResponse {
|
|||
};
|
||||
}
|
||||
|
||||
// const [isLeftSidebarOpen, setIsLeftSidebarOpen] = useState(false);
|
||||
|
||||
// export const toggleLeftSidebar = () => setIsLeftSidebarOpen(!isLeftSidebarOpen);
|
||||
|
||||
// import AppHeader from '../../../components/AppHeader';
|
||||
|
||||
export default function AssessmentPage() {
|
||||
const [page, setPage] = useState(1);
|
||||
const limit = 10;
|
||||
|
|
@ -128,15 +107,8 @@ export default function AssessmentPage() {
|
|||
const [openNavbar, setOpenNavbar] = useState(false);
|
||||
const [isLeftSidebarOpen, setIsLeftSidebarOpen] = useState(false);
|
||||
|
||||
// Toggle the sidebar open/close on mobile
|
||||
const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
|
||||
|
||||
const toggleLeftSidebar = () => setIsLeftSidebarOpen(!isLeftSidebarOpen);
|
||||
|
||||
const toggleSidebarLeftSide = () => {
|
||||
setIsSidebarOpen((prevState) => !prevState);
|
||||
};
|
||||
|
||||
// Fungsi toggle untuk membuka/menutup navbar
|
||||
const toggle = () => {
|
||||
setOpenNavbar((prevState) => !prevState);
|
||||
|
|
@ -648,10 +620,6 @@ export default function AssessmentPage() {
|
|||
|
||||
{/* LEFT-SIDE */}
|
||||
{/* Aspek dan Sub-Aspek */}
|
||||
{/* <TbMenu2
|
||||
onClick={toggleLeftSidebar}
|
||||
className="ml-4 w-6 h-fit pb-4 mb-4 cursor-pointer"
|
||||
/> */}
|
||||
<AppHeader
|
||||
openNavbar={isLeftSidebarOpen}
|
||||
toggle={toggleLeftSidebar}
|
||||
|
|
@ -662,6 +630,7 @@ export default function AssessmentPage() {
|
|||
{isMobile && (
|
||||
<LeftSheet open={isLeftSidebarOpen} onOpenChange={(open) => setIsLeftSidebarOpen(open)}>
|
||||
<LeftSheetContent className="h-full w-75 overflow-auto">
|
||||
<Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label>
|
||||
<Flex direction="column" gap="xs" className="w-64">
|
||||
<div className="space-y-2">
|
||||
{/* Aspek */}
|
||||
|
|
@ -672,7 +641,7 @@ export default function AssessmentPage() {
|
|||
)
|
||||
)
|
||||
.map((aspect) => (
|
||||
<div key={aspect.id} className="p-2 ">
|
||||
<div key={aspect.id} className="p-2 mt-4">
|
||||
<div
|
||||
className="flex justify-between cursor-pointer"
|
||||
onClick={() => toggleAspect(aspect.id)}
|
||||
|
|
@ -715,6 +684,7 @@ export default function AssessmentPage() {
|
|||
|
||||
{/* Sidebar for Desktop (Always Visible) */}
|
||||
<div className="hidden md:block fixed h-screen w-64 overflow-auto">
|
||||
<Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label>
|
||||
<Flex direction="column" gap="xs" className="w-64">
|
||||
<div className="space-y-2">
|
||||
{/* Aspek */}
|
||||
|
|
@ -790,10 +760,10 @@ export default function AssessmentPage() {
|
|||
<Stack gap="sm">
|
||||
<div className="grid grid-cols-[auto_1fr_auto] gap-2 w-full items-start">
|
||||
{/* Question Number */}
|
||||
<Text className="font-bold p-1 text-sm">{startIndex + index + 1}.</Text>
|
||||
<Text className="font-bold p-2 text-sm">{startIndex + index + 1}.</Text>
|
||||
|
||||
{/* Question Text */}
|
||||
<Text className="font-bold break-words text-sm p-1">{question.questionText}</Text>
|
||||
<Text className="font-bold break-words text-sm p-2">{question.questionText}</Text>
|
||||
|
||||
{/* Action Icon/Flag */}
|
||||
<ActionIcon
|
||||
|
|
@ -810,7 +780,7 @@ export default function AssessmentPage() {
|
|||
|
||||
{/* Radio Button Options */}
|
||||
{question.options?.length > 0 ? (
|
||||
<div className="mx-8">
|
||||
<div className="mx-11">
|
||||
<RadioGroup
|
||||
value={answers[question.questionId] || ""}
|
||||
onValueChange={(value) => handleAnswerChange(question.questionId, value)}
|
||||
|
|
@ -880,6 +850,20 @@ export default function AssessmentPage() {
|
|||
})
|
||||
)}
|
||||
</Stack>
|
||||
{/* Pagination for mobile */}
|
||||
<div className="md:hidden mb-4 flex justify-center">
|
||||
<Pagination
|
||||
page={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={(newPage) => {
|
||||
if (selectedSubAspectId) {
|
||||
handlePageChange(selectedSubAspectId, newPage);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Text className="text-sm m-0">Halaman {currentPage} dari {totalPages}</Text>
|
||||
</Pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RIGHT-SIDE */}
|
||||
|
|
@ -887,7 +871,7 @@ export default function AssessmentPage() {
|
|||
{isMobile && (
|
||||
<button
|
||||
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
|
||||
className="fixed bottom-4 right-4 bg-[--primary-color] text-white p-3 rounded-full shadow-md z-50"
|
||||
className="fixed bottom-4 right-4 bg-black text-white p-3 rounded-xl shadow-md z-50"
|
||||
>
|
||||
<TbLayoutSidebarLeftCollapseFilled size={30} />
|
||||
</button>
|
||||
|
|
@ -896,14 +880,13 @@ export default function AssessmentPage() {
|
|||
{/* Sidebar for mobile (only when toggled) */}
|
||||
<div className="hidden md:block">
|
||||
<Sheet open={isSidebarOpen} onOpenChange={(open) => setIsSidebarOpen(open)}>
|
||||
<SheetContent className="h-full w-70 overflow-auto">
|
||||
<SheetContent className="h-full w-30 overflow-auto">
|
||||
<SheetTitle className="font-medium text-lg text-gray-800 mb-2">
|
||||
Nomor Soal
|
||||
</SheetTitle>
|
||||
{/* <Text className="font-medium text-lg text-gray-800 mb-2">Nomor Soal</Text> */}
|
||||
|
||||
{/* Navigasi (Number of Questions) */}
|
||||
<div className="grid grid-cols-5 gap-2">
|
||||
<div className="grid grid-cols-5 gap-2 pb-3">
|
||||
{Array.from({ length: totalQuestionsInSubAspect }).map((_, i) => {
|
||||
const questionNumber = startIndex + i + 1;
|
||||
const questionId = filteredQuestions[i]?.questionId;
|
||||
|
|
@ -930,64 +913,50 @@ export default function AssessmentPage() {
|
|||
})}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-center">
|
||||
<Pagination
|
||||
page={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={(newPage) => {
|
||||
if (selectedSubAspectId) {
|
||||
handlePageChange(selectedSubAspectId, newPage);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Text className="text-xs m-0">Halaman {currentPage} dari {totalPages}</Text>
|
||||
</Pagination>
|
||||
</div>
|
||||
{/* Divider */}
|
||||
<div className="border-t-2 border-gray-300 my-4" />
|
||||
|
||||
{/* Skor Aspek dan Sub-Aspek */}
|
||||
<div className="mt-4">
|
||||
<Card>
|
||||
<CardTitle className="text-lg font-extrabold text-center mt-4 mb-2">
|
||||
Nilai Sementara
|
||||
</CardTitle>
|
||||
<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);
|
||||
<h2 className="text-lg font-extrabold mt-4 mb-2">Nilai Sementara</h2>
|
||||
<div className="max-h-full overflow-hidden">
|
||||
<div>
|
||||
{filteredAspects.length > 0 ? (
|
||||
filteredAspects.map((aspect) => {
|
||||
const aspectScore = parseFloat(aspect.averageScore).toFixed(2);
|
||||
const aspectScoreValue = parseFloat(aspectScore);
|
||||
|
||||
return (
|
||||
<div key={aspect.aspectId} className="flex justify-between items-center">
|
||||
<Text className="text-lg text-gray-700">{aspect.aspectName}</Text>
|
||||
<Text
|
||||
className={`text-xl font-bold ${
|
||||
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 (
|
||||
<div key={aspect.aspectId} className="flex justify-between items-center">
|
||||
<Text className="text-lg text-gray-700 break-words whitespace-normal">{aspect.aspectName}</Text>
|
||||
<Text
|
||||
className={`text-xl font-bold ${
|
||||
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>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t-2 border-gray-300 my-4" />
|
||||
{/* Divider */}
|
||||
<div className="border-t-2 border-gray-300 my-4" />
|
||||
|
||||
{/* Skor Sub-Aspek */}
|
||||
{/* Skor Sub-Aspek */}
|
||||
<div>
|
||||
{filteredSubAspects.length > 0 ? (
|
||||
filteredSubAspects.map((subAspect) => {
|
||||
const subAspectScore = parseFloat(subAspect.averageScore).toFixed(2);
|
||||
|
|
@ -995,7 +964,7 @@ export default function AssessmentPage() {
|
|||
|
||||
return (
|
||||
<div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
|
||||
<Text className="text-sm text-gray-700">{subAspect.subAspectName}</Text>
|
||||
<Text className="text-sm text-gray-700 break-words whitespace-normal">{subAspect.subAspectName}</Text>
|
||||
<Text
|
||||
className={`text-sm font-bold ${
|
||||
subAspectScoreValue >= 4.5
|
||||
|
|
@ -1017,18 +986,17 @@ export default function AssessmentPage() {
|
|||
) : (
|
||||
<Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text>
|
||||
)}
|
||||
</ScrollArea>
|
||||
|
||||
{/* Finish Button */}
|
||||
<div>
|
||||
<Button
|
||||
onClick={handleFinishClick}
|
||||
className="bg-[--primary-color] text-white font-bold rounded-md w-full text-sm"
|
||||
>
|
||||
Selesai
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
{/* Finish Button */}
|
||||
<div className="mt-4">
|
||||
<Button
|
||||
onClick={handleFinishClick}
|
||||
className="bg-[--primary-color] text-white font-bold rounded-md w-full text-sm"
|
||||
>
|
||||
Selesai
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Finish Assessment Modal */}
|
||||
<FinishAssessmentModal
|
||||
|
|
@ -1044,7 +1012,7 @@ export default function AssessmentPage() {
|
|||
onClose={() => setValidationModalOpen(false)}
|
||||
unansweredQuestions={unansweredQuestions}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user