summaryrefslogtreecommitdiff
path: root/src/screens/professor/Classroom/AssignmentsTab
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens/professor/Classroom/AssignmentsTab')
-rw-r--r--src/screens/professor/Classroom/AssignmentsTab/index.js409
-rw-r--r--src/screens/professor/Classroom/AssignmentsTab/styles.js138
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;
generated by cgit v1.2.3 (git 2.25.1) at 2024-09-19 16:15:44 +0000