working on context menu

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