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

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

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: () => {},
};