diff --git a/src/app/course/[courseName]/calendar/day/ItemInDay.tsx b/src/app/course/[courseName]/calendar/day/ItemInDay.tsx index e7987e8..2a2efe7 100644 --- a/src/app/course/[courseName]/calendar/day/ItemInDay.tsx +++ b/src/app/course/[courseName]/calendar/day/ItemInDay.tsx @@ -1,7 +1,8 @@ +"use client"; import { IModuleItem } from "@/features/local/modules/IModuleItem"; import { getModuleItemUrl } from "@/services/urlUtils"; import Link from "next/link"; -import { ReactNode } from "react"; +import { ReactNode, useCallback, useState } from "react"; import { useCourseContext } from "../../context/courseContext"; import { useTooltip } from "@/components/useTooltip"; import MarkdownDisplay from "@/components/MarkdownDisplay"; @@ -9,6 +10,31 @@ import { DraggableItem } from "../../context/drag/draggingContext"; import ClientOnly from "@/components/ClientOnly"; import { useDragStyleContext } from "../../context/drag/dragStyleContext"; import { Tooltip } from "../../../../../components/Tooltip"; +import { ContextMenu, ContextMenuItem } from "@/components/ContextMenu"; +import { + useCanvasAssignmentsQuery, + useUpdateAssignmentInCanvasMutation, + useDeleteAssignmentFromCanvasMutation, +} from "@/features/canvas/hooks/canvasAssignmentHooks"; +import { useLocalCourseSettingsQuery } from "@/features/local/course/localCoursesHooks"; +import { baseCanvasUrl } from "@/features/canvas/services/canvasServiceUtils"; +import { + useDeleteAssignmentMutation, + useCreateAssignmentMutation, +} from "@/features/local/assignments/assignmentHooks"; +import { LocalAssignment } from "@/features/local/assignments/models/localAssignment"; +import { useCalendarItemsContext } from "../../context/calendarItemsContext"; + +function getDuplicateName(name: string, existingNames: string[]): string { + const match = name.match(/^(.*)\s+(\d+)$/); + const baseName = match ? match[1] : name; + const startNum = match ? parseInt(match[2]) + 1 : 2; + let num = startNum; + while (existingNames.includes(`${baseName} ${num}`)) { + num++; + } + return `${baseName} ${num}`; +} function getPreviewContent( type: "assignment" | "page" | "quiz", @@ -60,6 +86,114 @@ export function ItemInDay({ const { setIsDragging } = useDragStyleContext(); const { visible, targetRef, showTooltip, hideTooltip } = useTooltip(500); + const [contextMenuPos, setContextMenuPos] = useState<{ + x: number; + y: number; + } | null>(null); + const [confirmingDelete, setConfirmingDelete] = useState(false); + + const { data: canvasAssignments } = useCanvasAssignmentsQuery(); + const { data: settings } = useLocalCourseSettingsQuery(); + const updateInCanvas = useUpdateAssignmentInCanvasMutation(); + const deleteFromCanvas = useDeleteAssignmentFromCanvasMutation(); + const deleteLocal = useDeleteAssignmentMutation(); + const createAssignment = useCreateAssignmentMutation(); + const calendarItems = useCalendarItemsContext(); + + const assignmentInCanvas = + type === "assignment" + ? canvasAssignments?.find((a) => a.name === item.name) + : undefined; + + const handleContextMenu = (e: React.MouseEvent) => { + if (type !== "assignment") return; + e.preventDefault(); + e.stopPropagation(); + setContextMenuPos({ x: e.clientX, y: e.clientY }); + setConfirmingDelete(false); + }; + + const closeContextMenu = useCallback(() => { + setContextMenuPos(null); + setConfirmingDelete(false); + }, []); + + const handleDuplicate = useCallback(() => { + const assignment = item as LocalAssignment; + const existingNames = Object.values(calendarItems).flatMap((modules) => + (modules[moduleName]?.assignments ?? []).map((a) => a.name) + ); + const newName = getDuplicateName(item.name, existingNames); + createAssignment.mutate({ + courseName, + moduleName, + assignmentName: newName, + assignment: { ...assignment, name: newName }, + }); + closeContextMenu(); + }, [ + item, + calendarItems, + moduleName, + createAssignment, + courseName, + closeContextMenu, + ]); + + const contextMenuItems: ContextMenuItem[] = confirmingDelete + ? [ + { label: "Delete from disk?", disabled: true }, + { + label: "Yes, delete", + variant: "danger", + onClick: () => { + deleteLocal.mutate({ courseName, moduleName, assignmentName: item.name }); + closeContextMenu(); + }, + }, + { label: "Cancel", onClick: closeContextMenu }, + ] + : [ + ...(assignmentInCanvas + ? [ + { + label: "View in Canvas", + href: `${baseCanvasUrl}/courses/${settings.canvasId}/assignments/${assignmentInCanvas.id}`, + }, + { + label: "Update in Canvas", + onClick: () => { + updateInCanvas.mutate({ + canvasAssignmentId: assignmentInCanvas.id, + assignment: item as LocalAssignment, + }); + closeContextMenu(); + }, + disabled: updateInCanvas.isPending, + }, + { + label: "Delete from Canvas", + variant: "danger" as const, + onClick: () => { + deleteFromCanvas.mutate({ + canvasAssignmentId: assignmentInCanvas.id, + assignmentName: item.name, + }); + closeContextMenu(); + }, + disabled: deleteFromCanvas.isPending, + }, + ] + : [ + { + label: "Delete from Disk", + variant: "danger" as const, + onClick: () => setConfirmingDelete(true), + }, + ]), + { label: "Duplicate", onClick: handleDuplicate }, + ]; + return (
{item.name} @@ -107,6 +242,14 @@ export function ItemInDay({ ) : ( )} + {contextMenuPos && type === "assignment" && ( + + )}
); diff --git a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx index 7c25fa1..16bb745 100644 --- a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx +++ b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx @@ -75,15 +75,14 @@ export default function AssignmentPreview({ {extraPoints !== 0 && (
{extraPoints} Extra Credit Points
)} -
+
{assignment.rubric.map((rubricItem, i) => ( -
{rubricItem.label}
-
- {rubricItem.points} - - {rubricItemIsExtraCredit(rubricItem) ? " - Extra Credit" : ""} +
+ {rubricItemIsExtraCredit(rubricItem) ? "Extra Credit" : ""}
+
{rubricItem.points}
+
{rubricItem.label}
))}
diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx new file mode 100644 index 0000000..e7c540b --- /dev/null +++ b/src/components/ContextMenu.tsx @@ -0,0 +1,78 @@ +"use client"; +import { useEffect, useRef } from "react"; + +export interface ContextMenuItem { + label: string; + onClick?: () => void; + href?: string; + variant?: "default" | "danger"; + disabled?: boolean; +} + +export function ContextMenu({ + x, + y, + items, + onClose, +}: { + x: number; + y: number; + items: ContextMenuItem[]; + onClose: () => void; +}) { + const ref = useRef(null); + + useEffect(() => { + const handleClickOutside = (e: MouseEvent) => { + if (ref.current && !ref.current.contains(e.target as Node)) { + onClose(); + } + }; + const handleEscape = (e: KeyboardEvent) => { + if (e.key === "Escape") onClose(); + }; + document.addEventListener("mousedown", handleClickOutside); + document.addEventListener("keydown", handleEscape); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + document.removeEventListener("keydown", handleEscape); + }; + }, [onClose]); + + return ( +
+ {items.map((item, i) => + item.href ? ( + + {item.label} + + ) : ( + + ) + )} +
+ ); +}