diff --git a/src/components/AssignmentCard/index.js b/src/components/professor/AssignmentCard/index.js similarity index 65% rename from src/components/AssignmentCard/index.js rename to src/components/professor/AssignmentCard/index.js index fc5758b..6e954f3 100644 --- a/src/components/AssignmentCard/index.js +++ b/src/components/professor/AssignmentCard/index.js @@ -9,19 +9,18 @@ import { } from '@mui/material'; import dayjs from 'dayjs'; -import { capitalizeFirstLetter } from '../../utils/capitalizeFirstLetter'; +import { capitalizeFirstLetter } from '../../../utils/capitalizeFirstLetter'; import styles from './styles'; +import { AssignmentTurnedIn, PendingActions } from '@mui/icons-material'; function AssignmentCard({ title, classrooms, dueDate, - scores, deliveredByStudents, reviewed, total, - isAssignmentToReview, layoutType, onClick, }) { @@ -64,29 +63,33 @@ function AssignmentCard({ > {classrooms.map(c => c.name).join(', ')} - - - Data de entrega: {' '} - {capitalizeFirstLetter( - dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]') - )} + Data de entrega:{' '} + {capitalizeFirstLetter(dayjs(dueDate).format('dddd, DD/MM'))} + {deliveredByStudents >= 0 && total && ( - - Entregues: {' '} - {`${deliveredByStudents} de ${total}`} + + + {`${reviewed}`} corrigidas. )} {reviewed >= 0 && total && ( - - Corrigidas: {`${reviewed} de ${total}`} - - )} - {!isAssignmentToReview && ( - - Valor: - {scores.map(s => s.value).join(', ')} pts + + {' '} + {`${total - reviewed}`} pendentes. )} @@ -121,28 +124,34 @@ function AssignmentCard({ > {classrooms.map(c => c.name).join(', ')} - + - Data de entrega: - {capitalizeFirstLetter( - dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]') - )} + Data de entrega:{' '} + {capitalizeFirstLetter(dayjs(dueDate).format('dddd, DD/MM'))} + {deliveredByStudents >= 0 && total && ( - - Entregues: {' '} - {`${deliveredByStudents} de ${total}`} + + + {`${reviewed}`} corrigidas. )} {reviewed >= 0 && total && ( - - Corrigidas: {`${reviewed} de ${total}`} - - )} - {!isAssignmentToReview && ( - - Valor: - {scores.map(s => s.value).join(', ')} pts + + {' '} + {`${total - reviewed}`} pendentes. )} diff --git a/src/components/professor/AssignmentCard/styles.js b/src/components/professor/AssignmentCard/styles.js new file mode 100644 index 0000000..1f513a6 --- /dev/null +++ b/src/components/professor/AssignmentCard/styles.js @@ -0,0 +1,143 @@ +// ========== Desktop ========== +const desktopCardContainer = classrooms => ({ + position: 'relative', + width: '35em', + borderLeft: `5px solid ${classrooms[0].color}`, +}); + +const desktopClassroomLinesIndicator = classroom => ({ + position: 'absolute', + height: '100%', + borderLeft: `5px solid ${classroom.color}`, + left: 0, +}); + +const desktopCardActionArea = { + display: 'flex', + flexDirection: 'row', + justifyContent: 'start', +}; + +const desktopCardContent = { + width: '100%', +}; + +const desktopTypographyTitle = { + overflow: 'hidden', + textOverflow: 'ellipsis', + display: '-webkit-box', + WebkitLineClamp: 2, + WebkitBoxOrient: 'vertical', + fontSize: '17px', +}; + +const desktopStackClassroomNames = { + width: '100%', +}; + +const desktopTypographyClassroomNames = { + fontStyle: 'italic', + fontWeight: 'bold', +}; + +const desktopDividerMiddle = { + marginTop: '10px', +}; + +const desktopTypographyDueDate = { + marginTop: '5px', + display: 'flex', + alignItems: 'center', + fontStyle: 'italic', +}; + +const desktop = { + cardContainer: desktopCardContainer, + classroomLinesIndicator: desktopClassroomLinesIndicator, + cardActionArea: desktopCardActionArea, + cardContent: desktopCardContent, + typographyTitle: desktopTypographyTitle, + stackClassroomNames: desktopStackClassroomNames, + typographyClassroomNames: desktopTypographyClassroomNames, + dividerMiddle: desktopDividerMiddle, + typographyDueDate: desktopTypographyDueDate, +}; + +// ========== Mobile ========== +const mobileCardContainer = classrooms => ({ + width: '100%', + borderTop: `5px solid ${classrooms[0].color}`, +}); + +const mobileClassroomLinesIndicator = classroom => ({ + position: 'absolute', + width: '100%', + borderTop: `5px solid ${classroom.color}`, + top: 0, +}); + +const mobileCardActionArea = { + position: 'relative', + display: 'flex', + flexDirection: 'column', +}; + +const mobileCardContent = { + width: '100%', +}; + +const mobileTypographyTitle = { + overflow: 'hidden', + textOverflow: 'ellipsis', + display: '-webkit-box', + WebkitLineClamp: 2, + WebkitBoxOrient: 'vertical', + fontSize: '17px', +}; + +const mobileStackClassroomNames = { + width: '100%', +}; + +const mobileTypographyClassroomNames = { + fontWeight: 'bold', +}; + +const mobileDividerMiddle = { + marginTop: '10px', +}; + +const mobileTypographyDueDate = { + marginTop: '5px', + display: 'flex', + alignItems: 'center', + fontStyle: 'italic', +}; + +const mobile = { + cardContainer: mobileCardContainer, + classroomLinesIndicator: mobileClassroomLinesIndicator, + cardActionArea: mobileCardActionArea, + cardContent: mobileCardContent, + typographyTitle: mobileTypographyTitle, + stackClassroomNames: mobileStackClassroomNames, + typographyClassroomNames: mobileTypographyClassroomNames, + dividerMiddle: mobileDividerMiddle, + typographyDueDate: mobileTypographyDueDate, +}; + +// ========== Unset ========== +const unset = { + cardContainer: null, + classroomLinesIndicator: null, + cardActionArea: null, + cardContent: null, + typographyTitle: null, + stackClassroomNames: null, + typographyClassroomNames: null, + dividerMiddle: null, + typographyDueDate: null, +}; + +const styles = { desktop, mobile, unset }; +export default styles; diff --git a/src/components/student/AssignmentCard/index.js b/src/components/student/AssignmentCard/index.js new file mode 100644 index 0000000..a78c155 --- /dev/null +++ b/src/components/student/AssignmentCard/index.js @@ -0,0 +1,151 @@ +import { + Card, + CardContent, + Typography, + CardActionArea, + Stack, + Tooltip, + Divider, +} from '@mui/material'; +import dayjs from 'dayjs'; + +import { capitalizeFirstLetter } from '../../../utils/capitalizeFirstLetter'; + +import styles from './styles'; +import { Assessment, Today } from '@mui/icons-material'; + +function AssignmentCard({ + title, + classrooms, + dueDate, + scores, + layoutType, + onClick, +}) { + const { + cardContainer, + classroomLinesIndicator, + cardActionArea, + cardContent, + typographyTitle, + stackClassroomNames, + typographyClassroomNames, + dividerMiddle, + typographyDueDate, + } = styles[layoutType]; + + if (layoutType === 'desktop') { + return ( + + {classrooms.length > 1 && + classrooms + .filter((_, i) => i > 0) + .map(c =>
)} + onClick()} sx={cardActionArea}> + + + + {title} + + + + + {classrooms.map(c => c.name).join(', ')} + + + + + + {capitalizeFirstLetter( + dayjs(dueDate).format('dddd, DD/MM, HH:mm[h]') + )} + + + + {scores.map(s => s.value).join(', ')} pontos + + + + + + ); + } else if (layoutType === 'mobile') { + return ( + + onClick()} sx={cardActionArea}> + {classrooms.length > 1 && + classrooms + .filter((_, i) => i > 0) + .map(c =>
)} + + + + {title} + + + + + {classrooms.map(c => c.name).join(', ')} + + + + + {capitalizeFirstLetter( + dayjs(dueDate).format('dddd, DD/MM, HH:mm[h]') + )} + + + + {scores.map(s => s.value).join(', ')} pontos + + + + + + ); + } +} + +export default AssignmentCard; diff --git a/src/components/AssignmentCard/styles.js b/src/components/student/AssignmentCard/styles.js similarity index 100% rename from src/components/AssignmentCard/styles.js rename to src/components/student/AssignmentCard/styles.js diff --git a/src/screens/professor/Classroom/AssignmentsTab/index.js b/src/screens/professor/Classroom/AssignmentsTab/index.js index 4ce16bf..33ee9fa 100644 --- a/src/screens/professor/Classroom/AssignmentsTab/index.js +++ b/src/screens/professor/Classroom/AssignmentsTab/index.js @@ -109,7 +109,11 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) { return ( onClickAssignmentCard(assignment.id)} /> @@ -170,11 +171,9 @@ function View({ title={assignment.title} classrooms={assignment.classrooms} dueDate={assignment.dueDate} - scores={assignment.scores} layoutType={layoutType} deliveredByStudents={assignment.deliveredByStudents} reviewed={assignment.reviewed} - isAssignmentToReview={assignment.status !== null} total={assignment.total} onClick={() => onClickAssignmentCard(assignment.id)} /> diff --git a/src/screens/student/Home/View.js b/src/screens/student/Home/View.js index 27b0f78..a87e120 100644 --- a/src/screens/student/Home/View.js +++ b/src/screens/student/Home/View.js @@ -1,10 +1,11 @@ import { Container, Grid, Skeleton, Stack } from '@mui/material'; import ClassCard from '../../../components/ClassCard'; -import AssignmentCard from '../../../components/AssignmentCard'; +import AssignmentCard from '../../../components/student/AssignmentCard'; + +import { createArrayFrom1ToN } from '../../../utils/createArrayFrom1ToN'; import styles from './styles'; -import { createArrayFrom1ToN } from '../../../utils/createArrayFrom1ToN'; function View({ layoutType,