Merge pull request #118 from learnhouse/swve/eng-113-course-chapters-title-edition

Chapters & Activity title edition

front/components/Pages/CourseEdit/Draggables/Activity.tsx

@@ -1,16 +1,23 @@
+import React from "react";
 import Link from "next/link";
 import { Draggable } from "react-beautiful-dnd";
-import { EyeOpenIcon, Pencil2Icon, TrashIcon } from '@radix-ui/react-icons'
 import { getAPIUrl, getUriWithOrg } from "@services/config/config";
-import { FileText, Video, Sparkles, XSquare, X, Pencil, MoreVertical, Eye } from "lucide-react";
+import { FileText, Video, Sparkles, X, Pencil, MoreVertical, Eye, Save, File } from "lucide-react";
 import { mutate } from "swr";
 import { revalidateTags } from "@services/utils/ts/requests";
 import { useRouter } from "next/navigation";
 import ConfirmationModal from "@components/StyledElements/ConfirmationModal/ConfirmationModal";
-import { deleteActivity } from "@services/courses/activities";
+import { deleteActivity, updateActivity } from "@services/courses/activities";
+
+interface ModifiedActivityInterface {
+  activityId: string;
+  activityName: string;
+}
 
 function Activity(props: any) {
   const router = useRouter();
+  const [modifiedActivity, setModifiedActivity] = React.useState<ModifiedActivityInterface | undefined>(undefined);
+  const [selectedActivity, setSelectedActivity] = React.useState<string | undefined>(undefined);
 
   async function removeActivity() {
     await deleteActivity(props.activity.id);
@@ -19,6 +26,22 @@ function Activity(props: any) {
     router.refresh();
   }
 
+  async function updateActivityName(activityId: string) {
+    if ((modifiedActivity?.activityId === activityId) && selectedActivity !== undefined) {
+      setSelectedActivity(undefined);
+      let modifiedActivityCopy = {
+        name: modifiedActivity.activityName,
+        description: '',
+        type: props.activity.type,
+        content: props.activity.content,
+      }
+
+      await updateActivity(modifiedActivityCopy, activityId)
+      await mutate(`${getAPIUrl()}chapters/meta/course_${props.courseid}`)
+      await revalidateTags(['courses'], props.orgslug)
+      router.refresh();
+    }
+  }
 
   return (
     <Draggable key={props.activity.id} draggableId={props.activity.id} index={props.index}>
@@ -26,13 +49,23 @@ function Activity(props: any) {
         <div
           className="flex flex-row py-2 my-2 rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-102 hover:shadow space-x-1 w-auto items-center ring-1 ring-inset ring-gray-400/10 shadow-sm transition-all delay-100 duration-75 ease-linear" key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
           <div className="px-3 text-gray-300 space-x-1 w-28" >
-            {props.activity.type === "video" && <><div className="flex space-x-2 items-center"><Video size={16} /> <div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full">Video</div> </div></>}
-            {props.activity.type === "documentpdf" && <><div className="flex space-x-2 items-center"><FileText size={16} /> <div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full">Document</div> </div></>}
+            {props.activity.type === "video" && <>
+              <div className="flex space-x-2 items-center"><Video size={16} /> <div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full mx-auto justify-center align-middle">Video</div> </div></>}
+            {props.activity.type === "documentpdf" && <><div className="flex space-x-2 items-center"><div className="w-[30px]"><File size={16} /> </div><div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full">Document</div> </div></>}
             {props.activity.type === "dynamic" && <><div className="flex space-x-2 items-center"><Sparkles size={16} /> <div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full">Dynamic</div> </div></>}
           </div>
 
-          <div className="grow items-center space-x-1 flex">
-            <p className="first-letter:uppercase"> {props.activity.name} </p>
+          <div className="grow items-center space-x-2 flex mx-auto justify-center">
+
+            {selectedActivity === props.activity.id ?
+              (<div className="chapter-modification-zone text-[7px] text-gray-600 shadow-inner bg-gray-200/60 py-1 px-4 rounded-lg space-x-3">
+                <input type="text" className="bg-transparent outline-none text-xs text-gray-500" placeholder="Activity name" value={modifiedActivity ? modifiedActivity?.activityName : props.activity.name} onChange={(e) => setModifiedActivity({ activityId: props.activity.id, activityName: e.target.value })} />
+                <button onClick={() => updateActivityName(props.activity.id)} className="bg-transparent text-neutral-700 hover:cursor-pointer hover:text-neutral-900">
+                  <Save size={11} onClick={() => updateActivityName(props.activity.id)} />
+                </button>
+              </div>) : (<p className="first-letter:uppercase"> {props.activity.name} </p>)}
+            <Pencil onClick={() => setSelectedActivity(props.activity.id)}
+              size={12} className="text-neutral-400 hover:cursor-pointer" />
           </div>
 
           <div className="flex flex-row space-x-2">

front/components/Pages/CourseEdit/Draggables/Chapter.tsx

@@ -2,10 +2,39 @@ import React from "react";
 import styled from "styled-components";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import Activity from "./Activity";
-import { Folders, Hexagon, MoreVertical, PlusSquare, Sparkle, Sparkles, Trash, Trash2, X } from "lucide-react";
+import { Folders, Hexagon, MoreVertical, Pencil, PlusSquare, Save, Sparkle, Sparkles, Trash, Trash2, X } from "lucide-react";
 import ConfirmationModal from "@components/StyledElements/ConfirmationModal/ConfirmationModal";
+import { useRouter } from "next/navigation";
+import { updateChapter } from "@services/courses/chapters";
+import { mutate } from "swr";
+import { getAPIUrl } from "@services/config/config";
+import { revalidateTags } from "@services/utils/ts/requests";
+
+interface ModifiedChapterInterface {
+  chapterId: string;
+  chapterName: string;
+}
 
 function Chapter(props: any) {
+  const router = useRouter();
+  const [modifiedChapter, setModifiedChapter] = React.useState<ModifiedChapterInterface | undefined>(undefined);
+  const [selectedChapter, setSelectedChapter] = React.useState<string | undefined>(undefined);
+
+  async function updateChapterName(chapterId: string) {
+    if (modifiedChapter?.chapterId === chapterId) {
+      setSelectedChapter(undefined);
+      let modifiedChapterCopy = {
+        name: modifiedChapter.chapterName,
+        description: '',
+        activities: props.info.list.chapter.activityIds,
+      }
+      await updateChapter(chapterId, modifiedChapterCopy)
+      await mutate(`${getAPIUrl()}chapters/meta/course_${props.courseid}`)
+      await revalidateTags(['courses'], props.orgslug)
+      router.refresh();
+    }
+  }
+
   return (
     <Draggable key={props.info.list.chapter.id} draggableId={props.info.list.chapter.id} index={props.index}>
       {(provided, snapshot) => (
@@ -23,7 +52,17 @@ function Chapter(props: any) {
                 <Hexagon strokeWidth={3} size={16} className="text-neutral-600 " />
               </div>
 
-              <p className="text-neutral-700 first-letter:uppercase">{props.info.list.chapter.name}</p>
+              <div className="flex space-x-2 items-center">
+
+                {selectedChapter === props.info.list.chapter.id ?
+                  (<div className="chapter-modification-zone bg-neutral-100 py-1 px-4 rounded-lg space-x-3">
+                    <input type="text" className="bg-transparent outline-none text-sm text-neutral-700" placeholder="Chapter name" value={modifiedChapter ? modifiedChapter?.chapterName : props.info.list.chapter.name} onChange={(e) => setModifiedChapter({ chapterId: props.info.list.chapter.id, chapterName: e.target.value })} />
+                    <button onClick={() => updateChapterName(props.info.list.chapter.id)} className="bg-transparent text-neutral-700 hover:cursor-pointer hover:text-neutral-900">
+                      <Save size={15} onClick={() => updateChapterName(props.info.list.chapter.id)} />
+                    </button>
+                  </div>) : (<p className="text-neutral-700 first-letter:uppercase">{props.info.list.chapter.name}</p>)}
+                <Pencil size={15} className="text-neutral-600 hover:cursor-pointer" onClick={() => setSelectedChapter(props.info.list.chapter.id)} />
+              </div>
             </div>
             <MoreVertical size={15} className="text-gray-300" />
             <ConfirmationModal

front/components/Security/AuthProvider.tsx

@@ -27,7 +27,7 @@ const AuthProvider = ({ children }: any) => {
 
 
   async function checkRefreshToken() {
-    deleteCookie("access_token_cookie");
+    //deleteCookie("access_token_cookie");
     let data = await getNewAccessTokenUsingRefreshToken();
     if (data) {
       return data.access_token;

front/package-lock.json

@@ -28,7 +28,7 @@
         "framer-motion": "^10.16.1",
         "lowlight": "^3.0.0",
         "lucide-react": "^0.268.0",
-        "next": "^13.5.2",
+        "next": "^13.5.4",
         "re-resizable": "^6.9.9",
         "react": "^18.2.0",
         "react-beautiful-dnd": "^13.1.1",

front/package.json

@@ -29,7 +29,7 @@
     "framer-motion": "^10.16.1",
     "lowlight": "^3.0.0",
     "lucide-react": "^0.268.0",
-    "next": "^13.5.2",
+    "next": "^13.5.4",
     "re-resizable": "^6.9.9",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",

front/services/courses/chapters.ts

@@ -21,6 +21,12 @@ export async function updateChaptersMetadata(course_id: any, data: any) {
   return res;
 }
 
+export async function updateChapter(coursechapter_id: any, data: any) {
+  const result: any = await fetch(`${getAPIUrl()}chapters/${coursechapter_id}`, RequestBody("PUT", data, null));
+  const res = await errorHandling(result);
+  return res;
+}
+
 export async function createChapter(data: any, course_id: any) {
   const result: any = await fetch(`${getAPIUrl()}chapters/?course_id=course_${course_id}`, RequestBody("POST", data, null));
   const res = await errorHandling(result);