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

back to displaying months

Browse Source
This commit is contained in:
Alex Mickelson
2024-08-30 12:47:53 -06:00
parent 09f911c18a
commit 51069a856a
12 changed files with 322 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
nextjs/src/app/course/[courseName]/calendar/CourseCalendar.tsx
View File

@@ -3,20 +3,21 @@ import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
import { useCourseContext } from "../context/courseContext";
import { getMonthsBetweenDates } from "./calendarMonthUtils";
import { CalendarMonth } from "./CalendarMonth";
import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
export default function CourseCalendar() {
// const {
// localCourse: {
// settings: { startDate, endDate },
// },
// } = useCourseContext();
const { courseName } = useCourseContext();
const { data: settings } = useLocalCourseSettingsQuery(courseName);
// const startDateTime = getDateFromStringOrThrow(
// startDate,
// "course start date"
// );
// const endDateTime = getDateFromStringOrThrow(endDate, "course end date");
// const months = getMonthsBetweenDates(startDateTime, endDateTime);
const startDateTime = getDateFromStringOrThrow(
settings.startDate,
"course start date"
);
const endDateTime = getDateFromStringOrThrow(
settings.endDate,
"course end date"
);
const months = getMonthsBetweenDates(startDateTime, endDateTime);
return (
<div
@@ -30,9 +31,9 @@ export default function CourseCalendar() {
"
>
Month Goes Here
{/* {months.map((month) => (
{months.map((month) => (
<CalendarMonth key={month.month + "" + month.year} month={month} />
))} */}
))}
</div>
);
}

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

@@ -1,93 +1,29 @@
"use client";
import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
import { useCourseContext } from "../context/courseContext";
import { useModuleNamesQuery } from "@/hooks/localCourse/localCoursesHooks";
import DayItemsInModule from "./DayItemsInModule";
export default function Day({ day, month }: { day: Date; month: number }) {
const {
localCourse: { modules },
startItemDrag,
endItemDrag,
itemDrop,
} = useCourseContext();
const { courseName, itemDrop } = useCourseContext();
const { data: moduleNames } = useModuleNamesQuery(courseName);
const isInSameMonth = day.getMonth() + 1 != month;
const backgroundClass = isInSameMonth ? "" : "bg-slate-900";
const todaysAssignments = modules
.flatMap((m) => m.assignments)
.filter((a) => {
const dueDate = getDateFromStringOrThrow(
a.dueAt,
"due at for assignment in day"
);
return (
dueDate.getFullYear() === day.getFullYear() &&
dueDate.getMonth() === day.getMonth() &&
dueDate.getDate() === day.getDate()
);
});
const todaysQuizzes = modules
.flatMap((m) => m.quizzes)
.filter((q) => {
const dueDate = getDateFromStringOrThrow(
q.dueAt,
"due at for quiz in day"
);
return (
dueDate.getFullYear() === day.getFullYear() &&
dueDate.getMonth() === day.getMonth() &&
dueDate.getDate() === day.getDate()
);
});
const todaysPages = modules
.flatMap((m) => m.pages)
.filter((p) => {
const dueDate = getDateFromStringOrThrow(
p.dueAt,
"due at for page in day"
);
return (
dueDate.getFullYear() === day.getFullYear() &&
dueDate.getMonth() === day.getMonth() &&
dueDate.getDate() === day.getDate()
);
});
return (
<div
className={
"border border-slate-600 rounded-lg p-2 pb-4 m-1 " + backgroundClass
}
onDrop={() => itemDrop(day)}
onDragOver={(e) => e.preventDefault()}
>
{day.getDate()}
<ul className="list-disc ms-4">
{todaysAssignments.map((a) => (
<li key={a.name}>{a.name}</li>
))}
{todaysQuizzes.map((q) => (
<li
key={q.name}
role="button"
draggable="true"
onDragStart={() => startItemDrag({ type: "quiz", item: q })}
onDragEnd={endItemDrag}
>
{q.name}
</li>
))}
{todaysPages.map((p) => (
<li
key={p.name}
role="button"
draggable="true"
// onDragStart={() => startItemDrag({ type: "page", item: p })}
>
{p.name}
</li>
))}
</ul>
</div>
<>
{moduleNames.map((moduleName) => (
<div
key={"" + day + month + moduleName}
className={
"border border-slate-600 rounded-lg p-2 pb-4 m-1 " + backgroundClass
}
onDrop={() => itemDrop(day)}
onDragOver={(e) => e.preventDefault()}
>
{day.getDate()}
<DayItemsInModule day={day} moduleName={moduleName} />
</div>
))}
</>
);
}

76
nextjs/src/app/course/[courseName]/calendar/DayItemsInModule.tsx Normal file
View File

@@ -0,0 +1,76 @@
import React from "react";
import { useCourseContext } from "../context/courseContext";
import { useModuleDataQuery } from "@/hooks/localCourse/localCoursesHooks";
import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
export default function DayItemsInModule({
day,
moduleName,
}: {
day: Date;
moduleName: string;
}) {
const { courseName, endItemDrag, startItemDrag } = useCourseContext();
const { assignments, quizzes, pages } = useModuleDataQuery(
courseName,
moduleName
);
const todaysAssignments = assignments.filter((a) => {
const dueDate = getDateFromStringOrThrow(
a.dueAt,
"due at for assignment in day"
);
return (
dueDate.getFullYear() === day.getFullYear() &&
dueDate.getMonth() === day.getMonth() &&
dueDate.getDate() === day.getDate()
);
});
const todaysQuizzes = quizzes.filter((q) => {
const dueDate = getDateFromStringOrThrow(q.dueAt, "due at for quiz in day");
return (
dueDate.getFullYear() === day.getFullYear() &&
dueDate.getMonth() === day.getMonth() &&
dueDate.getDate() === day.getDate()
);
});
const todaysPages = pages.filter((p) => {
const dueDate = getDateFromStringOrThrow(p.dueAt, "due at for page in day");
return (
dueDate.getFullYear() === day.getFullYear() &&
dueDate.getMonth() === day.getMonth() &&
dueDate.getDate() === day.getDate()
);
});
return (
<>
<ul className="list-disc ms-4">
{todaysAssignments.map((a) => (
<li key={a.name}>{a.name}</li>
))}
{todaysQuizzes.map((q) => (
<li
key={q.name}
role="button"
draggable="true"
onDragStart={() => startItemDrag({ type: "quiz", item: q })}
onDragEnd={endItemDrag}
>
{q.name}
</li>
))}
{todaysPages.map((p) => (
<li
key={p.name}
role="button"
draggable="true"
onDragStart={() => startItemDrag({ type: "page", item: p })}
>
{p.name}
</li>
))}
</ul>
</>
);
}

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

@@ -1,20 +1,8 @@
import { IModuleItem } from "@/models/local/IModuleItem";
import { LocalModule } from "@/models/local/localModules";
import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
import React, { useState } from "react";
import { useState } from "react";
import { useCourseContext } from "../context/courseContext";
import {
useAssignmentNamesQuery,
useAssignmentsQueries,
} from "@/hooks/localCourse/assignmentHooks";
import {
useQuizNamesQuery,
useQuizzesQueries,
} from "@/hooks/localCourse/quizHooks";
import {
usePageNamesQuery,
usePagesQueries,
} from "@/hooks/localCourse/pageHooks";
import { useModuleDataQuery } from "@/hooks/localCourse/localCoursesHooks";
export default function ExpandableModule({
moduleName,
@@ -22,23 +10,10 @@ export default function ExpandableModule({
moduleName: string;
}) {
const { courseName } = useCourseContext();
const { data: assignmentNames } = useAssignmentNamesQuery(
const { assignments, quizzes, pages } = useModuleDataQuery(
courseName,
moduleName
);
const { data: assignments } = useAssignmentsQueries(
courseName,
moduleName,
assignmentNames
);
const { data: quizNames } = useQuizNamesQuery(courseName, moduleName);
const { data: quizzes } = useQuizzesQueries(
courseName,
moduleName,
quizNames
);
const { data: pageNames } = usePageNamesQuery(courseName, moduleName);
const { data: pages } = usePagesQueries(courseName, moduleName, pageNames);
const [expanded, setExpanded] = useState(false);

1
nextjs/src/app/course/[courseName]/modules/ModuleList.tsx
View File

@@ -8,7 +8,6 @@ export default function ModuleList() {
const { data: moduleNames } = useModuleNamesQuery(courseName);
return (
<div>
modules here
{moduleNames.map((m) => (
<ExpandableModule key={m} moduleName={m}/>
))}