384 lines
13 KiB
JavaScript
384 lines
13 KiB
JavaScript
import { Container, Link, Skeleton, Stack, Typography } from '@mui/material';
|
|
import dayjs from 'dayjs';
|
|
import { capitalizeFirstLetter } from '../../../../utils/capitalizeFirstLetter';
|
|
import styles from './styles';
|
|
|
|
function AssignmentsTab({ assignmentsTabData, layoutType }) {
|
|
const layoutResolver = (state, assignments, layoutType) => {
|
|
const {
|
|
externalContainer,
|
|
innerContainer,
|
|
sectionTitle,
|
|
assignmentContainer,
|
|
assignmentTypography,
|
|
assignmentLink,
|
|
assignmentDueDate,
|
|
assignmentScores,
|
|
emptyStateContainer,
|
|
} = styles[layoutType];
|
|
if (layoutType === 'desktop') {
|
|
switch (state) {
|
|
case 'loading':
|
|
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':
|
|
const assesments = assignments.filter(a => a.type === 'assessment');
|
|
const projects = assignments.filter(a => a.type === 'project');
|
|
|
|
return (
|
|
<Container sx={externalContainer} disableGutters>
|
|
<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 sx={assignmentTypography} variant="h5">
|
|
<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="h5">
|
|
<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':
|
|
return null;
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
} else if (layoutType === 'mobile') {
|
|
switch (state) {
|
|
case 'loading':
|
|
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':
|
|
const assesments = assignments.filter(a => a.type === 'assessment');
|
|
const projects = assignments.filter(a => a.type === 'project');
|
|
|
|
return (
|
|
<Container sx={externalContainer} disableGutters>
|
|
<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':
|
|
return null;
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
};
|
|
|
|
return layoutResolver(
|
|
assignmentsTabData && assignmentsTabData.state,
|
|
assignmentsTabData && assignmentsTabData.assignments,
|
|
layoutType
|
|
);
|
|
}
|
|
|
|
export default AssignmentsTab;
|