Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | 1x 6x | /**
* EI-3182 — AssignmentDetails (take-assignment sidebar)
*
* Renders assignment metadata in the sidebar panel shown while a student is
* actively taking an assignment. Extended to surface instructions and rubric
* when the backend delivers them, so students can read guidance without
* leaving the test.
*
* Developer: Allan Niñal
*/
import React from "react";
import { List, ListItem, ListItemText, Box, Divider, Typography } from "@mui/material";
import RubricTable from "@/app/student-page/components/assignments/RubricTable";
import { utcToLocalTime } from "@/utils/helpers/utcToLocalTime";
/**
* @param {{
* title?: string,
* description?: string,
* dateOpen?: string,
* dateClose?: string,
* shuffleQuestions?: boolean,
* allowCalculator?: boolean,
* instructions?: string | null,
* rubric?: object | null,
* }} props
*/
const AssignmentDetails = ({
title = "Assignment Title",
description = "Assignment Description",
dateOpen = "January 01, 2024",
dateClose = "January 05, 2024",
shuffleQuestions = true,
allowCalculator = true,
instructions,
rubric,
}) => {
return (
<Box data-testid="take-assignment-details">
<List dense>
<ListItem>
<ListItemText primary="Title" secondary={title} />
</ListItem>
<ListItem>
<ListItemText primary="Description" secondary={description} />
</ListItem>
<ListItem>
<ListItemText primary="Date open" secondary={utcToLocalTime(dateOpen)} />
</ListItem>
<ListItem>
<ListItemText primary="Date close" secondary={utcToLocalTime(dateClose)} />
</ListItem>
<ListItem>
<ListItemText primary="Shuffle Questions" secondary={shuffleQuestions ? "Yes" : "No"} />
</ListItem>
<ListItem>
<ListItemText primary="Allow Calculator" secondary={allowCalculator ? "Yes" : "No"} />
</ListItem>
</List>
{/* EI-3182: instructions — preserve line breaks */}
{instructions && (
<Box sx={{ px: 2, pb: 1 }} data-testid="take-assignment-instructions">
<Divider sx={{ mb: 1.5 }} />
<Typography variant="subtitle2" fontWeight={600} sx={{ mb: 0.5 }}>
Instructions
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ whiteSpace: "pre-wrap" }}>
{instructions}
</Typography>
</Box>
)}
{/* EI-3182: rubric */}
{rubric && (
<Box sx={{ px: 1, pb: 1 }} data-testid="take-assignment-rubric">
<Divider sx={{ mb: 1.5 }} />
<RubricTable rubric={rubric} />
</Box>
)}
</Box>
);
};
export default AssignmentDetails;
|