Add Fab to create new assignment for professor
This commit is contained in:
parent
8484648b5d
commit
a10af92b2d
2 changed files with 512 additions and 4 deletions
|
|
@ -1,11 +1,214 @@
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Container,
|
||||||
|
Fab,
|
||||||
|
Link,
|
||||||
|
Skeleton,
|
||||||
|
Stack,
|
||||||
|
Typography,
|
||||||
|
} from '@mui/material';
|
||||||
|
import AddIcon from '@mui/icons-material/Add';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import { capitalizeFirstLetter } from '../../../../utils/capitalizeFirstLetter';
|
||||||
|
import styles from './styles';
|
||||||
|
|
||||||
function AssignmentsTab({ assignmentsTabData, layoutType }) {
|
function AssignmentsTab({ assignmentsTabData, layoutType }) {
|
||||||
const layoutResolver = (state, assignments, layoutType) => {
|
const layoutResolver = (state, assignments, layoutType) => {
|
||||||
|
const {
|
||||||
|
externalContainer,
|
||||||
|
innerContainer,
|
||||||
|
sectionTitle,
|
||||||
|
assignmentContainer,
|
||||||
|
assignmentTypography,
|
||||||
|
assignmentLink,
|
||||||
|
assignmentDueDate,
|
||||||
|
assignmentScores,
|
||||||
|
emptyStateContainer,
|
||||||
|
} = styles[layoutType];
|
||||||
if (layoutType === 'desktop') {
|
if (layoutType === 'desktop') {
|
||||||
switch (state) {
|
switch (state) {
|
||||||
case 'loading':
|
case 'loading':
|
||||||
return <h1>Loading...</h1>;
|
return (
|
||||||
|
<Container sx={externalContainer} disableGutters>
|
||||||
|
<Stack alignItems="center">
|
||||||
|
<Skeleton
|
||||||
|
variant="rectangular"
|
||||||
|
width="90%"
|
||||||
|
height={70}
|
||||||
|
sx={{ marginBottom: '30px' }}
|
||||||
|
/>
|
||||||
|
<Stack alignItems="flex-start" sx={{ width: '90%' }}>
|
||||||
|
<Skeleton variant="rectangular" height={50} width="95%" />
|
||||||
|
<Skeleton
|
||||||
|
variant="rectangular"
|
||||||
|
height={20}
|
||||||
|
width={450}
|
||||||
|
sx={{ marginTop: '25px' }}
|
||||||
|
/>
|
||||||
|
<Skeleton
|
||||||
|
variant="rectangular"
|
||||||
|
height={20}
|
||||||
|
width={300}
|
||||||
|
sx={{ marginTop: '15px' }}
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
<Stack
|
||||||
|
alignItems="flex-start"
|
||||||
|
sx={{ width: '90%', marginTop: '30px' }}
|
||||||
|
>
|
||||||
|
<Skeleton variant="rectangular" height={50} width="95%" />
|
||||||
|
<Skeleton
|
||||||
|
variant="rectangular"
|
||||||
|
height={20}
|
||||||
|
width={450}
|
||||||
|
sx={{ marginTop: '25px' }}
|
||||||
|
/>
|
||||||
|
<Skeleton
|
||||||
|
variant="rectangular"
|
||||||
|
height={20}
|
||||||
|
width={300}
|
||||||
|
sx={{ marginTop: '15px' }}
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
<Stack sx={{ marginTop: '50px' }} alignItems="center">
|
||||||
|
<Skeleton
|
||||||
|
variant="rectangular"
|
||||||
|
width="90%"
|
||||||
|
height={70}
|
||||||
|
sx={{ marginBottom: '30px' }}
|
||||||
|
/>
|
||||||
|
<Stack alignItems="flex-start" sx={{ width: '90%' }}>
|
||||||
|
<Skeleton variant="rectangular" height={50} width="95%" />
|
||||||
|
<Skeleton
|
||||||
|
variant="rectangular"
|
||||||
|
height={20}
|
||||||
|
width={450}
|
||||||
|
sx={{ marginTop: '25px' }}
|
||||||
|
/>
|
||||||
|
<Skeleton
|
||||||
|
variant="rectangular"
|
||||||
|
height={20}
|
||||||
|
width={300}
|
||||||
|
sx={{ marginTop: '15px' }}
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
case 'idle':
|
case 'idle':
|
||||||
return <h1>Assignments Tab</h1>;
|
const assesments = assignments.filter(a => a.type === 'assessment');
|
||||||
|
const projects = assignments.filter(a => a.type === 'project');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Container sx={externalContainer} disableGutters>
|
||||||
|
<Fab
|
||||||
|
sx={{ width: 'fit-content', marginRight: '5%' }}
|
||||||
|
color="primary"
|
||||||
|
aria-label="add"
|
||||||
|
variant="extended"
|
||||||
|
>
|
||||||
|
<AddIcon />
|
||||||
|
Criar atividade
|
||||||
|
</Fab>
|
||||||
|
<Container sx={innerContainer} disableGutters>
|
||||||
|
<Typography sx={sectionTitle} variant="h4">
|
||||||
|
Provas
|
||||||
|
</Typography>
|
||||||
|
<Stack alignItems="center">
|
||||||
|
{assesments.length !== 0 ? (
|
||||||
|
assesments.map(a => (
|
||||||
|
<Container
|
||||||
|
key={a.id}
|
||||||
|
sx={assignmentContainer}
|
||||||
|
disableGutters
|
||||||
|
>
|
||||||
|
<Typography variant="body1" sx={assignmentTypography}>
|
||||||
|
<Link
|
||||||
|
sx={assignmentLink}
|
||||||
|
href={`/assignment/${a.id}`}
|
||||||
|
>
|
||||||
|
{a.title}
|
||||||
|
</Link>
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
sx={assignmentDueDate}
|
||||||
|
variant="p"
|
||||||
|
component="div"
|
||||||
|
>
|
||||||
|
<strong>Data de entrega: </strong>{' '}
|
||||||
|
{capitalizeFirstLetter(
|
||||||
|
dayjs(a.dueDate).format('dddd, DD/MM | HH:mm[h]')
|
||||||
|
)}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
sx={assignmentScores}
|
||||||
|
variant="p"
|
||||||
|
component="div"
|
||||||
|
>
|
||||||
|
<strong>Valor: </strong>
|
||||||
|
{a.scores.map(s => s.value).join(', ')} pts
|
||||||
|
</Typography>
|
||||||
|
</Container>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<Container sx={emptyStateContainer} disableGutters>
|
||||||
|
<p>Nenhuma prova encontrada!</p>
|
||||||
|
</Container>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
<Container sx={innerContainer} disableGutters>
|
||||||
|
<Typography sx={sectionTitle} variant="h4">
|
||||||
|
Trabalhos
|
||||||
|
</Typography>
|
||||||
|
<Stack alignItems="center">
|
||||||
|
{projects.length !== 0 ? (
|
||||||
|
projects.map(a => (
|
||||||
|
<Container
|
||||||
|
key={a.id}
|
||||||
|
sx={assignmentContainer}
|
||||||
|
disableGutters
|
||||||
|
>
|
||||||
|
<Typography variant="body1" sx={assignmentTypography}>
|
||||||
|
<Link
|
||||||
|
sx={assignmentLink}
|
||||||
|
href={`/assignment/${a.id}`}
|
||||||
|
>
|
||||||
|
{a.title}
|
||||||
|
</Link>
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
sx={assignmentDueDate}
|
||||||
|
variant="p"
|
||||||
|
component="div"
|
||||||
|
>
|
||||||
|
<strong>Data de entrega: </strong>{' '}
|
||||||
|
{capitalizeFirstLetter(
|
||||||
|
dayjs(a.dueDate).format('dddd, DD/MM | HH:mm[h]')
|
||||||
|
)}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
sx={assignmentScores}
|
||||||
|
variant="p"
|
||||||
|
component="div"
|
||||||
|
>
|
||||||
|
<strong>Valor: </strong>
|
||||||
|
{a.scores.map(s => s.value).join(', ')} pts
|
||||||
|
</Typography>
|
||||||
|
</Container>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<Container sx={emptyStateContainer} disableGutters>
|
||||||
|
<p>Nenhum trabalho encontrado!</p>
|
||||||
|
</Container>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
</Container>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
case 'gone':
|
case 'gone':
|
||||||
return null;
|
return null;
|
||||||
default:
|
default:
|
||||||
|
|
@ -14,9 +217,176 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
|
||||||
} else if (layoutType === 'mobile') {
|
} else if (layoutType === 'mobile') {
|
||||||
switch (state) {
|
switch (state) {
|
||||||
case 'loading':
|
case 'loading':
|
||||||
return <h1>Loading...</h1>;
|
return (
|
||||||
|
<Stack
|
||||||
|
alignItems="center"
|
||||||
|
flexWrap="wrap"
|
||||||
|
direction="row"
|
||||||
|
sx={{ marginTop: '30px' }}
|
||||||
|
>
|
||||||
|
<Skeleton
|
||||||
|
variant="rectangular"
|
||||||
|
width="100%"
|
||||||
|
height={70}
|
||||||
|
sx={{ marginTop: '30px' }}
|
||||||
|
/>
|
||||||
|
<Skeleton
|
||||||
|
variant="rectangular"
|
||||||
|
width="100%"
|
||||||
|
height={30}
|
||||||
|
sx={{ marginTop: '20px' }}
|
||||||
|
/>
|
||||||
|
<Skeleton
|
||||||
|
variant="rectangular"
|
||||||
|
width="100%"
|
||||||
|
height={15}
|
||||||
|
sx={{ marginTop: '20px' }}
|
||||||
|
/>
|
||||||
|
<Skeleton
|
||||||
|
variant="rectangular"
|
||||||
|
width={250}
|
||||||
|
height={15}
|
||||||
|
sx={{ marginTop: '10px' }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Skeleton
|
||||||
|
variant="rectangular"
|
||||||
|
width="100%"
|
||||||
|
height={70}
|
||||||
|
sx={{ marginTop: '50px' }}
|
||||||
|
/>
|
||||||
|
<Skeleton
|
||||||
|
variant="rectangular"
|
||||||
|
width="100%"
|
||||||
|
height={30}
|
||||||
|
sx={{ marginTop: '20px' }}
|
||||||
|
/>
|
||||||
|
<Skeleton
|
||||||
|
variant="rectangular"
|
||||||
|
width="100%"
|
||||||
|
height={15}
|
||||||
|
sx={{ marginTop: '20px' }}
|
||||||
|
/>
|
||||||
|
<Skeleton
|
||||||
|
variant="rectangular"
|
||||||
|
width={250}
|
||||||
|
height={15}
|
||||||
|
sx={{ marginTop: '10px' }}
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
case 'idle':
|
case 'idle':
|
||||||
return <h1>Assignments Tab</h1>;
|
const assesments = assignments.filter(a => a.type === 'assessment');
|
||||||
|
const projects = assignments.filter(a => a.type === 'project');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Container sx={externalContainer} disableGutters>
|
||||||
|
<Fab
|
||||||
|
sx={{ width: '100%' }}
|
||||||
|
color="primary"
|
||||||
|
aria-label="add"
|
||||||
|
variant="extended"
|
||||||
|
>
|
||||||
|
<AddIcon />
|
||||||
|
Criar atividade
|
||||||
|
</Fab>
|
||||||
|
<Container sx={innerContainer} disableGutters>
|
||||||
|
<Typography sx={sectionTitle} variant="h4">
|
||||||
|
Provas
|
||||||
|
</Typography>
|
||||||
|
<Stack alignItems="center">
|
||||||
|
{assesments.length !== 0 ? (
|
||||||
|
assesments.map(a => (
|
||||||
|
<Container
|
||||||
|
key={a.id}
|
||||||
|
sx={assignmentContainer}
|
||||||
|
disableGutters
|
||||||
|
>
|
||||||
|
<Typography variant="body1" sx={assignmentTypography}>
|
||||||
|
<Link
|
||||||
|
sx={assignmentLink}
|
||||||
|
href={`/assignment/${a.id}`}
|
||||||
|
>
|
||||||
|
{a.title}
|
||||||
|
</Link>
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
sx={assignmentDueDate}
|
||||||
|
variant="p"
|
||||||
|
component="div"
|
||||||
|
>
|
||||||
|
<strong>Data de entrega: </strong>{' '}
|
||||||
|
{capitalizeFirstLetter(
|
||||||
|
dayjs(a.dueDate).format('dddd, DD/MM | HH:mm[h]')
|
||||||
|
)}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
sx={assignmentScores}
|
||||||
|
variant="p"
|
||||||
|
component="div"
|
||||||
|
>
|
||||||
|
<strong>Valor: </strong>
|
||||||
|
{a.scores.map(s => s.value).join(', ')} pts
|
||||||
|
</Typography>
|
||||||
|
</Container>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<Container sx={emptyStateContainer} disableGutters>
|
||||||
|
<p>Nenhuma prova encontrada!</p>
|
||||||
|
</Container>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
<Container sx={innerContainer} disableGutters>
|
||||||
|
<Typography sx={sectionTitle} variant="h4">
|
||||||
|
Trabalhos
|
||||||
|
</Typography>
|
||||||
|
<Stack alignItems="center">
|
||||||
|
{projects.length !== 0 ? (
|
||||||
|
projects.map(a => (
|
||||||
|
<Container
|
||||||
|
key={a.id}
|
||||||
|
sx={assignmentContainer}
|
||||||
|
disableGutters
|
||||||
|
>
|
||||||
|
<Typography variant="body1" sx={assignmentTypography}>
|
||||||
|
<Link
|
||||||
|
sx={assignmentLink}
|
||||||
|
href={`/assignment/${a.id}`}
|
||||||
|
>
|
||||||
|
{a.title}
|
||||||
|
</Link>
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
sx={assignmentDueDate}
|
||||||
|
variant="p"
|
||||||
|
component="div"
|
||||||
|
>
|
||||||
|
<strong>Data de entrega: </strong>{' '}
|
||||||
|
{capitalizeFirstLetter(
|
||||||
|
dayjs(a.dueDate).format('dddd, DD/MM | HH:mm[h]')
|
||||||
|
)}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
sx={assignmentScores}
|
||||||
|
variant="p"
|
||||||
|
component="div"
|
||||||
|
>
|
||||||
|
<strong>Valor: </strong>
|
||||||
|
{a.scores.map(s => s.value).join(', ')} pts
|
||||||
|
</Typography>
|
||||||
|
</Container>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<Container sx={emptyStateContainer} disableGutters>
|
||||||
|
<p>Nenhum trabalho encontrado!</p>
|
||||||
|
</Container>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
</Container>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
case 'gone':
|
case 'gone':
|
||||||
return null;
|
return null;
|
||||||
default:
|
default:
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,138 @@
|
||||||
|
// ========== Desktop ==========
|
||||||
|
const desktopExternalContainer = {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
marginTop: '50px',
|
||||||
|
height: '100vh',
|
||||||
|
alignItems: 'flex-end',
|
||||||
|
};
|
||||||
|
|
||||||
|
const desktopInnerContainer = {
|
||||||
|
width: '90%',
|
||||||
|
marginBottom: '30px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const desktopSectionTitle = {
|
||||||
|
padding: '10px',
|
||||||
|
borderBottom: '2px solid #00420D',
|
||||||
|
color: '#00420D',
|
||||||
|
};
|
||||||
|
|
||||||
|
const desktopAssignmentContainer = {
|
||||||
|
width: '95%',
|
||||||
|
padding: '20px',
|
||||||
|
borderBottom: '2px solid #BCBCBC',
|
||||||
|
};
|
||||||
|
|
||||||
|
const desktopAssignmentTypography = {};
|
||||||
|
|
||||||
|
const desktopAssignmentLink = {
|
||||||
|
color: 'black',
|
||||||
|
textDecoration: 'underline #000000',
|
||||||
|
};
|
||||||
|
|
||||||
|
const desktopAssignmentDueDate = {
|
||||||
|
marginTop: '15px',
|
||||||
|
fontSize: '15px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const desktopAssignmentScores = {
|
||||||
|
fontSize: '15px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const desktopEmptyStateContainer = {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginTop: '30px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const desktop = {
|
||||||
|
externalContainer: desktopExternalContainer,
|
||||||
|
innerContainer: desktopInnerContainer,
|
||||||
|
sectionTitle: desktopSectionTitle,
|
||||||
|
assignmentContainer: desktopAssignmentContainer,
|
||||||
|
assignmentTypography: desktopAssignmentTypography,
|
||||||
|
assignmentLink: desktopAssignmentLink,
|
||||||
|
assignmentDueDate: desktopAssignmentDueDate,
|
||||||
|
assignmentScores: desktopAssignmentScores,
|
||||||
|
emptyStateContainer: desktopEmptyStateContainer,
|
||||||
|
};
|
||||||
|
|
||||||
|
// ========== Mobile ==========
|
||||||
|
const mobileExternalContainer = {
|
||||||
|
marginTop: '50px',
|
||||||
|
height: '100vh',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobileInnerContainer = {
|
||||||
|
width: '100%',
|
||||||
|
marginBottom: '30px',
|
||||||
|
marginTop: '30px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobileSectionTitle = {
|
||||||
|
padding: '10px',
|
||||||
|
borderBottom: '2px solid #00420D',
|
||||||
|
color: '#00420D',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobileAssignmentContainer = {
|
||||||
|
width: '100%',
|
||||||
|
padding: '20px',
|
||||||
|
borderBottom: '2px solid #BCBCBC',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobileAssignmentTypography = {
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
display: '-webkit-box',
|
||||||
|
WebkitLineClamp: 2,
|
||||||
|
WebkitBoxOrient: 'vertical',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobileAssignmentLink = {
|
||||||
|
color: 'black',
|
||||||
|
textDecoration: 'underline #000000',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobileAssignmentDueDate = {
|
||||||
|
marginTop: '10px',
|
||||||
|
fontSize: '12px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobileAssignmentScores = {
|
||||||
|
fontSize: '12px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobileEmptyStateContainer = {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginTop: '30px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobile = {
|
||||||
|
externalContainer: mobileExternalContainer,
|
||||||
|
innerContainer: mobileInnerContainer,
|
||||||
|
sectionTitle: mobileSectionTitle,
|
||||||
|
assignmentContainer: mobileAssignmentContainer,
|
||||||
|
assignmentTypography: mobileAssignmentTypography,
|
||||||
|
assignmentLink: mobileAssignmentLink,
|
||||||
|
assignmentDueDate: mobileAssignmentDueDate,
|
||||||
|
assignmentScores: mobileAssignmentScores,
|
||||||
|
emptyStateContainer: mobileEmptyStateContainer,
|
||||||
|
};
|
||||||
|
|
||||||
|
// ========== Unset ==========
|
||||||
|
const unset = {
|
||||||
|
externalContainer: null,
|
||||||
|
innerContainer: null,
|
||||||
|
sectionTitle: null,
|
||||||
|
assignmentContainer: null,
|
||||||
|
assignmentTypography: null,
|
||||||
|
assignmentLink: null,
|
||||||
|
assignmentDueDate: null,
|
||||||
|
assignmentScores: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = { desktop, mobile, unset };
|
||||||
|
export default styles;
|
||||||
Loading…
Reference in a new issue