Merge remote-tracking branch 'origin/develop' into develop

Author: RA341

devU-client/src/assets/global.scss

@@ -23,10 +23,10 @@
     text-align: center;
   }
 
-  a{
+  a {
     color: var(--link-blue);
   }
-  
+
   // general button template, extends to 3 types of buttons - primary, secondary, delete
   .btn {
     cursor: pointer;
@@ -42,26 +42,28 @@
     font-style: italic;
     margin-right: auto; // Keeps text locked left after hitting 738px
     margin-bottom: 20px;
-}
+  }
 
   button.btnPrimary {
     @extend .btn;
     background-color: var(--primary);
     border: 3px solid var(--primary);
     color: #fff; // primary button always white text
-    &:hover{
+
+    &:hover {
       background-color: var(--hover-darker);
       border: 3px solid var(--hover-darker);
     }
   }
 
   button.btnSecondary {
     @extend .btn;
-    
+
     background-color: var(--btn-secondary-background);
     color: var(--btn-secondary-text);
     border: 3px solid var(--btn-secondary-border);
-    &:hover{
+
+    &:hover {
       background-color: var(--hover-lighter);
     }
   }
@@ -90,21 +92,25 @@
     width: 100%
   }
 
-  .input-group>input, .input-group>textarea{
+  .input-group>input,
+  .input-group>textarea {
     padding: 10px;
     border-radius: 10px;
     // border: 1px solid var(--input-field-label);
     border: none;
     background-color: var(--input-field-background);
     color: var(--text-color);
-    font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;;
+    font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
+    ;
   }
 
-  .input-group>input::placeholder, .input-group>textarea::placeholder {
+  .input-group>input::placeholder,
+  .input-group>textarea::placeholder {
     color: var(--input-field-label);
   }
 
-  .modal-header, .input-subgroup-2col {
+  .modal-header,
+  .input-subgroup-2col {
     display: flex;
     justify-content: space-between;
     gap: 20px;
@@ -127,6 +133,21 @@
     align-self: center;
   }
 
+  .pageHeader {
+    display: grid;
+    grid-template-columns: 1fr 2fr 1fr;
+    align-items: center;
+  }
+
+  .pageHeader > h1 {
+    grid-column-start: 2;
+  }
+
+  .pageHeaderBtn {
+    @extend .btnPrimary;
+    margin-left: auto;
+  }
+
   body {
     font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
     margin: 0;
@@ -187,7 +208,7 @@
     --grey-lighter: #c5c5c5;
     --grey: #555555;
     --grey-darker: #444444;
-    --grey-darkest: #333333; 
+    --grey-darkest: #333333;
 
     --blue-lighter: #78B7FF;
     --blue: #1F3D7A;
@@ -239,9 +260,7 @@
     --hover-darker: var(--purple-lighterer);
     --hover-lighter: var(--purple);
 
-    --btn-text-color: var(--purple-lighter)
-
-    --btn-delete-border: var(--red-lighter);
+    --btn-text-color: var(--purple-lighter) --btn-delete-border: var(--red-lighter);
     --btn-delete-background: var(--red);
     --btn-delete-text: #FFF;
 
@@ -258,13 +277,14 @@
     color: var(--text-color);
   }
 
-    // General Error Message
+  // General Error Message
   .error-message {
     color: var(--error-text);
     font-size: 0.875rem;
     font-weight: bold;
     margin-top: 5px;
   }
+
   // Validation Error Container
   .error-container {
     background-color: var(--error-background);
@@ -273,6 +293,7 @@
     margin: 10px 0;
     border-radius: 5px;
   }
+
   // Error Page Styling (From `errorPage.scss`)
   .error-page {
     background-color: var(--error-page-background);
@@ -281,14 +302,17 @@
     justify-content: center;
     height: 100vh;
   }
+
   .error-heading {
     font-size: 2rem;
     color: var(--error-text);
   }
+
   .error-description {
     font-size: 1.2rem;
     color: var(--text-color);
   }
+
   // Global Input Field Styles
   .input-field {
     width: 100%;
@@ -304,15 +328,16 @@
       border-color: var(--focus);
       outline: none;
     }
+
     &:disabled {
       background-color: var(--grey-lightest);
       color: var(--grey-lighter);
       cursor: not-allowed;
     }
   }
 
-  
-  
+
+
   // Placeholder Styling
   ::placeholder {
     color: var(--text-color-secondary);
@@ -322,4 +347,4 @@
   *:focus {
     outline-color: var(--focus);
   }
-}
+}

devU-client/src/components/authenticatedRouter.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Route, Switch} from 'react-router-dom'
+import { Route, Switch } from 'react-router-dom'
 
 import AssignmentDetailPage from 'components/pages/assignments/assignmentDetailPage'
 import AssignmentUpdatePage from 'components/pages/forms/assignments/assignmentUpdatePage'
@@ -24,44 +24,46 @@ import UserCoursesListPage from "./pages/listPages/courses/coursesListPage";
 import JoinCoursePage from "./pages/listPages/joinwithcodepage";
 
 import WebhookURLForm from './pages/webhookURLForm'
-// import AddAssignmentModal from 'components/pages/forms/assignments/assignmentFormPage'
 
 const AuthenticatedRouter = () => (
     <Switch>
 
-        <Route exact path='/' component={HomePage}/>
-        <Route exact path='/courses' component={CoursesListPage}/>
-        <Route exact path='/addCoursesForm' component={EditCourseFormPage}/>
+        <Route exact path='/' component={HomePage} />
+        <Route exact path='/courses' component={CoursesListPage} />
+        <Route exact path='/addCoursesForm' component={EditCourseFormPage} />
 
-        <Route exact path='/user/:userId/update' component={UserDetailPage}/>
+        <Route exact path='/user/:userId/update' component={UserDetailPage} />
 
-        <Route exact path='/course/:courseId' component={CourseDetailPage}/>
-        <Route exact path='/course/:courseId/preview' component={CoursePreviewPage}/>
-        <Route exact path='/course/:courseId/update' component={CourseUpdatePage}/>
-        <Route exact path='/course/:courseId/gradebook' component={GradebookStudentPage}/>
-        <Route exact path='/course/:courseId/gradebook/instructor' component={GradebookInstructorPage}/>
+        <Route exact path='/course/:courseId' component={CourseDetailPage} />
+        <Route exact path='/course/:courseId/preview' component={CoursePreviewPage} />
+        <Route exact path='/course/:courseId/update' component={CourseUpdatePage} />
+        <Route exact path='/course/:courseId/gradebook' component={GradebookStudentPage} />
+        <Route exact path='/course/:courseId/gradebook/instructor' component={GradebookInstructorPage} />
 
-        <Route exact path='/course/:courseId/assignment/:assignmentId' component={AssignmentDetailPage}/>
-        <Route exact path='/course/:courseId/assignment/:assignmentId/update' component={AssignmentUpdatePage}/>
+        <Route exact path='/course/:courseId/assignment/:assignmentId' component={AssignmentDetailPage} />
+        <Route exact path='/course/:courseId/assignment/:assignmentId/update' component={AssignmentUpdatePage} />
         <Route exact path='/course/:courseId/assignment/:assignmentId/createNCAG'
-               component={NonContainerAutoGraderForm}/>
-        <Route exact path='/course/:courseId/assignment/:assignmentId/createCAG' component={ContainerAutoGraderForm}/>
-        <Route exact path='/course/:courseId/assignment/:assignmentId/createProblem' component={AssignmentProblemFormPage}/>
-        <Route exact path='/course/:courseId/webhooks' component={WebhookURLForm}/>
+            component={NonContainerAutoGraderForm} />
+        <Route exact path='/course/:courseId/assignment/:assignmentId/createCAG' component={ContainerAutoGraderForm} />
+        <Route exact path='/course/:courseId/assignment/:assignmentId/createProblem' component={AssignmentProblemFormPage} />
+        <Route exact path='/course/:courseId/webhooks' component={WebhookURLForm} />
 
         <Route exact path='/course/:courseId/assignment/:assignmentId/submission/:submissionId'
-               component={SubmissionDetailPage}/>
-            <Route exact path='/course/:courseId/assignment/:assignmentId/submissions'
-                   component={InstructorSubmissionspage}/>
+            component={SubmissionDetailPage} />
+        <Route exact path='/course/:courseId/assignment/:assignmentId/submissions'
+            component={InstructorSubmissionspage} />
+
+        {/* NOTE: maybe get rid of separate feedback page, instead have page to view source (/submissions/:submissionID/view on autolab)*/}
         <Route exact path='/course/:courseId/assignment/:assignmentId/submission/:submissionId/feedback'
-               component={SubmissionFeedbackPage}/>
-       <Route exact path ='/course/:courseId/assignment/:assignmentId/submission/:submissionId/fileView' component={SubmissionFileView}/>
-       <Route path="/join-course" component={JoinCoursePage} />
-            <Route path="/" component={UserCoursesListPage} />
-       // TBD, undecided where webhooks should be placed
+            component={SubmissionFeedbackPage} />
+        
+        <Route exact path='/course/:courseId/assignment/:assignmentId/submission/:submissionId/fileView' component={SubmissionFileView} />
+        <Route path="/join-course" component={JoinCoursePage} />
+        <Route path="/" component={UserCoursesListPage} />
+        {/* // TBD, undecided where webhooks should be placed */}
         {/*<Route exact path='/webhookURLPage' component={webhookURLForm}/>*/}
 
-        <Route component={NotFoundPage}/>
+        <Route component={NotFoundPage} />
     </Switch>
 )
 

devU-client/src/components/misc/editAssignmentModal.tsx

@@ -4,13 +4,10 @@
   background-color: $primary;
   color: #fff;
   text-align: left;
-  width: 100%;
-  position: fixed;
-  bottom: 0;
-  left: 0;
+  margin-top: auto;
   font-size: 14px;
   font-size: 16px;
-  padding: 10px 0;
+  padding: 10px $pagePadding;
   display: flex;
   flex-direction: row;
   align-items: center;

devU-client/src/components/misc/footer.scss

@@ -7,11 +7,13 @@
     grid-row-gap: 10px;
     width: 100%;
 }
-.pageHeader{
+
+.pageHeader {
     display: grid;
     grid-template-columns: 1fr 2fr 1fr;
     align-items: center;
 }
+
 .backToCourse{
     margin-left: auto;
 }

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

@@ -0,0 +1,75 @@
+import React, { useState } from 'react'
+import {useParams} from 'react-router-dom'
+import { useActionless } from 'redux/hooks'
+import { SET_ALERT } from 'redux/types/active.types'
+
+import {SubmissionScore} from 'devu-shared-modules'
+import RequestService from 'services/request.service'
+import Modal from 'components/shared/layouts/modal'
+
+interface Props {
+    open: boolean;
+    onClose: () => void;
+    submissionScore: SubmissionScore | null;
+
+}
+
+const ManualGradeModal = ({ open, onClose, submissionScore }: Props) => {
+    const [setAlert] = useActionless(SET_ALERT)
+    const { assignmentId, courseId } = useParams<{assignmentId: string, courseId: string}>()
+
+    const [formData, setFormData] = useState({
+        submissionId: submissionScore?.submissionId,
+        score: submissionScore?.score,
+        feedback: submissionScore?.feedback,
+        releasedAt: "2024-10-05T14:48:00.00Z"
+    })
+
+    const handleManualGrade = async () => {
+        // set releasedAt to now in ISO 8601 format
+        setFormData(prevState => ({ ...prevState, ["releasedAt"]: new Date().toISOString() }))
+
+        if (submissionScore) {
+            // Update the submission score
+            console.log('Submission Exists')
+            await RequestService.put(`/api/course/${courseId}/assignment/${assignmentId}/submission-scores/${submissionScore.id}`, formData)
+                .then(() => {
+                    setAlert({ autoDelete: true, type: 'success', message: 'Submission Score Updated' })
+                    window.location.reload()
+                })
+
+        }
+        else {
+            // Create a new submission score
+            console.log('No Submission')
+            await RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/submission-scores`, formData)
+                .then(() => {
+                    setAlert({ autoDelete: true, type: 'success', message: 'Submission Score Created' })
+                    window.location.reload()
+                })
+        }
+    }
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const key = e.target.id
+        const value = e.target.value
+
+        setFormData(prevState => ({ ...prevState, [key]: value }))
+    }
+
+    return (
+        <Modal title="Grade Assignment" buttonAction={handleManualGrade} open={open} onClose={onClose}>
+            <div className="input-group">
+                <label htmlFor="score" className="input-label">Assignment Score:</label>
+                <input type="number" id="score" value={Number(formData.score)} onChange={handleChange} />
+            </div>
+            <div className="input-group">
+                <label htmlFor="feedback" className="input-label">Overall Feedback:</label>
+                <textarea rows={4} id="feedback" onChange={handleChange} value={String(formData.feedback)} 
+                placeholder='Provide assignment feedback...'/>
+            </div>
+        </Modal>
+    )
+}
+
+export default ManualGradeModal;