Update: Layout FE (Left, middle, right)
This commit is contained in:
percyfikri
parent
7687eae2bb
commit
0c5e777273
65
apps/frontend/src/routes/_assessmentLayout.tsx
Normal file
65
apps/frontend/src/routes/_assessmentLayout.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import { Navigate, Outlet, createFileRoute } from "@tanstack/react-router";
|
||||
import AppHeader from "../components/AppHeader";
|
||||
import AppNavbar from "../components/AppNavbar";
|
||||
import useAuth from "@/hooks/useAuth";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import fetchRPC from "@/utils/fetchRPC";
|
||||
import client from "@/honoClient";
|
||||
import { useState } from "react";
|
||||
|
||||
export const Route = createFileRoute("/_assessmentLayout")({
|
||||
component: AssessmentLayout,
|
||||
|
||||
// beforeLoad: ({ location }) => {
|
||||
// if (true) {
|
||||
// throw redirect({
|
||||
// to: "/login",
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
});
|
||||
|
||||
function AssessmentLayout() {
|
||||
const { isAuthenticated, saveAuthData } = useAuth();
|
||||
|
||||
useQuery({
|
||||
queryKey: ["my-profile"],
|
||||
queryFn: async () => {
|
||||
const response = await fetchRPC(client.auth["my-profile"].$get());
|
||||
|
||||
saveAuthData({
|
||||
id: response.id,
|
||||
name: response.name,
|
||||
permissions: response.permissions,
|
||||
});
|
||||
|
||||
return response;
|
||||
},
|
||||
enabled: isAuthenticated,
|
||||
});
|
||||
|
||||
const [openNavbar, setNavbarOpen] = useState(true);
|
||||
const toggle = () => {
|
||||
setNavbarOpen(!openNavbar);
|
||||
};
|
||||
|
||||
return isAuthenticated ? (
|
||||
<div className="flex flex-col w-full h-screen overflow-hidden">
|
||||
{/* Header */}
|
||||
<AppHeader toggle={toggle} openNavbar={openNavbar} />
|
||||
|
||||
{/* Main Content Area */}
|
||||
<div className="flex h-full w-screen overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
<AppNavbar />
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="relative w-full mt-16 bg-white overflow-auto">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Navigate to="/login" />
|
||||
);
|
||||
}
|
||||
|
|
@ -25,13 +25,14 @@ import {
|
|||
import { TbFlagFilled, TbUpload, TbChevronRight, TbChevronUp } from "react-icons/tb";
|
||||
import FinishAssessmentModal from "@/modules/assessmentManagement/modals/ConfirmModal";
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import AppHeader from "@/components/AppHeader";
|
||||
|
||||
const getQueryParam = (param: string) => {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
return urlParams.get(param);
|
||||
};
|
||||
|
||||
export const Route = createLazyFileRoute("/_dashboardLayout/assessment/")({
|
||||
export const Route = createLazyFileRoute("/_assessmentLayout/assessment/")({
|
||||
component: AssessmentPage,
|
||||
});
|
||||
|
||||
|
|
@ -446,8 +447,9 @@ export default function AssessmentPage() {
|
|||
|
||||
{/* LEFT-SIDE */}
|
||||
{/* Aspek dan Sub-Aspek */}
|
||||
<Flex direction="column" gap="xs" className="mr-4 w-52">
|
||||
<div className="space-y-4">
|
||||
<Flex direction="column" gap="xs" className="w-52">
|
||||
<div className="space-y-2">
|
||||
{/* Aspek */}
|
||||
{aspectsQuery.data?.data
|
||||
.filter((aspect) =>
|
||||
aspect.subAspects.some((subAspect) =>
|
||||
|
|
@ -457,13 +459,13 @@ export default function AssessmentPage() {
|
|||
.map((aspect) => (
|
||||
<div
|
||||
key={aspect.id}
|
||||
className="p-4 bg-gray-50 rounded-lg shadow-md"
|
||||
className="p-2 "
|
||||
>
|
||||
<div
|
||||
className="flex justify-between cursor-pointer"
|
||||
onClick={() => toggleAspect(aspect.id)}
|
||||
>
|
||||
<div className="text-lg text-gray-700">{aspect.name}</div>
|
||||
<div className="text-lg font-bold px-3">{aspect.name}</div>
|
||||
<div>
|
||||
{openAspects[aspect.id] ? (
|
||||
<TbChevronUp size={25} />
|
||||
|
|
@ -473,6 +475,7 @@ export default function AssessmentPage() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sub-Aspek */}
|
||||
{openAspects[aspect.id] && (
|
||||
<div className="mt-2 space-y-2">
|
||||
{aspect.subAspects
|
||||
|
|
@ -482,7 +485,7 @@ export default function AssessmentPage() {
|
|||
.map((subAspect) => (
|
||||
<div
|
||||
key={subAspect.id}
|
||||
className={`flex justify-between text-gray-600 cursor-pointer ${selectedSubAspectId === subAspect.id ? 'font-bold' : ''}`}
|
||||
className={`flex justify-between cursor-pointer p-2 px-6 rounded-sm transition-colors duration-150 ${selectedSubAspectId === subAspect.id ? 'text-black font-medium bg-gray-200' : 'text-gray-500'}`}
|
||||
onClick={() => setSelectedSubAspectId(subAspect.id)}
|
||||
>
|
||||
<div>{subAspect.name}</div>
|
||||
|
|
@ -494,6 +497,7 @@ export default function AssessmentPage() {
|
|||
))}
|
||||
</div>
|
||||
</Flex>
|
||||
|
||||
{/* Pertanyaan */}
|
||||
<Stack gap="sm" style={{ flex: 1 }}>
|
||||
<Text className="text-2xl font-bold ml-6">
|
||||
|
|
@ -517,14 +521,15 @@ export default function AssessmentPage() {
|
|||
>
|
||||
<Stack gap="sm">
|
||||
<Flex justify="space-between" align="flex-start" style={{ width: "100%" }}>
|
||||
<Text className="font-bold mr-3">{startIndex + index + 1}.</Text>
|
||||
{/* Question */}
|
||||
<Text className="font-bold mx-3 p-1">{startIndex + index + 1}.</Text>
|
||||
<div className="flex-grow">
|
||||
<Text className="font-bold break-words">
|
||||
{question.questionText}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/* Action Icon */}
|
||||
{/* Action Icon/Flag */}
|
||||
<ActionIcon
|
||||
onClick={() => {
|
||||
setFlaggedQuestions((prevFlags) => ({
|
||||
|
|
@ -540,6 +545,7 @@ export default function AssessmentPage() {
|
|||
}
|
||||
color={flaggedQuestions[questionId] ? "red" : "white"}
|
||||
style={{
|
||||
margin: "2px 10px",
|
||||
border: "1px gray solid",
|
||||
borderRadius: "4px",
|
||||
backgroundColor: flaggedQuestions[questionId] ? "red" : "white",
|
||||
|
|
@ -559,7 +565,7 @@ export default function AssessmentPage() {
|
|||
|
||||
{/* Opsi Radio Button */}
|
||||
{question.options?.length > 0 ? (
|
||||
<div className="ml-6">
|
||||
<div className="mx-12">
|
||||
<Radio.Group value={answers[question.questionId] || ""}>
|
||||
<div className="flex flex-col gap-4">
|
||||
{question.options.map((option: any) => (
|
||||
|
|
@ -593,7 +599,7 @@ export default function AssessmentPage() {
|
|||
)}
|
||||
|
||||
{/* Textarea */}
|
||||
<div className="ml-6">
|
||||
<div className="mx-12">
|
||||
<Textarea
|
||||
placeholder="Berikan keterangan terkait jawaban di atas"
|
||||
value={validationInformation[question.questionId] || ""}
|
||||
|
|
@ -603,7 +609,7 @@ export default function AssessmentPage() {
|
|||
</div>
|
||||
|
||||
{/* File Upload */}
|
||||
<div className="ml-6">
|
||||
<div className="mx-12">
|
||||
{question.needFile === true && (
|
||||
<div
|
||||
className={`pt-5 pb-5 pr-5 pl-5 border-2 rounded-lg border-dashed ${dragActive ? "bg-gray-100" : "bg-transparent"
|
||||
|
|
@ -656,7 +662,7 @@ export default function AssessmentPage() {
|
|||
|
||||
{/* Garis pembatas setiap soal */}
|
||||
<div>
|
||||
<hr className="border-t-2 border-gray-300 ml-6 mx-auto mt-6 mb-6" />
|
||||
<hr className="border-t-2 border-gray-300 mx-12 mt-6 mb-6" />
|
||||
</div>
|
||||
</Stack>
|
||||
</div>
|
||||
|
|
@ -666,7 +672,7 @@ export default function AssessmentPage() {
|
|||
</Stack>
|
||||
|
||||
{/* Navigasi dan Pagination */}
|
||||
<Flex direction="column" gap="xs" className="ml-4">
|
||||
<Flex direction="column" gap="xs" className="mx-4">
|
||||
|
||||
{/* Navigasi (Number of Questions) */}
|
||||
<div className="grid grid-cols-5 gap-2">
|
||||
|
|
@ -9,7 +9,7 @@ const searchParamSchema = z.object({
|
|||
detail: z.string().default("").optional(),
|
||||
});
|
||||
|
||||
export const Route = createFileRoute("/_dashboardLayout/assessment/")({
|
||||
export const Route = createFileRoute("/_assessmentLayout/assessment/")({
|
||||
validateSearch: searchParamSchema,
|
||||
|
||||
loader: ({ context: { queryClient } }) => {
|
||||
Loading…
Reference in New Issue
Block a user