Skip to content

Commit

Permalink
Added renaming year on roadmap
Browse files Browse the repository at this point in the history
  • Loading branch information
@kylerpan
kylerpan committed Oct 18, 2023
1 parent 0c25e3a commit d2c22b8
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 9 deletions.
31 changes: 29 additions & 2 deletions site/src/pages/RoadmapPage/AddYearPopup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down
7 changes: 4 additions & 3 deletions site/src/pages/RoadmapPage/Planner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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]);
Expand Down Expand Up @@ -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: [] } })
}
}
Expand All @@ -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>
);
};
Expand Down
31 changes: 28 additions & 3 deletions site/src/pages/RoadmapPage/Year.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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) {
Expand Down Expand Up @@ -90,7 +91,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>
Expand Down Expand Up @@ -160,6 +161,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
Expand All @@ -185,11 +206,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
Expand Down
32 changes: 31 additions & 1 deletion site/src/store/slices/roadmapSlice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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++) {
Expand Down Expand Up @@ -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);
},
Expand Down Expand Up @@ -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

Expand Down
2 changes: 2 additions & 0 deletions site/src/types/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,7 @@ export type PlannerData = PlannerYearData[];

export interface PlannerYearData {
startYear: number;
name: string;
quarters: PlannerQuarterData[];
}

Expand All @@ -170,6 +171,7 @@ export type SavedPlannerData = SavedPlannerYearData[];

export interface SavedPlannerYearData {
startYear: number;
name: string;
quarters: SavedPlannerQuarterData[];
}

Expand Down

0 comments on commit d2c22b8

Please sign in to comment.