diff options
author | Leonardo Murça <106257713+leomurca@users.noreply.github.com> | 2023-02-07 20:40:41 -0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-02-07 20:40:41 -0300 |
commit | 8eca8b79ce4bfc40f8416309cbcfe397ed935ec4 (patch) | |
tree | ca4152122b67605e76f7a53ed1a14402255b23aa /src/screens/professor/Classroom/AssignmentsTab | |
parent | e3de3c8e5fe06f7d14b2dc99a8b6aadc3b9bf18a (diff) | |
parent | c1f1286c86a47b87abcca55cbd0177d2a9c92fcd (diff) |
Feature/professor classroom
Diffstat (limited to 'src/screens/professor/Classroom/AssignmentsTab')
-rw-r--r-- | src/screens/professor/Classroom/AssignmentsTab/index.js | 409 | ||||
-rw-r--r-- | src/screens/professor/Classroom/AssignmentsTab/styles.js | 138 |
2 files changed, 547 insertions, 0 deletions
diff --git a/src/screens/professor/Classroom/AssignmentsTab/index.js b/src/screens/professor/Classroom/AssignmentsTab/index.js new file mode 100644 index 0000000..2060c40 --- /dev/null +++ b/src/screens/professor/Classroom/AssignmentsTab/index.js @@ -0,0 +1,409 @@ +import { + 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 ( + <Container + sx={{ + ...externalContainer, + display: 'block', + }} + 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> + <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: + 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> + <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: + return null; + } + } + }; + return layoutResolver( + assignmentsTabData && assignmentsTabData.state, + assignmentsTabData && assignmentsTabData.assignments, + layoutType + ); +} + +export default AssignmentsTab; diff --git a/src/screens/professor/Classroom/AssignmentsTab/styles.js b/src/screens/professor/Classroom/AssignmentsTab/styles.js new file mode 100644 index 0000000..0493789 --- /dev/null +++ b/src/screens/professor/Classroom/AssignmentsTab/styles.js @@ -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; |