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

updating drag and drop styling

Browse Source
This commit is contained in:
Alex Mickelson
2024-09-20 11:11:14 -06:00
parent 2b6b345f88
commit 6e0526ee08
12 changed files with 350 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,7 +29,7 @@ export default function Day({ day, month }: { day: string; month: number }) {
getDateOnlyMarkdownString(dayAsDate);
const { data: settings } = useLocalCourseSettingsQuery();
const { itemDrop } = useDraggingContext();
const { itemDropOnDay } = useDraggingContext();
const { todaysAssignments, todaysQuizzes, todaysPages } = useTodaysItems(day);
@@ -47,7 +47,7 @@ export default function Day({ day, month }: { day: string; month: number }) {
return (
<div
className={" rounded-lg m-1 min-h-10 " + meetingClasses + monthClass}
onDrop={(e) => itemDrop(e, day)}
onDrop={(e) => itemDropOnDay(e, day)}
onDragOver={(e) => e.preventDefault()}
>
<DropTargetStyling draggingClassName="bg-slate-800 shadow-2xl ">

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

@@ -26,50 +26,79 @@ export default function DraggingContextProvider({
const dragStart = useCallback(() => setIsDragging(true), []);
const itemDrop = useCallback(
(e: DragEvent<HTMLDivElement>, day: string | undefined) => {
const itemDropOnModule = useCallback(
(e: DragEvent<HTMLDivElement>, moduleName: string) => {
const rawData = e.dataTransfer.getData("draggableItem");
const itemBeingDragged = JSON.parse(rawData);
if (itemBeingDragged && day) {
const dayAsDate = getDateFromStringOrThrow(day, "in drop callback");
dayAsDate.setHours(settings.defaultDueTime.hour);
dayAsDate.setMinutes(settings.defaultDueTime.minute);
dayAsDate.setSeconds(0);
console.log("dropped on day", dayAsDate, day);
if (itemBeingDragged) {
if (itemBeingDragged.type === "quiz") {
console.log("dropping quiz");
const previousQuiz = itemBeingDragged.item as LocalQuiz;
const quiz: LocalQuiz = {
...previousQuiz,
dueAt: dateToMarkdownString(dayAsDate),
lockAt: getLaterDate(previousQuiz.lockAt, dayAsDate),
};
updateQuizMutation.mutate({
quiz: quiz,
quizName: quiz.name,
moduleName: itemBeingDragged.sourceModuleName,
});
updateQuiz();
} else if (itemBeingDragged.type === "assignment") {
updateAssignment(dayAsDate);
updateAssignment();
} else if (itemBeingDragged.type === "page") {
console.log("dropped page");
const previousPage = itemBeingDragged.item as LocalCoursePage;
const page: LocalCoursePage = {
...previousPage,
dueAt: dateToMarkdownString(dayAsDate),
};
updatePageMutation.mutate({
page,
moduleName: itemBeingDragged.sourceModuleName,
pageName: page.name,
});
updatePage();
}
}
setIsDragging(false);
function updateQuiz() {}
function updateAssignment() {}
function updatePage() {}
},
[]
);
const itemDropOnDay = useCallback(
(e: DragEvent<HTMLDivElement>, day: string) => {
const rawData = e.dataTransfer.getData("draggableItem");
const itemBeingDragged = JSON.parse(rawData);
if (itemBeingDragged) {
const dayAsDate = getDateWithDefaultDueTime();
if (itemBeingDragged.type === "quiz") {
updateQuiz(dayAsDate);
} else if (itemBeingDragged.type === "assignment") {
updateAssignment(dayAsDate);
} else if (itemBeingDragged.type === "page") {
updatePage(dayAsDate);
}
}
setIsDragging(false);
function getDateWithDefaultDueTime() {
const dayAsDate = getDateFromStringOrThrow(day, "in drop callback");
dayAsDate.setHours(settings.defaultDueTime.hour);
dayAsDate.setMinutes(settings.defaultDueTime.minute);
dayAsDate.setSeconds(0);
return dayAsDate;
}
function updateQuiz(dayAsDate: Date) {
const previousQuiz = itemBeingDragged.item as LocalQuiz;
const quiz: LocalQuiz = {
...previousQuiz,
dueAt: dateToMarkdownString(dayAsDate),
lockAt: getLaterDate(previousQuiz.lockAt, dayAsDate),
};
updateQuizMutation.mutate({
quiz: quiz,
quizName: quiz.name,
moduleName: itemBeingDragged.sourceModuleName,
});
}
function updatePage(dayAsDate: Date) {
const previousPage = itemBeingDragged.item as LocalCoursePage;
const page: LocalCoursePage = {
...previousPage,
dueAt: dateToMarkdownString(dayAsDate),
};
updatePageMutation.mutate({
page,
moduleName: itemBeingDragged.sourceModuleName,
pageName: page.name,
});
}
function updateAssignment(dayAsDate: Date) {
const previousAssignment = itemBeingDragged.item as LocalAssignment;
const assignment: LocalAssignment = {
@@ -103,7 +132,8 @@ export default function DraggingContextProvider({
return (
<DraggingContext.Provider
value={{
itemDrop,
itemDropOnDay,
itemDropOnModule,
isDragging,
dragStart,
}}

6
nextjs/src/app/course/[courseName]/context/draggingContext.tsx
View File

@@ -9,12 +9,14 @@ export interface DraggableItem {
}
export interface DraggingContextInterface {
itemDrop: (e: DragEvent<HTMLDivElement>, droppedOnDay?: string) => void;
itemDropOnDay: (e: DragEvent<HTMLDivElement>, droppedOnDay: string) => void;
itemDropOnModule: (e: DragEvent<HTMLDivElement>, moduleName: string) => void;
isDragging: boolean;
dragStart: () => void;
}
const defaultDraggingValue: DraggingContextInterface = {
itemDrop: () => {},
itemDropOnDay: () => {},
itemDropOnModule: () => {},
isDragging: false,
dragStart: () => {},
};