Fixed upload mark button and added it to task mark table component to…

… allow for batch uploading
Kianoosh76 · Aug 18, 2023 · 8299a5c · 8299a5c
1 parent c639e35
commit 8299a5c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 12 deletions.
diff --git a/frontend/src/components/Module/Mark/TaskMarkTable.jsx b/frontend/src/components/Module/Mark/TaskMarkTable.jsx
@@ -19,6 +19,7 @@ import DashboardCard from '../../FlexyMainComponents/base-card/DashboardCard';
 import SaveIcon from '@mui/icons-material/Save';
 import InstructorApi from '../../../api/instructor_api';
 import GetMarkCSVButton from './GetMarkCSVButton';
+import UploadMarksButton from "./UploadMarks/UploadMarksButton";
 
 function extractMarkData(data) {
     return Object.keys(data).map((studentName) => {
@@ -182,6 +183,7 @@ const TaskMarkTable = ({ courseId, taskId }) => {
         <DashboardCard title={`Marks for ${taskId}`}>
             <Stack spacing={2}>
                 <GetMarkCSVButton task={taskId} course_id={courseId} />
+                <UploadMarksButton courseId={courseId} taskId={taskId}/>
                 <TableContainer component={Paper}>
                     <Table sx={{ minWidth: 650 }}>
                         <TableHead>

diff --git a/frontend/src/components/Module/Mark/UploadMarks/UploadMarksButton.jsx b/frontend/src/components/Module/Mark/UploadMarks/UploadMarksButton.jsx
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
-import { Button } from '@mui/material';
-import Grid from '@mui/material';
-import { Form } from 'react-router-dom';
+import {Button, Grid} from '@mui/material';
 import StaffApi from '../../../../api/staff_api';
 import { toast } from 'react-toastify';
+import UploadFileIcon from "@mui/icons-material/UploadFile";
+import {Form} from "formik";
 
-const UploadMarksButton = (courseId, taskId) => {
+const UploadMarksButton = ({ courseId, taskId }) => {
     const [file, setFile] = useState(null);
 
     const handleUpload = (event) => {
@@ -22,14 +22,10 @@ const UploadMarksButton = (courseId, taskId) => {
     };
 
     return (
-        <Grid>
-            <Form>
-                <Button>
-                    Upload Marks
-                    <input hidden accept="*.csv" type="file" onChange={handleUpload} />
-                </Button>
-            </Form>
-        </Grid>
+        <Button component="label" startIcon={<UploadFileIcon />} variant="contained" color="secondary">
+            Upload Marks
+            <input hidden accept="*.csv" type="file" onChange={handleUpload} />
+        </Button>
     );
 };