working on context menu

nextjs/src/app/api/courses/[courseName]/modules/[moduleName]/assignments/[assignmentName]/route.ts

@@ -74,3 +74,21 @@ export const POST = async (
     });
     return Response.json({});
   });
+
+export const DELETE = async (
+  _request: Request,
+  {
+    params: { courseName, moduleName, assignmentName },
+  }: {
+    params: { courseName: string; moduleName: string; assignmentName: string };
+  }
+) =>
+  await withErrorHandling(async () => {
+    fileStorageService.assignments.delete({
+      courseName,
+      moduleName,
+      assignmentName,
+    });
+
+    return Response.json({});
+  });

nextjs/src/app/api/courses/[courseName]/modules/[moduleName]/pages/[pageName]/route.ts

@@ -61,3 +61,18 @@ export const POST = async (
     );
     return Response.json({});
   });
+  
+export const DELETE = async (
+  _request: Request,
+  {
+    params: { courseName, moduleName, pageName },
+  }: { params: { courseName: string; moduleName: string; pageName: string } }
+) =>
+  await withErrorHandling(async () => {
+    fileStorageService.pages.delete({
+      courseName,
+      moduleName,
+      pageName,
+    });
+    return Response.json({});
+  });

nextjs/src/app/api/courses/[courseName]/modules/[moduleName]/quizzes/[quizName]/route.ts

@@ -40,8 +40,7 @@ export const PUT = async (
     if (
       previousModuleName &&
       previousQuizName &&
-      (quiz.name !== previousQuizName ||
+      (quiz.name !== previousQuizName || moduleName !== previousModuleName)
-        moduleName !== previousModuleName)
     ) {
       fileStorageService.quizzes.delete({
         courseName,
@@ -68,3 +67,18 @@ export const POST = async (
     );
     return Response.json({});
   });
+export const DELETE = async (
+  _request: Request,
+  {
+    params: { courseName, moduleName, quizName },
+  }: { params: { courseName: string; moduleName: string; quizName: string } }
+) =>
+  await withErrorHandling(async () => {
+    fileStorageService.quizzes.delete({
+      courseName,
+      moduleName,
+      quizName,
+    });
+
+    return Response.json({});
+  });

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

@@ -12,6 +12,8 @@ import { getLectureUrl } from "@/services/urlUtils";
 import DropTargetStyling from "../../../../../components/DropTargetStyling";
 import { ItemInDay } from "./ItemInDay";
 import { useTodaysItems } from "./useTodaysItems";
+import { useState } from "react";
+import { DayContextMenu } from "./DayContextMenu";
 
 export default function Day({ day, month }: { day: string; month: number }) {
   const dayAsDate = getDateFromStringOrThrow(
@@ -24,6 +26,9 @@ export default function Day({ day, month }: { day: string; month: number }) {
 
   const { data: settings } = useLocalCourseSettingsQuery();
   const { itemDropOnDay } = useDraggingContext();
+  const [contextCoordinates, setContextCoordinates] = useState<
+    { x: number; y: number } | undefined
+  >();
 
   const { todaysAssignments, todaysQuizzes, todaysPages } = useTodaysItems(day);
 
@@ -43,8 +48,17 @@ export default function Day({ day, month }: { day: string; month: number }) {
       className={" rounded-lg m-1 min-h-10 " + meetingClasses + monthClass}
       onDrop={(e) => itemDropOnDay(e, day)}
       onDragOver={(e) => e.preventDefault()}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        setContextCoordinates({ x: e.pageX, y: e.pageY });
+      }}
     >
       <DropTargetStyling draggingClassName="bg-slate-900 shadow-[0_0px_10px_0px] shadow-blue-800/50 ">
+        <DayContextMenu
+          day={day}
+          coordinates={contextCoordinates}
+          hideContextMenu={() => setContextCoordinates(undefined)}
+        />
         <DayTitle day={day} dayAsDate={dayAsDate} />
         <div>
           {todaysAssignments.map(

nextjs/src/app/course/[courseName]/calendar/day/DayContextMenu.tsx

@@ -0,0 +1,70 @@
+import Modal from "@/components/Modal";
+import React, { FC, useEffect, useRef } from "react";
+import NewItemForm from "../../modules/NewItemForm";
+
+export const DayContextMenu: FC<{
+  coordinates?: { x: number; y: number };
+  hideContextMenu: () => void;
+  day: string;
+}> = ({ coordinates, hideContextMenu, day }) => {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // const handleContextMenu = (event: MouseEvent) => {
+  //   event.preventDefault();
+  //   setPosition({ x: event.pageX, y: event.pageY });
+  //   setVisible(true);
+  // };
+
+  const handleClick = (event: MouseEvent) => {
+    if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+      hideContextMenu();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("click", handleClick);
+
+    return () => {
+      document.removeEventListener("click", handleClick);
+    };
+  }, []);
+  
+  return (
+    <div
+      className={
+        "absolute z-10 border bg-slate-900 border-slate-300 rounded shadow-lg w-48 " +
+        (!coordinates && "hidden")
+      }
+      style={{ top: coordinates?.y, left: coordinates?.x }}
+      onMouseDown={(e) => {
+        console.log(e.target);
+        e.stopPropagation();
+        hideContextMenu();
+      }}
+      ref={menuRef}
+    >
+      <Modal buttonText="Add Module Item">
+        {({ closeModal }) => (
+          <div>
+            <NewItemForm
+              creationDate={day}
+              onCreate={() => {
+                closeModal();
+                hideContextMenu();
+              }}
+            />
+            <br />
+            <button
+              onClick={() => {
+                closeModal();
+                hideContextMenu();
+              }}
+            >
+              close
+            </button>
+          </div>
+        )}
+      </Modal>
+    </div>
+  );
+};

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

@@ -1,30 +1,55 @@
 "use client";
 import ButtonSelect from "@/components/ButtonSelect";
+import SelectInput from "@/components/form/SelectInput";
 import TextInput from "@/components/form/TextInput";
 import { Spinner } from "@/components/Spinner";
 import { useCreateAssignmentMutation } from "@/hooks/localCourse/assignmentHooks";
+import { useModuleNamesQuery } from "@/hooks/localCourse/localCourseModuleHooks";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
 import { useCreatePageMutation } from "@/hooks/localCourse/pageHooks";
 import { useCreateQuizMutation } from "@/hooks/localCourse/quizHooks";
 import { AssignmentSubmissionType } from "@/models/local/assignment/assignmentSubmissionType";
 import { LocalAssignmentGroup } from "@/models/local/assignment/localAssignmentGroup";
-import { dateToMarkdownString } from "@/models/local/timeUtils";
+import {
+  dateToMarkdownString,
+  getDateFromString,
+} from "@/models/local/timeUtils";
 import React, { useState } from "react";
 
 export default function NewItemForm({
-  moduleName,
+  moduleName: defaultModuleName,
   onCreate = () => {},
+  creationDate,
 }: {
-  moduleName: string;
+  moduleName?: string;
+  creationDate?: string;
   onCreate?: () => void;
 }) {
+  const { data: settings } = useLocalCourseSettingsQuery();
+  const { data: modules } = useModuleNamesQuery();
   const [type, setType] = useState<"Assignment" | "Quiz" | "Page">(
     "Assignment"
   );
+
+  const [moduleName, setModuleName] = useState<string | undefined>(
+    defaultModuleName
+  );
+
   const [name, setName] = useState("");
+
+  const defaultDate = getDateFromString(
+    creationDate ? creationDate : dateToMarkdownString(new Date())
+  );
+  defaultDate?.setMinutes(settings.defaultDueTime.minute);
+  defaultDate?.setHours(settings.defaultDueTime.hour);
+  defaultDate?.setSeconds(0);
+
+  const [dueDate, setDueDate] = useState(
+    dateToMarkdownString(defaultDate ?? new Date())
+  );
   const [assignmentGroup, setAssignmentGroup] =
     useState<LocalAssignmentGroup>();
-  const { data: settings } = useLocalCourseSettingsQuery();
+
   const createAssignment = useCreateAssignmentMutation();
   const createPage = useCreatePageMutation();
   const createQuiz = useCreateQuizMutation();
@@ -37,8 +62,15 @@ export default function NewItemForm({
       className="flex flex-col gap-3"
       onSubmit={(e) => {
         e.preventDefault();
-        const dueAt = dateToMarkdownString(new Date());
+        const dueAt =
+          dueDate === ""
+            ? dueDate
+            : dateToMarkdownString(defaultDate ?? new Date());
+
         console.log("submitting");
+        if (!moduleName) {
+          return;
+        }
         if (type === "Assignment") {
           createAssignment.mutate({
             assignment: {
@@ -84,6 +116,22 @@ export default function NewItemForm({
         onCreate();
       }}
     >
+      <div>
+        <TextInput
+          label={type + " due date"}
+          value={dueDate ?? ""}
+          setValue={setDueDate}
+        />
+      </div>
+      <div>
+        <SelectInput
+          value={moduleName}
+          setValue={(m) => setModuleName(m)}
+          label={"Module"}
+          options={modules}
+          getOptionName={(m) => m}
+        />
+      </div>
       <div>
         <ButtonSelect<"Assignment" | "Quiz" | "Page">
           options={["Assignment", "Quiz", "Page"]}

nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPageButtons.tsx

@@ -1,4 +1,5 @@
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
+import Modal from "@/components/Modal";
 import { Spinner } from "@/components/Spinner";
 import {
   useCanvasPagesQuery,
@@ -7,10 +8,14 @@ import {
   useUpdateCanvasPageMutation,
 } from "@/hooks/canvas/canvasPageHooks";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
-import { usePageQuery } from "@/hooks/localCourse/pageHooks";
+import {
+  useDeletePageMutation,
+  usePageQuery,
+} from "@/hooks/localCourse/pageHooks";
 import { baseCanvasUrl } from "@/services/canvas/canvasServiceUtils";
 import { getCourseUrl } from "@/services/urlUtils";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import React from "react";
 
 export default function EditPageButtons({
@@ -20,6 +25,7 @@ export default function EditPageButtons({
   pageName: string;
   moduleName: string;
 }) {
+  const router = useRouter();
   const { courseName } = useCourseContext();
   const { data: settings } = useLocalCourseSettingsQuery();
   const { data: page } = usePageQuery(moduleName, pageName);
@@ -27,6 +33,7 @@ export default function EditPageButtons({
   const createPageInCanvas = useCreateCanvasPageMutation();
   const updatePageInCanvas = useUpdateCanvasPageMutation();
   const deletePageInCanvas = useDeleteCanvasPageMutation();
+  const deletePageLocal = useDeletePageMutation();
 
   const pageInCanvas = canvasPages?.find((p) => p.title === pageName);
 
@@ -77,6 +84,36 @@ export default function EditPageButtons({
           Delete from Canvas
         </button>
       )}
+
+      {!pageInCanvas && (
+        <Modal
+          buttonText="Delete Localy"
+          buttonClass="btn-danger"
+          modalWidth="w-1/5"
+        >
+          {({ closeModal }) => (
+            <div>
+              <div className="text-center">
+                Are you sure you want to delete this page locally?
+              </div>
+              <br />
+              <div className="flex justify-around gap-3">
+                <button
+                  onClick={async () => {
+                    deletePageLocal
+                      .mutateAsync({ moduleName, pageName })
+                      .then(() => router.push(getCourseUrl(courseName)));
+                  }}
+                  className="btn-danger"
+                >
+                  Yes
+                </button>
+                <button onClick={closeModal}>No</button>
+              </div>
+            </div>
+          )}
+        </Modal>
+      )}
       <Link className="btn" href={getCourseUrl(courseName)} shallow={true}>
         Go Back
       </Link>

nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx

@@ -115,7 +115,7 @@ export default function EditQuiz({
 
   return (
     <div className="h-full flex flex-col align-middle px-1">
-      <div className={"min-h-96 flex flex-row w-full"}>
+      <div className={"min-h-96 h-full flex flex-row w-full"}>
         {showHelp && (
           <pre className=" max-w-96">
             <code>{helpString}</code>

nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/QuizButton.tsx

@@ -1,4 +1,5 @@
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
+import Modal from "@/components/Modal";
 import { Spinner } from "@/components/Spinner";
 import {
   useCanvasQuizzesQuery,
@@ -6,10 +7,14 @@ import {
   useDeleteQuizFromCanvasMutation,
 } from "@/hooks/canvas/canvasQuizHooks";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
-import { useQuizQuery } from "@/hooks/localCourse/quizHooks";
+import {
+  useDeleteQuizMutation,
+  useQuizQuery,
+} from "@/hooks/localCourse/quizHooks";
 import { baseCanvasUrl } from "@/services/canvas/canvasServiceUtils";
 import { getCourseUrl } from "@/services/urlUtils";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 
 export function QuizButtons({
   moduleName,
@@ -20,12 +25,14 @@ export function QuizButtons({
   moduleName: string;
   toggleHelp: () => void;
 }) {
+  const router = useRouter();
   const { courseName } = useCourseContext();
   const { data: settings } = useLocalCourseSettingsQuery();
   const { data: canvasQuizzes } = useCanvasQuizzesQuery();
   const { data: quiz } = useQuizQuery(moduleName, quizName);
   const addToCanvas = useAddQuizToCanvasMutation();
   const deleteFromCanvas = useDeleteQuizFromCanvasMutation();
+  const deleteLocal = useDeleteQuizMutation();
 
   const quizInCanvas = canvasQuizzes.find((c) => c.title === quizName);
 
@@ -65,6 +72,35 @@ export function QuizButtons({
             Delete from Canvas
           </button>
         )}
+        {!quizInCanvas && (
+          <Modal
+            buttonText="Delete Localy"
+            buttonClass="btn-danger"
+            modalWidth="w-1/5"
+          >
+            {({ closeModal }) => (
+              <div>
+                <div className="text-center">
+                  Are you sure you want to delete this quiz locally?
+                </div>
+                <br />
+                <div className="flex justify-around gap-3">
+                  <button
+                    onClick={async () => {
+                      deleteLocal
+                        .mutateAsync({ moduleName, quizName })
+                        .then(() => router.push(getCourseUrl(courseName)));
+                    }}
+                    className="btn-danger"
+                  >
+                    Yes
+                  </button>
+                  <button onClick={closeModal}>No</button>
+                </div>
+              </div>
+            )}
+          </Modal>
+        )}
 
         <Link className="btn" href={getCourseUrl(courseName)} shallow={true}>
           Go Back

nextjs/src/components/Modal.tsx

@@ -5,10 +5,12 @@ export default function Modal({
   children,
   buttonText,
   buttonClass = "",
+  modalWidth = "w-1/3",
 }: {
   children: (props: { closeModal: () => void }) => ReactNode;
   buttonText: string;
   buttonClass?: string;
+  modalWidth?: string;
 }) {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -35,7 +37,8 @@ export default function Modal({
             e.stopPropagation();
           }}
           className={
-            ` bg-slate-800 p-6 rounded-lg shadow-lg w-1/3  ` +
+            ` bg-slate-800 p-6 rounded-lg shadow-lg ` +
+            modalWidth +
             ` transition-all duration-400 ` +
             ` ${isOpen ? "opacity-100" : "opacity-0"}`
           }

nextjs/src/hooks/localCourse/pageHooks.ts

@@ -133,9 +133,9 @@ export const useUpdatePageMutation = () => {
       queryClient.invalidateQueries({
         queryKey: localCourseKeys.page(courseName, moduleName, pageName),
       });
-      // queryClient.invalidateQueries({
+      queryClient.invalidateQueries({
-      //   queryKey: localCourseKeys.pageNames(courseName, moduleName),
+        queryKey: localCourseKeys.pageNames(courseName, moduleName),
-      // });
+      });
     },
   });
 };
@@ -176,3 +176,41 @@ export const useCreatePageMutation = () => {
     },
   });
 };
+
+export const useDeletePageMutation = () => {
+  const { courseName } = useCourseContext();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      moduleName,
+      pageName,
+    }: {
+      moduleName: string;
+      pageName: string;
+    }) => {
+      queryClient.removeQueries({
+        queryKey: localCourseKeys.page(courseName, moduleName, pageName),
+      });
+      queryClient.removeQueries({
+        queryKey: localCourseKeys.pageNames(courseName, moduleName),
+      });
+      const url =
+        "/api/courses/" +
+        encodeURIComponent(courseName) +
+        "/modules/" +
+        encodeURIComponent(moduleName) +
+        "/pages/" +
+        encodeURIComponent(pageName);
+      await axiosClient.delete(url);
+
+    },
+    onSuccess: (_, { moduleName, pageName }) => {
+      queryClient.invalidateQueries({
+        queryKey: localCourseKeys.pageNames(courseName, moduleName),
+      });
+      queryClient.invalidateQueries({
+        queryKey: localCourseKeys.page(courseName, moduleName, pageName),
+      });
+    },
+  });
+};

nextjs/src/hooks/localCourse/quizHooks.ts

@@ -173,3 +173,37 @@ export const useCreateQuizMutation = () => {
     },
   });
 };
+
+export const useDeleteQuizMutation = () => {
+  const { courseName } = useCourseContext();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      moduleName,
+      quizName,
+    }: {
+      moduleName: string;
+      quizName: string;
+    }) => {
+      const url =
+        "/api/courses/" +
+        encodeURIComponent(courseName) +
+        "/modules/" +
+        encodeURIComponent(moduleName) +
+        "/quizzes/" +
+        encodeURIComponent(quizName);
+      await axiosClient.delete(url);
+      queryClient.removeQueries({
+        queryKey: localCourseKeys.quizNames(courseName, moduleName),
+      });
+    },
+    onSuccess: async (_, { moduleName, quizName }) => {
+      await queryClient.invalidateQueries({
+        queryKey: localCourseKeys.quizNames(courseName, moduleName),
+      });
+      await queryClient.invalidateQueries({
+        queryKey: localCourseKeys.quiz(courseName, moduleName, quizName),
+      });
+    },
+  });
+};