diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/AssignmentCard/index.js | 47 | ||||
-rw-r--r-- | src/components/ClassCard/index.js | 75 | ||||
-rw-r--r-- | src/components/FormDialog/index.js | 33 | ||||
-rw-r--r-- | src/components/PublishAnnouncementCard/index.js | 64 | ||||
-rw-r--r-- | src/components/PublishAnnouncementCard/styles.js | 47 |
5 files changed, 226 insertions, 40 deletions
diff --git a/src/components/AssignmentCard/index.js b/src/components/AssignmentCard/index.js index e893b3d..fc5758b 100644 --- a/src/components/AssignmentCard/index.js +++ b/src/components/AssignmentCard/index.js @@ -18,6 +18,10 @@ function AssignmentCard({ classrooms, dueDate, scores, + deliveredByStudents, + reviewed, + total, + isAssignmentToReview, layoutType, onClick, }) { @@ -61,16 +65,30 @@ function AssignmentCard({ {classrooms.map(c => c.name).join(', ')} </Typography> <Divider sx={dividerMiddle} /> + <Typography sx={typographyDueDate} variant="p" component="div"> <strong>Data de entrega: </strong>{' '} {capitalizeFirstLetter( dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]') )} </Typography> - <Typography variant="p" component="div"> - <strong>Valor: </strong> - {scores.map(s => s.value).join(', ')} pts - </Typography> + {deliveredByStudents >= 0 && total && ( + <Typography variant="p" component="div"> + <strong>Entregues: </strong>{' '} + {`${deliveredByStudents} de ${total}`} + </Typography> + )} + {reviewed >= 0 && total && ( + <Typography variant="p" component="div"> + <strong>Corrigidas: </strong> {`${reviewed} de ${total}`} + </Typography> + )} + {!isAssignmentToReview && ( + <Typography variant="p" component="div"> + <strong>Valor: </strong> + {scores.map(s => s.value).join(', ')} pts + </Typography> + )} </Stack> </CardContent> </CardActionArea> @@ -110,10 +128,23 @@ function AssignmentCard({ dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]') )} </Typography> - <Typography variant="p" component="div"> - <strong>Valor: </strong> - {scores.map(s => s.value).join(', ')} pts - </Typography> + {deliveredByStudents >= 0 && total && ( + <Typography variant="p" component="div"> + <strong>Entregues: </strong>{' '} + {`${deliveredByStudents} de ${total}`} + </Typography> + )} + {reviewed >= 0 && total && ( + <Typography variant="p" component="div"> + <strong>Corrigidas: </strong> {`${reviewed} de ${total}`} + </Typography> + )} + {!isAssignmentToReview && ( + <Typography variant="p" component="div"> + <strong>Valor: </strong> + {scores.map(s => s.value).join(', ')} pts + </Typography> + )} </Stack> </CardContent> </CardActionArea> diff --git a/src/components/ClassCard/index.js b/src/components/ClassCard/index.js index 79bf495..6c78254 100644 --- a/src/components/ClassCard/index.js +++ b/src/components/ClassCard/index.js @@ -17,6 +17,7 @@ function ClassCard({ title, color, teachers, + course, layoutType, onClick, }) { @@ -45,23 +46,30 @@ function ClassCard({ > {title} </Typography> - <Stack alignItems="center" direction="row" spacing={1}> - <AvatarGroup total={teachers.length}> - {teachers.map(t => ( - <Avatar - key={t.name} - alt={t.name} - src={t.avatar} - sx={avatar} - /> - ))} - </AvatarGroup> - <Tooltip title={teachers.map(t => t.name).join(', ')}> - <Typography sx={tooltip} variant="body3" color="text.secondary"> - {teachers.map(t => t.name).join(', ')} - </Typography> - </Tooltip> - </Stack> + {teachers && ( + <Stack alignItems="center" direction="row" spacing={1}> + <AvatarGroup total={teachers.length}> + {teachers.map(t => ( + <Avatar + key={t.name} + alt={t.name} + src={t.avatar} + sx={avatar} + /> + ))} + </AvatarGroup> + <Tooltip title={teachers.map(t => t.name).join(', ')}> + <Typography + sx={tooltip} + variant="body3" + color="text.secondary" + > + {teachers.map(t => t.name).join(', ')} + </Typography> + </Tooltip> + </Stack> + )} + {course && <Typography variant="body2">{course}</Typography>} </CardContent> </CardActionArea> </Card> @@ -82,21 +90,24 @@ function ClassCard({ > {title} </Typography> - <Stack alignItems="center" direction="row" spacing={1}> - <AvatarGroup total={teachers.length}> - {teachers.map(t => ( - <Avatar - key={t.name} - alt={t.name} - src={t.avatar} - sx={avatar} - /> - ))} - </AvatarGroup> - <Typography sx={tooltip} variant="body2" color="text.secondary"> - {teachers.map(t => t.name).join(', ')} - </Typography> - </Stack> + {teachers && ( + <Stack alignItems="center" direction="row" spacing={1}> + <AvatarGroup total={teachers.length}> + {teachers.map(t => ( + <Avatar + key={t.name} + alt={t.name} + src={t.avatar} + sx={avatar} + /> + ))} + </AvatarGroup> + <Typography sx={tooltip} variant="body2" color="text.secondary"> + {teachers.map(t => t.name).join(', ')} + </Typography> + </Stack> + )} + {course && <Typography variant="body2">{course}</Typography>} </CardContent> </CardActionArea> </Card> diff --git a/src/components/FormDialog/index.js b/src/components/FormDialog/index.js new file mode 100644 index 0000000..0b8ca30 --- /dev/null +++ b/src/components/FormDialog/index.js @@ -0,0 +1,33 @@ +import { + Button, + Dialog, + DialogActions, + DialogContent, + DialogContentText, + DialogTitle, +} from '@mui/material'; + +function FormDialog({ + isOpened, + title, + contentText, + inputs, + onDismiss, + onSave, +}) { + return ( + <Dialog open={isOpened} onClose={onDismiss}> + <DialogTitle>{title}</DialogTitle> + <DialogContent> + <DialogContentText>{contentText}</DialogContentText> + {[...inputs]} + </DialogContent> + <DialogActions> + <Button onClick={onDismiss}>Cancelar</Button> + <Button onClick={onSave}>Salvar</Button> + </DialogActions> + </Dialog> + ); +} + +export default FormDialog; diff --git a/src/components/PublishAnnouncementCard/index.js b/src/components/PublishAnnouncementCard/index.js new file mode 100644 index 0000000..67501b2 --- /dev/null +++ b/src/components/PublishAnnouncementCard/index.js @@ -0,0 +1,64 @@ +import { + Avatar, + Button, + Card, + Stack, + TextField, + Typography, +} from '@mui/material'; +import { useState } from 'react'; +import styles from './styles'; + +function PublishAnnouncementCard({ layoutType, user, value, onChange }) { + const [isComposing, setIsComposing] = useState(false); + const { card, publishAnnouncement } = styles[layoutType]; + + return ( + <Card sx={card} elevation={4} variant="elevation"> + {isComposing ? ( + <Stack + sx={publishAnnouncement} + alignItems="end" + direction="column" + spacing={2} + > + <TextField + value={value} + onChange={onChange} + sx={{ width: '100%' }} + id="outlined-multiline-static" + label="Escreva um comunicado para sua turma" + autoFocus + multiline + minRows={4} + /> + + <Stack direction="row" spacing={4}> + <Button onClick={() => setIsComposing(false)} variant="text"> + Cancelar + </Button> + + <Button onClick={() => console.log('clicked')} variant="contained"> + Postar + </Button> + </Stack> + </Stack> + ) : ( + <Stack + sx={publishAnnouncement} + alignItems="center" + direction="row" + spacing={2} + onClick={() => setIsComposing(true)} + > + <Avatar alt={user.firstName} src={user.avatar} /> + <Typography id="outlined-multiline-static" sx={{ width: '100%' }}> + Escreva um comunicado para sua turma + </Typography> + </Stack> + )} + </Card> + ); +} + +export default PublishAnnouncementCard; diff --git a/src/components/PublishAnnouncementCard/styles.js b/src/components/PublishAnnouncementCard/styles.js new file mode 100644 index 0000000..4bc58fd --- /dev/null +++ b/src/components/PublishAnnouncementCard/styles.js @@ -0,0 +1,47 @@ +// ========== Desktop ========== +const desktopCard = { + width: '100%', + padding: '20px', +}; + +const desktopPublishAnnouncement = { + cursor: 'pointer', + ':hover': { + color: '#32A041', + }, +}; + +const desktop = { + publishAnnouncement: desktopPublishAnnouncement, + card: desktopCard, +}; + +// ========== Mobile ========== +const mobilePublishAnnouncement = { + cursor: 'pointer', + padding: '10px', + width: '100%', + ':hover': { + color: '#32A041', + }, +}; + +const mobileCard = { + width: '100%', + padding: '10px ', +}; + +const mobile = { + publishAnnouncement: mobilePublishAnnouncement, + card: mobileCard, +}; + +// ========== Unset ========== + +const unset = { + publishAnnouncement: null, + card: null, +}; + +const styles = { desktop, mobile, unset }; +export default styles; |