diff --git a/src/screens/professor/Classroom/AssignmentsTab/index.js b/src/screens/professor/Classroom/AssignmentsTab/index.js index 7f70767..33ebf20 100644 --- a/src/screens/professor/Classroom/AssignmentsTab/index.js +++ b/src/screens/professor/Classroom/AssignmentsTab/index.js @@ -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

Loading...

; + return ( + + + + + + + + + + + + + + + + + + + + + + + + + ); case 'idle': - return

Assignments Tab

; + const assesments = assignments.filter(a => a.type === 'assessment'); + const projects = assignments.filter(a => a.type === 'project'); + + return ( + + + + Criar atividade + + + + Provas + + + {assesments.length !== 0 ? ( + assesments.map(a => ( + + + + {a.title} + + + + Data de entrega: {' '} + {capitalizeFirstLetter( + dayjs(a.dueDate).format('dddd, DD/MM | HH:mm[h]') + )} + + + Valor: + {a.scores.map(s => s.value).join(', ')} pts + + + )) + ) : ( + +

Nenhuma prova encontrada!

+ + )} + + + + + + Trabalhos + + + {projects.length !== 0 ? ( + projects.map(a => ( + + + + {a.title} + + + + Data de entrega: {' '} + {capitalizeFirstLetter( + dayjs(a.dueDate).format('dddd, DD/MM | HH:mm[h]') + )} + + + Valor: + {a.scores.map(s => s.value).join(', ')} pts + + + )) + ) : ( + +

Nenhum trabalho encontrado!

+ + )} + + + + ); case 'gone': return null; default: @@ -14,9 +217,176 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) { } else if (layoutType === 'mobile') { switch (state) { case 'loading': - return

Loading...

; + return ( + + + + + + + + + + + + ); case 'idle': - return

Assignments Tab

; + const assesments = assignments.filter(a => a.type === 'assessment'); + const projects = assignments.filter(a => a.type === 'project'); + + return ( + + + + Criar atividade + + + + Provas + + + {assesments.length !== 0 ? ( + assesments.map(a => ( + + + + {a.title} + + + + Data de entrega: {' '} + {capitalizeFirstLetter( + dayjs(a.dueDate).format('dddd, DD/MM | HH:mm[h]') + )} + + + Valor: + {a.scores.map(s => s.value).join(', ')} pts + + + )) + ) : ( + +

Nenhuma prova encontrada!

+ + )} + + + + + + Trabalhos + + + {projects.length !== 0 ? ( + projects.map(a => ( + + + + {a.title} + + + + Data de entrega: {' '} + {capitalizeFirstLetter( + dayjs(a.dueDate).format('dddd, DD/MM | HH:mm[h]') + )} + + + Valor: + {a.scores.map(s => s.value).join(', ')} pts + + + )) + ) : ( + +

Nenhum trabalho encontrado!

+ + )} + + + + ); case 'gone': return null; default: diff --git a/src/screens/professor/Classroom/AssignmentsTab/styles.js b/src/screens/professor/Classroom/AssignmentsTab/styles.js index e69de29..0493789 100644 --- a/src/screens/professor/Classroom/AssignmentsTab/styles.js +++ 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;