added button to save submission as csv, it works!

Author: dvcabiya

devU-client/src/assets/global.scss

@@ -23,9 +23,7 @@
     text-align: center;
   }
 
-  span {
-    color: var(--text-color)
-  }
+  
 
   hr {
     border: 1px solid #ddd;
@@ -45,6 +43,7 @@
     font-weight: 700;
     font-size: 16px;
     transition: all 0.2s ease;
+    font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
 
     &:disabled {
       opacity: 60%;

devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx

@@ -76,6 +76,7 @@ const AssignmentUpdatePage = () => {
     assignmentId: currentAssignmentId,
     problemName: '',
     maxScore: -1,
+    metadata: {}
   })
 
 

devU-client/src/components/pages/submissions/submissionDetailPage.tsx

@@ -7,6 +7,7 @@ import RequestService from 'services/request.service'
 import { Assignment, AssignmentProblem, Submission, SubmissionProblemScore, SubmissionScore } from 'devu-shared-modules'
 import { useParams, useHistory, Link } from 'react-router-dom'
 import styles from './submissionDetailPage.scss'
+import {createSubmissionCsv} from "utils/download.utils"
 import ManualGradeModal from './manualGradeModal'
 
 const SubmissionDetailPage = () => {
@@ -111,6 +112,11 @@ const SubmissionDetailPage = () => {
                         history.push(`/course/${courseId}/assignment/${assignmentId}/submission/${submissionId}/fileView`)
                     }}>View Source</button>
                     <button className="btnSecondary">Download Submission</button>
+                    {submissionScore && <a 
+                    className="btnSecondary"
+                    style={{textDecoration: 'none', textAlign: 'center'}}
+                    download={`${assignment?.name.toLowerCase().replace(" ","")}_submission.csv`}
+                    href={createSubmissionCsv(submissionScore,submissionProblemScores,assignmentProblems)}>Download as CSV</a>}
                     {role.isInstructor() && (
                         <button className="btnPrimary" onClick={handleClick}>Manually Grade</button>
                     )}

devU-client/src/utils/download.utils.ts

@@ -1,15 +1,14 @@
-import { Assignment, User, AssignmentScore } from 'devu-shared-modules';
+import { Assignment, User, AssignmentScore, SubmissionScore, SubmissionProblemScore, AssignmentProblem } from 'devu-shared-modules';
+
 export function createGradebookCsv(assignments: Assignment[], users: User[], assignmentScores: AssignmentScore[], maxScores: Map<number, number>){
     const toCSV = []
     let header = "externalId,email,preferredName"
     assignments.forEach((assignment) => {header+=`,${assignment.name}`})
     toCSV.push(header + '\n')
-    //console.log(header)
 
 
     users.forEach((user) => {
         let csvString = `${user.externalId},${user.email},${user.preferredName ?? "N/A"}`
-        //console.log(csvString)
         assignments.forEach((assignment) => {
             const assignmentScore = assignmentScores.find(as => as.assignmentId === assignment?.id && as.userId == user.id) 
             if (assignment?.id && assignmentScore){ // Submission defined, so...
@@ -24,6 +23,25 @@ export function createGradebookCsv(assignments: Assignment[], users: User[], ass
         })
         toCSV.push(csvString + '\n')
     })
+    let final = 'data:text/csv;charset=utf-8,'
+    toCSV.forEach((row)=>{final += row})
+    return encodeURI(final)
+}
+
+export function createSubmissionCsv(submissionScore: SubmissionScore, submissionProblemScores: SubmissionProblemScore[], assignmentProblems: AssignmentProblem[], ){
+    const toCSV = []
+    let header = "Total_Score"
+    let scores = `${submissionScore.score}`
+    assignmentProblems.forEach((ap) => {
+        header += "," + ap.problemName
+        const correspondingScore = submissionProblemScores.find(
+            (scoreItem) => scoreItem.assignmentProblemId === ap.id
+        );
+        scores += "," + (correspondingScore ? correspondingScore.score : "N/A")
+    })
+    toCSV.push(header + '\n')
+    toCSV.push(scores + '\n')
+    
     let final = 'data:text/csv;charset=utf-8,'
     toCSV.forEach((row)=>{final += row})
     return encodeURI(final)