alex/canvasManagement
1
0
Fork 0
mirror of https://github.com/alexmickelson/canvasManagement.git synced 2026-03-26 07:38:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

updated new item creation

Browse Source
This commit is contained in:
Alex Mickelson
2024-09-23 20:17:08 -06:00
parent 060af501f2
commit 2d6a8d7c9f
4 changed files with 46 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,7 +13,8 @@ import DropTargetStyling from "../../../../../components/DropTargetStyling";
import { ItemInDay } from "./ItemInDay";
import { useTodaysItems } from "./useTodaysItems";
import { useState } from "react";
import { DayContextMenu } from "./DayContextMenu";
import Modal from "@/components/Modal";
import NewItemForm from "../../modules/NewItemForm";
export default function Day({ day, month }: { day: string; month: number }) {
const dayAsDate = getDateFromStringOrThrow(
@@ -54,11 +55,12 @@ export default function Day({ day, month }: { day: string; month: number }) {
}}
>
<DropTargetStyling draggingClassName="bg-slate-900 shadow-[0_0px_10px_0px] shadow-blue-800/50 ">
<DayContextMenu
{/* <DayContextMenu
day={day}
coordinates={contextCoordinates}
hideContextMenu={() => setContextCoordinates(undefined)}
/>
/> */}
<DayTitle day={day} dayAsDate={dayAsDate} />
<div>
{todaysAssignments.map(
@@ -102,8 +104,30 @@ export default function Day({ day, month }: { day: string; month: number }) {
function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) {
const { courseName } = useCourseContext();
return (
<Link className="ms-1" href={getLectureUrl(courseName, day)}>
{dayAsDate.getDate()}
</Link>
<div className="flex justify-between">
<Link className="ms-1" href={getLectureUrl(courseName, day)}>
{dayAsDate.getDate()}
</Link>
<Modal buttonText="+" buttonClass="unstyled hover:font-bold px-1 mb-auto mt-0 pt-0">
{({ closeModal }) => (
<div>
<NewItemForm
creationDate={day}
onCreate={() => {
closeModal();
}}
/>
<br />
<button
onClick={() => {
closeModal();
}}
>
close
</button>
</div>
)}
</Modal>
</div>
);
}

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

@@ -1,70 +0,0 @@
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>
);
};