feat: Drag and drop schedules

apps/backend/src/modules/schedule/typedefs/schedule.ts

@@ -3,7 +3,7 @@ import { gql } from "graphql-tag";
 const typedef = gql`
   type SelectedClass {
     class: Class!
-    selectedSections: [String!]
+    selectedSections: [Int!]
   }
 
   type Event {
@@ -16,7 +16,7 @@ const typedef = gql`
   }
 
   type Schedule {
-    _id: ID
+    _id: ID!
     name: String!
     createdBy: String!
     year: Int!
@@ -45,7 +45,7 @@ const typedef = gql`
     subject: String!
     courseNumber: String!
     number: String!
-    sections: [String!]!
+    sections: [Int!]!
   }
 
   input UpdateScheduleInput {

apps/frontend/schema.graphql

@@ -57,6 +57,13 @@ type Query {
     classNumber: String!
     number: String!
   ): Section
+  enrollment(
+    year: Int!
+    semester: Semester!
+    subject: String!
+    courseNumber: String!
+    number: String!
+  ): Section!
 }
 
 input BookmarkedCourseInput {
@@ -131,7 +138,7 @@ enum Semester {
 
 type SelectedClass {
   class: Class!
-  selectedSections: [String!]
+  selectedSections: [Int!]
 }
 
 type Event {
@@ -144,7 +151,7 @@ type Event {
 }
 
 type Schedule {
-  _id: ID
+  _id: ID!
   name: String!
   createdBy: String!
   year: Int!
@@ -168,7 +175,7 @@ input SelectedClassInput {
   subject: String!
   courseNumber: String!
   number: String!
-  sections: [String!]!
+  sections: [Int!]!
 }
 
 input UpdateScheduleInput {

apps/frontend/src/app/Plan/Term/Catalog/Catalog.module.scss

@@ -1,9 +1,7 @@
 .content {
   height: 100dvh;
-  position: fixed;
   left: 0;
   top: 0;
-  z-index: 989;
   display: flex;
   flex-direction: column;
 

apps/frontend/src/app/Schedule/Editor/SideBar/Catalog/Catalog.module.scss

@@ -1,9 +1,7 @@
 .content {
   height: 100dvh;
-  position: fixed;
   left: 0;
   top: 0;
-  z-index: 989;
   display: flex;
   flex-direction: column;
 

apps/frontend/src/app/Schedule/Editor/SideBar/Class/Class.module.scss

@@ -1,6 +1,27 @@
 .root {
   display: flex;
 
+  &:global(.draggable-mirror) {
+    border-color: var(--blue-500);
+    z-index: 999;
+    box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
+  }
+
+  &:global(.draggable-source--is-dragging) {
+    background-color: transparent;
+    box-shadow: unset;
+    border-style: dashed;
+
+    .body {
+      visibility: hidden;
+    }
+  }
+
+  &:not(:global(.draggable-source--is-dragging)) {
+    box-shadow: 0 1px 2px rgb(0 0 0 / 2.5%);
+    background-color: var(--foreground-color);
+  }
+
   .border {
     width: 8px;
     background-color: var(--purple-500);
@@ -100,4 +121,4 @@
       }
     }
   }
-}
+}

apps/frontend/src/app/Schedule/Editor/SideBar/Class/index.tsx

@@ -49,7 +49,7 @@ export default function Class({
   }, [_class]);
 
   return (
-    <div className={styles.root}>
+    <div className={styles.root} data-draggable>
       <div
         className={styles.border}
         style={{

apps/frontend/src/app/Schedule/Editor/SideBar/index.tsx

@@ -1,5 +1,6 @@
-import { useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 
+import { Plugins, Sortable } from "@shopify/draggable";
 import { Plus } from "iconoir-react";
 
 import { Button } from "@repo/theme";
@@ -15,6 +16,7 @@ import styles from "./SideBar.module.scss";
 interface SideBarProps {
   schedule: ISchedule;
   expanded: boolean[];
+  onSortEnd: (previousIndex: number, currentIndex: number) => void;
   onClassSelect: (
     subject: string,
     courseNumber: string,
@@ -44,9 +46,39 @@ export default function SideBar({
   onSectionMouseOver,
   onSectionMouseOut,
   onExpandedChange,
+  onSortEnd,
 }: SideBarProps) {
+  const bodyRef = useRef<HTMLDivElement>(null);
+
   const [minimum, maximum] = useMemo(() => getUnits(schedule), [schedule]);
 
+  useEffect(() => {
+    if (!bodyRef.current) return;
+
+    const sortable = new Sortable(bodyRef.current, {
+      draggable: `[data-draggable]`,
+      distance: 8,
+      mirror: {
+        constrainDimensions: true,
+      },
+      plugins: [Plugins.ResizeMirror],
+    });
+
+    sortable.on("drag:stop", (event) => {
+      event.cancel();
+    });
+
+    sortable.on("sortable:stop", (event) => {
+      const { oldIndex, newIndex } = event;
+
+      onSortEnd(oldIndex, newIndex);
+    });
+
+    return () => {
+      sortable.destroy();
+    };
+  }, [onSortEnd]);
+
   return (
     <div className={styles.root}>
       <div className={styles.header}>
@@ -73,7 +105,7 @@ export default function SideBar({
           </Button>
         </Catalog>
       </div>
-      <div className={styles.body}>
+      <div className={styles.body} ref={bodyRef}>
         {schedule.classes.map((selectedClass, index) => {
           return (
             <Class

apps/frontend/src/app/Schedule/Editor/index.tsx

@@ -164,6 +164,41 @@ export default function Editor() {
     [setCurrentSection, tab]
   );
 
+  const handleSortEnd = useCallback(
+    (previousIndex: number, currentIndex: number) => {
+      // Clone the schedule for immutability
+      const _schedule = structuredClone(schedule);
+
+      const [removed] = _schedule.classes.splice(previousIndex, 1);
+
+      _schedule.classes.splice(currentIndex, 0, removed);
+
+      // Update the schedule
+      updateSchedule(
+        schedule._id,
+        {
+          classes: _schedule.classes.map(
+            ({
+              selectedSections,
+              class: { number, subject, courseNumber },
+            }) => ({
+              subject,
+              courseNumber,
+              number,
+              sections: selectedSections,
+            })
+          ),
+        },
+        {
+          optimisticResponse: {
+            updateSchedule: _schedule,
+          },
+        }
+      );
+    },
+    [schedule]
+  );
+
   const handleClassSelect = useCallback(
     async (subject: string, courseNumber: string, number: string) => {
       // Clone the schedule for immutability
@@ -178,6 +213,8 @@ export default function Editor() {
 
       // Move existing classes to the top rather than duplicating them
       if (existingClass) {
+        console.log("existingClass", existingClass);
+
         const index = _schedule.classes.findIndex(
           (selectedClass) =>
             selectedClass.class.subject === subject &&
@@ -282,7 +319,7 @@ export default function Editor() {
         }
       );
     },
-    [apolloClient, setExpanded]
+    [apolloClient, setExpanded, schedule]
   );
 
   const handleExpandedChange = (index: number, expanded: boolean) => {
@@ -347,6 +384,7 @@ export default function Editor() {
           onExpandedChange={handleExpandedChange}
           onSectionMouseOver={handleSectionMouseOver}
           onSectionMouseOut={() => setCurrentSection(null)}
+          onSortEnd={handleSortEnd}
         />
         <div className={styles.view} ref={bodyRef} id="boundary">
           {tab === 0 ? (

apps/frontend/src/components/ClassDrawer/ClassDrawer.module.scss

@@ -1,12 +1,10 @@
 .content {
   height: 100dvh;
-  position: fixed;
   right: 0;
   top: 0;
   background-color: var(--background-color);
   width: 640px;
   border-left: 1px solid var(--border-color);
-  z-index: 989;
   display: flex;
   flex-direction: column;
 

apps/frontend/src/components/CourseDrawer/CourseDrawer.module.scss

@@ -1,12 +1,10 @@
 .content {
   height: 100dvh;
-  position: fixed;
   right: 0;
   top: 0;
   background-color: var(--background-color);
   width: 640px;
   border-left: 1px solid var(--border-color);
-  z-index: 989;
   display: flex;
   flex-direction: column;
 

apps/frontend/src/components/Layout/Feedback/Feedback.module.scss

@@ -14,16 +14,11 @@
     height: 48px;
     transform: translateX(calc(100% - 48px));
     pointer-events: auto;
+    transition: transform 150ms ease-out;
 
     &:hover,
     &:focus {
-      animation: slideOut 250ms ease-in-out forwards;
+      transform: translateX(0);
     }
   }
 }
-
-@keyframes slideOut {
-  to {
-    transform: translateY(0);
-  }
-}