Merge pull request #64 from stevebrownlee/feature/disable-projects

Feature/disable projects

src/components/cohorts/CohortStudentList.css

@@ -67,6 +67,10 @@
     box-shadow: 0.25rem 0.25rem 0.25rem rgb(156, 156, 156);
 }
 
+.projectColumn__header--assessment {
+    background-color: var(--secondary);
+}
+
 .projectColumn__students {
     flex: 1;
     height: 80vh;

src/components/cohorts/StudentCardList.js

@@ -21,6 +21,7 @@ import keyboardShortcut from "../ui/keyboardShortcut.js"
 
 import "./CohortStudentList.css"
 import "./Tooltip.css"
+import { OutlineGroupIcon } from "../../svgs/OutlineGroup.js"
 
 const persistSettings = (setting, value) => {
     let settings = localStorage.getItem("lp_settings")
@@ -56,7 +57,10 @@ export const StudentCardList = ({ searchTerms }) => {
         showAllProjects, toggleAllProjects, dragStudent, draggedStudent,
         enteringNote
     } = useContext(StandupContext)
-    const { cohortStudents, getCohortStudents, setStudentCurrentProject, activeStudent } = useContext(PeopleContext)
+    const {
+        cohortStudents, getCohortStudents, activeStudent,
+        setStudentCurrentProject, setStudentCurrentAssessment,
+    } = useContext(PeopleContext)
 
     const [showTags, toggleTags] = useState(initial_show_tags_state)
     const [groupedStudents, setGroupedStudents] = useState([])
@@ -139,15 +143,45 @@ export const StudentCardList = ({ searchTerms }) => {
         let ceilingBookIndex = activeCourse?.books ? activeCourse?.books[activeCohort?.books?.length - 1]?.index : 0
 
         const studentsPerBook = activeCourse?.books?.map(book => {
+            const maxedAssessments = book.assessments.map(b => ({ ...b, index: 99 }))
+
             book.studentCount = 0
             book.display = false
 
+            if (book.projects.find(p => p.index === 99) === undefined) {
+                book.projects = [...book.projects, ...maxedAssessments]
+            }
+
+            copy = copy.map(s => ({...s, inGroupProject: false}))
+
             for (const project of book.projects) {
                 project.display = false
                 project.droppable = false
-                project.students = copy.filter(student => student.book_id === book.id && student.project_id === project.id)
 
 
+                // Account for core projects and being assigned to an assessment
+                project.students = copy.filter(student => {
+                    const studentWorkingOnCoreProject = student.book_id === book.id
+                        && student.project_id === project.id
+                        && student.assessment_status_id === 0
+
+                    const studentWorkingOnAssessment = student.book_id === book.id
+                        && student.assessment_status_id > 0
+                        && project.index === 99
+
+                    const studentWorkingOnGroupProject = student.book_id === book.id
+                        && student.project_id === project.id
+                        && project.is_group_project
+
+                    if (studentWorkingOnGroupProject) {
+                        student.inGroupProject = true
+                    }
+
+                    return studentWorkingOnCoreProject
+                        || student.inGroupProject && project.is_group_project
+                        || (studentWorkingOnAssessment && !student.inGroupProject)
+                })
+
                 if (project.students.length > 0) {
                     book.display = true
                     project.display = true
@@ -181,7 +215,6 @@ export const StudentCardList = ({ searchTerms }) => {
             return book
         })
 
-
         if (studentsPerBook) {
             setGroupedStudents(studentsPerBook)
         }
@@ -196,15 +229,21 @@ export const StudentCardList = ({ searchTerms }) => {
         return showInRegularMode || showInStandupMode
     }
 
-    const assignStudentToProject = (studentId, projectId) => {
-        setStudentCurrentProject(studentId, projectId)
+    const assignStudentToProject = (student, project) => {
+        if (project.index === 99 && student.assessment_status === 0) {
+            student.book_id = student.bookId // Snake case needed for the API
+            setStudentCurrentAssessment(student).then(() => getCohortStudents(activeCohort))
+            new Toast("Student assigned to assessment", Toast.TYPE_ERROR, Toast.TIME_NORMAL);
+            return null
+        }
+        setStudentCurrentProject(student.id, project.id)
             .then(() => getCohortStudents(activeCohort))
             .catch((error) => {
                 if (error?.message?.includes("duplicate")) {
-                    new Toast("Student has previously been assigned to that project.", Toast.TYPE_ERROR, Toast.TIME_NORMAL);
+                    new Toast("Student has previously been assigned to that project.", Toast.TYPE_ERROR, Toast.TIME_NORMAL)
                 }
                 else {
-                    new Toast("Could not assign student to that project.", Toast.TYPE_ERROR, Toast.TIME_NORMAL);
+                    new Toast("Could not assign student to that project.", Toast.TYPE_ERROR, Toast.TIME_NORMAL)
                 }
             })
     }
@@ -227,7 +266,7 @@ export const StudentCardList = ({ searchTerms }) => {
             new Toast("Self-assessment for this book not marked as reviewed and complete.", Toast.TYPE_WARNING, Toast.TIME_NORMAL);
         }
         else {
-            assignStudentToProject(rawStudent.id, project.id)
+            assignStudentToProject(rawStudent, project)
         }
     }
 
@@ -258,7 +297,7 @@ export const StudentCardList = ({ searchTerms }) => {
                                 <div className="bookColumn__studentCount">
                                     <PeopleIcon />
                                     <div style={{
-                                        padding: "0.2rem 0.33rem 0 0.33rem",
+                                        padding: "0.1rem 0.33rem 0 0.33rem",
                                     }}>{book.studentCount}</div>
                                 </div>
                             </div>
@@ -275,21 +314,21 @@ export const StudentCardList = ({ searchTerms }) => {
                                         onDragOver={e => e.preventDefault()}
                                         onDrop={(e) => handleDrop(e, book, project)}
                                     >
-                                        <div className="projectColumn__header"
-                                            onMouseOver={evt => {
-                                                evt.target.innerText = project.name
-                                            }}
-                                            onMouseOut={evt => {
-                                                evt.target.innerText = showAllProjects ? project.name.substring(0, 3) : project.name
-                                            }}
-                                        >
-                                            {showAllProjects ? project.name.substring(0, 14) : project.name}
+                                        <div className={`projectColumn__header ${project.index === 99 ? "projectColumn__header--assessment" : ""}`}>
+                                            {
+                                                project.is_group_project ?
+                                                    <OutlineGroupIcon style={{
+                                                        height: "1.1rem",
+                                                        verticalAlign: "text-top",
+                                                    }} />
+                                                    : ""
+                                            }
+                                            {showAllProjects ? project.name.substring(0, 14) : ` ${project.name}`}
                                         </div>
 
                                         <div className="projectColumn__students">
                                             {showStudentCardsForProject(book, project)}
                                         </div>
-
                                     </div>
                                 }
                                 return ""
@@ -301,7 +340,6 @@ export const StudentCardList = ({ searchTerms }) => {
     }
 
         <StudentDetails toggleCohorts={toggleCohorts} />
-        <AssessmentStatusDialog toggleStatuses={toggleStatuses} statusIsOpen={statusIsOpen} />
         <TagDialog toggleTags={toggleTagDialog} tagIsOpen={tagIsOpen} />
         <StudentNoteDialog toggleNote={toggleNote} noteIsOpen={noteIsOpen} />
         <CohortDialog toggleCohorts={toggleCohorts} cohortIsOpen={cohortIsOpen} />

src/components/course/BookDetails.js

@@ -37,10 +37,27 @@ export const BookDetails = () => {
             {book.name}
         </h1>
 
-        <h3>Projects</h3>
+        <h3>Core Projects</h3>
         <div className="book__projects">
             {
-                projects.map(project => <section key={project.id} className="book__project"
+                projects
+                    .filter(project => project.active && !project.is_group_project)
+                    .map(project => <section key={project.id} className="book__project"
+                    onClick={() => {
+                        history.push(`/projects/${project.id}`)
+                    }}
+                >
+                    <div>{project.name}</div>
+                </section>)
+            }
+        </div>
+
+        <h3>Group Project</h3>
+        <div className="book__projects">
+            {
+                projects
+                    .filter(project => project.active && project.is_group_project)
+                    .map(project => <section key={project.id} className="book__project book__project--group"
                     onClick={() => {
                         history.push(`/projects/${project.id}`)
                     }}
@@ -89,5 +106,21 @@ export const BookDetails = () => {
                     deleteBook(book.id).then(() => history.push(`/courses/${activeCourse.id}`))
                 }}>Delete Book</Button>
         </div>
+
+        <h3>Deprecated Projects</h3>
+        <div className="book__projects">
+            {
+                projects
+                    .filter(project => !project.active)
+                    .map(project => <section key={project.id} className="book__project book__project--deprecated"
+                    onClick={() => {
+                        history.push(`/projects/${project.id}`)
+                    }}
+                >
+                    <div>{project.name}</div>
+                </section>)
+            }
+        </div>
+
     </section>
 }

src/components/course/Course.css

@@ -53,6 +53,14 @@
     background-color: rgb(243, 249, 255);
 }
 
+.book__project--deprecated {
+    background-color: rgb(253, 219, 213);
+}
+
+.book__project--group {
+    background-color: rgb(238, 216, 250);
+}
+
 .course__book:hover, .book__project:hover {
     border: 1px solid rgb(202, 215, 233);
     padding: 0.33rem 0.6rem;
@@ -62,6 +70,15 @@
     color:blue;
 }
 
+.book__project--deprecated:hover {
+    background-color: rgb(250, 203, 195);
+}
+
+.book__project--group:hover {
+    background-color: rgb(234, 202, 251);
+}
+
+
 .book__footer, .project__footer, .course__footer {
     display: flex;
     flex-direction: row;

src/components/course/CourseDetailsChart.js

@@ -77,8 +77,6 @@ export const CourseDetailsChart = ({ courseId }) => {
                         }
                     ],
                 }
-                console.log(chartData)
-
                 setChartData(chartData)
             })
     }, [])

src/components/course/ProjectForm.js

@@ -17,7 +17,9 @@ export const ProjectForm = () => {
         book: 0,
         course: 0,
         index: 0,
-        implementation_url: ""
+        implementation_url: "",
+        active: true,
+        is_group_project: false
     })
     const history = useHistory()
     const { projectId, bookId } = useParams()
@@ -100,6 +102,25 @@ export const ProjectForm = () => {
                     />
                 </div>
 
+                <div className="form-group">
+                    <input onChange={updateState}
+                        checked={project.is_group_project}
+                        type="checkbox" required
+                        controltype="boolean"
+                        id="is_group_project"
+                    />
+                    <label htmlFor="is_group_project"> Group project </label>
+                </div>
+
+                <div className="form-group">
+                    <input onChange={updateState}
+                        checked={project.active}
+                        type="checkbox" required
+                        controltype="boolean"
+                        id="active"
+                    />
+                    <label htmlFor="active"> Active </label>
+                </div>
 
                 <button type="submit" className="isometric-button blue"
                     onClick={

src/components/dashboard/CohortDialog.js

@@ -6,13 +6,14 @@ import Settings from "../Settings"
 
 export const CohortDialog = ({ toggleCohorts, cohortIsOpen }) => {
     const { activeStudent, getStudent } = useContext(PeopleContext)
-    const [cohorts, setCohorts] = useState([])
+    const { cohorts, getCohorts } = useContext(CohortContext)
+    // const [cohorts, setCohorts] = useState([])
 
     useEffect(() => {
-        if (activeStudent) {
-            fetchIt(`${Settings.apiHost}/cohorts?limit=6`).then(setCohorts)
+        if ("id" in activeStudent && cohorts.length === 0) {
+            getCohorts()
         }
-    }, [activeStudent])
+    }, [])
 
     const removeStudent = (cohort) => {
         return fetchIt(`${Settings.apiHost}/cohorts/${cohort.id}/assign`, {

src/components/dashboard/Dashboard.js

@@ -8,6 +8,7 @@ import { StudentSearch } from "../people/StudentSearch"
 import { StudentCapstoneList } from "../cohorts/StudentCapstoneList.js"
 import { PeopleIcon } from "../../svgs/PeopleIcon.js"
 import { CohortContext } from "../cohorts/CohortProvider.js"
+import { AssessmentContext } from "../assessments/AssessmentProvider.js"
 import { Shortcuts } from "./Shortcuts.js"
 import "toaster-js/default.css"
 import "./Dashboard.css"
@@ -25,9 +26,17 @@ export const Dashboard = () => {
     const { activeCohort } = useContext(CohortContext)
     const { activeCourse, capstoneSeason } = useContext(CourseContext)
     const { cohortStudents } = useContext(PeopleContext)
+    const { getStatuses, statuses } = useContext(AssessmentContext)
 
     const history = useHistory()
 
+    useEffect(() => {
+        if (statuses.length === 0) {
+            getStatuses()
+        }
+    }, [])
+
+
     useEffect(() => {
         if (capstoneSeason.includes(activeCohort)) {
             if (cohortStudents.length > 0) {