feat: support switching skeleton schedules (#994)

icssc · Jun 14, 2024 · 94dfd77 · 94dfd77
1 parent 4d201c3
commit 94dfd77
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 33 deletions.
diff --git a/apps/antalmanac/src/components/Calendar/CalendarToolbar.tsx b/apps/antalmanac/src/components/Calendar/CalendarToolbar.tsx
@@ -46,7 +46,12 @@ function handleUndo() {
  undoDelete(null);
 }
 
-function EditScheduleButton(props: { index: number }) {
+interface RenameScheduleButtonProps {
+ index: number;
+ disabled?: boolean;
+}
+
+function RenameScheduleButton({ index, disabled }: RenameScheduleButtonProps) {
  const [open, setOpen] = useState(false);
 
  const handleOpen = useCallback(() => {
@@ -59,15 +64,24 @@ function EditScheduleButton(props: { index: number }) {
 
  return (
  <Box>
- <IconButton onClick={handleOpen} size="small">
- <EditIcon />
- </IconButton>
- <RenameScheduleDialog fullWidth open={open} index={props.index} onClose={handleClose} />
+ <Tooltip title="Rename Schedule">
+ <span>
+ <IconButton onClick={handleOpen} size="small" disabled={disabled}>
+ <EditIcon />
+ </IconButton>
+ </span>
+ </Tooltip>
+ <RenameScheduleDialog fullWidth open={open} index={index} onClose={handleClose} />
  </Box>
  );
 }
 
-function DeleteScheduleButton(props: { index: number }) {
+interface DeleteScheduleButtonProps {
+ index: number;
+ disabled?: boolean;
+}
+
+function DeleteScheduleButton({ index, disabled }: DeleteScheduleButtonProps) {
  const [open, setOpen] = useState(false);
 
  const handleOpen = useCallback(() => {
@@ -80,18 +94,30 @@ function DeleteScheduleButton(props: { index: number }) {
 
  return (
  <Box>
- <IconButton onClick={handleOpen} size="small" disabled={AppStore.schedule.getNumberOfSchedules() === 1}>
- <ClearIcon />
- </IconButton>
- <DeleteScheduleDialog fullWidth open={open} index={props.index} onClose={handleClose} />
+ <Tooltip title="Delete Schedule">
+ <span>
+ <IconButton
+ onClick={handleOpen}
+ size="small"
+ disabled={AppStore.schedule.getNumberOfSchedules() === 1 || disabled}
+ >
+ <ClearIcon />
+ </IconButton>
+ </span>
+ </Tooltip>
+ <DeleteScheduleDialog fullWidth open={open} index={index} onClose={handleClose} />
  </Box>
  );
 }
 
+interface AddScheduleButtonProps {
+ disabled: boolean;
+}
+
 /**
  * MenuItem nested in the select menu to add a new schedule through a dialog.
  */
-function AddScheduleButton() {
+function AddScheduleButton({ disabled }: AddScheduleButtonProps) {
  const [open, setOpen] = useState(false);
 
  const handleOpen = useCallback(() => {
@@ -104,7 +130,7 @@ function AddScheduleButton() {
 
  return (
  <>
- <Button color="inherit" onClick={handleOpen} sx={{ display: 'flex', gap: 1 }}>
+ <Button color="inherit" onClick={handleOpen} sx={{ display: 'flex', gap: 1 }} disabled={disabled}>
  <AddIcon />
  <Typography whiteSpace="nowrap" textOverflow="ellipsis" overflow="hidden" textTransform="none">
  Add Schedule
@@ -179,7 +205,6 @@ function SelectSchedulePopover(props: { scheduleNames: string[] }) {
  variant="outlined"
  onClick={handleClick}
  sx={{ minWidth, maxWidth, justifyContent: 'space-between' }}
- disabled={skeletonMode}
  >
  <Typography whiteSpace="nowrap" textOverflow="ellipsis" overflow="hidden" textTransform="none">
  {currentScheduleName}
@@ -221,16 +246,16 @@ function SelectSchedulePopover(props: { scheduleNames: string[] }) {
  </Button>
  </Box>
  <Box display="flex" alignItems="center" gap={0.5}>
- <CopyScheduleButton index={index} />
- <EditScheduleButton index={index} />
- <DeleteScheduleButton index={index} />
+ <CopyScheduleButton index={index} disabled={skeletonMode} />
+ <RenameScheduleButton index={index} disabled={skeletonMode} />
+ <DeleteScheduleButton index={index} disabled={skeletonMode} />
  </Box>
  </Box>
  ))}
 
  <Box marginY={1} />
 
- <AddScheduleButton />
+ <AddScheduleButton disabled={skeletonMode} />
  </Box>
  </Popover>
  </Box>
@@ -251,6 +276,7 @@ function CalendarPaneToolbar(props: CalendarPaneToolbarProps) {
  const { showFinalsSchedule, toggleDisplayFinalsSchedule } = props;
  const [scheduleNames, setScheduleNames] = useState(AppStore.getScheduleNames());
  const [skeletonMode, setSkeletonMode] = useState(AppStore.getSkeletonMode());
+ const [skeletonScheduleNames, setSkeletonScheduleNames] = useState(AppStore.getSkeletonScheduleNames());
 
  const handleToggleFinals = useCallback(() => {
  logAnalytics({
@@ -267,6 +293,7 @@ function CalendarPaneToolbar(props: CalendarPaneToolbarProps) {
  useEffect(() => {
  const handleSkeletonModeChange = () => {
  setSkeletonMode(AppStore.getSkeletonMode());
+ setSkeletonScheduleNames(AppStore.getSkeletonScheduleNames());
  };
 
  AppStore.on('skeletonModeChange', handleSkeletonModeChange);
@@ -298,7 +325,7 @@ function CalendarPaneToolbar(props: CalendarPaneToolbarProps) {
  }}
  >
  <Box gap={1} display="flex" alignItems="center">
- <SelectSchedulePopover scheduleNames={scheduleNames} />
+ <SelectSchedulePopover scheduleNames={skeletonMode ? skeletonScheduleNames : scheduleNames} />
  <Tooltip title="Toggle showing finals schedule">
  <Button
  color={showFinalsSchedule ? 'primary' : 'inherit'}

diff --git a/apps/antalmanac/src/components/RightPane/AddedCourses/AddedCoursePane.tsx b/apps/antalmanac/src/components/RightPane/AddedCourses/AddedCoursePane.tsx
@@ -83,7 +83,7 @@ function CustomEventsBox() {
  const [skeletonMode, setSkeletonMode] = useState(AppStore.getSkeletonMode());
 
  const [customEvents, setCustomEvents] = useState(
- skeletonMode ? AppStore.getSkeletonSchedule().customEvents : AppStore.schedule.getCurrentCustomEvents()
+ skeletonMode ? AppStore.getCurrentSkeletonSchedule().customEvents : AppStore.schedule.getCurrentCustomEvents()
  );
 
  useEffect(() => {
@@ -138,7 +138,7 @@ function CustomEventsBox() {
 function ScheduleNoteBox() {
  const [skeletonMode, setSkeletonMode] = useState(AppStore.getSkeletonMode());
  const [scheduleNote, setScheduleNote] = useState(
- skeletonMode ? AppStore.getSkeletonSchedule().scheduleNote : AppStore.getCurrentScheduleNote()
+ skeletonMode ? AppStore.getCurrentSkeletonSchedule().scheduleNote : AppStore.getCurrentScheduleNote()
  );
  const [scheduleIndex, setScheduleIndex] = useState(AppStore.getCurrentScheduleIndex());
 
@@ -201,17 +201,19 @@ function ScheduleNoteBox() {
 }
 
 function SkeletonSchedule() {
- const [skeletonSchedule, setSkeletonSchedule] = useState(AppStore.getSkeletonSchedule());
+ const [skeletonSchedule, setSkeletonSchedule] = useState(AppStore.getCurrentSkeletonSchedule());
 
  useEffect(() => {
  const updateSkeletonSchedule = () => {
- setSkeletonSchedule(AppStore.getSkeletonSchedule());
+ setSkeletonSchedule(AppStore.getCurrentSkeletonSchedule());
  };
 
  AppStore.on('skeletonScheduleChange', updateSkeletonSchedule);
+ AppStore.on('currentScheduleIndexChange', updateSkeletonSchedule);
 
  return () => {
  AppStore.off('skeletonScheduleChange', updateSkeletonSchedule);
+ AppStore.off('currentScheduleIndexChange', updateSkeletonSchedule);
  };
  }, []);
 

diff --git a/apps/antalmanac/src/components/buttons/Copy.tsx b/apps/antalmanac/src/components/buttons/Copy.tsx
@@ -1,15 +1,16 @@
 import { ContentCopy } from '@mui/icons-material';
-import { IconButton, SxProps, Tooltip } from '@mui/material';
+import { Box, IconButton, SxProps, Tooltip } from '@mui/material';
 import { useCallback, useState } from 'react';
 
 import CopyScheduleDialog from '$components/dialogs/CopySchedule';
 
 interface CopyScheduleButtonProps {
  index: number;
+ disabled?: boolean;
  buttonSx?: SxProps;
 }
 
-export function CopyScheduleButton({ index, buttonSx }: CopyScheduleButtonProps) {
+export function CopyScheduleButton({ index, disabled, buttonSx }: CopyScheduleButtonProps) {
  const [open, setOpen] = useState(false);
 
  const handleOpen = useCallback(() => {
@@ -21,13 +22,15 @@ export function CopyScheduleButton({ index, buttonSx }: CopyScheduleButtonProps)
  }, []);
 
  return (
- <>
+ <Box>
  <Tooltip title="Copy Schedule">
- <IconButton sx={buttonSx} onClick={handleOpen} size="small">
- <ContentCopy />
- </IconButton>
+ <span>
+ <IconButton sx={buttonSx} onClick={handleOpen} size="small" disabled={disabled}>
+ <ContentCopy />
+ </IconButton>
+ </span>
  </Tooltip>
  <CopyScheduleDialog fullWidth open={open} index={index} onClose={handleClose} />
- </>
+ </Box>
  );
 }
diff --git a/apps/antalmanac/src/stores/AppStore.ts b/apps/antalmanac/src/stores/AppStore.ts
@@ -91,8 +91,12 @@ class AppStore extends EventEmitter {
  return this.schedule.getAllCustomEvents();
  }
 
- getSkeletonSchedule() {
- return this.schedule.getSkeletonSchedule();
+ getCurrentSkeletonSchedule() {
+ return this.schedule.getCurrentSkeletonSchedule();
+ }
+
+ getSkeletonScheduleNames() {
+ return this.schedule.getSkeletonScheduleNames();
  }
 
  addCourse(newCourse: ScheduleCourse, scheduleIndex: number = this.schedule.getCurrentScheduleIndex()) {
@@ -331,7 +335,7 @@ class AppStore extends EventEmitter {
  this.emit('skeletonModeChange');
 
  // Switch to added courses tab since PeterPortal can't be reached anyway
- useTabStore.getState().setActiveTab(1);
+ useTabStore.getState().setActiveTab(2);
  }
 
  changeCurrentSchedule(newScheduleIndex: number) {

diff --git a/apps/antalmanac/src/stores/Schedules.ts b/apps/antalmanac/src/stores/Schedules.ts
@@ -579,10 +579,14 @@ export class Schedules {
  this.scheduleNoteMap[scheduleNoteId] = newScheduleNote;
  }
 
- getSkeletonSchedule(): ShortCourseSchedule {
+ getCurrentSkeletonSchedule(): ShortCourseSchedule {
  return this.skeletonSchedules[this.currentScheduleIndex];
  }
 
+ getSkeletonScheduleNames(): string[] {
+ return this.skeletonSchedules.map((schedule) => schedule.scheduleName);
+ }
+
  setSkeletonSchedules(skeletonSchedules: ShortCourseSchedule[]) {
  this.skeletonSchedules = skeletonSchedules;
  }