updating drag and drop styling

This commit is contained in:
2024-09-20 11:11:14 -06:00
parent 2b6b345f88
commit 6e0526ee08
12 changed files with 350 additions and 307 deletions

View File

@@ -1,3 +1,4 @@
import { LocalAssignment } from "@/models/local/assignment/localAssignment";
import { fileStorageService } from "@/services/fileStorage/fileStorageService"; import { fileStorageService } from "@/services/fileStorage/fileStorageService";
import { withErrorHandling } from "@/services/withErrorHandling"; import { withErrorHandling } from "@/services/withErrorHandling";
@@ -27,13 +28,23 @@ export const PUT = async (
} }
) => ) =>
await withErrorHandling(async () => { await withErrorHandling(async () => {
const assignment = await request.json(); const {
await fileStorageService.assignments.updateOrCreateAssignment( assignment,
previousModuleName,
}: { assignment: LocalAssignment; previousModuleName?: string } =
await request.json();
await fileStorageService.assignments.updateOrCreateAssignment({
courseName, courseName,
moduleName, moduleName,
assignmentName, assignmentName,
assignment assignment,
); });
if(previousModuleName !== moduleName)
{
fileStorageService.assignments.
}
return Response.json({}); return Response.json({});
}); });
@@ -47,11 +58,11 @@ export const POST = async (
) => ) =>
await withErrorHandling(async () => { await withErrorHandling(async () => {
const assignment = await request.json(); const assignment = await request.json();
await fileStorageService.assignments.updateOrCreateAssignment( await fileStorageService.assignments.updateOrCreateAssignment({
courseName, courseName,
moduleName, moduleName,
assignmentName, assignmentName,
assignment assignment,
); });
return Response.json({}); return Response.json({});
}); });

View File

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

View File

@@ -26,50 +26,79 @@ export default function DraggingContextProvider({
const dragStart = useCallback(() => setIsDragging(true), []); const dragStart = useCallback(() => setIsDragging(true), []);
const itemDrop = useCallback( const itemDropOnModule = useCallback(
(e: DragEvent<HTMLDivElement>, day: string | undefined) => { (e: DragEvent<HTMLDivElement>, moduleName: string) => {
const rawData = e.dataTransfer.getData("draggableItem"); const rawData = e.dataTransfer.getData("draggableItem");
const itemBeingDragged = JSON.parse(rawData); const itemBeingDragged = JSON.parse(rawData);
if (itemBeingDragged && day) { if (itemBeingDragged) {
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.type === "quiz") { if (itemBeingDragged.type === "quiz") {
console.log("dropping quiz"); updateQuiz();
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,
});
} else if (itemBeingDragged.type === "assignment") { } else if (itemBeingDragged.type === "assignment") {
updateAssignment(dayAsDate); updateAssignment();
} else if (itemBeingDragged.type === "page") { } else if (itemBeingDragged.type === "page") {
console.log("dropped page"); updatePage();
const previousPage = itemBeingDragged.item as LocalCoursePage;
const page: LocalCoursePage = {
...previousPage,
dueAt: dateToMarkdownString(dayAsDate),
};
updatePageMutation.mutate({
page,
moduleName: itemBeingDragged.sourceModuleName,
pageName: page.name,
});
} }
} }
setIsDragging(false); 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) { function updateAssignment(dayAsDate: Date) {
const previousAssignment = itemBeingDragged.item as LocalAssignment; const previousAssignment = itemBeingDragged.item as LocalAssignment;
const assignment: LocalAssignment = { const assignment: LocalAssignment = {
@@ -103,7 +132,8 @@ export default function DraggingContextProvider({
return ( return (
<DraggingContext.Provider <DraggingContext.Provider
value={{ value={{
itemDrop, itemDropOnDay,
itemDropOnModule,
isDragging, isDragging,
dragStart, dragStart,
}} }}

View File

@@ -9,12 +9,14 @@ export interface DraggableItem {
} }
export interface DraggingContextInterface { 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; isDragging: boolean;
dragStart: () => void; dragStart: () => void;
} }
const defaultDraggingValue: DraggingContextInterface = { const defaultDraggingValue: DraggingContextInterface = {
itemDrop: () => {}, itemDropOnDay: () => {},
itemDropOnModule: () => {},
isDragging: false, isDragging: false,
dragStart: () => {}, dragStart: () => {},
}; };

View File

@@ -94,10 +94,12 @@ export const useUpdateAssignmentMutation = () => {
mutationFn: async ({ mutationFn: async ({
assignment, assignment,
moduleName, moduleName,
previousModuleName,
assignmentName, assignmentName,
}: { }: {
assignment: LocalAssignment; assignment: LocalAssignment;
moduleName: string; moduleName: string;
previousModuleName: string;
assignmentName: string; assignmentName: string;
}) => { }) => {
queryClient.setQueryData( queryClient.setQueryData(
@@ -111,7 +113,7 @@ export const useUpdateAssignmentMutation = () => {
encodeURIComponent(moduleName) + encodeURIComponent(moduleName) +
"/assignments/" + "/assignments/" +
encodeURIComponent(assignmentName); encodeURIComponent(assignmentName);
await axiosClient.put(url, assignment); await axiosClient.put(url, { assignment, previousModuleName });
}, },
onSuccess: (_, { moduleName, assignmentName }) => { onSuccess: (_, { moduleName, assignmentName }) => {
queryClient.invalidateQueries({ queryClient.invalidateQueries({
@@ -128,7 +130,6 @@ export const useUpdateAssignmentMutation = () => {
}); });
}; };
export const useCreateAssignmentMutation = () => { export const useCreateAssignmentMutation = () => {
const { courseName } = useCourseContext(); const { courseName } = useCourseContext();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@@ -169,4 +170,3 @@ export const useCreateAssignmentMutation = () => {
}, },
}); });
}; };

View File

@@ -0,0 +1,68 @@
import {
localAssignmentMarkdown,
LocalAssignment,
} from "@/models/local/assignment/localAssignment";
import { assignmentMarkdownSerializer } from "@/models/local/assignment/utils/assignmentMarkdownSerializer";
import path from "path";
import { basePath, directoryOrFileExists } from "./utils/fileSystemUtils";
import { promises as fs } from "fs";
export const assignmentsFileStorageService = {
async getAssignmentNames(courseName: string, moduleName: string) {
const filePath = path.join(basePath, courseName, moduleName, "assignments");
if (!(await directoryOrFileExists(filePath))) {
console.log(
`Error loading course by name, assignments folder does not exist in ${filePath}`
);
await fs.mkdir(filePath);
}
const assignmentFiles = await fs.readdir(filePath);
return assignmentFiles.map((f) => f.replace(/\.md$/, ""));
},
async getAssignment(
courseName: string,
moduleName: string,
assignmentName: string
) {
const filePath = path.join(
basePath,
courseName,
moduleName,
"assignments",
assignmentName + ".md"
);
const rawFile = (await fs.readFile(filePath, "utf-8")).replace(
/\r\n/g,
"\n"
);
return localAssignmentMarkdown.parseMarkdown(rawFile);
},
async updateOrCreateAssignment({
courseName,
moduleName,
assignmentName,
assignment,
}: {
courseName: string;
moduleName: string;
assignmentName: string;
assignment: LocalAssignment;
}) {
const folder = path.join(basePath, courseName, moduleName, "assignments");
await fs.mkdir(folder, { recursive: true });
const filePath = path.join(
basePath,
courseName,
moduleName,
"assignments",
assignmentName + ".md"
);
const assignmentMarkdown =
assignmentMarkdownSerializer.toMarkdown(assignment);
console.log(`Saving assignment ${filePath}`);
await fs.writeFile(filePath, assignmentMarkdown);
},
};

View File

@@ -4,11 +4,7 @@ import {
LocalCourseSettings, LocalCourseSettings,
localCourseYamlUtils, localCourseYamlUtils,
} from "@/models/local/localCourse"; } from "@/models/local/localCourse";
import { directoryOrFileExists } from "./utils/fileSystemUtils"; import { basePath, directoryOrFileExists } from "./utils/fileSystemUtils";
import {
LocalAssignment,
localAssignmentMarkdown,
} from "@/models/local/assignment/localAssignment";
import { import {
LocalQuiz, LocalQuiz,
localQuizMarkdownUtils, localQuizMarkdownUtils,
@@ -18,10 +14,185 @@ import {
localPageMarkdownUtils, localPageMarkdownUtils,
} from "@/models/local/page/localCoursePage"; } from "@/models/local/page/localCoursePage";
import { quizMarkdownUtils } from "@/models/local/quiz/utils/quizMarkdownUtils"; import { quizMarkdownUtils } from "@/models/local/quiz/utils/quizMarkdownUtils";
import { assignmentMarkdownSerializer } from "@/models/local/assignment/utils/assignmentMarkdownSerializer"; import { assignmentsFileStorageService } from "./assignmentsFileStorageService";
const basePath = process.env.STORAGE_DIRECTORY ?? "./storage"; const quizzes = {
console.log("base path", basePath); async getQuizNames(courseName: string, moduleName: string) {
const filePath = path.join(basePath, courseName, moduleName, "quizzes");
if (!(await directoryOrFileExists(filePath))) {
console.log(
`Error loading course by name, quiz folder does not exist in ${filePath}`
);
await fs.mkdir(filePath);
}
const files = await fs.readdir(filePath);
return files.map((f) => f.replace(/\.md$/, ""));
},
async getQuiz(courseName: string, moduleName: string, quizName: string) {
const filePath = path.join(
basePath,
courseName,
moduleName,
"quizzes",
quizName + ".md"
);
const rawFile = (await fs.readFile(filePath, "utf-8")).replace(
/\r\n/g,
"\n"
);
return localQuizMarkdownUtils.parseMarkdown(rawFile);
},
async updateQuiz(
courseName: string,
moduleName: string,
quizName: string,
quiz: LocalQuiz
) {
const folder = path.join(basePath, courseName, moduleName, "quizzes");
await fs.mkdir(folder, { recursive: true });
const filePath = path.join(
basePath,
courseName,
moduleName,
"quizzes",
quizName + ".md"
);
const quizMarkdown = quizMarkdownUtils.toMarkdown(quiz);
console.log(`Saving quiz ${filePath}`);
await fs.writeFile(filePath, quizMarkdown);
},
};
const pages = {
async getPageNames(courseName: string, moduleName: string) {
const filePath = path.join(basePath, courseName, moduleName, "pages");
if (!(await directoryOrFileExists(filePath))) {
console.log(
`Error loading course by name, pages folder does not exist in ${filePath}`
);
await fs.mkdir(filePath);
}
const files = await fs.readdir(filePath);
return files.map((f) => f.replace(/\.md$/, ""));
},
async getPage(courseName: string, moduleName: string, pageName: string) {
const filePath = path.join(
basePath,
courseName,
moduleName,
"pages",
pageName + ".md"
);
const rawFile = (await fs.readFile(filePath, "utf-8")).replace(
/\r\n/g,
"\n"
);
return localPageMarkdownUtils.parseMarkdown(rawFile);
},
async updatePage(
courseName: string,
moduleName: string,
pageName: string,
page: LocalCoursePage
) {
const folder = path.join(basePath, courseName, moduleName, "pages");
await fs.mkdir(folder, { recursive: true });
const filePath = path.join(
basePath,
courseName,
moduleName,
"pages",
page.name + ".md"
);
const pageMarkdown = localPageMarkdownUtils.toMarkdown(page);
console.log(`Saving page ${filePath}`);
await fs.writeFile(filePath, pageMarkdown);
const pageNameIsChanged = pageName !== page.name;
if (pageNameIsChanged) {
console.log("removing old page after name change " + pageName);
const oldFilePath = path.join(
basePath,
courseName,
moduleName,
"pages",
pageName + ".md"
);
await fs.unlink(oldFilePath);
}
},
};
const modules = {
async getModuleNames(courseName: string) {
const courseDirectory = path.join(basePath, courseName);
const moduleDirectories = await fs.readdir(courseDirectory, {
withFileTypes: true,
});
const modulePromises = moduleDirectories
.filter((dirent) => dirent.isDirectory())
.map((dirent) => dirent.name);
const modules = await Promise.all(modulePromises);
return modules.sort((a, b) => a.localeCompare(b));
},
async createModule(courseName: string, moduleName: string) {
const courseDirectory = path.join(basePath, courseName);
await fs.mkdir(courseDirectory + "/" + moduleName, { recursive: true });
},
};
const settings = {
async getAllCoursesSettings() {
const courses = await fileStorageService.getCourseNames();
const courseSettings = await Promise.all(
courses.map(
async (c) => await fileStorageService.settings.getCourseSettings(c)
)
);
return courseSettings;
},
async getCourseSettings(courseName: string): Promise<LocalCourseSettings> {
const courseDirectory = path.join(basePath, courseName);
const settingsPath = path.join(courseDirectory, "settings.yml");
if (!(await directoryOrFileExists(settingsPath))) {
const errorMessage = `Error loading settings for ${courseName}, settings file ${settingsPath}`;
console.log(errorMessage);
throw new Error(errorMessage);
}
const settingsString = await fs.readFile(settingsPath, "utf-8");
const settings = localCourseYamlUtils.parseSettingYaml(settingsString);
const folderName = path.basename(courseDirectory);
return { ...settings, name: folderName };
},
async updateCourseSettings(
courseName: string,
settings: LocalCourseSettings
) {
const courseDirectory = path.join(basePath, courseName);
const settingsPath = path.join(courseDirectory, "settings.yml");
const { name, ...settingsWithoutName } = settings;
const settingsMarkdown =
localCourseYamlUtils.settingsToYaml(settingsWithoutName);
console.log(`Saving settings ${settingsPath}`);
await fs.writeFile(settingsPath, settingsMarkdown);
},
};
export const fileStorageService = { export const fileStorageService = {
async getCourseNames() { async getCourseNames() {
@@ -49,255 +220,11 @@ export const fileStorageService = {
return courseNamesFromDirectories; return courseNamesFromDirectories;
}, },
settings: { settings,
async getAllCoursesSettings() { modules,
const courses = await fileStorageService.getCourseNames(); assignments: assignmentsFileStorageService,
quizzes,
const courseSettings = await Promise.all( pages,
courses.map(
async (c) => await fileStorageService.settings.getCourseSettings(c)
)
);
return courseSettings;
},
async getCourseSettings(courseName: string): Promise<LocalCourseSettings> {
const courseDirectory = path.join(basePath, courseName);
const settingsPath = path.join(courseDirectory, "settings.yml");
if (!(await directoryOrFileExists(settingsPath))) {
const errorMessage = `Error loading settings for ${courseName}, settings file ${settingsPath}`;
console.log(errorMessage);
throw new Error(errorMessage);
}
const settingsString = await fs.readFile(settingsPath, "utf-8");
const settings = localCourseYamlUtils.parseSettingYaml(settingsString);
const folderName = path.basename(courseDirectory);
return { ...settings, name: folderName };
},
async updateCourseSettings(
courseName: string,
settings: LocalCourseSettings
) {
const courseDirectory = path.join(basePath, courseName);
const settingsPath = path.join(courseDirectory, "settings.yml");
const { name, ...settingsWithoutName } = settings;
const settingsMarkdown =
localCourseYamlUtils.settingsToYaml(settingsWithoutName);
console.log(`Saving settings ${settingsPath}`);
await fs.writeFile(settingsPath, settingsMarkdown);
},
},
modules: {
async getModuleNames(courseName: string) {
const courseDirectory = path.join(basePath, courseName);
const moduleDirectories = await fs.readdir(courseDirectory, {
withFileTypes: true,
});
const modulePromises = moduleDirectories
.filter((dirent) => dirent.isDirectory())
.map((dirent) => dirent.name);
const modules = await Promise.all(modulePromises);
return modules.sort((a, b) => a.localeCompare(b));
},
async createModule(courseName: string, moduleName: string) {
const courseDirectory = path.join(basePath, courseName);
await fs.mkdir(courseDirectory + "/" + moduleName, { recursive: true });
},
},
assignments: {
async getAssignmentNames(courseName: string, moduleName: string) {
const filePath = path.join(
basePath,
courseName,
moduleName,
"assignments"
);
if (!(await directoryOrFileExists(filePath))) {
console.log(
`Error loading course by name, assignments folder does not exist in ${filePath}`
);
await fs.mkdir(filePath);
}
const assignmentFiles = await fs.readdir(filePath);
return assignmentFiles.map((f) => f.replace(/\.md$/, ""));
},
async getAssignment(
courseName: string,
moduleName: string,
assignmentName: string
) {
const filePath = path.join(
basePath,
courseName,
moduleName,
"assignments",
assignmentName + ".md"
);
const rawFile = (await fs.readFile(filePath, "utf-8")).replace(
/\r\n/g,
"\n"
);
return localAssignmentMarkdown.parseMarkdown(rawFile);
},
async updateOrCreateAssignment(
courseName: string,
moduleName: string,
assignmentName: string,
assignment: LocalAssignment
) {
const folder = path.join(
basePath,
courseName,
moduleName,
"assignments",
);
await fs.mkdir(folder, { recursive: true });
const filePath = path.join(
basePath,
courseName,
moduleName,
"assignments",
assignmentName + ".md"
);
const assignmentMarkdown =
assignmentMarkdownSerializer.toMarkdown(assignment);
console.log(`Saving assignment ${filePath}`);
await fs.writeFile(filePath, assignmentMarkdown);
},
},
quizzes: {
async getQuizNames(courseName: string, moduleName: string) {
const filePath = path.join(basePath, courseName, moduleName, "quizzes");
if (!(await directoryOrFileExists(filePath))) {
console.log(
`Error loading course by name, quiz folder does not exist in ${filePath}`
);
await fs.mkdir(filePath);
}
const files = await fs.readdir(filePath);
return files.map((f) => f.replace(/\.md$/, ""));
},
async getQuiz(courseName: string, moduleName: string, quizName: string) {
const filePath = path.join(
basePath,
courseName,
moduleName,
"quizzes",
quizName + ".md"
);
const rawFile = (await fs.readFile(filePath, "utf-8")).replace(
/\r\n/g,
"\n"
);
return localQuizMarkdownUtils.parseMarkdown(rawFile);
},
async updateQuiz(
courseName: string,
moduleName: string,
quizName: string,
quiz: LocalQuiz
) {
const folder = path.join(
basePath,
courseName,
moduleName,
"quizzes",
);
await fs.mkdir(folder, { recursive: true });
const filePath = path.join(
basePath,
courseName,
moduleName,
"quizzes",
quizName + ".md"
);
const quizMarkdown = quizMarkdownUtils.toMarkdown(quiz);
console.log(`Saving quiz ${filePath}`);
await fs.writeFile(filePath, quizMarkdown);
},
},
pages: {
async getPageNames(courseName: string, moduleName: string) {
const filePath = path.join(basePath, courseName, moduleName, "pages");
if (!(await directoryOrFileExists(filePath))) {
console.log(
`Error loading course by name, pages folder does not exist in ${filePath}`
);
await fs.mkdir(filePath);
}
const files = await fs.readdir(filePath);
return files.map((f) => f.replace(/\.md$/, ""));
},
async getPage(courseName: string, moduleName: string, pageName: string) {
const filePath = path.join(
basePath,
courseName,
moduleName,
"pages",
pageName + ".md"
);
const rawFile = (await fs.readFile(filePath, "utf-8")).replace(
/\r\n/g,
"\n"
);
return localPageMarkdownUtils.parseMarkdown(rawFile);
},
async updatePage(
courseName: string,
moduleName: string,
pageName: string,
page: LocalCoursePage
) {
const folder = path.join(
basePath,
courseName,
moduleName,
"pages",
);
await fs.mkdir(folder, { recursive: true });
const filePath = path.join(
basePath,
courseName,
moduleName,
"pages",
page.name + ".md"
);
const pageMarkdown = localPageMarkdownUtils.toMarkdown(page);
console.log(`Saving page ${filePath}`);
await fs.writeFile(filePath, pageMarkdown);
const pageNameIsChanged = pageName !== page.name;
if (pageNameIsChanged) {
console.log("removing old page after name change " + pageName);
const oldFilePath = path.join(
basePath,
courseName,
moduleName,
"pages",
pageName + ".md"
);
await fs.unlink(oldFilePath);
}
},
},
async getEmptyDirectories(): Promise<string[]> { async getEmptyDirectories(): Promise<string[]> {
if (!(await directoryOrFileExists(basePath))) { if (!(await directoryOrFileExists(basePath))) {

View File

@@ -17,4 +17,9 @@ export const directoryOrFileExists = async (directoryPath: string): Promise<bool
} catch { } catch {
return false; return false;
} }
}; };
export const basePath = process.env.STORAGE_DIRECTORY ?? "./storage";
console.log("base path", basePath);