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 }) {
|
||||
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 <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':
|
||||
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':
|
||||
return null;
|
||||
default:
|
||||
|
|
@ -14,9 +217,176 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
|
|||
} else if (layoutType === 'mobile') {
|
||||
switch (state) {
|
||||
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':
|
||||
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':
|
||||
return null;
|
||||
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