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

adding modal control

Browse Source
This commit is contained in:
Alex Mickelson
2024-11-02 13:29:36 -06:00
parent 14003d52c9
commit b47a7f88a4
11 changed files with 122 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
nextjs/src/app/course/[courseName]/calendar/day/DayTitle.tsx
View File

@@ -1,4 +1,4 @@
import Modal from "@/components/Modal";
import Modal, { useModal } from "@/components/Modal";
import { useLecturesByWeekQuery } from "@/hooks/localCourse/lectureHooks";
import { getLectureUrl } from "@/services/urlUtils";
import Link from "next/link";
@@ -13,6 +13,8 @@ export function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) {
const { data: weeks } = useLecturesByWeekQuery();
const { setIsDragging } = useDragStyleContext();
const todaysLecture = getLectureForDay(weeks, dayAsDate);
const modal = useModal();
return (
<div className="flex justify-between">
<Link
@@ -37,6 +39,7 @@ export function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) {
{dayAsDate.getDate()} {todaysLecture?.name}
</Link>
<Modal
modalControl={modal}
buttonText="+"
buttonClass="unstyled hover:font-bold hover:scale-125 px-1 mb-auto mt-0 pt-0"
>

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

@@ -253,8 +253,10 @@ export default function DraggingContextProvider({
settings.defaultDueTime.hour,
settings.defaultDueTime.minute,
updateAssignmentMutation,
updateLectureMutation,
updatePageMutation,
updateQuizMutation,
weeks,
]
);

2
nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLecture.tsx
View File

@@ -12,6 +12,7 @@ import {
import { useEffect, useState } from "react";
import LecturePreview from "./LecturePreview";
import EditLectureTitle from "./EditLectureTitle";
import LectureButtons from "./LectureButtons";
export default function EditLecture({ lectureDay }: { lectureDay: string }) {
const { data: weeks } = useLecturesByWeekQuery();
@@ -63,6 +64,7 @@ Date: ${lectureDay}
{lecture && <LecturePreview lecture={lecture} />}
</div>
</div>
<LectureButtons lectureDay={lectureDay} />
</div>
);
}

1
nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLectureTitle.tsx
View File

@@ -3,7 +3,6 @@ import { getDayOfWeek } from "@/models/local/localCourse";
import { getDateFromString } from "@/models/local/timeUtils";
import { getLectureWeekName } from "@/services/fileStorage/utils/lectureUtils";
import { getCourseUrl, getLecturePreviewUrl } from "@/services/urlUtils";
import { useRouter } from "next/navigation";
import { useCourseContext } from "../../context/courseContext";
import Link from "next/link";

64
nextjs/src/app/course/[courseName]/lecture/[lectureDay]/LectureButtons.tsx Normal file
View File

@@ -0,0 +1,64 @@
"use client";
import Modal, { useModal } from "@/components/Modal";
import { Spinner } from "@/components/Spinner";
import { getCourseUrl } from "@/services/urlUtils";
import { useQueryClient } from "@tanstack/react-query";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useCourseContext } from "../../context/courseContext";
import { deleteLecture } from "@/services/fileStorage/lectureFileStorageService";
import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
import { lectureKeys } from "@/hooks/localCourse/lectureKeys";
export default function LectureButtons({ lectureDay }: { lectureDay: string }) {
const queryClient = useQueryClient();
const { courseName } = useCourseContext();
const { data: settings } = useLocalCourseSettingsQuery();
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
const modal = useModal();
return (
<div className="p-5 flex flex-row justify-end gap-3">
<div>
<Modal
modalControl={modal}
buttonText="Delete Lecture"
buttonClass="btn-danger"
modalWidth="w-1/5"
>
{({ closeModal }) => (
<div>
<div className="text-center">
Are you sure you want to delete this lecture?
</div>
<br />
<div className="flex justify-around gap-3">
<button
onClick={async () => {
setIsLoading(true);
router.push(getCourseUrl(courseName));
await deleteLecture(courseName, settings, lectureDay);
await queryClient.invalidateQueries({
queryKey: lectureKeys.allLectures(courseName),
});
}}
disabled={isLoading}
className="btn-danger"
>
Yes
</button>
<button onClick={closeModal} disabled={isLoading}>
No
</button>
</div>
{isLoading && <Spinner />}
</div>
)}
</Modal>
{isLoading && <Spinner />}
</div>
</div>
);
}

12
nextjs/src/app/course/[courseName]/lecture/[lectureDay]/page.tsx
View File

@@ -1,5 +1,8 @@
import EditLecture from "./EditLecture";
import { getDateFromStringOrThrow, getDateOnlyMarkdownString } from "@/models/local/timeUtils";
import {
getDateFromStringOrThrow,
getDateOnlyMarkdownString,
} from "@/models/local/timeUtils";
export default function page({
params: { lectureDay },
@@ -8,7 +11,10 @@ export default function page({
}) {
const decodedLectureDay = decodeURIComponent(lectureDay);
console.log(decodedLectureDay);
const lectureDate = getDateFromStringOrThrow(decodedLectureDay, "lecture day in lecture page")
const lectureDayOnly = getDateOnlyMarkdownString(lectureDate)
const lectureDate = getDateFromStringOrThrow(
decodedLectureDay,
"lecture day in lecture page"
);
const lectureDayOnly = getDateOnlyMarkdownString(lectureDate);
return <EditLecture lectureDay={lectureDayOnly} />;
}

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

@@ -9,7 +9,7 @@ import {
getDateOnlyMarkdownString,
} from "@/models/local/timeUtils";
import { Fragment } from "react";
import Modal from "../../../../components/Modal";
import Modal, { useModal } from "../../../../components/Modal";
import NewItemForm from "./NewItemForm";
import { ModuleCanvasStatus } from "./ModuleCanvasStatus";
import ClientOnly from "@/components/ClientOnly";
@@ -31,6 +31,7 @@ export default function ExpandableModule({
const { data: assignments } = useAssignmentsQueries(moduleName);
const { data: quizzes } = useQuizzesQueries(moduleName);
const { data: pages } = usePagesQueries(moduleName);
const modal = useModal();
const moduleItems: {
type: "assignment" | "quiz" | "page";
@@ -91,7 +92,7 @@ export default function ExpandableModule({
)}
>
<>
<Modal buttonText="New Item">
<Modal modalControl={modal} buttonText="New Item">
{({ closeModal }) => (
<div>
<NewItemForm

4
nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentButtons.tsx
View File

@@ -1,5 +1,5 @@
import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
import Modal from "@/components/Modal";
import Modal, { useModal } from "@/components/Modal";
import { Spinner } from "@/components/Spinner";
import {
useCanvasAssignmentsQuery,
@@ -45,6 +45,7 @@ export function AssignmentButtons({
const updateAssignment = useUpdateAssignmentInCanvasMutation();
const deleteLocal = useDeleteAssignmentMutation();
const [isLoading, setIsLoading] = useState(false);
const modal = useModal();
const assignmentInCanvas = canvasAssignments.find(
(a) => a.name === assignmentName
@@ -116,6 +117,7 @@ export function AssignmentButtons({
)}
{!assignmentInCanvas && (
<Modal
modalControl={modal}
buttonText="Delete Localy"
buttonClass="btn-danger"
modalWidth="w-1/5"

5
nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPageButtons.tsx
View File

@@ -1,5 +1,5 @@
import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
import Modal from "@/components/Modal";
import Modal, { useModal } from "@/components/Modal";
import { Spinner } from "@/components/Spinner";
import {
useCanvasPagesQuery,
@@ -14,7 +14,6 @@ import {
} from "@/hooks/localCourse/pageHooks";
import { baseCanvasUrl } from "@/services/canvas/canvasServiceUtils";
import { getCourseUrl } from "@/services/urlUtils";
import { revalidatePath } from "next/cache";
import Link from "next/link";
import { useRouter } from "next/navigation";
import React from "react";
@@ -35,6 +34,7 @@ export default function EditPageButtons({
const updatePageInCanvas = useUpdateCanvasPageMutation();
const deletePageInCanvas = useDeleteCanvasPageMutation();
const deletePageLocal = useDeletePageMutation();
const modal = useModal();
const pageInCanvas = canvasPages?.find((p) => p.title === pageName);
@@ -88,6 +88,7 @@ export default function EditPageButtons({
{!pageInCanvas && (
<Modal
modalControl={modal}
buttonText="Delete Localy"
buttonClass="btn-danger"
modalWidth="w-1/5"

4
nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/QuizButton.tsx
View File

@@ -1,5 +1,5 @@
import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
import Modal from "@/components/Modal";
import Modal, { useModal } from "@/components/Modal";
import { Spinner } from "@/components/Spinner";
import {
useCanvasQuizzesQuery,
@@ -33,6 +33,7 @@ export function QuizButtons({
const addToCanvas = useAddQuizToCanvasMutation();
const deleteFromCanvas = useDeleteQuizFromCanvasMutation();
const deleteLocal = useDeleteQuizMutation();
const modal = useModal();
const quizInCanvas = canvasQuizzes.find((c) => c.title === quizName);
@@ -74,6 +75,7 @@ export function QuizButtons({
)}
{!quizInCanvas && (
<Modal
modalControl={modal}
buttonText="Delete Localy"
buttonClass="btn-danger"
modalWidth="w-1/5"