assignment renaming is whole process now

src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentFooterButtons.tsx

@@ -18,7 +18,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
-export function AssignmentButtons({
+export function AssignmentFooterButtons({
   moduleName,
   assignmentName,
   toggleHelp,
@@ -54,8 +54,6 @@ export function AssignmentButtons({
     deleteFromCanvas.isPending ||
     updateAssignment.isPending;
 
-  console.log("assignment pending", updateAssignment.isPending);
-
   return (
     <div className="p-5 flex flex-row justify-between gap-3">
       <div>

src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx

@@ -11,7 +11,6 @@ import {
 } from "@/models/local/assignment/localAssignment";
 import { useEffect, useState } from "react";
 import AssignmentPreview from "./AssignmentPreview";
-import { getModuleItemUrl } from "@/services/urlUtils";
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
 import ClientOnly from "@/components/ClientOnly";
@@ -19,9 +18,9 @@ import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling"
 import { AssignmentSubmissionType } from "@/models/local/assignment/assignmentSubmissionType";
 import { LocalCourseSettings } from "@/models/local/localCourseSettings";
 import { useRouter } from "next/navigation";
-import { AssignmentButtons } from "./AssignmentButtons";
+import { AssignmentFooterButtons } from "./AssignmentFooterButtons";
 import { useAuthoritativeUpdates } from "@/app/course/[courseName]/utils/useAuthoritativeUpdates";
-import { extractLabelValue } from "@/models/local/assignment/utils/markdownUtils";
+import EditAssignmentHeader from "./EditAssignmentHeader";
 
 export default function EditAssignment({
   moduleName,
@@ -65,39 +64,38 @@ export default function EditAssignment({
           return;
         }
 
-        const name = extractLabelValue(text, "Name");
+        // make separate way to update name?
         const updatedAssignment: LocalAssignment =
-          localAssignmentMarkdown.parseMarkdown(text, name);
+          localAssignmentMarkdown.parseMarkdown(text, assignmentName);
         if (
           localAssignmentMarkdown.toMarkdown(assignment) !==
           localAssignmentMarkdown.toMarkdown(updatedAssignment)
         ) {
           if (clientIsAuthoritative) {
             console.log("updating assignment, client is authoritative");
-            updateAssignment
-              .mutateAsync({
-                assignment: updatedAssignment,
-                moduleName,
-                assignmentName: updatedAssignment.name,
-                previousModuleName: moduleName,
-                previousAssignmentName: assignmentName,
-                courseName,
-              })
-              .then(async () => {
-                // await new Promise(resolve => setTimeout(resolve, 1000));
+            updateAssignment.mutateAsync({
+              assignment: updatedAssignment,
+              moduleName,
+              assignmentName,
+              previousModuleName: moduleName,
+              previousAssignmentName: assignmentName,
+              courseName,
+            });
+            // .then(async () => {
+            //   // await new Promise(resolve => setTimeout(resolve, 1000));
 
-                if (updatedAssignment.name !== assignmentName)
-                  router.replace(
-                    getModuleItemUrl(
-                      courseName,
-                      moduleName,
-                      "assignment",
-                      updatedAssignment.name
-                    ), {
+            //   if (updatedAssignment.name !== assignmentName)
+            //     router.replace(
+            //       getModuleItemUrl(
+            //         courseName,
+            //         moduleName,
+            //         "assignment",
+            //         updatedAssignment.name
+            //       ), {
 
-                    }
-                  );
-              });
+            //       }
+            //     );
+            // });
           } else {
             console.log(
               "client not authoritative, updating client with server assignment",
@@ -135,6 +133,10 @@ export default function EditAssignment({
 
   return (
     <div className="h-full flex flex-col align-middle px-1">
+      <EditAssignmentHeader
+        moduleName={moduleName}
+        assignmentName={assignmentName}
+      />
       <div className={"min-h-0 flex flex-row w-full flex-grow"}>
         {showHelp && (
           <pre className=" max-w-96">
@@ -158,7 +160,7 @@ export default function EditAssignment({
       </div>
       <ClientOnly>
         <SuspenseAndErrorHandling>
-          <AssignmentButtons
+          <AssignmentFooterButtons
             moduleName={moduleName}
             assignmentName={assignmentName}
             toggleHelp={() => setShowHelp((h) => !h)}

src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignmentHeader.tsx

@@ -0,0 +1,26 @@
+import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
+import { UpdateAssignmentName } from "./UpdateAssignmentName";
+import { getCourseUrl } from "@/services/urlUtils";
+import Link from "next/link";
+
+export default function EditAssignmentHeader({
+  moduleName,
+  assignmentName,
+}: {
+  assignmentName: string;
+  moduleName: string;
+}) {
+  const { courseName } = useCourseContext();
+  return (
+    <div className="py-1 flex flex-row justify-start gap-3">
+      <Link className="btn btn-thin" href={getCourseUrl(courseName)} shallow={true}>
+        {courseName}
+      </Link>
+      <UpdateAssignmentName
+        assignmentName={assignmentName}
+        moduleName={moduleName}
+      />
+      <div>{assignmentName}</div>
+    </div>
+  );
+}

src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/UpdateAssignmentName.tsx

@@ -0,0 +1,71 @@
+import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
+import TextInput from "@/components/form/TextInput";
+import Modal, { useModal } from "@/components/Modal";
+import { Spinner } from "@/components/Spinner";
+import {
+  useAssignmentQuery,
+  useUpdateAssignmentMutation,
+} from "@/hooks/localCourse/assignmentHooks";
+import { getModuleItemUrl } from "@/services/urlUtils";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function UpdateAssignmentName({
+  moduleName,
+  assignmentName,
+}: {
+  assignmentName: string;
+  moduleName: string;
+}) {
+  const modal = useModal();
+  const { courseName } = useCourseContext();
+  const router = useRouter();
+  const [assignment] = useAssignmentQuery(moduleName, assignmentName);
+  const updateAssignment = useUpdateAssignmentMutation();
+  const [name, setName] = useState(assignment.name);
+  const [isLoading, setIsLoading] = useState(false);
+  
+  return (
+    <div>
+      <Modal
+        modalControl={modal}
+        buttonText="Rename Assignment"
+        buttonClass="py-0"
+        modalWidth="w-1/5"
+      >
+        {({ closeModal }) => (
+          <form
+            onSubmit={async (e) => {
+              e.preventDefault();
+              if (name === assignmentName) closeModal();
+
+              setIsLoading(true); // page refresh resets flag
+              await updateAssignment.mutateAsync({
+                assignment: assignment,
+                moduleName,
+                assignmentName: name,
+                previousModuleName: moduleName,
+                previousAssignmentName: assignmentName,
+                courseName,
+              });
+
+              // update url (will trigger reload...)
+              router.replace(
+                getModuleItemUrl(courseName, moduleName, "assignment", name),
+                {}
+              );
+            }}
+          >
+            <TextInput
+              value={name}
+              setValue={setName}
+              label={"Rename Assignment"}
+            />
+            <button className="w-full my-3">Save New Name</button>
+            {isLoading && <Spinner />}
+          </form>
+        )}
+      </Modal>
+    </div>
+  );
+}

src/app/globals.css

@@ -87,6 +87,10 @@ button,
   @apply font-bold py-1 px-3 rounded transition-all duration-200;
 }
 
+.btn-thin {
+  @apply py-0;
+}
+
 button:not(.unstyled):not(.btn-danger),
 .btn:not(.unstyled):not(.btn-danger) {
   @apply bg-blue-900 hover:bg-blue-700 text-blue-50;

src/models/local/assignment/utils/assignmentMarkdownParser.ts

@@ -130,7 +130,7 @@ export const assignmentMarkdownParser = {
     const rubric = parseRubricMarkdown(rubricString);
 
     const assignment: LocalAssignment = {
-      name: name.trim(),
+      name,
       localAssignmentGroupName: assignmentGroupName.trim(),
       submissionTypes: submissionTypes,
       allowedFileUploadExtensions: fileUploadExtensions,

src/models/local/assignment/utils/assignmentMarkdownSerializer.ts

@@ -26,7 +26,6 @@ const settingsToMarkdown = (assignment: LocalAssignment) => {
       .join("\n");
 
   const settingsMarkdown = [
-    `Name: ${assignment.name}`,
     `LockAt: ${printableLockAt}`,
     `DueAt: ${printableDueDate}`,
     `AssignmentGroupName: ${assignment.localAssignmentGroupName}`,