Add assignments to review card

2022-11-30 21:26:11 -03:00 · 2022-11-30 21:26:11 -03:00 · 2dee315261
commit 2dee315261
parent faf7890efa
6 changed files with 223 additions and 18 deletions
--- 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>
+              {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>
+              {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>
--- a/src/screens/professor/Home/View.js
+++ b/src/screens/professor/Home/View.js
@ -1,11 +1,18 @@
 import { Grid, Skeleton, Stack } from '@mui/material';
 import { Container } from '@mui/system';
+import AssignmentCard from '../../../components/AssignmentCard';
 import ClassCard from '../../../components/ClassCard';
 import { createArrayFrom1ToN } from '../../../utils/createArrayFrom1ToN';
 import styles from './styles';

-function View({ layoutType, classrooms, onClickClassCard }) {
-  const { container, divider, assignmentsStack } = styles[layoutType];
+function View({
+  layoutType,
+  classrooms,
+  assignmentsToReview,
+  onClickClassCard,
+}) {
+  const { container, divider, assignmentsStack, onClickAssignmentCard } =
+    styles[layoutType];

  if (layoutType === 'desktop') {
    return (
@ -51,7 +58,6 @@ function View({ layoutType, classrooms, onClickClassCard }) {
        </Grid>
        <Grid sx={divider} item xs={4}>
          <h1>Atividades para corrigir</h1>
-          <h2>Atribuídas</h2>
          <Stack
            sx={assignmentsStack}
            alignItems="end"
@ -59,8 +65,43 @@ function View({ layoutType, classrooms, onClickClassCard }) {
            direction="row"
            gap="30px"
          >
-            <h3>Atividade 1</h3>
-            <h3>Atividade 2</h3>
+            {assignmentsToReview === null ? (
+              createArrayFrom1ToN(6).map(i => (
+                <Skeleton
+                  key={i}
+                  variant="rectangular"
+                  width="35em"
+                  height={145}
+                />
+              ))
+            ) : assignmentsToReview.length !== 0 ? (
+              assignmentsToReview.map(assignment => (
+                <AssignmentCard
+                  key={assignment.title}
+                  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)}
+                />
+              ))
+            ) : (
+              <Container
+                sx={{
+                  height: '100vh',
+                  display: 'flex',
+                  justifyContent: 'center',
+                }}
+                disableGutters
+              >
+                <p>Nenhuma atividade encontrada!</p>
+              </Container>
+            )}
          </Stack>
        </Grid>
      </Grid>
@ -105,7 +146,6 @@ function View({ layoutType, classrooms, onClickClassCard }) {
          )}
        </Stack>
        <h1 style={divider}>Atividades para corrigir</h1>
-        <h2>Atribuídas</h2>
        <Stack
          sx={assignmentsStack}
          alignItems="center"
@ -114,8 +154,43 @@ function View({ layoutType, classrooms, onClickClassCard }) {
          direction="row"
          gap="30px"
        >
-          <h3>Atividade 1</h3>
-          <h3>Atividade 2</h3>
+          {assignmentsToReview === null ? (
+            createArrayFrom1ToN(6).map(i => (
+              <Skeleton
+                key={i}
+                variant="rectangular"
+                width="35em"
+                height={145}
+              />
+            ))
+          ) : assignmentsToReview.length !== 0 ? (
+            assignmentsToReview.map(assignment => (
+              <AssignmentCard
+                key={assignment.title}
+                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)}
+              />
+            ))
+          ) : (
+            <Container
+              sx={{
+                height: '100vh',
+                display: 'flex',
+                justifyContent: 'center',
+              }}
+              disableGutters
+            >
+              <p>Nenhuma atividade encontrada!</p>
+            </Container>
+          )}
        </Stack>
      </Stack>
    );
--- a/src/screens/professor/Home/index.js
+++ b/src/screens/professor/Home/index.js
@ -11,6 +11,7 @@ function Home() {
  const layoutType = useLayoutType();
  const { userService } = useUser();
  const [classrooms, setClassrooms] = useState(null);
+  const [assignmentsToReview, setAssignmentsToReview] = useState(null);

  useEffect(() => {
    async function getClassrooms() {
@ -20,17 +21,29 @@ function Home() {
    getClassrooms();
  }, [userService, userService.fetchClassrooms]);

+  useEffect(() => {
+    async function getAssignmentsToReview() {
+      const result = await userService.fetchAssignmentsToReview();
+      setAssignmentsToReview(result.data);
+    }
+    getAssignmentsToReview();
+  }, [userService, userService.fetchAllAssignments]);
+
  const onClickClassCard = id => {
    navigate(`/class/${id}`);
  };

-  console.log(classrooms);
+  const onClickAssignmentCard = id => {
+    navigate(`/assignment/${id}`);
+  };

  return (
    <View
      layoutType={layoutType}
      classrooms={classrooms}
+      assignmentsToReview={assignmentsToReview}
      onClickClassCard={onClickClassCard}
+      onClickAssignmentCard={onClickAssignmentCard}
    />
  );
 }
--- a/src/services/professor.js
+++ b/src/services/professor.js
@ -6,4 +6,7 @@ export default class ProfessorService {
  }

  fetchClassrooms = () => ProfessorApi.getClassrooms(this.user.id);
+
+  fetchAssignmentsToReview = () =>
+    ProfessorApi.getAssignmentsToReview(this.user.id);
 }
--- a/src/utils/mocks/api.js
+++ b/src/utils/mocks/api.js
@ -10,6 +10,7 @@ import {
  allUpcomingAssignments,
  allPeople,
  professorClassrooms,
+  assignmentsToReview,
 } from './responses';

 const CommonApi = {
@ -128,6 +129,13 @@ const ProfessorApi = {
        data: professorClassrooms,
      };
    }),
+  getAssignmentsToReview: userId =>
+    sleep(400).then(() => {
+      console.log('Getting assignments to review' + userId);
+      return {
+        data: assignmentsToReview,
+      };
+    }),
 };

 export { StudentApi, ProfessorApi, CommonApi };
--- a/src/utils/mocks/responses.js
+++ b/src/utils/mocks/responses.js
@ -119,7 +119,7 @@ const professorClassrooms = [
    ],
  },
  {
-    id: '123',
+    id: '666',
    name: 'Matemática Discreta',
    abbreviation: 'MD',
    color: '#149b00',
@ -344,6 +344,80 @@ const allClassroomAnnouncements = [
  },
 ];

+const assignmentsToReview = [
+  {
+    id: '0123',
+    type: 'assessment',
+    title:
+      'Prova 1 - Armazenamento de Dados. Python em CD. Armazenamento Analítico',
+    dueDate: '2022-07-01 23:59',
+    scores: [
+      {
+        classroomId: '321',
+        value: 30,
+      },
+    ],
+    classrooms: professorClassrooms.filter(c => c.id === '321'),
+    status: 'OPEN',
+    deliveredByStudents: 10,
+    reviewed: 6,
+    total: 30,
+  },
+  {
+    id: '0128',
+    type: 'assessment',
+    title:
+      'Prova 2 - Visualização de Dados. Matemática e Estatística em CD. Análise de Dados',
+    dueDate: '2022-09-01 23:59',
+    scores: [
+      {
+        classroomId: '321',
+        value: 30,
+      },
+    ],
+    classrooms: professorClassrooms.filter(c => c.id === '321'),
+    status: 'CLOSED',
+    deliveredByStudents: 30,
+    reviewed: 1,
+    total: 30,
+  },
+  {
+    id: '0129',
+    type: 'assessment',
+    title: 'Lista de Exercícios 1 - Caminhos e circuitos',
+    dueDate: '2022-09-01 23:59',
+    scores: [
+      {
+        classroomId: '123',
+        value: 30,
+      },
+    ],
+    classrooms: professorClassrooms.filter(c => c.id === '123'),
+    status: 'CLOSED',
+    deliveredByStudents: 30,
+    reviewed: 0,
+    total: 30,
+  },
+
+  {
+    id: '0130',
+    type: 'assessment',
+    title: 'Lista de Exercícios 2 - Tabela verdade',
+    dueDate: '2022-09-01 23:59',
+    scores: [
+      {
+        classroomId: '666',
+        value: 30,
+      },
+    ],
+    classrooms: professorClassrooms.filter(c => c.id === '666'),
+    status: 'OPEN',
+    deliveredByStudents: 0,
+    reviewed: 0,
+    total: 30,
+  },
+];
+
 const allUpcomingAssignments = [
  {
    id: '5435',
@ -618,4 +692,5 @@ export {
  authFailure,
  allUpcomingAssignments,
  professorClassrooms,
+  assignmentsToReview,
 };