77 - Added editable dropdowns for assignment creation/editing

devU-client/src/assets/global.scss

@@ -165,7 +165,7 @@
 
     background-color: var(--background);
     color: var(--text-color);
-
+    
     --background: white;
     --text-color: black;
     --text-color-secondary: #363636;

devU-client/src/components/listItems/assignmentProblemListItem.tsx

@@ -40,6 +40,7 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
     if (!meta || !meta.type){
         return (
         <div className={styles.problem}>
+            <span>Metadata missing, error!</span>
         </div>)
     }
 

devU-client/src/components/listItems/simpleAssignmentListItem.scss

@@ -49,14 +49,13 @@
   flex-direction: column;
 
 
-  border-radius: 0.6rem;
-  transition: background-color 0.2s linear;
+  transition: all 0.2s ease;
 
   // color: $primary;
 
   color: $text-color;
-  // &:hover,
-  // &:focus {
-  //   background: $list-simple-item-background-hover;
-  // }
+  &:hover,
+  &:focus {
+   background-color: $list-item-background-hover;
+  }
 }

devU-client/src/components/listItems/simpleAssignmentListItem.tsx

@@ -10,6 +10,7 @@ type Props = {
 }
 
 const SimpleAssignmentListItem = ({assignment}: Props) => (
+<div onClick={(e) => (e.stopPropagation())}> {/*Wrapped in div so that clicking this item does not propogate to course cards onClick and take you to course detail page */}
     <ListItemWrapper to={`/course/${assignment.courseId}/assignment/${assignment.id}`} tag={assignment.name}
                      className={styles.title} tagStyle={styles.tag} containerStyle={styles.container}>
         <div className={styles.subText}>{assignment.name}</div>
@@ -18,9 +19,8 @@ const SimpleAssignmentListItem = ({assignment}: Props) => (
             <span>&nbsp;|&nbsp;</span>
             <span style={{fontWeight:'700'}}>End:&nbsp;</span>{wordPrintDate(assignment.endDate)}
         </div>
-
-
     </ListItemWrapper>
+</div>
 )
 
 

devU-client/src/components/listItems/userCourseListItem.scss

@@ -6,7 +6,6 @@
   font-weight: 600;
   margin: 0;
   padding: 15px;
-  /* Add padding to the text inside the name block */
   background: $primary;
   width: 100%;
   text-align: center;
@@ -33,12 +32,12 @@
   text-overflow: ellipsis;
   overflow-wrap: break-word;
   border-bottom: 1px solid #ddd;
-
 }
 
 .Buttons {
   display: flex;
   justify-content: center;
+  cursor: default;
   margin-top: auto;
   padding: 15px;
   gap: 20px;

devU-client/src/components/pages/courses/courseDetailPage.scss

@@ -91,6 +91,8 @@
     margin-bottom: 20px;
 }
 
+
+
 .class_title{
     grid-column-start: 2;
     padding: 0 20px;

devU-client/src/components/pages/courses/courseDetailPage.tsx

@@ -101,7 +101,7 @@ const CourseDetailPage = () => {
                                 </div>
                             </div>
                             <div>
-                                <h3>Course Links</h3>
+                                <h3 className={styles.meta_header}>Course Links</h3>
                                 <div className={styles.buttons_container}>
                                     <button className='btnSecondary' onClick={() => {
                                         role.isInstructor() ? history.push(`/course/${courseId}/gradebook/instructor`) : 
@@ -112,7 +112,7 @@ const CourseDetailPage = () => {
                                 <AddAssignmentModal open={openModal} onClose={handleCloseModal} />
                             </div>
                         </div>
-                        <div className={styles.subheader}><h3>Assignments</h3>
+                        <div className={styles.subheader}><h3 className={styles.meta_header}>Assignments</h3>
                             {role.isInstructor() &&(
                                 <button className='btnPrimary' id={styles.parallel_button} onClick={() => {
                                     setOpenModal(true)}}>Add Assignment

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

@@ -1,8 +1,6 @@
 @import 'variables';
 
 
-
-
 h2 {
   text-align: center;
 }
@@ -16,6 +14,10 @@ p {
   padding: 0 100px;
 }
 
+.input {
+  font-size: 14px;
+}
+
 .flex {
   display: flex;
   justify-content: space-between;

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

@@ -1,6 +1,6 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 // import { useHistory } from 'react-router-dom'
-import { ExpressValidationError } from 'devu-shared-modules'
+import { ExpressValidationError, Assignment } from 'devu-shared-modules'
 import 'react-datepicker/dist/react-datepicker.css'
 // import PageWrapper from 'components/shared/layouts/pageWrapper'
 
@@ -9,6 +9,8 @@ import { useActionless } from 'redux/hooks'
 // import TextField from 'components/shared/inputs/textField'
 // import Button from '../../../shared/inputs/button'
 // import DragDropFile from 'components/utils/dragDropFile'
+import { Option } from 'components/shared/inputs/dropdown'
+
 
 import { SET_ALERT } from 'redux/types/active.types'
 
@@ -17,6 +19,7 @@ import { useParams } from 'react-router-dom'
 
 import formStyles from './assignmentFormPage.scss'
 import Modal from 'components/shared/layouts/modal'
+import TextDropdown from 'components/shared/inputs/textDropDown'
 
 interface Props {
     open: boolean;
@@ -29,6 +32,8 @@ const AddAssignmentModal = ({ open, onClose }: Props) => {
     const [endDate, setEndDate] = useState('')
     const [dueDate, setDueDate] = useState('')
     const [startDate, setStartDate] = useState('')
+    const [categoryOptions, setAllCategoryOptions] = useState<Option<String>[]>([])
+    const [assignments, setAssignments] = useState<Assignment[]>([])
 
     const [formData, setFormData] = useState({
         courseId: courseId,
@@ -47,6 +52,20 @@ const AddAssignmentModal = ({ open, onClose }: Props) => {
         setFormData(prevState => ({ ...prevState, [key]: value }))
     }
 
+    const handleCategoryChange = (value: Option<String>)  => {
+        setFormData(prevState => ({ ...prevState, categoryName: value.label }))
+      };
+
+    const handleCategoryCreate = (value: string)  => {
+        const newOption : Option = {value: value, label: value}
+        setAllCategoryOptions(prevState => {
+          const newArr: Option<String>[] = (prevState);
+          newArr.push(newOption);
+          return newArr;
+        })
+        setFormData(prevState => ({ ...prevState, categoryName: value }))
+     };
+
     const handleStartDateChange = (e: React.ChangeEvent<HTMLInputElement>) => { setStartDate(e.target.value) }
     const handleEndDateChange = (e: React.ChangeEvent<HTMLInputElement>) => { setEndDate(e.target.value) }
     const handleDueDateChange = (e: React.ChangeEvent<HTMLInputElement>) => { setDueDate(e.target.value) }
@@ -99,36 +118,54 @@ const AddAssignmentModal = ({ open, onClose }: Props) => {
             .finally(() => {
 
             })
-
     }
 
+    useEffect(() => {RequestService.get(`/api/course/${courseId}/assignments`).then((res) => { setAssignments(res) })}, [formData])
+
+
+    useEffect(() => {
+        const categories = [...new Set(assignments.map(a => a.categoryName))];
+        const options = categories.map((category) => ({
+            value: category,
+            label: category
+          }));
+
+        setAllCategoryOptions(options);
+    }, [assignments])
 
     return (
         <Modal title="Add Assignment" buttonAction={handleSubmit} open={open} onClose={onClose}>
             <div className="input-group">
                 <label htmlFor="categoryName" className="input-label">Assignment Category:</label>
-                <input type="text" id="categoryName" onChange={handleChange}
-                placeholder='Type assignment category' />
+                <TextDropdown
+                onChange={handleCategoryChange}
+                onCreate={handleCategoryCreate}
+                options={categoryOptions}
+                custom={{control: () => ({border:'none', padding:'3px 0'}),
+                        placeholder: () => ({color: '#555555'}),
+                        input: () => ({fontSize: '14px'}),
+                        singleValue: () => ({fontSize: '14px'})}}
+                value={formData.categoryName ? {value: formData.categoryName, label: formData.categoryName} : undefined}/>
             </div>
             <div className="input-group">
                 <label htmlFor="name" className="input-label">Assignment Name:</label>
-                <input type="text" id="name" onChange={handleChange} 
+                <input type="text" id="name" onChange={handleChange} className={formStyles.input}
                 placeholder='e.g. PA3'/>
             </div>
             <div className="input-group">
                 <label htmlFor="description" className="input-label">Description: <span>(optional)</span></label>
-                <textarea rows={4} id="description" onChange={handleChange} 
+                <textarea rows={4} id="description" onChange={handleChange} className={formStyles.input}
                 placeholder='Provide an optional assignment description'/>
             </div>
             <div className='input-subgroup-2col'>
                 <div className="input-group">
                     <label htmlFor="maxSubmissions" className="input-label">Maximum Submissions:</label>
-                    <input type="number"  id="maxSubmissions" onChange={handleChange} 
+                    <input type="number"  id="maxSubmissions" onChange={handleChange} className={formStyles.input}
                     placeholder='e.g. 1' value={formData.maxSubmissions} min="0"/>
                 </div>
                 <div className="input-group">
                     <label htmlFor="maxFileSize" className="input-label">Maximum File Size (KB):</label>
-                    <input type="number" id="maxFileSize" onChange={handleChange} 
+                    <input type="number" id="maxFileSize" onChange={handleChange} className={formStyles.input}
                     placeholder='e.g. 100' value={formData.maxFileSize} min="0"/>
                 </div>
             </div>

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

@@ -39,8 +39,8 @@
 .textField {
     align-items: center;
     margin-bottom: 0;
-    background: none;
     border: 2px solid #ccc;
+    width: inherit;
 }
 
 .textFieldHeader{
@@ -155,7 +155,7 @@ input[type='datetime-local'] {
     font-weight: 700;
     font-size: 14px;
     color: #fff;
-    padding: 5px 15px;
+    padding: 3px 14px;
     font-style: normal;
     max-width: fit-content;
     transition: all 0.2s ease;