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

updates to calendar

Browse Source
This commit is contained in:
Alex Mickelson
2024-09-20 15:57:40 -06:00
parent 345995bf2c
commit 158a5d82a2
4 changed files with 60 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,7 +10,7 @@ import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHoo
import { getDayOfWeek } from "@/models/local/localCourse";
import { getLectureUrl } from "@/services/urlUtils";
import DropTargetStyling from "../../../../../components/DropTargetStyling";
import { DraggableListItem } from "./DraggableListItem";
import { ItemInDay } from "./ItemInDay";
import { useTodaysItems } from "./useTodaysItems";
export default function Day({ day, month }: { day: string; month: number }) {
@@ -49,7 +49,7 @@ export default function Day({ day, month }: { day: string; month: number }) {
<div>
{todaysAssignments.map(
({ assignment, moduleName, status, message }) => (
<DraggableListItem
<ItemInDay
key={assignment.name}
type={"assignment"}
moduleName={moduleName}
@@ -60,7 +60,7 @@ export default function Day({ day, month }: { day: string; month: number }) {
)
)}
{todaysQuizzes.map(({ quiz, moduleName, status, message }) => (
<DraggableListItem
<ItemInDay
key={quiz.name}
type={"quiz"}
moduleName={moduleName}
@@ -70,7 +70,7 @@ export default function Day({ day, month }: { day: string; month: number }) {
/>
))}
{todaysPages.map(({ page, moduleName, status, message }) => (
<DraggableListItem
<ItemInDay
key={page.name}
type={"page"}
moduleName={moduleName}

7
nextjs/src/app/course/[courseName]/calendar/day/DraggableListItem.tsx → nextjs/src/app/course/[courseName]/calendar/day/ItemInDay.tsx
View File

@@ -3,9 +3,12 @@ import { getModuleItemUrl } from "@/services/urlUtils";
import Link from "next/link";
import { ReactNode } from "react";
import { useCourseContext } from "../../context/courseContext";
import { useDraggingContext, DraggableItem } from "../../context/draggingContext";
import {
useDraggingContext,
DraggableItem,
} from "../../context/draggingContext";
export function DraggableListItem({
export function ItemInDay({
type,
moduleName,
status,

2
nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx
View File

@@ -46,6 +46,7 @@ export default function DraggingContextProvider({
(e: DragEvent<HTMLDivElement>, dropModuleName: string) => {
console.log("dropping on module");
const rawData = e.dataTransfer.getData("draggableItem");
if (!rawData) return;
const itemBeingDragged: DraggableItem = JSON.parse(rawData);
if (itemBeingDragged) {
@@ -97,6 +98,7 @@ export default function DraggingContextProvider({
const itemDropOnDay = useCallback(
(e: DragEvent<HTMLDivElement>, day: string) => {
const rawData = e.dataTransfer.getData("draggableItem");
if (!rawData) return;
const itemBeingDragged: DraggableItem = JSON.parse(rawData);
if (itemBeingDragged) {

73
nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx
View File

@@ -23,7 +23,7 @@ import NewItemForm from "./NewItemForm";
import { ModuleCanvasStatus } from "./ModuleCanvasStatus";
import ClientOnly from "@/components/ClientOnly";
import ExpandIcon from "../../../../components/icons/ExpandIcon";
import { useDraggingContext } from "../context/draggingContext";
import { DraggableItem, useDraggingContext } from "../context/draggingContext";
import DropTargetStyling from "../../../../components/DropTargetStyling";
import Link from "next/link";
import { getModuleItemUrl } from "@/services/urlUtils";
@@ -45,7 +45,6 @@ export default function ExpandableModule({
);
const { data: quizzes } = useQuizzesQueries(moduleName, quizNames);
const { data: pages } = usePagesQueries(moduleName, pageNames);
const { courseName } = useCourseContext();
const [expanded, setExpanded] = useState(false);
@@ -121,28 +120,13 @@ export default function ExpandableModule({
)}
</Modal>
<div className="grid grid-cols-[auto_1fr]">
{moduleItems.map(({ type, item }) => {
const date = getDateFromString(item.dueAt);
return (
<Fragment key={item.name + type}>
<div className="text-end text-slate-500 me-2">
{date && getDateOnlyMarkdownString(date)}
</div>
<Link
href={getModuleItemUrl(
courseName,
moduleName,
type,
item.name
)}
className="transition-all hover:text-slate-50 hover:scale-105"
>
{item.name}
</Link>
</Fragment>
);
})}
{moduleItems.map(({ type, item }) => (
<ExpandableModuleItem
type={type}
item={item}
moduleName={moduleName}
/>
))}
</div>
</div>
</div>
@@ -150,3 +134,44 @@ export default function ExpandableModule({
</div>
);
}
function ExpandableModuleItem({
type,
item,
moduleName,
}: {
type: "assignment" | "quiz" | "page";
item: IModuleItem;
moduleName: string;
}) {
const { courseName } = useCourseContext();
const date = getDateFromString(item.dueAt);
const { dragStart } = useDraggingContext();
return (
<Fragment key={item.name + type}>
<div className="text-end text-slate-500 me-2">
{date && getDateOnlyMarkdownString(date)}
</div>
<Link
href={getModuleItemUrl(courseName, moduleName, type, item.name)}
className="transition-all hover:text-slate-50 hover:scale-105"
draggable="true"
onDragStart={(e) => {
const draggableItem: DraggableItem = {
type,
item,
sourceModuleName: moduleName,
};
e.dataTransfer.setData(
"draggableItem",
JSON.stringify(draggableItem)
);
dragStart();
}}
>
{item.name}
</Link>
</Fragment>
);
}