reassigning modules works

nextjs/src/app/course/[courseName]/calendar/Day.tsx

@@ -3,7 +3,7 @@ import {
   getDateFromStringOrThrow,
   getDateOnlyMarkdownString,
 } from "@/models/local/timeUtils";
-import { useDraggingContext } from "../context/draggingContext";
+import { DraggableItem, useDraggingContext } from "../context/draggingContext";
 import { useCalendarItemsContext } from "../context/calendarItemsContext";
 import { useCourseContext } from "../context/courseContext";
 import Link from "next/link";
@@ -40,7 +40,7 @@ export default function Day({ day, month }: { day: string; month: number }) {
   const meetingClasses = classOnThisDay ? " bg-slate-900 " : " ";
   const monthClass = isInSameMonth
     ? isToday
-      ? " border border-blue-700 border-[3px] shadow-[0_0px_10px_0px] shadow-blue-500/50 "
+      ? " border border-blue-700 shadow-[0_0px_10px_0px] shadow-blue-500/50 "
       : " border border-slate-700 "
     : " ";
 
@@ -50,7 +50,7 @@ export default function Day({ day, month }: { day: string; month: number }) {
       onDrop={(e) => itemDropOnDay(e, day)}
       onDragOver={(e) => e.preventDefault()}
     >
-      <DropTargetStyling draggingClassName="bg-slate-800 shadow-2xl ">
+      <DropTargetStyling draggingClassName="bg-slate-900 shadow-[0_0px_10px_0px] shadow-blue-800/50 ">
         <DayTitle day={day} dayAsDate={dayAsDate} />
         <div>
           {todaysAssignments.map(({ assignment, moduleName, status }) => (
@@ -192,8 +192,8 @@ function DraggableListItem({
       href={getModuleItemUrl(courseName, moduleName, type, item.name)}
       shallow={true}
       className={
-        " border rounded-sm px-1 mx-1 break-all mb-1 " +
-        "  bg-slate-800 " +
+        " border rounded-sm px-1 mx-1 break-words mb-1 " +
+        " bg-slate-800 " +
         " block " +
         (status === "localOnly" && " text-slate-500 border-slate-600 ") +
         (status === "unPublished" && " border-rose-900 ") +
@@ -202,14 +202,12 @@ function DraggableListItem({
       role="button"
       draggable="true"
       onDragStart={(e) => {
-        e.dataTransfer.setData(
-          "draggableItem",
-          JSON.stringify({
-            type,
-            item,
-            sourceModuleName: moduleName,
-          })
-        );
+        const draggableItem: DraggableItem = {
+          type,
+          item,
+          sourceModuleName: moduleName,
+        };
+        e.dataTransfer.setData("draggableItem", JSON.stringify(draggableItem));
         dragStart();
       }}
     >

nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx

@@ -1,6 +1,6 @@
 "use client";
-import { ReactNode, useCallback, DragEvent, useState } from "react";
-import { DraggingContext } from "./draggingContext";
+import { ReactNode, useCallback, DragEvent, useState, useEffect } from "react";
+import { DraggableItem, DraggingContext } from "./draggingContext";
 import { useUpdateQuizMutation } from "@/hooks/localCourse/quizHooks";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
 import { LocalQuiz } from "@/models/local/quiz/localQuiz";
@@ -24,12 +24,29 @@ export default function DraggingContextProvider({
   const { data: settings } = useLocalCourseSettingsQuery();
   const [isDragging, setIsDragging] = useState(false);
 
+  useEffect(() => {
+    const handleDrop = () => {
+      console.log("drop on window");
+      setIsDragging(false);
+    };
+    const preventDefault = (e: globalThis.DragEvent) => e.preventDefault();
+    if (typeof window !== "undefined") {
+      window.addEventListener("drop", handleDrop);
+      window.addEventListener("dragover", preventDefault);
+    }
+    return () => {
+      window.removeEventListener("drop", handleDrop);
+      window.addEventListener("dragover", preventDefault);
+    };
+  }, []);
+
   const dragStart = useCallback(() => setIsDragging(true), []);
 
   const itemDropOnModule = useCallback(
-    (e: DragEvent<HTMLDivElement>, moduleName: string) => {
+    (e: DragEvent<HTMLDivElement>, dropModuleName: string) => {
+      console.log("dropping on module");
       const rawData = e.dataTransfer.getData("draggableItem");
-      const itemBeingDragged = JSON.parse(rawData);
+      const itemBeingDragged: DraggableItem = JSON.parse(rawData);
 
       if (itemBeingDragged) {
         if (itemBeingDragged.type === "quiz") {
@@ -42,17 +59,45 @@ export default function DraggingContextProvider({
       }
       setIsDragging(false);
 
-      function updateQuiz() {}
-      function updateAssignment() {}
-      function updatePage() {}
+      function updateQuiz() {
+        const quiz = itemBeingDragged.item as LocalQuiz;
+
+        updateQuizMutation.mutate({
+          quiz: quiz,
+          quizName: quiz.name,
+          moduleName: dropModuleName,
+          previousModuleName: itemBeingDragged.sourceModuleName,
+          previousQuizName: quiz.name,
+        });
+      }
+      function updateAssignment() {
+        const assignment = itemBeingDragged.item as LocalAssignment;
+        updateAssignmentMutation.mutate({
+          assignment,
+          previousModuleName: itemBeingDragged.sourceModuleName,
+          moduleName: dropModuleName,
+          assignmentName: assignment.name,
+          previousAssignmentName: assignment.name,
+        });
+      }
+      function updatePage() {
+        const page = itemBeingDragged.item as LocalCoursePage;
+        updatePageMutation.mutate({
+          page,
+          moduleName: dropModuleName,
+          pageName: page.name,
+          previousPageName: page.name,
+          previousModuleName: itemBeingDragged.sourceModuleName,
+        });
+      }
     },
-    []
+    [updateAssignmentMutation, updatePageMutation, updateQuizMutation]
   );
 
   const itemDropOnDay = useCallback(
     (e: DragEvent<HTMLDivElement>, day: string) => {
       const rawData = e.dataTransfer.getData("draggableItem");
-      const itemBeingDragged = JSON.parse(rawData);
+      const itemBeingDragged: DraggableItem = JSON.parse(rawData);
 
       if (itemBeingDragged) {
         const dayAsDate = getDateWithDefaultDueTime();
@@ -85,6 +130,8 @@ export default function DraggingContextProvider({
           quiz: quiz,
           quizName: quiz.name,
           moduleName: itemBeingDragged.sourceModuleName,
+          previousModuleName: itemBeingDragged.sourceModuleName,
+          previousQuizName: quiz.name,
         });
       }
       function updatePage(dayAsDate: Date) {
@@ -97,6 +144,8 @@ export default function DraggingContextProvider({
           page,
           moduleName: itemBeingDragged.sourceModuleName,
           pageName: page.name,
+          previousPageName: page.name,
+          previousModuleName: itemBeingDragged.sourceModuleName,
         });
       }
       function updateAssignment(dayAsDate: Date) {
@@ -115,8 +164,10 @@ export default function DraggingContextProvider({
         };
         updateAssignmentMutation.mutate({
           assignment,
+          previousModuleName: itemBeingDragged.sourceModuleName,
           moduleName: itemBeingDragged.sourceModuleName,
           assignmentName: assignment.name,
+          previousAssignmentName: assignment.name,
         });
       }
     },

nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx

@@ -13,7 +13,6 @@ import {
 } from "@/hooks/localCourse/quizHooks";
 import { IModuleItem } from "@/models/local/IModuleItem";
 import {
-  dateToMarkdownString,
   getDateFromString,
   getDateFromStringOrThrow,
   getDateOnlyMarkdownString,
@@ -24,6 +23,8 @@ import NewItemForm from "./NewItemForm";
 import { ModuleCanvasStatus } from "./ModuleCanvasStatus";
 import ClientOnly from "@/components/ClientOnly";
 import ExpandIcon from "../../../../components/icons/ExpandIcon";
+import { useDraggingContext } from "../context/draggingContext";
+import DropTargetStyling from "../calendar/DropTargetStyling";
 
 export default function ExpandableModule({
   moduleName,
@@ -33,6 +34,7 @@ export default function ExpandableModule({
   const { data: assignmentNames } = useAssignmentNamesQuery(moduleName);
   const { data: quizNames } = useQuizNamesQuery(moduleName);
   const { data: pageNames } = usePageNamesQuery(moduleName);
+  const { itemDropOnModule } = useDraggingContext();
 
   const { data: assignments } = useAssignmentsQueries(
     moduleName,
@@ -74,56 +76,63 @@ export default function ExpandableModule({
   const expandRef = useRef<HTMLDivElement | null>(null);
 
   return (
-    <div className="bg-slate-800 rounded-lg p-3 border border-slate-600 mb-3">
-      <div
-        className="font-bold flex flex-row justify-between "
-        role="button"
-        onClick={() => setExpanded((e) => !e)}
-      >
-        <div>{moduleName}</div>
-        <div className="flex flex-row">
-          <ClientOnly>
-            <ModuleCanvasStatus moduleName={moduleName} />
-          </ClientOnly>
-          <ExpandIcon
-            style={{
-              ...(expanded ? { rotate: "-90deg" } : {}),
-            }}
-          />
-        </div>
-      </div>
-      <div
-        ref={expandRef}
-        className={` overflow-hidden transition-all `}
-        style={{
-          maxHeight: expanded ? expandRef?.current?.scrollHeight : "0",
-        }}
-      >
-        <Modal buttonText="New Item">
-          {({ closeModal }) => (
-            <div>
-              <NewItemForm moduleName={moduleName} onCreate={closeModal} />
-              <br />
-              <button onClick={closeModal}>close</button>
+    <div
+      className="bg-slate-800 rounded-lg border border-slate-600 mb-3"
+      onDrop={(e) => itemDropOnModule(e, moduleName)}
+      onDragOver={(e) => e.preventDefault()}
+    >
+      <DropTargetStyling draggingClassName="shadow-[0_0px_10px_0px] shadow-blue-500/50 ">
+        <div className=" p-3 ">
+          <div
+            className="font-bold flex flex-row justify-between "
+            role="button"
+            onClick={() => setExpanded((e) => !e)}
+          >
+            <div>{moduleName}</div>
+            <div className="flex flex-row">
+              <ClientOnly>
+                <ModuleCanvasStatus moduleName={moduleName} />
+              </ClientOnly>
+              <ExpandIcon
+                style={{
+                  ...(expanded ? { rotate: "-90deg" } : {}),
+                }}
+              />
             </div>
-          )}
-        </Modal>
-        <div className="grid grid-cols-[auto_1fr]">
+          </div>
+          <div
+            ref={expandRef}
+            className={` overflow-hidden transition-all `}
+            style={{
+              maxHeight: expanded ? expandRef?.current?.scrollHeight : "0",
+            }}
+          >
+            <Modal buttonText="New Item">
+              {({ closeModal }) => (
+                <div>
+                  <NewItemForm moduleName={moduleName} onCreate={closeModal} />
+                  <br />
+                  <button onClick={closeModal}>close</button>
+                </div>
+              )}
+            </Modal>
+            <div className="grid grid-cols-[auto_1fr]">
+              {moduleItems.map(({ type, item }) => {
+                const date = getDateFromString(item.dueAt);
 
-        {moduleItems.map(({ type, item }) => {
-          const date = getDateFromString(item.dueAt);
-          
-          return (
-            <Fragment key={item.name + type}>
-              <div className="text-end text-slate-500 me-2">
-                {date && getDateOnlyMarkdownString(date)}
-              </div>
-              <div className="">{item.name}</div>
-            </Fragment>
-          );
-        })}
+                return (
+                  <Fragment key={item.name + type}>
+                    <div className="text-end text-slate-500 me-2">
+                      {date && getDateOnlyMarkdownString(date)}
+                    </div>
+                    <div className="">{item.name}</div>
+                  </Fragment>
+                );
+              })}
+            </div>
+          </div>
         </div>
-      </div>
+      </DropTargetStyling>
     </div>
   );
 }

nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx

@@ -56,6 +56,8 @@ export default function EditAssignment({
             assignment: updatedAssignment,
             moduleName,
             assignmentName,
+            previousModuleName: moduleName,
+            previousAssignmentName: assignment.name,
           });
         }
         setError("");