Merge pull request #220 from Dudrie/add-downloadable-exam-results

Add downloadable exam results

client/src/components/Placeholder.tsx

@@ -1,7 +1,7 @@
 import { Typography } from '@material-ui/core';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import React from 'react';
-import LoadingSpinner from './LoadingSpinner';
+import LoadingSpinner from './loading/LoadingSpinner';
 import clsx from 'clsx';
 
 const useStyles = makeStyles((theme: Theme) =>

client/src/components/attendance-controls/components/AttendanceNotePopper.tsx

@@ -18,7 +18,7 @@ import {
 import React, { useState, useRef } from 'react';
 import { FormikSubmitCallback } from '../../../types';
 import FormikTextField from '../../forms/components/FormikTextField';
-import SubmitButton from '../../forms/components/SubmitButton';
+import SubmitButton from '../../loading/SubmitButton';
 import clsx from 'clsx';
 
 const useStyles = makeStyles(theme =>

client/src/components/forms/ChangePasswordForm.tsx

@@ -3,7 +3,7 @@ import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import { Formik } from 'formik';
 import { Paper, Typography, Button } from '@material-ui/core';
 import FormikTextField from './components/FormikTextField';
-import SubmitButton from './components/SubmitButton';
+import SubmitButton from '../loading/SubmitButton';
 import * as Yup from 'yup';
 import { FormikSubmitCallback } from '../../types';
 import clsx from 'clsx';

client/src/components/forms/FormikBaseForm.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { Formik, FormikConfig } from 'formik';
 import React from 'react';
 import FormikDebugDisplay from './components/FormikDebugDisplay';
-import SubmitButton from './components/SubmitButton';
+import SubmitButton from '../loading/SubmitButton';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

client/src/components/forms/LoginForm.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import * as Yup from 'yup';
 import { FormikSubmitCallback } from '../../types';
 import FormikTextField from './components/FormikTextField';
-import SubmitButton from './components/SubmitButton';
+import SubmitButton from '../loading/SubmitButton';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

client/src/components/loading/LoadingModal.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import {
+  Modal,
+  CircularProgress,
+  Typography,
+  ModalProps,
+  CircularProgressProps,
+} from '@material-ui/core';
+import clsx from 'clsx';
+
+const useStyles = makeStyles(theme =>
+  createStyles({
+    spinner: {
+      marginRight: theme.spacing(1),
+    },
+    modal: {
+      color: theme.palette.common.white,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    modalContent: {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      outline: 'none',
+    },
+    modalText: {
+      marginTop: theme.spacing(2),
+    },
+  })
+);
+
+interface Props extends Omit<ModalProps, 'children'> {
+  modalText: string;
+  open: boolean;
+  CircularProgressProps?: CircularProgressProps;
+}
+
+function LoadingModal({
+  modalText,
+  CircularProgressProps,
+  className,
+  ...props
+}: Props): JSX.Element {
+  const classes = useStyles();
+
+  return (
+    <Modal {...props} className={clsx(className, classes.modal)}>
+      <div className={classes.modalContent} tabIndex={-1}>
+        <CircularProgress
+          size={56}
+          color='inherit'
+          className={clsx(
+            CircularProgressProps && CircularProgressProps.className,
+            classes.spinner
+          )}
+        />
+
+        <Typography variant='h4' className={classes.modalText}>
+          {modalText}
+        </Typography>
+      </div>
+    </Modal>
+  );
+}
+
+export default LoadingModal;

client/src/components/forms/components/SubmitButton.tsx → client/src/components/loading/SubmitButton.tsx

@@ -1,9 +1,10 @@
-import { CircularProgress, Modal, Tooltip, Typography } from '@material-ui/core';
+import { CircularProgress, Tooltip } from '@material-ui/core';
 import Button, { ButtonProps } from '@material-ui/core/Button';
 import { CircularProgressProps } from '@material-ui/core/CircularProgress';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import clsx from 'clsx';
 import React from 'react';
+import LoadingModal from './LoadingModal';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -72,22 +73,13 @@ function SubmitButton({
         ButtomComp
       )}
 
-      <Modal open={!!modalText && isSubmitting} className={classes.modal}>
-        <div className={classes.modalContent} tabIndex={-1}>
-          <CircularProgress
-            size={56}
-            color='inherit'
-            className={clsx(
-              CircularProgressProps && CircularProgressProps.className,
-              classes.spinner
-            )}
-          />
-
-          <Typography variant='h4' className={classes.modalText}>
-            {modalText}
-          </Typography>
-        </div>
-      </Modal>
+      {modalText && (
+        <LoadingModal
+          modalText={modalText}
+          open={isSubmitting}
+          CircularProgressProps={CircularProgressProps}
+        />
+      )}
     </>
   );
 }

client/src/hooks/fetching/Files.ts

@@ -30,6 +30,21 @@ export async function getScheinStatusPDF(): Promise<Blob> {
   return Promise.reject(`Wrong response code (${response.status})`);
 }
 
+export async function getScheinexamResultPDF(examId: string): Promise<Blob> {
+  const response = await axios.get(`/pdf/scheinexam/${examId}/result`, {
+    responseType: 'arraybuffer',
+    headers: {
+      Accept: 'application/pdf',
+    },
+  });
+
+  if (response.status === 200) {
+    return new Blob([response.data], { type: 'application/pdf' });
+  }
+
+  return Promise.reject(`Wrong response code (${response.status})`);
+}
+
 export async function getCredentialsPDF(): Promise<Blob> {
   const response = await axios.get('/pdf/credentials/', {
     responseType: 'arraybuffer',

client/src/view/AppBar.tsx

@@ -21,7 +21,7 @@ import React, { useState } from 'react';
 import { matchPath, useLocation } from 'react-router';
 import { LoggedInUserTutorial } from 'shared/dist/model/Tutorial';
 import { useChangeTheme } from '../components/ContextWrapper';
-import SubmitButton from '../components/forms/components/SubmitButton';
+import SubmitButton from '../components/loading/SubmitButton';
 import { getTutorialXLSX } from '../hooks/fetching/Files';
 import { useLogin } from '../hooks/LoginService';
 import { getDisplayStringForTutorial, saveBlob } from '../util/helperFunctions';

client/src/view/attendance/AttendanceManager.tsx

@@ -9,8 +9,8 @@ import { Student, StudentStatus } from 'shared/dist/model/Student';
 import { LoggedInUser, TutorInfo } from 'shared/dist/model/User';
 import CustomSelect from '../../components/CustomSelect';
 import DateOfTutorialSelection from '../../components/DateOfTutorialSelection';
-import SubmitButton from '../../components/forms/components/SubmitButton';
-import LoadingSpinner from '../../components/LoadingSpinner';
+import SubmitButton from '../../components/loading/SubmitButton';
+import LoadingSpinner from '../../components/loading/LoadingSpinner';
 import TableWithPadding from '../../components/TableWithPadding';
 import { useAxios } from '../../hooks/FetchingService';
 import { useLogin } from '../../hooks/LoginService';

client/src/view/attendance/AttendanceView.tsx

@@ -5,7 +5,7 @@ import { RouteComponentProps, withRouter } from 'react-router';
 import { useAxios } from '../../hooks/FetchingService';
 import { TutorialWithFetchedStudents } from '../../typings/types';
 import AttendanceManager from './AttendanceManager';
-import LoadingSpinner from '../../components/LoadingSpinner';
+import LoadingSpinner from '../../components/loading/LoadingSpinner';
 
 const useStyles = makeStyles(() =>
   createStyles({

client/src/view/dashboard/Dashboard.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Role } from 'shared/dist/model/Role';
 import { Tutorial } from 'shared/dist/model/Tutorial';
 import { LoggedInUser } from 'shared/dist/model/User';
-import LoadingSpinner from '../../components/LoadingSpinner';
+import LoadingSpinner from '../../components/loading/LoadingSpinner';
 import { getTutorial } from '../../hooks/fetching/Tutorial';
 import { useAxios } from '../../hooks/FetchingService';
 import { useLogin } from '../../hooks/LoginService';

client/src/view/points-scheinexam/enter-form/components/ScheinexamPointsForm.tsx

@@ -18,7 +18,7 @@ import {
   getPointsOfAllExercises,
   convertExercisePointInfoToString,
 } from 'shared/dist/model/Points';
-import SubmitButton from '../../../../components/forms/components/SubmitButton';
+import SubmitButton from '../../../../components/loading/SubmitButton';
 import { useDialog } from '../../../../hooks/DialogService';
 import FormikDebugDisplay from '../../../../components/forms/components/FormikDebugDisplay';
 import { useKeyboardShortcut } from '../../../../hooks/useKeyboardShortcut';

client/src/view/points-sheet/enter-form/components/EnterPointsForm.tsx

@@ -10,7 +10,7 @@ import {
 } from 'shared/dist/model/Points';
 import { Exercise, Sheet } from 'shared/dist/model/Sheet';
 import FormikDebugDisplay from '../../../../components/forms/components/FormikDebugDisplay';
-import SubmitButton from '../../../../components/forms/components/SubmitButton';
+import SubmitButton from '../../../../components/loading/SubmitButton';
 import { useDialog } from '../../../../hooks/DialogService';
 import { HasPoints } from '../../../../typings/types';
 import { getPointsFromState as getAchievedPointsFromState } from '../EnterPoints.helpers';

client/src/view/points-sheet/overview/PointsOverview.tsx

@@ -5,7 +5,7 @@ import { useParams, useHistory } from 'react-router';
 import { Sheet } from 'shared/dist/model/Sheet';
 import { Team } from 'shared/dist/model/Team';
 import CustomSelect from '../../../components/CustomSelect';
-import SubmitButton from '../../../components/forms/components/SubmitButton';
+import SubmitButton from '../../../components/loading/SubmitButton';
 import { getAllSheets } from '../../../hooks/fetching/Sheet';
 import { getTeamsOfTutorial } from '../../../hooks/fetching/Team';
 import { useErrorSnackbar } from '../../../hooks/useErrorSnackbar';

client/src/view/scheincriteriamanagement/ScheinCriteriaManagement.tsx

@@ -9,7 +9,7 @@ import ScheinCriteriaForm, {
   ScheinCriteriaFormCallback,
 } from '../../components/forms/ScheinCriteriaForm';
 import { FormDataResponse } from '../../components/generatedForm/types/FieldData';
-import LoadingSpinner from '../../components/LoadingSpinner';
+import LoadingSpinner from '../../components/loading/LoadingSpinner';
 import TableWithForm from '../../components/TableWithForm';
 import { useDialog } from '../../hooks/DialogService';
 import { useAxios } from '../../hooks/FetchingService';

client/src/view/scheinexam-management/ScheinExamManagement.tsx

@@ -7,14 +7,21 @@ import ScheinExamForm, {
   ScheinExamFormState,
   ScheinExamFormSubmitCallback,
 } from '../../components/forms/ScheinExamForm';
-import LoadingSpinner from '../../components/LoadingSpinner';
+import { convertFormExercisesToDTOs } from '../../components/forms/SheetForm';
+import LoadingModal from '../../components/loading/LoadingModal';
+import LoadingSpinner from '../../components/loading/LoadingSpinner';
 import TableWithForm from '../../components/TableWithForm';
 import { useDialog } from '../../hooks/DialogService';
-import { useAxios } from '../../hooks/FetchingService';
-import { getDisplayStringOfScheinExam } from '../../util/helperFunctions';
-import ScheinExamRow from './components/ScheinExamRow';
+import { getScheinexamResultPDF } from '../../hooks/fetching/Files';
+import {
+  createScheinExam,
+  deleteScheinExam,
+  editScheinExam,
+  getAllScheinExams,
+} from '../../hooks/fetching/ScheinExam';
+import { getDisplayStringOfScheinExam, saveBlob } from '../../util/helperFunctions';
 import { getDuplicateExerciseName } from '../points-sheet/util/helper';
-import { convertFormExercisesToDTOs } from '../../components/forms/SheetForm';
+import ScheinExamRow from './components/ScheinExamRow';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -44,17 +51,17 @@ function ScheinExamManagement({ enqueueSnackbar }: Props): JSX.Element {
   const classes = useStyles();
 
   const [isLoading, setIsLoading] = useState(false);
+  const [isGeneratingResults, setGeneratingResults] = useState(false);
   const [exams, setExams] = useState<ScheinExam[]>([]);
   const dialog = useDialog();
-  const { getAllScheinExams, createScheinExam, editScheinExam, deleteScheinExam } = useAxios();
 
   useEffect(() => {
     setIsLoading(true);
     getAllScheinExams().then(exams => {
       setExams(exams);
       setIsLoading(false);
     });
-  }, [getAllScheinExams]);
+  }, []);
 
   const handleSubmit: ScheinExamFormSubmitCallback = async (
     values,
@@ -87,6 +94,15 @@ function ScheinExamManagement({ enqueueSnackbar }: Props): JSX.Element {
     }
   };
 
+  const handleGenerateResultPDF: (exam: ScheinExam) => void = async exam => {
+    setGeneratingResults(true);
+
+    const blob = await getScheinexamResultPDF(exam.id);
+    saveBlob(blob, `Scheinklausur_${exam.scheinExamNo}_Ergebnis`);
+
+    setGeneratingResults(false);
+  };
+
   const editExam: (exam: ScheinExam) => ScheinExamFormSubmitCallback = exam => async (
     values,
     { setSubmitting }
@@ -123,6 +139,9 @@ function ScheinExamManagement({ enqueueSnackbar }: Props): JSX.Element {
       content: (
         <ScheinExamForm exam={exam} onSubmit={editExam(exam)} onCancelClicked={dialog.hide} />
       ),
+      DialogProps: {
+        maxWidth: 'lg',
+      },
     });
   }
 
@@ -153,20 +172,25 @@ function ScheinExamManagement({ enqueueSnackbar }: Props): JSX.Element {
       {isLoading ? (
         <LoadingSpinner />
       ) : (
-        <TableWithForm
-          title='Neue Scheinklausur erstellen'
-          form={<ScheinExamForm exams={exams} onSubmit={handleSubmit} />}
-          items={exams}
-          createRowFromItem={exam => (
-            <ScheinExamRow
-              key={exam.id}
-              exam={exam}
-              onEditExamClicked={handleEditExam}
-              onDeleteExamClicked={handleDeleteExam}
-            />
-          )}
-          placeholder='Keine Scheinklausuren vorhanden.'
-        />
+        <>
+          <TableWithForm
+            title='Neue Scheinklausur erstellen'
+            form={<ScheinExamForm exams={exams} onSubmit={handleSubmit} />}
+            items={exams}
+            createRowFromItem={exam => (
+              <ScheinExamRow
+                key={exam.id}
+                exam={exam}
+                onEditExamClicked={handleEditExam}
+                onHandleGenerateResultPDFClicked={handleGenerateResultPDF}
+                onDeleteExamClicked={handleDeleteExam}
+              />
+            )}
+            placeholder='Keine Scheinklausuren vorhanden.'
+          />
+
+          <LoadingModal modalText='Erstelle Ergebnisliste...' open={isGeneratingResults} />
+        </>
       )}
     </div>
   );