feat: edit related courses from frontend

frontend/components.d.ts

@@ -83,6 +83,7 @@ declare module 'vue' {
     QuizBlock: typeof import('./src/components/QuizBlock.vue')['default']
     QuizInVideo: typeof import('./src/components/Modals/QuizInVideo.vue')['default']
     Rating: typeof import('./src/components/Controls/Rating.vue')['default']
+    RelatedCourses: typeof import('./src/components/RelatedCourses.vue')['default']
     ReviewModal: typeof import('./src/components/Modals/ReviewModal.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

frontend/src/components/CourseOutline.vue

@@ -148,7 +148,7 @@
 </template>
 <script setup>
 import { Button, createResource, Tooltip, toast } from 'frappe-ui'
-import { getCurrentInstance, inject, ref } from 'vue'
+import { getCurrentInstance, inject, ref, watch } from 'vue'
 import Draggable from 'vuedraggable'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 import {
@@ -197,13 +197,22 @@ const props = defineProps({
 const outline = createResource({
 	url: 'lms.lms.utils.get_course_outline',
 	cache: ['course_outline', props.courseName],
-	params: {
-		course: props.courseName,
-		progress: props.getProgress,
+	makeParams() {
+		return {
+			course: props.courseName,
+			progress: props.getProgress,
+		}
 	},
 	auto: true,
 })
 
+watch(
+	() => props.courseName,
+	() => {
+		outline.reload()
+	}
+)
+
 const deleteLesson = createResource({
 	url: 'lms.lms.api.delete_lesson',
 	makeParams(values) {

frontend/src/components/CourseReviews.vue

@@ -64,7 +64,7 @@
 <script setup>
 import { Star } from 'lucide-vue-next'
 import { createResource, Button } from 'frappe-ui'
-import { computed, ref, inject } from 'vue'
+import { watch, ref, inject } from 'vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import ReviewModal from '@/components/Modals/ReviewModal.vue'
 
@@ -101,12 +101,21 @@ const hasReviewed = createResource({
 const reviews = createResource({
 	url: 'lms.lms.utils.get_reviews',
 	cache: ['course_reviews', props.courseName],
-	params: {
-		course: props.courseName,
+	makeParams() {
+		return {
+			course: props.courseName,
+		}
 	},
 	auto: true,
 })
 
+watch(
+	() => props.courseName,
+	() => {
+		reviews.reload()
+	}
+)
+
 const showReviewModal = ref(false)
 
 function openReviewModal() {

frontend/src/components/RelatedCourses.vue

@@ -4,15 +4,13 @@
 			<div class="text-2xl font-semibold text-ink-gray-9">
 				{{ __('Related Courses') }}
 			</div>
-			<div class="text-sm text-ink-gray-7">
-				{{ relatedCourses.data.length }} {{ __('courses') }}
-			</div>
 		</div>
 		<div
 			class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4"
 		>
 			<router-link
 				v-for="course in relatedCourses.data"
+				:key="course.name"
 				:to="{ name: 'CourseDetail', params: { courseName: course.name } }"
 				class="cursor-pointer"
 			>
@@ -24,11 +22,8 @@
 
 <script setup>
 import { createResource } from 'frappe-ui'
-import CourseCard from '@/components/CourseCard.vue'
-import { useRoute } from 'vue-router'
 import { watch } from 'vue'
-
-const route = useRoute()
+import CourseCard from '@/components/CourseCard.vue'
 
 const props = defineProps({
 	courseName: {
@@ -40,22 +35,18 @@ const props = defineProps({
 const relatedCourses = createResource({
 	url: 'lms.lms.utils.get_related_courses',
 	cache: ['related_courses', props.courseName],
-	params: {
-		course: props.courseName,
+	makeParams() {
+		return {
+			course: props.courseName,
+		}
 	},
 	auto: true,
 })
 
 watch(
-	() => route.params.courseName,
-	(newCourseName, oldCourseName) => {
-		if (newCourseName && newCourseName !== oldCourseName) {
-			relatedCourses.update({
-				cache: ['related_courses', newCourseName],
-				params: { course: newCourseName },
-			})
-			relatedCourses.reload()
-		}
+	() => props.courseName,
+	() => {
+		relatedCourses.reload()
 	}
 )
 </script>

frontend/src/components/VideoBlock.vue

@@ -81,7 +81,7 @@
 							v-for="(quiz, index) in quizzes"
 							:key="index"
 							:style="getQuizMarkerStyle(quiz.time)"
-							class="absolute top-0 h-full w-0.5 bg-red-500"
+							class="absolute top-0 h-full w-2 bg-surface-amber-3"
 						></div>
 					</div>
 				</div>
@@ -303,7 +303,7 @@ const toggleFullscreen = () => {
 }
 
 const getQuizMarkerStyle = (time) => {
-	const percentage = ((time - 5) / Math.ceil(duration.value)) * 100
+	const percentage = ((time - 7) / Math.ceil(duration.value)) * 100
 	return {
 		left: `${percentage}%`,
 	}

frontend/src/pages/CourseDetail.vue

@@ -83,12 +83,12 @@
 						:avg_rating="course.data.rating"
 						:membership="course.data.membership"
 					/>
-					<RelatedCourses :courseName="course.data.name" />
 				</div>
 				<div class="hidden md:block">
 					<CourseCardOverlay :course="course" />
 				</div>
 			</div>
+			<RelatedCourses :courseName="course.data.name" />
 		</div>
 	</div>
 </template>
@@ -109,10 +109,8 @@ import CourseReviews from '@/components/CourseReviews.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import CourseInstructors from '@/components/CourseInstructors.vue'
 import RelatedCourses from '@/components/RelatedCourses.vue'
-import { useRoute } from 'vue-router'
 
 const { brand } = sessionStore()
-const route = useRoute()
 
 const props = defineProps({
 	courseName: {
@@ -124,22 +122,18 @@ const props = defineProps({
 const course = createResource({
 	url: 'lms.lms.utils.get_course_details',
 	cache: ['course', props.courseName],
-	params: {
-		course: props.courseName,
+	makeParams() {
+		return {
+			course: props.courseName,
+		}
 	},
 	auto: true,
 })
 
 watch(
-	() => route.params.courseName,
-	(newCourseName, oldCourseName) => {
-		if (newCourseName && newCourseName !== oldCourseName) {
-			course.update({
-				cache: ['course', newCourseName],
-				params: { course: newCourseName },
-			})
-			course.reload()
-		}
+	() => props.courseName,
+	() => {
+		course.reload()
 	}
 )
 

frontend/src/pages/CourseForm.vue

@@ -199,6 +199,21 @@
 								)
 							"
 						/>
+
+						<MultiSelect
+							v-model="related_courses"
+							doctype="LMS Course"
+							:label="__('Related Courses')"
+							:filters="{ name: ['!=', courseResource.data?.name] }"
+							:onCreate="
+								(close) => {
+									router.push({
+										name: 'CourseForm',
+										params: { courseName: 'new' },
+									})
+								}
+							"
+						/>
 					</div>
 
 					<div class="px-10 pb-5 space-y-5 border-b">
@@ -319,6 +334,7 @@ const newTag = ref('')
 const { brand } = sessionStore()
 const router = useRouter()
 const instructors = ref([])
+const related_courses = ref([])
 const app = getCurrentInstance()
 const { updateOnboardingStep } = useOnboarding('learning')
 const { $dialog } = app.appContext.config.globalProperties
@@ -400,6 +416,9 @@ const courseCreationResource = createResource({
 				instructors: instructors.value.map((instructor) => ({
 					instructor: instructor,
 				})),
+				related_courses: related_courses.value.map((course) => ({
+					course: course,
+				})),
 				...values,
 			},
 		}
@@ -418,6 +437,9 @@ const courseEditResource = createResource({
 				instructors: instructors.value.map((instructor) => ({
 					instructor: instructor,
 				})),
+				related_courses: related_courses.value.map((course) => ({
+					course: course,
+				})),
 				...course,
 			},
 		}
@@ -440,6 +462,11 @@ const courseResource = createResource({
 				data.instructors.forEach((instructor) => {
 					instructors.value.push(instructor.instructor)
 				})
+			} else if (key == 'related_courses') {
+				related_courses.value = []
+				data.related_courses.forEach((course) => {
+					related_courses.value.push(course.course)
+				})
 			} else if (Object.hasOwn(course, key)) course[key] = data[key]
 		})
 		let checkboxes = [