Added renaming year on roadmap

site/src/pages/RoadmapPage/AddYearPopup.tsx

@@ -6,16 +6,21 @@ import { addYear } from '../../store/slices/roadmapSlice';
 import { useAppDispatch } from '../../store/hooks';
 
 interface AddYearPopupProps {
+  placeholderName: string;
   placeholderYear: number;
 }
 
-const AddYearPopup: FC<AddYearPopupProps> = ({ placeholderYear }) => {
+const AddYearPopup: FC<AddYearPopupProps> = ({ placeholderName, placeholderYear }) => {
   const dispatch = useAppDispatch();
+  const [name, setName] = useState(placeholderName);
   const [year, setYear] = useState(placeholderYear);
   const [show, setShow] = useState(false);
   const target = useRef(null);
 
-  useEffect(() => { setYear(placeholderYear) }, [placeholderYear]);
+  useEffect(() => { 
+    setYear(placeholderYear);
+    setName(placeholderName);
+  }, [placeholderYear, placeholderName]);
 
   const handleClick = (event: React.MouseEvent) => {
     setShow(!show);
@@ -31,6 +36,26 @@ const AddYearPopup: FC<AddYearPopupProps> = ({ placeholderYear }) => {
         <Popover id=''>
           <Popover.Content>
             <Form>
+              <Form.Group>
+                <Form.Label className="add-year-form-label">
+                  Name
+                </Form.Label>
+                <Form.Control
+                  type="text"
+                  name="name"
+                  value={name}
+                  onChange={(e) => {
+                    setName(e.target.value);
+                  }}
+                  onKeyDown={(e: React.KeyboardEvent) => {
+                    // prevent submitting form (reloads the page)
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
+                    }
+                  }}
+                  placeholder={placeholderName}
+                ></Form.Control>
+              </Form.Group>
               <Form.Group>
                 <Form.Label className="add-year-form-label">
                   Start Year
@@ -61,11 +86,13 @@ const AddYearPopup: FC<AddYearPopupProps> = ({ placeholderYear }) => {
                     {
                       yearData: {
                         startYear: year,
+                        name: name.trim(),
                         quarters: ['fall', 'winter', 'spring'].map(quarter => { return { name: quarter, courses: [] } })
                       }
                     }
                   ));
                   setYear(placeholderYear);
+                  setName(placeholderName);
                 }}
               >
                 Add Year

site/src/pages/RoadmapPage/Planner.tsx

@@ -36,7 +36,7 @@ const Planner: FC = () => {
   const collapsePlanner = (planner: PlannerData): SavedPlannerData => {
     let savedPlanner: SavedPlannerData = [];
     planner.forEach(year => {
-      let savedYear: SavedPlannerYearData = { startYear: year.startYear, quarters: [] };
+      let savedYear: SavedPlannerYearData = { startYear: year.startYear, name: year.name, quarters: [] };
       year.quarters.forEach(quarter => {
         let savedQuarter: SavedPlannerQuarterData = { name: quarter.name, courses: [] };
         savedQuarter.courses = quarter.courses.map(course => course.id);
@@ -61,7 +61,7 @@ const Planner: FC = () => {
       }
       let planner: PlannerData = [];
       savedPlanner.forEach(savedYear => {
-        let year: PlannerYearData = { startYear: savedYear.startYear, quarters: [] };
+        let year: PlannerYearData = { startYear: savedYear.startYear, name: savedYear.name, quarters: [] };
         savedYear.quarters.forEach(savedQuarter => {
           let quarter: PlannerQuarterData = { name: savedQuarter.name, courses: [] };
           quarter.courses = savedQuarter.courses.map(course => courseLookup[course]);
@@ -256,6 +256,7 @@ const Planner: FC = () => {
         {
           yearData: {
             startYear: new Date().getFullYear(),
+            name: "Year 1",
             quarters: ['fall', 'winter', 'spring'].map(quarter => { return { name: quarter, courses: [] } })
           }
         }
@@ -280,7 +281,7 @@ const Planner: FC = () => {
       <section className="years">
         {initializePlanner()}
       </section>
-      <AddYearPopup placeholderYear={data.length === 0 ? new Date().getFullYear() : data[data.length - 1].startYear + 1} />
+      <AddYearPopup placeholderName={"Year " + (data.length + 1)} placeholderYear={data.length === 0 ? new Date().getFullYear() : data[data.length - 1].startYear + 1} />
     </div>
   );
 };

site/src/pages/RoadmapPage/Year.tsx

@@ -8,7 +8,7 @@ import {
 } from "react-bootstrap-icons";
 import Quarter from "./Quarter";
 import { useAppDispatch } from '../../store/hooks';
-import { addQuarter, editYear, deleteYear, clearYear } from '../../store/slices/roadmapSlice';
+import { addQuarter, editYear, editName, deleteYear, clearYear } from '../../store/slices/roadmapSlice';
 
 import { PlannerYearData } from '../../types/types';
 
@@ -27,6 +27,7 @@ const Year: FC<YearProps> = ({ yearIndex, data }) => {
   const [addQuarterTarget, setAddQuarterTarget] = useState<any>(null!);
   const [editYearTarget, setEditYearTarget] = useState<any>(null!);
   const [placeholderYear, setPlaceholderYear] = useState(data.startYear);
+  const [placeholderName, setPlaceholderName] = useState(data.name);
 
   const handleEditClick = (event: React.MouseEvent) => {
     if (showAddQuarter) {
@@ -55,6 +56,7 @@ const Year: FC<YearProps> = ({ yearIndex, data }) => {
   const handleEditYearClick = (event: React.MouseEvent) => {
     setShowAddQuarter(false);           // hide any other currently displayed menu bar options
     setPlaceholderYear(data.startYear); // set default year to current year
+    setPlaceholderName(data.name);
     setShowEditYear(!showEditYear);
     setEditYearTarget(event.target);
   }
@@ -90,7 +92,7 @@ const Year: FC<YearProps> = ({ yearIndex, data }) => {
               ) : (
                 <CaretRightFill className="caret-icon" />
               )}
-              <span id="year-number">Year {yearIndex + 1} </span>
+              <span id="year-number">{data.name} </span>
               <span id="year-range">
                 ({data.startYear} - {data.startYear + 1})
               </span>
@@ -160,6 +162,26 @@ const Year: FC<YearProps> = ({ yearIndex, data }) => {
           <Popover id={`edit-year-menu-${yearIndex}`}>
             <Popover.Content>
               <Form>
+                <Form.Group>
+                  <Form.Label className="edit-year-form-label">
+                    Name
+                  </Form.Label>
+                  <Form.Control
+                    type="text"
+                    name="name"
+                    value={placeholderName}
+                    onChange={(e) => {
+                      setPlaceholderName(e.target.value);
+                    }}
+                    onKeyDown={(e: React.KeyboardEvent) => {
+                      // prevent submitting form (reloads the page)
+                      if (e.key === 'Enter') {
+                        e.preventDefault();
+                      }
+                    }}
+                    placeholder={placeholderName}
+                  ></Form.Control>
+                </Form.Group>
                 <Form.Group>
                   <Form.Label className="edit-year-form-label">
                     Start Year
@@ -185,11 +207,15 @@ const Year: FC<YearProps> = ({ yearIndex, data }) => {
                 <Button
                   className="edit-year-popup-btn"
                   onClick={() => {
+                    setPlaceholderName(placeholderName.trim());
                     setShowEditYear(!showEditYear);
                     setShow(!show);
-                    if (placeholderYear != data.startYear) {
+                    if (placeholderYear !== data.startYear) {
                       dispatch(editYear({ startYear: placeholderYear, index: yearIndex }));
                     }
+                    if (placeholderName !== data.name) {
+                      dispatch(editName({ name: placeholderName.trim(), index: yearIndex }));
+                    }
                   }}
                 >
                   Confirm

site/src/store/slices/roadmapSlice.ts

@@ -48,6 +48,12 @@ interface EditYearPayload {
     index: number;
 }
 
+// Payload to pass in to edit a year name
+interface EditNamePayload {
+    name: string;
+    index: number;
+}
+
 // Payload to pass in to add a quarter
 interface AddQuarterPayload {
     startYear: number,
@@ -138,12 +144,21 @@ export const roadmapSlice = createSlice({
         addYear: (state, action: PayloadAction<AddYearPayload>) => {
             let currentYears = state.yearPlans.map(e => e.startYear);
             let newYear = action.payload.yearData.startYear;
+            let currentNames = state.yearPlans.map(e => e.name);
+            let newName = action.payload.yearData.name;
 
             // if duplicate year
             if (currentYears.includes(newYear)) {
                 alert(`${newYear}-${newYear + 1} has already been added as Year ${currentYears.indexOf(newYear) + 1}!`);
                 return;
             }
+            // if duplicate name
+            if (currentNames.includes(newName)) {
+                let year = state.yearPlans[currentNames.indexOf(newName)].startYear;
+                alert(`${newName} already exists from ${year} - ${year + 1}!`);
+                return;
+            }
+
             // check if where to put newYear
             let index = currentYears.length;
             for (let i = 0; i < currentYears.length; i++) {
@@ -171,6 +186,21 @@ export const roadmapSlice = createSlice({
             state.yearPlans.sort((a, b) => a.startYear - b.startYear);
 
         },
+        editName: (state, action: PayloadAction<EditNamePayload>) => {
+            let currentNames = state.yearPlans.map(e => e.name);
+            let newName = action.payload.name;
+            let yearIndex = action.payload.index;
+
+            // if duplicate name
+            if (currentNames.includes(newName)) {
+                let year = state.yearPlans[yearIndex].startYear;
+                alert(`${newName} already exists from ${year} - ${year + 1}!`);
+                return;
+            }
+
+            // edit name
+            state.yearPlans[yearIndex].name = newName;
+        },
         deleteYear: (state, action: PayloadAction<YearIdentifier>) => {
             state.yearPlans.splice(action.payload.yearIndex, 1);
         },
@@ -217,7 +247,7 @@ export const roadmapSlice = createSlice({
     },
 })
 
-export const { moveCourse, deleteCourse, addQuarter, deleteQuarter, clearQuarter, clearYear, addYear, editYear, deleteYear, clearPlanner,
+export const { moveCourse, deleteCourse, addQuarter, deleteQuarter, clearQuarter, clearYear, addYear, editYear, editName, deleteYear, clearPlanner,
     setActiveCourse, setYearPlans, setInvalidCourses, setShowTransfer, addTransfer, setTransfer,
     setTransfers, deleteTransfer, setShowSearch, setShowAddCourse } = roadmapSlice.actions
 

site/src/types/types.ts

@@ -158,6 +158,7 @@ export type PlannerData = PlannerYearData[];
 
 export interface PlannerYearData {
     startYear: number;
+    name: string;
     quarters: PlannerQuarterData[];
 }
 
@@ -170,6 +171,7 @@ export type SavedPlannerData = SavedPlannerYearData[];
 
 export interface SavedPlannerYearData {
     startYear: number;
+    name: string;
     quarters: SavedPlannerQuarterData[];
 }