mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
fix: course structure edition bugs
This commit is contained in:
swve
parent
db45d8ef31
commit
5fd794e9eb
3 changed files with 55 additions and 52 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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) => (
|
||||
<div {...provided.droppableProps} ref={provided.innerRef}>
|
||||
<div className="flex flex-col min-h-[60px]">
|
||||
{activities.map((activity: any, index: any) => {
|
||||
return (
|
||||
<div key={activity.activity_uuid} className="flex items-center ">
|
||||
<ActivityElement
|
||||
orgslug={props.orgslug}
|
||||
course_uuid={props.course_uuid}
|
||||
activityIndex={index}
|
||||
activity={activity}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{provided.placeholder}
|
||||
</div>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
{...provided.droppableProps}
|
||||
ref={provided.innerRef}
|
||||
className={`min-h-[60px] rounded-lg transition-colors duration-75 ${
|
||||
snapshot.isDraggingOver ? 'bg-blue-50/50' : ''
|
||||
}`}
|
||||
>
|
||||
{activities.map((activity: any, index: any) => (
|
||||
<ActivityElement
|
||||
key={activity.activity_uuid}
|
||||
orgslug={props.orgslug}
|
||||
course_uuid={props.course_uuid}
|
||||
activityIndex={index}
|
||||
activity={activity}
|
||||
/>
|
||||
))}
|
||||
{provided.placeholder}
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
newChapterOrder.splice(source.index, 1)
|
||||
newChapterOrder.splice(
|
||||
destination.index,
|
||||
0,
|
||||
course_structure.chapters[source.index]
|
||||
)
|
||||
dispatchCourse({
|
||||
type: 'setCourseStructure',
|
||||
payload: { ...course_structure, chapters: newChapterOrder },
|
||||
})
|
||||
dispatchCourse({ type: 'setIsNotSaved' })
|
||||
const newChapterOrder = Array.from(newCourseStructure.chapters)
|
||||
const [movedChapter] = newChapterOrder.splice(source.index, 1)
|
||||
newChapterOrder.splice(destination.index, 0, movedChapter)
|
||||
newCourseStructure.chapters = newChapterOrder
|
||||
}
|
||||
|
||||
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
|
||||
)
|
||||
? newChapterOrder.find(
|
||||
(chapter: any) => chapter.chapter_uuid === destination.droppableId
|
||||
)
|
||||
: sourceChapter
|
||||
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' })
|
||||
) ?? sourceChapter
|
||||
|
||||
const [movedActivity] = sourceChapter.activities.splice(source.index, 1)
|
||||
destinationChapter.activities.splice(destination.index, 0, movedActivity)
|
||||
newCourseStructure.chapters = newChapterOrder
|
||||
}
|
||||
|
||||
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">
|
||||
{(provided) => (
|
||||
<Droppable type="chapter" droppableId="chapters" direction="vertical">
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className="space-y-4"
|
||||
className={`space-y-4 ${snapshot.isDraggingOver ? 'bg-gray-50/50' : ''}`}
|
||||
{...provided.droppableProps}
|
||||
ref={provided.innerRef}
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue