creating assignments

nextjs/src/app/api/courses/[courseName]/modules/[moduleName]/assignments/[assignmentName]/route.ts

@@ -28,7 +28,26 @@ export const PUT = async (
 ) =>
   await withErrorHandling(async () => {
     const assignment = await request.json();
-    await fileStorageService.assignments.updateAssignment(
+    await fileStorageService.assignments.updateOrCreateAssignment(
+      courseName,
+      moduleName,
+      assignmentName,
+      assignment
+    );
+    return Response.json({});
+  });
+
+export const POST = async (
+  request: Request,
+  {
+    params: { courseName, moduleName, assignmentName },
+  }: {
+    params: { courseName: string; moduleName: string; assignmentName: string };
+  }
+) =>
+  await withErrorHandling(async () => {
+    const assignment = await request.json();
+    await fileStorageService.assignments.updateOrCreateAssignment(
       courseName,
       moduleName,
       assignmentName,

nextjs/src/app/api/courses/[courseName]/modules/[moduleName]/pages/[pageName]/route.ts

@@ -16,14 +16,27 @@ export const GET = async (
     return Response.json(settings);
   });
 
-export const PUT = async (
-  request: Request,
-  {
-    params: { courseName, moduleName, pageName },
-  }: { params: { courseName: string; moduleName: string; pageName: string } }
-) =>
-  await withErrorHandling(async () => {
-    const page = await request.json();
-    await fileStorageService.pages.updatePage(courseName, moduleName, pageName, page);
-    return Response.json({});
-  });
+  export const PUT = async (
+    request: Request,
+    {
+      params: { courseName, moduleName, pageName },
+    }: { params: { courseName: string; moduleName: string; pageName: string } }
+  ) =>
+    await withErrorHandling(async () => {
+      const page = await request.json();
+      await fileStorageService.pages.updatePage(courseName, moduleName, pageName, page);
+      return Response.json({});
+    });
+
+    export const POST = async (
+      request: Request,
+      {
+        params: { courseName, moduleName, pageName },
+      }: { params: { courseName: string; moduleName: string; pageName: string } }
+    ) =>
+      await withErrorHandling(async () => {
+        const page = await request.json();
+        await fileStorageService.pages.updatePage(courseName, moduleName, pageName, page);
+        return Response.json({});
+      });
+      

nextjs/src/app/api/courses/[courseName]/modules/[moduleName]/quizzes/[quizName]/route.ts

@@ -6,27 +6,46 @@ export const GET = async (
   {
     params: { courseName, moduleName, quizName },
   }: { params: { courseName: string; moduleName: string; quizName: string } }
-) => await withErrorHandling(async () => {
-  const quiz = await fileStorageService.quizzes.getQuiz(
-    courseName,
-    moduleName,
-    quizName
-  );
-  return Response.json(quiz);
-})
+) =>
+  await withErrorHandling(async () => {
+    const quiz = await fileStorageService.quizzes.getQuiz(
+      courseName,
+      moduleName,
+      quizName
+    );
+    return Response.json(quiz);
+  });
 
 export const PUT = async (
   request: Request,
   {
     params: { courseName, moduleName, quizName },
   }: { params: { courseName: string; moduleName: string; quizName: string } }
-) => await withErrorHandling(async () => {
-  const quiz = await request.json()
-  await fileStorageService.quizzes.updateQuiz(
-    courseName,
-    moduleName,
-    quizName,
-    quiz
-  );
-  return Response.json({});
-})
+) =>
+  await withErrorHandling(async () => {
+    const quiz = await request.json();
+    await fileStorageService.quizzes.updateQuiz(
+      courseName,
+      moduleName,
+      quizName,
+      quiz
+    );
+    return Response.json({});
+  });
+
+export const POST = async (
+  request: Request,
+  {
+    params: { courseName, moduleName, quizName },
+  }: { params: { courseName: string; moduleName: string; quizName: string } }
+) =>
+  await withErrorHandling(async () => {
+    const quiz = await request.json();
+    await fileStorageService.quizzes.updateQuiz(
+      courseName,
+      moduleName,
+      quizName,
+      quiz
+    );
+    return Response.json({});
+  });

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

@@ -13,6 +13,8 @@ import {
 import { IModuleItem } from "@/models/local/IModuleItem";
 import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
 import { useState } from "react";
+import Modal from "../../../../components/Modal";
+import NewItemForm from "./NewItemForm";
 
 export default function ExpandableModule({
   moduleName,
@@ -72,16 +74,21 @@ export default function ExpandableModule({
       </div>
       <div
         className={
-          `
-          overflow-hidden 
-          ` + (expanded ? " max-h-[30vh]" : " max-h-0")
-          //  transition-all duration-1000 ease-in
+          ` overflow-hidden ` + (expanded ? " max-h-[30vh]" : " max-h-0")
         }
         style={{
           transition: "max-height 1s cubic-bezier(0, 1, 0, 1)",
         }}
       >
-        <hr />
+        <Modal buttonText="New Item">
+          {({ closeModal }) => (
+            <div>
+              <NewItemForm moduleName={moduleName} />
+              <br />
+              <button onClick={closeModal}>close</button>
+            </div>
+          )}
+        </Modal>
         {moduleItems.map(({ type, item }) => (
           <div key={item.name}>{item.name}</div>
         ))}

nextjs/src/app/course/[courseName]/modules/NewItemForm.tsx

@@ -0,0 +1,83 @@
+"use client";
+import ButtonSelect from "@/components/ButtonSelect";
+import TextInput from "@/components/form/TextInput";
+import { Spinner } from "@/components/Spinner";
+import { useCreateAssignmentMutation } from "@/hooks/localCourse/assignmentHooks";
+import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import { useCreatePageMutation } from "@/hooks/localCourse/pageHooks";
+import { useCreateQuizMutation } from "@/hooks/localCourse/quizHooks";
+import { AssignmentSubmissionType } from "@/models/local/assignment/assignmentSubmissionType";
+import { LocalAssignmentGroup } from "@/models/local/assignment/localAssignmentGroup";
+import { dateToMarkdownString } from "@/models/local/timeUtils";
+import React, { useState } from "react";
+
+export default function NewItemForm({ moduleName }: { moduleName: string }) {
+  const [type, setType] = useState<"Assignment" | "Quiz" | "Page">(
+    "Assignment"
+  );
+  const [name, setName] = useState("");
+  const [assignmentGroup, setAssignmentGroup] =
+    useState<LocalAssignmentGroup>();
+  const { data: settings } = useLocalCourseSettingsQuery();
+  const createAssignment = useCreateAssignmentMutation();
+  const createPage = useCreatePageMutation();
+  const createQuiz = useCreateQuizMutation();
+
+  const isPending =
+    createAssignment.isPending || createPage.isPending || createQuiz.isPending;
+
+  return (
+    <form
+      className="flex flex-col gap-3"
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (type === "Assignment") {
+          createAssignment.mutate({
+            assignment: {
+              name,
+              description: "",
+              dueAt: dateToMarkdownString(new Date()),
+              submissionTypes: [
+                AssignmentSubmissionType.ONLINE_TEXT_ENTRY,
+                AssignmentSubmissionType.ONLINE_UPLOAD,
+              ],
+              allowedFileUploadExtensions: ["pdf"],
+              rubric: [],
+            },
+            moduleName: moduleName,
+            assignmentName: name,
+          });
+        } else if (type === "Quiz") {
+        } else if (type === "Page") {
+        }
+      }}
+    >
+      <div>
+        <ButtonSelect<"Assignment" | "Quiz" | "Page">
+          options={["Assignment", "Quiz", "Page"]}
+          getName={(o) => o?.toString() ?? ""}
+          setSelectedOption={(t) => setType(t ?? "Assignment")}
+          selectedOption={type}
+        />
+      </div>
+      <div>
+        <TextInput label={type + " Name"} value={name} setValue={setName} />
+      </div>
+      <div>
+        <ButtonSelect
+          options={settings.assignmentGroups}
+          getName={(g) => g?.name ?? ""}
+          setSelectedOption={setAssignmentGroup}
+          selectedOption={assignmentGroup}
+        />
+      </div>
+      {settings.assignmentGroups.length === 0 && (
+        <div>
+          No assignment groups created, create them in the course settings page
+        </div>
+      )}
+      <button>Create</button>
+      {isPending && <Spinner />}
+    </form>
+  );
+}

nextjs/src/app/globals.css

@@ -83,6 +83,11 @@ button,
   @apply bg-red-800 hover:bg-red-900 text-red-100;
 }
 
+.btn-outline {
+  @apply bg-transparent text-blue-200 border border-blue-500;
+  @apply hover:border-blue-500 hover:text-blue-100 hover:bg-blue-900;
+}
+
 select {
   @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm sm:text-sm;
   @apply focus:outline-none focus:ring-blue-500 focus:border-blue-500;