Merge pull request #20 from leomurca/feature/professor_classroomHEADmain

Feature/professor classroom

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;