fix: course structure edition bugs

apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx

@@ -127,17 +127,25 @@ function ActivityElement(props: ActivitiyElementProps) {
     >
       {(provided, snapshot) => (
         <div
-          className="flex flex-col sm:flex-row py-2 px-3 my-2 w-full rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-102 space-y-2 sm:space-y-0 sm:space-x-2 items-center shadow-md border-1 border-gray-200 nice-shadow transition-all duration-200"
+          className={`grid grid-cols-[auto_1fr_auto] gap-2 py-2 px-3 my-2 w-full rounded-md text-gray-500 
+            ${snapshot.isDragging 
+              ? 'nice-shadow bg-white ring-2 ring-blue-500/20 z-50 rotate-1 scale-[1.04]' 
+              : 'nice-shadow bg-gray-50 hover:bg-gray-100 '
+            }
+            items-center border-1 border-gray-200`}
           key={props.activity.id}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
           ref={provided.innerRef}
+          style={{
+            ...provided.draggableProps.style
+          }}
         >
           {/*   Activity Type Icon  */}
           <ActivityTypeIndicator activityType={props.activity.activity_type} isMobile={isMobile} />
 
           {/*   Centered Activity Name  */}
-          <div className="grow items-center space-x-2 flex mx-auto justify-center">
+          <div className="flex items-center space-x-2 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
@@ -179,7 +187,7 @@ function ActivityElement(props: ActivitiyElementProps) {
           </div>
 
           {/*   Edit, View, Publish, and Delete Buttons  */}
-          <div className="flex flex-wrap justify-center sm:justify-end gap-2 w-full sm:w-auto">
+          <div className="flex items-center gap-2 justify-end">
             <ActivityElementOptions activity={props.activity} isMobile={isMobile} />
             {/*   Publishing  */}
             <button

apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx

@@ -72,7 +72,9 @@ function ChapterElement(props: ChapterElementProps) {
     >
       {(provided, snapshot) => (
         <div
-          className="mx-2 sm:mx-4 md:mx-6 lg:mx-10 bg-white rounded-xl nice-shadow px-3 sm:px-4 md:px-6 pt-4 sm:pt-6"
+          className={`mx-2 sm:mx-4 md:mx-6 lg:mx-10 bg-white rounded-xl nice-shadow px-3 sm:px-4 md:px-6 pt-4 sm:pt-6 ${
+            snapshot.isDragging ? 'shadow-xl ring-2 ring-blue-500/20 rotate-1' : ''
+          }`}
           key={props.chapter.chapter_uuid}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
@@ -149,23 +151,24 @@ function ChapterElement(props: ChapterElementProps) {
             droppableId={props.chapter.chapter_uuid}
             type="activity"
           >
-            {(provided) => (
+            {(provided, snapshot) => (
-              <div {...provided.droppableProps} ref={provided.innerRef}>
+              <div 
-                <div className="flex flex-col min-h-[60px]">
+                {...provided.droppableProps} 
-                  {activities.map((activity: any, index: any) => {
+                ref={provided.innerRef}
-                    return (
+                className={`min-h-[60px] rounded-lg transition-colors duration-75 ${
-                      <div key={activity.activity_uuid} className="flex items-center ">
+                  snapshot.isDraggingOver ? 'bg-blue-50/50' : ''
-                        <ActivityElement
+                }`}
-                          orgslug={props.orgslug}
+              >
-                          course_uuid={props.course_uuid}
+                {activities.map((activity: any, index: any) => (
-                          activityIndex={index}
+                  <ActivityElement
-                          activity={activity}
+                    key={activity.activity_uuid}
-                        />
+                    orgslug={props.orgslug}
-                      </div>
+                    course_uuid={props.course_uuid}
-                    )
+                    activityIndex={index}
-                  })}
+                    activity={activity}
-                  {provided.placeholder}
+                  />
-                </div>
+                ))}
+                {provided.placeholder}
               </div>
             )}
           </Droppable>

apps/web/components/Dashboard/Pages/Course/EditCourseStructure/EditCourseStructure.tsx

@@ -75,43 +75,35 @@ const EditCourseStructure = (props: EditCourseStructureProps) => {
       destination.index === source.index
     )
       return
+
+    const newCourseStructure = { ...course_structure }
+    
     if (type === 'chapter') {
-      const newChapterOrder = Array.from(course_structure.chapters)
+      const newChapterOrder = Array.from(newCourseStructure.chapters)
-      newChapterOrder.splice(source.index, 1)
+      const [movedChapter] = newChapterOrder.splice(source.index, 1)
-      newChapterOrder.splice(
+      newChapterOrder.splice(destination.index, 0, movedChapter)
-        destination.index,
+      newCourseStructure.chapters = newChapterOrder
-        0,
-        course_structure.chapters[source.index]
-      )
-      dispatchCourse({
-        type: 'setCourseStructure',
-        payload: { ...course_structure, chapters: newChapterOrder },
-      })
-      dispatchCourse({ type: 'setIsNotSaved' })
     }
+
     if (type === 'activity') {
-      const newChapterOrder = Array.from(course_structure.chapters)
+      const newChapterOrder = Array.from(newCourseStructure.chapters)
       const sourceChapter = newChapterOrder.find(
         (chapter: any) => chapter.chapter_uuid === source.droppableId
       ) as any
       const destinationChapter = newChapterOrder.find(
         (chapter: any) => chapter.chapter_uuid === destination.droppableId
-      )
+      ) ?? sourceChapter
-        ? newChapterOrder.find(
+
-            (chapter: any) => chapter.chapter_uuid === destination.droppableId
+      const [movedActivity] = sourceChapter.activities.splice(source.index, 1)
-          )
+      destinationChapter.activities.splice(destination.index, 0, movedActivity)
-        : sourceChapter
+      newCourseStructure.chapters = newChapterOrder
-      const activity = sourceChapter.activities.find(
-        (activity: any) => activity.activity_uuid === draggableId
-      )
-      sourceChapter.activities.splice(source.index, 1)
-      destinationChapter.activities.splice(destination.index, 0, activity)
-      dispatchCourse({
-        type: 'setCourseStructure',
-        payload: { ...course_structure, chapters: newChapterOrder },
-      })
-      dispatchCourse({ type: 'setIsNotSaved' })
     }
+
+    dispatchCourse({
+      type: 'setCourseStructure',
+      payload: newCourseStructure,
+    })
+    dispatchCourse({ type: 'setIsNotSaved' })
   }
 
   useEffect(() => {
@@ -125,10 +117,10 @@ const EditCourseStructure = (props: EditCourseStructureProps) => {
       <div className="h-6"></div>
       {winReady ? (
         <DragDropContext onDragEnd={updateStructure}>
-          <Droppable type="chapter" droppableId="chapters">
+          <Droppable type="chapter" droppableId="chapters" direction="vertical">
-            {(provided) => (
+            {(provided, snapshot) => (
               <div
-                className="space-y-4"
+                className={`space-y-4 ${snapshot.isDraggingOver ? 'bg-gray-50/50' : ''}`}
                 {...provided.droppableProps}
                 ref={provided.innerRef}
               >