Merge pull request #156 from makeopensource/85-edit-assignment-page

Updated the Assignment Edit page

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

@@ -31,10 +31,10 @@ const AssignmentCreatePage = () => {
     const [formData, setFormData] = useState({
         courseId: courseId,
         name: '',
-        categoryName: null,
-        description: null,
+        categoryName: '',
+        description: '',
         maxFileSize: 0,
-        maxSubmissions: null,
+        maxSubmissions: 0,
         disableHandins: false,
     })
     const [endDate, setEndDate] = useState(new Date())
@@ -98,7 +98,23 @@ const AssignmentCreatePage = () => {
             disableHandins: formData.disableHandins,
         }
 
-        RequestService.post(`/api/course/${courseId}/assignments/`, finalFormData)
+        const multipart = new FormData
+        multipart.append('courseId', finalFormData.courseId)
+        multipart.append('name', finalFormData.name)
+        multipart.append('startDate', finalFormData.startDate)
+        multipart.append('dueDate', finalFormData.dueDate)
+        multipart.append('endDate', finalFormData.endDate)
+        multipart.append('categoryName', finalFormData.categoryName)
+        if(finalFormData.description !== null) { multipart.append('description', finalFormData.description)  }
+        multipart.append('maxFileSize', finalFormData.maxFileSize.toString())
+        if(finalFormData.maxSubmissions !== null) { multipart.append('maxSubmissions', finalFormData.maxSubmissions.toString())  }
+        multipart.append('disableHandins', finalFormData.disableHandins.toString())
+        for(const file of files.values()){
+            multipart.append('files', file)
+        }
+
+
+        RequestService.postMultipart(`/api/course/${courseId}/assignments/`, multipart)
             .then(() => {
                 setAlert({ autoDelete: true, type: 'success', message: 'Assignment Added' })
                 history.goBack()
@@ -117,24 +133,13 @@ const AssignmentCreatePage = () => {
 
     }
 
-    // const handleFile = (file : File) => {
-    //     if(Object.keys(files).length < 5){
-    //     setFiles(prevState => ({...prevState, [file.name] : file}))
-    //     } else {
-    //         //TODO: Add alert
-    //         console.log('Max files reached')
-    //     }
-    //     console.log(files)
-    // }
-
     const handleFile = (file: File) => {
         if (files.size < 5) {
             setFiles(prevState => new Map(prevState).set(file.name, file));
         } else {
             // TODO: Add alert
             console.log('Max files reached');
         }
-        console.log(files);
     };
 
     const handleFileRemoval = (e: React.MouseEvent<HTMLButtonElement>) => {

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

@@ -0,0 +1,129 @@
+@import 'variables';
+
+.grid {
+    display: grid;
+    grid-template-columns: 0.3fr 1fr 0.5fr;
+    grid-template-rows: 1fr 0.75fr;
+    grid-column-gap: 10px;
+    grid-row-gap: 10px;
+    width: 100%;
+}
+
+.assignmentsList, .form, .problemsList, .attachments {background-color: $list-item-background;}
+.assignmentsList {grid-area: 1 / 1 / 3 / 2;}
+.form {grid-area: 1 / 2 / 2 / 3;}
+.problemsList {grid-area: 1 / 3 / 2 / 4;}
+.attachments {grid-area: 2 / 2 / 3 / 4;}
+
+
+.textFieldContainer {
+    display:flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.textField {
+    align-items: center;
+}
+
+.datepickerContainer {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: 10px;
+    grid-row-gap: 0px; 
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+
+    .datepicker_start {grid-area: 1 / 1 / 2 / 2;}
+    .datepicker_due {grid-area: 1 / 2 / 2 / 3;}
+    .datepicker_end {grid-area: 1 / 3 / 2 / 4;}
+}
+
+
+input[type='date'] {
+    height: 20px;
+    background-color: $input-field-background;
+    color: $input-field-label;
+    padding: 0.625rem 1rem;
+    border: none;
+    border-radius: 100px;
+  }
+
+.problemsList, .assignmentsList {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+.assignment {
+    padding: 10px;
+    font-weight: bold;
+    cursor: pointer;
+    :hover {
+        padding: 10px;
+        background-color: $list-item-background-hover;
+        border-radius: 10px;
+    }
+}
+
+.problem, .fileList{
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.header {
+    text-align: center;
+}
+
+.editProblem {
+    margin-right: 10px;
+    background-color: $background;
+    border : 2px solid $primary;
+}
+
+.deleteButton {
+    background-color: $background;
+    border : 2px solid red;
+}
+
+@media (max-width:1000px) {
+    .grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: repeat(4, 1fr);
+        grid-column-gap: 0px;
+        grid-row-gap: 10px;
+        width: 100%;
+        }
+
+        .assignmentsList, .form, .problemsList, .attachments {background-color: $list-item-background;}
+        .assignmentsList { display: none; }
+        .form { grid-area: 1 / 1 / 2 / 2; }
+        .problemsList { grid-area: 2 / 1 / 3 / 2; }
+        .attachments { grid-area: 3 / 1 / 4 / 2; } 
+}
+
+@media (max-width:450px) {
+    .datepickerContainer {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: repeat(3, 1fr);
+        grid-column-gap: 0px;
+        grid-row-gap: 30px;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+        text-align: center;    
+        }
+
+        .datepicker_start { grid-area: 1 / 1 / 2 / 2; }
+        .datepicker_due { grid-area: 2 / 1 / 3 / 2; }
+        .datepicker_end { grid-area: 3 / 1 / 4 / 2; } 
+}