Add the primary timetable feature (#1007)

* Add frontend UI - context window selection for primary timetable & star icon with tooltip

* Complete frontend

* Some preliminary backend work

* Add primary timetable migration

* Finish up frontend type annotations

* Set the left timetable to primary if non-found for foward implication

* Remove warning on reselecting - grey it out & add a tooltip instead

* I am the 144 (bus)

* Add undefined check to displayTimetables arr

* I am the 144 (train)

* school of computer science and engineering

* Remove unused import that vscode added (poweruser alert)

Author: rfquin

client/src/components/timetableTabs/TimetableTabContextMenu.tsx

@@ -1,4 +1,4 @@
-import { Close, Edit, EditNote, FileCopy, Save } from '@mui/icons-material';
+import { Close, Edit, EditNote, FileCopy, Star, Save } from '@mui/icons-material';
 import {
   Button,
   Dialog,
@@ -81,12 +81,19 @@ const TimetableTabContextMenu: React.FC<TimetableTabContextMenuProps> = ({ ancho
   // Handler for deleting a timetable
   const handleDeleteTimetable = (targetIndex: number) => {
     if (displayTimetables[term].length > 1) {
+      if (displayTimetables[term].findIndex((t: TimetableData, index: number) => t.isPrimary) === targetIndex) {
+        setAlertMsg('You cannot delete the primary timetable.');
+        setErrorVisibility(true);
+        return;
+      }
+
       prevTimetables = {
         selected: selectedTimetable,
         timetables: displayTimetables[term].map((timetable: TimetableData) => {
           return {
             name: timetable.name,
             id: timetable.id,
+            isPrimary: timetable.isPrimary,
             selectedCourses: timetable.selectedCourses,
             selectedClasses: duplicateClasses(timetable.selectedClasses),
             createdEvents: timetable.createdEvents,
@@ -99,7 +106,7 @@ const TimetableTabContextMenu: React.FC<TimetableTabContextMenuProps> = ({ ancho
 
       const newDisplayTimetables = {
         ...displayTimetables,
-        [term]: displayTimetables[term].filter((timetable: TimetableData, index: number) => index !== targetIndex),
+        [term]: displayTimetables[term].filter((_: TimetableData, index: number) => index !== targetIndex),
       };
       // Updating the timetables state to the new timetable index
       setDisplayTimetables(newDisplayTimetables);
@@ -128,7 +135,7 @@ const TimetableTabContextMenu: React.FC<TimetableTabContextMenuProps> = ({ ancho
         return;
       });
     } else {
-      setAlertMsg('Must have at least 1 timetable');
+      setAlertMsg('Must have at least 1 timetable.');
       setErrorVisibility(true);
     }
   };
@@ -183,6 +190,7 @@ const TimetableTabContextMenu: React.FC<TimetableTabContextMenuProps> = ({ ancho
   const handleDuplicateTimetable = () => {
     if (displayTimetables[term].length >= TIMETABLE_LIMIT) {
       setAlertMsg('Maximum timetables reached');
+
       setErrorVisibility(true);
     } else {
       const currentTimetable = displayTimetables[term][selectedTimetable];
@@ -215,6 +223,24 @@ const TimetableTabContextMenu: React.FC<TimetableTabContextMenuProps> = ({ ancho
     }
   };
 
+  const handleSetPrimary = () => {
+    if (displayTimetables[term].findIndex((t: TimetableData, _: number) => t.isPrimary) === selectedTimetable) {
+      return;
+    }
+    displayTimetables[term].forEach((e) => {
+      e.isPrimary = false;
+    });
+    displayTimetables[term][selectedTimetable].isPrimary = true;
+    storage.set('timetables', displayTimetables);
+    handleMenuClose();
+  };
+
+  const isPrimarySelected = () => {
+    return displayTimetables[term] !== undefined
+      ? displayTimetables[term].findIndex((t: TimetableData, _: number) => t.isPrimary) === selectedTimetable
+      : false;
+  };
+
   /**
    * Menu shortcut (hotkey) event listeners
    */
@@ -330,6 +356,14 @@ const TimetableTabContextMenu: React.FC<TimetableTabContextMenuProps> = ({ ancho
         onClose={handleMenuClose}
         autoFocus={false}
       >
+        <Tooltip title={isPrimarySelected() ? 'This timetable is already primary' : ''}>
+          <MenuItem onClick={handleSetPrimary} sx={{ opacity: isPrimarySelected() ? 0.5 : 1 }}>
+            <ListItemIcon>
+              <Star fontSize="small" />
+            </ListItemIcon>
+            <ListItemText>Set as primary</ListItemText>
+          </MenuItem>
+        </Tooltip>
         <MenuItem onClick={handleRenameOpen}>
           <ListItemIcon>
             <Edit fontSize="small" />

client/src/components/timetableTabs/TimetableTabs.tsx

@@ -1,5 +1,5 @@
-import { Add, MoreHoriz } from '@mui/icons-material';
-import { Box, Tooltip } from '@mui/material';
+import { Add, MoreHoriz, Star } from '@mui/icons-material';
+import { Box, Icon, Tooltip } from '@mui/material';
 import React, { useContext, useEffect, useState } from 'react';
 import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
 import { v4 as uuidv4 } from 'uuid';
@@ -87,6 +87,7 @@ const TimetableTabs: React.FC = () => {
       const newTimetable: TimetableData = {
         name: 'New Timetable',
         id: uuidv4(),
+        isPrimary: false,
         selectedCourses: [],
         selectedClasses: {},
         createdEvents: {},
@@ -184,6 +185,11 @@ const TimetableTabs: React.FC = () => {
                               {...props.dragHandleProps}
                               sx={TabStyle(index, selectedTimetable)}
                             >
+                              {displayTimetables[term][index].isPrimary && (
+                                <Tooltip title="A primary timetable is the timetable for social features.">
+                                  <Star fontSize="small" className="pr-1.5"></Star>
+                                </Tooltip>
+                              )}
                               {timetable.name}
                               {selectedTimetable === index ? (
                                 <StyledSpan onClick={handleMenuClick}>

client/src/context/UserContext.tsx

@@ -72,7 +72,6 @@ const UserContextProvider = ({ children }: UserContextProviderProps) => {
       const timetables = await Promise.all(
         res.data.timetables.map((timetable: TimetableDTO) => parseTimetableDTO(timetable, year)),
       );
-
       // Unpack timetables based on key
       const timetableMap: DisplayTimetablesMap = {};
 
@@ -93,6 +92,10 @@ const UserContextProvider = ({ children }: UserContextProviderProps) => {
         timetableMap[term] = createDefaultTimetable(res.data.userID);
       }
       setDisplayTimetables({ ...timetableMap });
+      
+      Object.keys(timetableMap).forEach(() =>{
+        if (timetableMap[term].every((t) => !t.isPrimary)) timetableMap[term][0].isPrimary = true;
+      })
 
       // TODO: check if this conditional is necessary
       if (timetableMap[term] && timetableMap[term][0]) {

client/src/interfaces/Periods.ts

@@ -46,6 +46,7 @@ export interface ClassData {
 export interface TimetableData {
   name: string;
   id: string;
+  isPrimary: boolean;
   selectedCourses: CourseData[];
   selectedClasses: SelectedClasses;
   createdEvents: CreatedEvents;
@@ -100,6 +101,7 @@ export interface ScrapedClassDTO {
 export interface TimetableDTO {
   id: string;
   name: string;
+  isPrimary: boolean;
   selectedCourses: string[];
   selectedClasses: ScrapedClassDTO[];
   createdEvents: EventDTO[];

client/src/utils/syncTimetables.ts

@@ -146,6 +146,7 @@ const parseTimetableDTO = async (timetableDTO: TimetableDTO, currentYear: string
   const parsedTimetable: TimetableData = {
     id: timetableDTO.id,
     name: timetableDTO.name,
+    isPrimary: timetableDTO.isPrimary,
     selectedCourses: courseInfo,
     selectedClasses: selectedClasses,
     createdEvents: createdEvents,

client/src/utils/timetableHelpers.ts

@@ -149,6 +149,7 @@ const createDefaultTimetable = (userID: string | undefined): TimetableData[] =>
   const defaultTimetable = {
     name: 'My timetable',
     id: uuidv4(),
+    isPrimary: true,
     selectedCourses: [],
     selectedClasses: {},
     createdEvents: {},

server/prisma/migrations/20250529041455_primary_timetable/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "timetables" ADD COLUMN     "isPrimary" BOOLEAN NOT NULL DEFAULT false;

server/prisma/schema.prisma

@@ -82,6 +82,7 @@ model Class {
 model Timetable {
   id              String   @id @unique @default(uuid())
   name            String
+  isPrimary       Boolean  @default(false)
   selectedCourses String[]
   selectedClasses Class[]
   createdEvents   Event[]

server/src/user/dto/timetable.dto.ts

@@ -1,8 +1,10 @@
-import { IsArray, IsString } from 'class-validator';
+import { IsArray, IsBoolean, IsString } from 'class-validator';
 
 export class TimetableDto {
   @IsString()
   id: string; // Randomly generated on the backend
+  @IsBoolean()
+  isPrimary: boolean;
 
   @IsArray()
   @IsString({ each: true })
@@ -16,6 +18,8 @@ export class TimetableDto {
 export class ReconstructedTimetableDto {
   @IsString()
   id: string; // Randomly generated on the backend
+  @IsBoolean()
+  isPrimary: boolean;
 
   @IsArray()
   @IsString({ each: true })

server/src/user/user.controller.ts

@@ -116,6 +116,7 @@ export class UserController {
   createUserTimetable(
     @Request() req,
     @Body('userId') userId: string,
+    @Body('isPrimary') isPrimary: boolean,
     @Body('selectedCourses') selectedCourses: string[],
     @Body('selectedClasses') selectedClasses: ClassDto[],
     @Body('createdEvents') createdEvents: EventDto[],
@@ -132,6 +133,7 @@ export class UserController {
     return this.userService
       .createUserTimetable(
         userId,
+        isPrimary,
         selectedCourses,
         selectedClasses,
         createdEvents,