resizable panels, show/hide stats, dynamic rendering

pennlabs · Dec 3, 2023 · 14963cf · 14963cf
1 parent c82b8d1
commit 14963cf
Show file tree

Hide file tree

Showing 16 changed files with 266 additions and 89 deletions.
diff --git a/frontend/degree-plan/components/FourYearPlan/CoursePlanned.tsx b/frontend/degree-plan/components/FourYearPlan/CoursePlanned.tsx
@@ -14,7 +14,8 @@ export const coursePlannedCardStyle = {
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    width: '120px',
+    width: '100%',
+    minWidth: '70px',
     height: '35px',
     margin: '7px',
     background: '#F2F3F4',
@@ -53,7 +54,13 @@ const CoursePlanned = ({course, semesterIndex, removeCourse, courseOpen, setCour
 
     return(
     <>     
-      <div style={{...coursePlannedCardStyle,backgroundColor: isDragging ? '#4B9AE7' : '#F2F3F4', position:'relative', opacity: isDragging ? 0.5 : 1}} ref={drag} onMouseOver={() => setMouseOver(true)} onMouseLeave={() => setMouseOver(false)}>
+      <div style={{...coursePlannedCardStyle, 
+            backgroundColor: isDragging ? '#4B9AE7' : '#F2F3F4', 
+            position:'relative', 
+            opacity: isDragging ? 0.5 : 1}} 
+          ref={drag} 
+          onMouseOver={() => setMouseOver(true)} 
+          onMouseLeave={() => setMouseOver(false)}>
           <div onClick={handleClickCourse}>
             {courseCode}
           </div>

diff --git a/frontend/degree-plan/components/FourYearPlan/CoursesPlanned.tsx b/frontend/degree-plan/components/FourYearPlan/CoursesPlanned.tsx
@@ -3,10 +3,18 @@
 import { useEffect, useState } from "react";
 import CoursePlanned from "./CoursePlanned";
 
+const courseStackStyle = {
+    maxHeight: '30vh',
+    width: '12vw',
+    overflow:'auto',
+    paddingRight: '8px'
+}
+
 const CoursesPlanned = ({courses, semesterIndex, removeCourse}: any) => {
+
     const [courseOpen, setCourseOpen] = useState("");
     return (
-        <div className="">
+        <div style={courseStackStyle}>
             {courses.map((course: any) => 
                 <CoursePlanned course={course} semesterIndex={semesterIndex} removeCourse={removeCourse} courseOpen={courseOpen} setCourseOpen={setCourseOpen}/>
             )}

diff --git a/frontend/degree-plan/components/FourYearPlan/PlanPanel.tsx b/frontend/degree-plan/components/FourYearPlan/PlanPanel.tsx
@@ -5,22 +5,19 @@ import CoursePlanned from "./CoursePlanned";
 import update from 'immutability-helper'
 import _ from "lodash";
 import Icon from '@mdi/react';
-import { mdiMenuRight, mdiMenuLeft } from '@mdi/js';
+import { mdiMenuRight, mdiMenuLeft, mdiPoll } from '@mdi/js';
 import PlanTabs from "./PlanTabs";
 import { Divider } from "@mui/material";
-
-
-const tabBarStyle = {
-    backgroundColor:'#DBE2F5', 
-    paddingLeft: '15px', 
-    paddingTop: '7px', 
-    paddingBottom: '5px', 
-    paddingRight: '15px', 
-    borderTopLeftRadius: '10px', 
-    borderTopRightRadius: '10px'
+import { topBarStyle } from "@/pages/FourYearPlanPage";
+
+const semesterPanelStyle = {
+    paddingLeft: '20px',
+    paddingRight: '20px',
+    paddingTop: '5px',
+    height: '90%',
+    overflow: 'auto'
 }
 
-
 // const dropdownStyle = {
 //     position: 'relative',
 //     display: 'inline-block'
@@ -42,6 +39,7 @@ const PlanPanel = () => {
     const [plans, setPlans] = useState(['Degree Plan 1', 'Degree Plan 2']);
     const [currrentPlan, setCurrentPlan] = useState(plans[0]);
     const [showDropdown, setShowDropdown] = useState(false);
+    const [showStats, setShowStats] = useState(false);
 
     useEffect(() => {
         setSemesters(semesters);
@@ -103,20 +101,25 @@ const PlanPanel = () => {
     return(
     <>
             {/* <Tabs/> */}
-            <div className="d-flex justify-content-start" style={tabBarStyle}>
-                <div onClick={() => setShowDropdown(!showDropdown)}>
-                    <div className="m-1 text-bold" style={{color: '#575757', fontWeight: 'bold'}}>
-                        {currrentPlan}
-                        <Icon path={showDropdown ? mdiMenuLeft : mdiMenuRight} size={1} />
+            <div className="d-flex justify-content-between" style={topBarStyle}>
+                <div className="d-flex justify-content-start" >
+                    <div onClick={() => setShowDropdown(!showDropdown)}>
+                        <div className="text-bold" style={{color: '#575757', fontWeight: 'bold'}}>
+                            {currrentPlan}
+                            <Icon path={showDropdown ? mdiMenuLeft : mdiMenuRight} size={1} />
+                        </div>
                     </div>
+                    {showDropdown && <PlanTabs plans={plans} handleChoosePlan={handleChoosePlan} setPlans={setPlans} setCurrentPlan={setCurrentPlan}/>}
+                </div>
+                <div onClick={() => setShowStats(!showStats)}>
+                    <Icon path={mdiPoll} size={1} color={showStats ? '' : '#F2F3F4'}/>
                 </div>
-                {showDropdown && <PlanTabs plans={plans} handleChoosePlan={handleChoosePlan} setPlans={setPlans} setCurrentPlan={setCurrentPlan}/>}
             </div>
             {/** map to semesters */}
-            <div >
+            <div style={semesterPanelStyle}>
                 <div className="d-flex row justify-content-center">
                     {semesters.map((semester: any, index: number) => 
-                        <Semester semester={semester} addCourse={addCourse} index={index} removeCourseFromSem={removeCourseFromSem}/>
+                        <Semester semester={semester} addCourse={addCourse} index={index} removeCourseFromSem={removeCourseFromSem} showStats={showStats}/>
                     )}
                 </div>
 

diff --git a/frontend/degree-plan/components/FourYearPlan/PlanTabs.tsx b/frontend/degree-plan/components/FourYearPlan/PlanTabs.tsx
@@ -6,7 +6,7 @@ const planTab = {
     color: '#575757', backgroundColor:'#DBE2F5', 
     boxShadow: '0px 0px 12px 8px rgba(0, 0, 0, 0.05)',
     borderRadius: '5px',
-    padding: '5px',
+    padding: '1px',
     borderWidth: '0px'}
 
 const PlanTabs = ({plans, handleChoosePlan, setPlans, setCurrentPlan}: any) => {

diff --git a/frontend/degree-plan/components/FourYearPlan/Semester.tsx b/frontend/degree-plan/components/FourYearPlan/Semester.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { useDrop } from "react-dnd";
 import { ItemTypes } from "../dnd/constants";
 import CoursesPlanned from "./CoursesPlanned";
@@ -14,9 +14,20 @@ const semesterCardStyle = {
     boxShadow: '0px 0px 4px 2px rgba(0, 0, 0, 0.05)',
     borderRadius: '10px',
     borderWidth: '0px',
-    padding: '15px'
+    padding: '10px',
+    // minWidth: '200px',
+    width: '45%',
+    margin: '5px'
 }
-const Semester = ({semester, addCourse, index, removeCourseFromSem} : any) => {
+const Semester = ({semester, addCourse, index, removeCourseFromSem, showStats} : any) => {
+    const ref = useRef(null);
+    const [width, setWidth] = useState(200);
+
+    useEffect(() => {
+        console.log("width", ref.current.offsetWidth);
+        setWidth(ref.current ? ref.current.offsetWidth : 200)
+    }, [ref.current]);
+
     const [{ isOver }, drop] = useDrop(() => ({
         accept: ItemTypes.COURSE,
         drop: (item: any) => addCourse(index, item.course, item.semester),
@@ -30,17 +41,15 @@ const Semester = ({semester, addCourse, index, removeCourseFromSem} : any) => {
     }
 
     return (
-        <>
-            <div className="card col-sm-10 col-md-5 m-3" style={semesterCardStyle} ref={drop}>
-                <div className="mt-1 ms-2 mb-1" style={{fontWeight:500}}>
-                    {semester.name}
-                </div>
-                <div className="d-flex">
-                    <CoursesPlanned courses={semester.courses} semesterIndex={index} removeCourse={removeCourse}/>
-                    <Stats courses={semester.courses}/>
-                </div>
+        <div className="card" style={{...semesterCardStyle, minWidth: showStats? '250px' : '150px', maxWidth: showStats ? '400px' : '190px'}} ref={drop}>
+            <div className="mt-1 ms-2 mb-1" style={{fontWeight:500}}>
+                {semester.name}
+            </div>
+            <div className="d-flex" ref={ref}>
+                <CoursesPlanned courses={semester.courses} semesterIndex={index} removeCourse={removeCourse}/>
+                {showStats && <Stats courses={semester.courses}/>}
             </div>
-        </>
+        </div>
     )
 }
 

diff --git a/frontend/degree-plan/components/FourYearPlan/Stats.tsx b/frontend/degree-plan/components/FourYearPlan/Stats.tsx
@@ -1,21 +1,34 @@
 import { Stack } from '@mui/material';
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import CircularProgressBar from "./CircularProgressBar";
 
+const statsStackStyle = {
+    width: '60%'
+}
+
 const Stats = ({courses} : any) => {
+
     const n = courses.length;
     const StatRow = ({item, score} : any) => {
+        const ref = useRef(null);
+        const [width, setWidth] = useState(200);
+
+        useEffect(() => {
+            setWidth(ref.current.offsetWidth)
+        }, [ref.current]);
+
         return (
-            <div className="d-flex">
+            <div className="d-flex" ref={ref}>
                 <CircularProgressBar value={score.toFixed(1)}/>
-                <div className="ms-3 mt-3">{item}</div>
+                {/* {width > 140 && <div className="ms-3 mt-3">{item}</div>} */}
+                <div className="ms-2 mt-3">{item}</div>
             </div>
         )
     }
 
     return (
-        <Stack direction="column" spacing={1.5}>
-            <StatRow item={'Course'} score={courses.reduce((a: any, b: any) => 3 + 3) / courses.length}/> 
+        <Stack direction="column" spacing={1} style={statsStackStyle}>
+            <StatRow item={'Course'} score={courses.reduce((a: any, b: any) => 3 + 3) / courses.length}/>
             <StatRow item={'Instructor'} score={courses.reduce((a: any, b: any) => 2 + 3) / courses.length}/> 
             <StatRow item={'Difficulty'} score={courses.reduce((a: any, b: any) => 2.5 + 2) / courses.length}/> 
         </Stack>

diff --git a/frontend/degree-plan/components/NavBar/Logo.tsx b/frontend/degree-plan/components/NavBar/Logo.tsx
@@ -1,5 +1,3 @@
-// import { Link } from "react-router-dom";
-import { useDispatch} from 'react-redux';
 
 // constants
 const title = "";

diff --git a/frontend/degree-plan/components/Requirements/Course.tsx b/frontend/degree-plan/components/Requirements/Course.tsx
@@ -4,7 +4,7 @@ import { ItemTypes } from "../dnd/constants";
 import { coursePlannedCardStyle } from "../FourYearPlan/CoursePlanned";
 
 const courseRequiredCardStyle = {
-  display: 'flex',
+    display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
     height: '35px',
@@ -25,7 +25,11 @@ const Course = ({course} : any) => {
 
     return (
         <div className="d-flex justify-content-around" >
-            <div className="col-3" ref={drag} style={{...courseRequiredCardStyle, backgroundColor: isDragging ? '#DBE2F5' : '#F2F3F4', opacity: isDragging ? 0.7 : 1 }}>{`${course.dept}-${course.number}`}</div>
+            <div className="col-3" 
+                ref={drag} 
+                style={{...courseRequiredCardStyle, backgroundColor: isDragging ? '#DBE2F5' : '#F2F3F4', opacity: isDragging ? 0.7 : 1 }}>
+                    {`${course.dept}-${course.number}`}
+            </div>
             <div>{course.title}</div>
             {/* <Button style={{backgroundColor:"#DBE2F5", borderRadius:'12px', height:'30px'}}>{'Add'}</Button> */}
         </div>

diff --git a/frontend/degree-plan/components/Requirements/Major.tsx b/frontend/degree-plan/components/Requirements/Major.tsx
@@ -6,12 +6,13 @@ import { mdiTriangleSmallDown, mdiTriangleSmallUp } from '@mdi/js';
 import { useEffect, useRef, useState } from "react";
 import { useDrag, useDrop } from "react-dnd";
 import { ItemTypes } from "../dnd/constants";
+import { margin } from "@mui/system";
 
 const majorTitleStyle = {
     'borderWeight': 5
 }
 
-const Major = ({major, editMode, index, moveMajor}: any) => {
+const Major = ({major, editMode, index, moveMajor, setSearchClosed}: any) => {
     const [collapsed, setCollapsed] = useState(false);
     let ref = useRef<HTMLInputElement>(null);
 
@@ -66,14 +67,14 @@ const Major = ({major, editMode, index, moveMajor}: any) => {
     drag(drop(ref))
     return(
       <>
-            <div style={{borderRadius:'12px'}}>
+            <div className="m-3">
                 <div className='col-12' ref={ref} style={{
                     opacity: opacity,
-                    backgroundColor:'#F2F2F2', 
+                    backgroundColor:'#EDF1FC', 
                     fontSize:'16px', 
                     padding:'5px', 
                     paddingLeft:'10px', 
-                    borderRadius:'12px',
+                    borderRadius:'10px',
                   }}>
                     <div>
                         <label onMouseDown={handleCollapse} className="d-flex justify-content-between">
@@ -89,8 +90,8 @@ const Major = ({major, editMode, index, moveMajor}: any) => {
                     </div>
                 </div>
                 {!collapsed &&
-                <div className='m-2'>
-                    {major.requirements.map((requirement: any) => ( <Requirement key={requirement.id} requirement={requirement}/>))}
+                <div className='ms-2 mt-2'>
+                    {major.requirements.map((requirement: any) => ( <Requirement key={requirement.id} requirement={requirement} setSearchClosed={setSearchClosed}/>))}
                 </div>}
             </div>
         </>

diff --git a/frontend/degree-plan/components/Requirements/ReqPanel.tsx b/frontend/degree-plan/components/Requirements/ReqPanel.tsx
@@ -5,19 +5,18 @@ import Major from './Major';
 import { useCallback, useEffect, useState } from 'react';
 import update from 'immutability-helper'
 import { Stack } from '@mui/material';
+import { topBarStyle } from '@/pages/FourYearPlanPage';
+import SearchPanel from '../Search/SearchPanel';
 
-export const reqPanelContainerStyle = {
-    // backgroundColor: '#FFFFFF', 
-    boxShadow: '0px 0px 10px 6px rgba(0, 0, 0, 0.05)', 
-    borderRadius: '10px',
-    width: 400,
-    height: '100%',
-    backgroundColor: '#FFFFFF'
-  }
+const majorStackStyle = {
+  height: '90%',
+  overflow: 'auto'
+}
 
-  const ReqPanel = () => {
+  const ReqPanel = ({setSearchClosed}:any) => {
       const [editMode, setEditMode] = useState(false);
       const [majors, setMajors] = useState(majorsdata);
+
 
       useEffect(() => {
           setMajors(majorsdata);
@@ -36,23 +35,17 @@ export const reqPanelContainerStyle = {
 
     return(
         <>
-          <div className="" style={{backgroundColor:'#DBE2F5', paddingLeft: '15px', paddingTop: '3px', paddingBottom: '2px', paddingRight: '15px', borderTopLeftRadius: '10px', borderTopRightRadius: '10px'}}>
-              <div className='m-2 d-flex justify-content-between'>
+          <div style={topBarStyle}>
+              <div className='d-flex justify-content-between'>
                 <div style={{color: '#575757', fontWeight: 'bold'}}>Major/Minor/Elective</div>
                 <label onClick={() => setEditMode(!editMode)}>
                     <Icon path={editMode ? mdiArrowLeft : mdiNoteEditOutline } size={1}/>
                 </label>
               </div>
           </div>
-          <div style={{padding:'1rem'}}>
-              {/** header of requirements section */}
-
+          <div style={majorStackStyle}>
               {/** majors */}
-              <div className='m-1' style={{maxHeight:'570px', overflow: 'auto'}}>
-                <Stack spacing={1}>
-                  {majors.map((major, index) => <Major key={index} index={index} major={major} editMode={editMode} moveMajor={moveMajor}/>)}
-                </Stack>
-              </div>
+                  {majors.map((major, index) => <Major key={index} index={index} major={major} editMode={editMode} moveMajor={moveMajor} setSearchClosed={setSearchClosed}/>)}
           </div>
         </>
     );

diff --git a/frontend/degree-plan/components/Requirements/Requirement.tsx b/frontend/degree-plan/components/Requirements/Requirement.tsx
@@ -1,14 +1,26 @@
 // interface IRequirement {
 //     req: [ICourse]
 // }
-
 import Course from "./Course";
 
-const Requirement = ({requirement} : any) => {
+const Requirement = ({requirement, setSearchClosed} : any) => {
     return (
         <div>
-            <label className="mb-2" style={{fontWeight: 500, color: '#575757'}}>{requirement.name}</label>
-            <div className="ms-2">
+            <label className="mb-2 col-12 justify-content-between d-flex" style={{
+                    backgroundColor:'#EFEFEF', 
+                    fontSize:'16px', 
+                    padding:'2px', 
+                    paddingLeft:'15px', 
+                    borderRadius:'8px',
+                  }}>
+                <div>
+                    {requirement.name}
+                </div>
+                <div onClick={() => setSearchClosed(false)}>
+                  search
+                </div>
+            </label>
+            <div className="">
                 {requirement.topics.map((course: any, index: number) => 
                 <Course key={index} course={course}/>)}
             </div>