add semester modal

pennlabs · Apr 9, 2024 · 9d047bf · 9d047bf
1 parent 3f92af1
commit 9d047bf
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 49 deletions.
diff --git a/frontend/degree-plan/components/FourYearPlan/DegreeModal.tsx b/frontend/degree-plan/components/FourYearPlan/DegreeModal.tsx
@@ -27,6 +27,7 @@ export type ModalKey =
   | "degree-add"
   | "degree-remove"
   | "semester-remove"
+  | "semester-add"
   | null; // null is closed
 
 const getModalTitle = (modalState: ModalKey) => {
@@ -50,7 +51,7 @@ const getModalTitle = (modalState: ModalKey) => {
   }
 };
 
-const ModalInteriorWrapper = styled.div<{ $row?: boolean }>`
+export const ModalInteriorWrapper = styled.div<{ $row?: boolean }>`
   display: flex;
   flex-direction: ${(props) => (props.$row ? "row" : "column")};
   align-items: center;
@@ -74,7 +75,7 @@ const ModalText = styled.div`
   font-size: 0.87rem;
 `;
 
-const ModalButton = styled.button`
+export const ModalButton = styled.button`
   margin: 0px 0px 0px 0px;
   height: 32px;
   width: 5rem;
@@ -85,15 +86,15 @@ const ModalButton = styled.button`
   border: none;
 `;
 
-const ButtonRow = styled.div<{ $center?: boolean }>`
+export const ButtonRow = styled.div<{ $center?: boolean }>`
   display: flex;
   width: 100%;
   flex-direction: row;
   justify-content: ${(props) => (props.$center ? "center" : "flex-end")};
   gap: 0.5rem;
 `;
 
-const CancelButton = styled.button`
+export const CancelButton = styled.button`
   margin: 0px 0px 0px 0px;
   height: 29px;
   width: 4rem;
@@ -140,12 +141,12 @@ interface RemoveSemesterProps {
 
 interface ModalInteriorProps {
   modalKey: ModalKey;
-  modalObject: DegreePlan | null | RemoveSemesterProps | RemoveDegreeProps | Degree;
+  modalObject: DegreePlan | null | RemoveSemesterProps | RemoveDegreeProps | Degree | HTMLElement;
   setActiveDegreeplan: (arg0: DegreePlan | null) => void;
   close: () => void;
   modalRef: React.RefObject<HTMLSelectElement | null>;
 }
-const ModalInterior = ({
+export const ModalInterior = ({
   modalObject,
   modalKey,
   setActiveDegreeplan,
@@ -390,3 +391,4 @@ const DegreeModal = ({
 );
 
 export default DegreeModal;
+
diff --git a/frontend/degree-plan/components/FourYearPlan/PlanPanel.tsx b/frontend/degree-plan/components/FourYearPlan/PlanPanel.tsx
@@ -13,6 +13,10 @@ const ShowStatsText = styled.div`
     min-width: 6rem;
 `
 
+const AddSemText = styled.div`
+    min-width: 8rem;
+`
+
 const ShowStatsButton = ({ showStats, setShowStats }: { showStats: boolean, setShowStats: (arg0: boolean) => void }) => (
     <PanelTopBarButton onClick={() => setShowStats(!showStats)}>
         <PanelTopBarIcon>
@@ -24,6 +28,22 @@ const ShowStatsButton = ({ showStats, setShowStats }: { showStats: boolean, setS
     </PanelTopBarButton>
 );
 
+interface AddSemesterButtonProp {
+    editMode: boolean, 
+    setShowAddSemModal: (arg0: boolean) => void
+}
+
+const AddSemesterButton = ({editMode, setShowAddSemModal} : AddSemesterButtonProp) => editMode && (
+    <PanelTopBarButton onClick={() => setShowAddSemModal(true)}>
+        <PanelTopBarIcon>
+            <i className={`fas fa-plus fa-md`}/>
+        </PanelTopBarIcon>
+        <AddSemText>
+            Add Semester
+        </AddSemText>
+    </PanelTopBarButton>
+)
+
 interface PlanPanelProps {
     setModalKey: (arg0: ModalKey) => void;
     modalKey: string | null;
@@ -50,6 +70,7 @@ const PlanPanel = ({
     const { copy: copyDegreeplan } = useSWRCrud<DegreePlan>('/api/degree/degreeplans');
     const [showStats, setShowStats] = useState(true);
     const [editMode, setEditMode] = useState(false);
+    const [showAddSemModal, setShowAddSemModal] = useState(false);
 
     return (
             <PanelContainer>
@@ -80,17 +101,20 @@ const PlanPanel = ({
                         isLoading={isLoading} 
                     />
                     <PanelTopBarIconList>
+                        <AddSemesterButton editMode={editMode} setShowAddSemModal={setShowAddSemModal}/>
                         <ShowStatsButton showStats={showStats} setShowStats={setShowStats} />
-                        <EditButton editMode={editMode} setEditMode={setEditMode} />
+                        <EditButton editMode={editMode} setEditMode={setEditMode}/>
                     </PanelTopBarIconList>
                 </PanelHeader>
                 {/** map to semesters */}
                 <PanelBody>
-                    <Semesters 
+                    <Semesters
                     activeDegreeplan={activeDegreeplan || undefined} 
                     showStats={showStats} 
                     editMode={editMode}
                     setEditMode={setEditMode}
+                    showAddSemModal={showAddSemModal}
+                    setShowAddSemModal={setShowAddSemModal}
                     setModalKey={setModalKey}
                     setModalObject={setModalObject}
                     isLoading={isLoading}

diff --git a/frontend/degree-plan/components/FourYearPlan/Semesters.tsx b/frontend/degree-plan/components/FourYearPlan/Semesters.tsx
@@ -5,7 +5,9 @@ import { Course, DegreePlan, Fulfillment } from "@/types";
 import useSWR from "swr";
 import React, { useEffect, useState } from "react";
 import Select from "react-select";
-import { ModalKey } from "./DegreeModal";
+import { ButtonRow, CancelButton, ModalButton, ModalInterior, ModalInteriorWrapper, ModalKey } from "./DegreeModal";
+import ModalContainer from "../common/ModalContainer";
+import { Column } from "@/pages/OnboardingPage";
 
 const getNextSemester = (semester: string) => {
   const year = parseInt(semester.slice(0, 4));
@@ -68,9 +70,10 @@ const AddButton = styled.div`
 
 const YearInput = styled.input`
   width: 9rem;
+  height: 2.6rem;
   background-color: transparent;
   border-color: #9FB5EF;
-  color: #C1C1C1;
+  color: #FF;
   box-shadow: none;
   &:hover {
     borderColor: "#9FB5EF";
@@ -87,39 +90,43 @@ const YearInput = styled.input`
   font-size: 1rem;
 `
 
-const selectStyles = (topOrBottom: boolean) => ({
+export const InputColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 1rem;
+  padding-right: 2%;
+  margin-bottom: 1rem;
+`;
+
+const selectStyles = {
   control: (provided: any) => ({
     ...provided,
-    width: "9rem",
+    width: "100%",
+    height: '2.5rem',
     backgroundColor: "transparent",
     borderColor: "#9FB5EF",
     color: "#C1C1C1",
     boxShadow: "none",
     "&:hover": {
       borderColor: "#9FB5EF",
     },
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-    borderBottom: 0
-  }),
-  singleValue: (provided: any) => ({
-    ...provided,
-    color: "#C1C1C1",
   }),
-});
+
+};
 
 // TODO: get a consistent color palette across PCx
-interface ModifySemestersProps {
+interface ModifySemestersModalProps {
   addSemester: (semester: Course["semester"]) => void;
   className?: string;
   semesters: { [semester: string]: Fulfillment[] };
 }
 
-const ModifySemesters = ({
+const ModifySemestersModal = ({
   addSemester,
   semesters,
   className,
-}: ModifySemestersProps) => {
+}: ModifySemestersModalProps) => {
   const latestSemester =
     Object.keys(semesters).sort((a, b) => a.localeCompare(b)).pop() || "2026A"; // TODO: Change fallback value to start semester (based on onboarding?)
 
@@ -146,30 +153,31 @@ const ModifySemesters = ({
   ];
 
   return (
-    // TODO: add a modal for this
-    <AddSemesterContainer className={className}>
-      <AddButtonContainer role="button" onClick={handleAddSemester}>
-        <AddButton>
-          <PlusIcon>
-            <i className="fas fa-plus fa-lg"></i>
-          </PlusIcon>
-          <div>Add Semester</div>
-        </AddButton>
-      </AddButtonContainer>
-
-      <Select
-        styles={selectStyles(true)}
-        options={seasonOptions}
-        value={seasonOptions.find((option) => option.value === selectedSeason)}
-        onChange={(option) => setSelectedSeason(option ? option.value : selectedSeason)}
-      />
-
-      <YearInput
-        value={selectedYear}
-        type="number"
-        onChange={(e) => setSelectedYear(e.target.value)}
-      />
-    </AddSemesterContainer>
+    <ModalInteriorWrapper $row={false}>
+      <InputColumn>
+        <Select
+          className="basic-single"
+          classNamePrefix="select"
+          styles={selectStyles}
+          options={seasonOptions}
+          value={seasonOptions.find((option) => option.value === selectedSeason)}
+          onChange={(option) => setSelectedSeason(option ? option.value : selectedSeason)}
+        />
+        <YearInput
+          value={selectedYear}
+          type="number"
+          onChange={(e) => setSelectedYear(e.target.value)}
+        />
+      </InputColumn>
+      <ButtonRow>
+        <CancelButton onClick={close}>Cancel</CancelButton>
+        <ModalButton
+          onClick={handleAddSemester}
+        >
+          Add
+        </ModalButton>
+      </ButtonRow>
+    </ModalInteriorWrapper >
   );
 };
 
@@ -192,6 +200,8 @@ interface SemestersProps {
   setEditMode: (arg0: boolean) => void;
   isLoading: boolean;
   currentSemester?: string;
+  showAddSemModal: boolean;
+  setShowAddSemModal: (arg0: boolean) => void;
 }
 
 const Semesters = ({
@@ -202,6 +212,8 @@ const Semesters = ({
   setModalKey,
   setModalObject,
   setEditMode,
+  showAddSemModal,
+  setShowAddSemModal,
   currentSemester,
   isLoading,
 }: SemestersProps) => {
@@ -224,6 +236,7 @@ const Semesters = ({
   }>({});
   const addSemester = (semester: string) => {
     if (!semesters[semester]) setSemesters({ ...semesters, [semester]: [] });
+    setShowAddSemModal(false);
   };
 
   const removeSemester = (semester: string) => {
@@ -307,8 +320,16 @@ const Semesters = ({
                 currentSemester={currentSemester}
               />
             ))}
-      {editMode && (
-        <ModifySemesters addSemester={addSemester} semesters={semesters} />
+      {showAddSemModal && (
+        <ModalContainer
+        title={'Add semester'}
+        close={() => {setModalKey(null); setShowAddSemModal(false);}}
+        modalKey={'semester-add'}
+      >
+        {/*
+        // @ts-ignore */}
+          <ModifySemestersModal addSemester={addSemester} semesters={semesters} />
+      </ModalContainer>
       )}
     </SemestersContainer>
   );