feat: added chapter re-ordering functionality for courses

frontend/src/components/CourseOutline.vue

@@ -23,13 +23,24 @@
 				'border-2 rounded-md py-2 px-2': showOutline && outline.data?.length,
 			}"
 		>
+			<Draggable
+				:list="outline.data"
+				:disabled="!allowEdit"
+				item-key="name"
+				group="chapters"
+				@end="updateChapterOrder"
+			>
+				<template #item="{ element: chapter, index }">
+					<div class="chapter-item">
 						<Disclosure
 							v-slot="{ open }"
-				v-for="(chapter, index) in outline.data"
 							:key="chapter.name"
 							:defaultOpen="openChapterDetail(chapter.idx)"
 						>
-				<DisclosureButton ref="" class="flex items-center w-full p-2 group">
+							<DisclosureButton
+								ref=""
+								class="flex items-center w-full p-2 group"
+							>
 								<ChevronRight
 									:class="{
 										'rotate-90 transform duration-200': open,
@@ -105,7 +116,9 @@
 													{{ lesson.title }}
 													<Trash2
 														v-if="allowEdit"
-											@click.prevent="trashLesson(lesson.name, chapter.name)"
+														@click.prevent="
+															trashLesson(lesson.name, chapter.name)
+														"
 														class="h-4 w-4 text-ink-red-3 ml-auto invisible group-hover:visible"
 													/>
 													<Check
@@ -137,6 +150,9 @@
 							</DisclosurePanel>
 						</Disclosure>
 					</div>
+				</template>
+			</Draggable>
+		</div>
 	</div>
 	<ChapterModal
 		v-if="user.data"
@@ -242,6 +258,20 @@ const updateLessonIndex = createResource({
 	},
 })
 
+const updateChapterIndex = createResource({
+	url: 'lms.lms.api.update_chapter_index',
+	makeParams(values) {
+		return {
+			chapter: values.chapter,
+			course: values.course,
+			idx: values.idx,
+		}
+	},
+	onSuccess() {
+		toast.success(__('Chapter moved successfully'))
+	},
+})
+
 const trashLesson = (lessonName, chapterName) => {
 	$dialog({
 		title: __('Delete this lesson?'),
@@ -287,6 +317,14 @@ const updateOutline = (e) => {
 	})
 }
 
+const updateChapterOrder = (e) => {
+	updateChapterIndex.submit({
+		chapter: e.item.__draggable_context.element.name,
+		course: props.courseName,
+		idx: e.newIndex,
+	})
+}
+
 const deleteChapter = createResource({
 	url: 'lms.lms.api.delete_chapter',
 	makeParams(values) {

lms/lms/api.py

@@ -676,6 +676,27 @@ def update_index(lessons, chapter):
 		)
 
 
+@frappe.whitelist()
+def update_chapter_index(chapter, course, idx):
+	"""Update the index of a chapter within a course"""
+	chapters = frappe.get_all(
+		"Chapter Reference",
+		{"parent": course},
+		pluck="chapter",
+		order_by="idx",
+	)
+
+	if chapter in chapters:
+		chapters.remove(chapter)
+
+	chapters.insert(idx, chapter)
+
+	for i, chapter_name in enumerate(chapters):
+		frappe.db.set_value(
+			"Chapter Reference", {"chapter": chapter_name, "parent": course}, "idx", i + 1
+		)
+
+
 @frappe.whitelist(allow_guest=True)
 def get_categories(doctype, filters):
 	categoryOptions = []