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

dragging styling

Browse Source
This commit is contained in:
Alex Mickelson
2024-09-20 08:57:33 -06:00
parent 65cdb15e1c
commit 2b6b345f88
5 changed files with 74 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,6 +17,7 @@ import { LocalCoursePage } from "@/models/local/page/localCoursePage";
import { useCanvasAssignmentsQuery } from "@/hooks/canvas/canvasAssignmentHooks";
import { useCanvasQuizzesQuery } from "@/hooks/canvas/canvasQuizHooks";
import { useCanvasPagesQuery } from "@/hooks/canvas/canvasPageHooks";
import DropTargetStyling from "./DropTargetStyling";
export default function Day({ day, month }: { day: string; month: number }) {
const dayAsDate = getDateFromStringOrThrow(
@@ -45,40 +46,42 @@ export default function Day({ day, month }: { day: string; month: number }) {
return (
<div
className={" rounded-lg pb-4 m-1 " + meetingClasses + monthClass}
className={" rounded-lg m-1 min-h-10 " + meetingClasses + monthClass}
onDrop={(e) => itemDrop(e, day)}
onDragOver={(e) => e.preventDefault()}
>
<DayTitle day={day} dayAsDate={dayAsDate} />
<div>
{todaysAssignments.map(({ assignment, moduleName, status }) => (
<DraggableListItem
key={assignment.name}
type={"assignment"}
moduleName={moduleName}
item={assignment}
status={status}
/>
))}
{todaysQuizzes.map(({ quiz, moduleName, status }) => (
<DraggableListItem
key={quiz.name}
type={"quiz"}
moduleName={moduleName}
item={quiz}
status={status}
/>
))}
{todaysPages.map(({ page, moduleName, status }) => (
<DraggableListItem
key={page.name}
type={"page"}
moduleName={moduleName}
item={page}
status={status}
/>
))}
</div>
<DropTargetStyling draggingClassName="bg-slate-800 shadow-2xl ">
<DayTitle day={day} dayAsDate={dayAsDate} />
<div>
{todaysAssignments.map(({ assignment, moduleName, status }) => (
<DraggableListItem
key={assignment.name}
type={"assignment"}
moduleName={moduleName}
item={assignment}
status={status}
/>
))}
{todaysQuizzes.map(({ quiz, moduleName, status }) => (
<DraggableListItem
key={quiz.name}
type={"quiz"}
moduleName={moduleName}
item={quiz}
status={status}
/>
))}
{todaysPages.map(({ page, moduleName, status }) => (
<DraggableListItem
key={page.name}
type={"page"}
moduleName={moduleName}
item={page}
status={status}
/>
))}
</div>
</DropTargetStyling>
</div>
);
}
@@ -183,6 +186,7 @@ function DraggableListItem({
item: IModuleItem;
}) {
const { courseName } = useCourseContext();
const { dragStart } = useDraggingContext();
return (
<Link
href={getModuleItemUrl(courseName, moduleName, type, item.name)}
@@ -206,6 +210,7 @@ function DraggableListItem({
sourceModuleName: moduleName,
})
);
dragStart();
}}
>
{item.name}