From bda61f32f3f041683e87dda3dd44faab01ae7c5b Mon Sep 17 00:00:00 2001
From: OsafAliSayed <aousafalisayedb2@gmail.com>
Date: Sun, 8 Jun 2025 13:43:19 +0000
Subject: [PATCH 1/4] feat(related-courses): add related courses frontend

---
 frontend/src/components/RelatedCourses.vue | 73 ++++++++++++++++++++++
 frontend/src/pages/CourseDetail.vue        | 19 +++++-
 2 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/RelatedCourses.vue

diff --git a/frontend/src/components/RelatedCourses.vue b/frontend/src/components/RelatedCourses.vue
new file mode 100644
index 00000000..c846935f
--- /dev/null
+++ b/frontend/src/components/RelatedCourses.vue
@@ -0,0 +1,73 @@
+<template>
+	<div v-if="relatedCourses.data?.length" class="mt-10">
+        <div class="flex items-center justify-between mb-6">
+            <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"
+                :to="{ name: 'CourseDetail', params: { courseName: course.name } }"
+                class="cursor-pointer"
+            >
+                <CourseCard :course="course" />
+            </router-link>
+        </div>
+    </div>
+	<div v-else-if="relatedCourses.loading" class="mt-10">
+		<div class="text-2xl font-semibold text-ink-gray-9 mb-6">
+			{{ __('Related Courses') }}
+		</div>
+		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+			<div
+				v-for="n in 3"
+				:key="n"
+				class="animate-pulse bg-gray-200 rounded-md h-80"
+			></div>
+		</div>
+	</div>
+</template>
+
+<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() 
+
+const props = defineProps({
+	courseName: {
+		type: String,
+		required: true,
+	},
+})
+
+const relatedCourses = createResource({
+	url: 'lms.lms.utils.get_related_courses',
+	cache: ['related_courses', props.courseName],
+	params: {
+		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()
+        }
+    }
+)
+
+</script>
diff --git a/frontend/src/pages/CourseDetail.vue b/frontend/src/pages/CourseDetail.vue
index b18eaefc..7e5c8d4f 100644
--- a/frontend/src/pages/CourseDetail.vue
+++ b/frontend/src/pages/CourseDetail.vue
@@ -83,6 +83,7 @@
 						:avg_rating="course.data.rating"
 						:membership="course.data.membership"
 					/>
+					<RelatedCourses :courseName="course.data.name" />
 				</div>
 				<div class="hidden md:block">
 					<CourseCardOverlay :course="course" />
@@ -99,7 +100,7 @@ import {
 	Tooltip,
 	usePageMeta,
 } from 'frappe-ui'
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import { Users, Star } from 'lucide-vue-next'
 import { sessionStore } from '@/stores/session'
 import CourseCardOverlay from '@/components/CourseCardOverlay.vue'
@@ -107,8 +108,11 @@ import CourseOutline from '@/components/CourseOutline.vue'
 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: {
@@ -126,6 +130,19 @@ const course = createResource({
 	auto: true,
 })
 
+watch(
+    () => route.params.courseName,
+    (newCourseName, oldCourseName) => {
+        if (newCourseName && newCourseName !== oldCourseName) {
+            course.update({
+                cache: ['course', newCourseName],
+                params: { course: newCourseName }
+            })
+            course.reload()
+        }
+    }
+)
+
 const breadcrumbs = computed(() => {
 	let items = [{ label: 'Courses', route: { name: 'Courses' } }]
 	items.push({

From c241bf210432a874a613177798cf797b4e6a6fd2 Mon Sep 17 00:00:00 2001
From: OsafAliSayed <aousafalisayedb2@gmail.com>
Date: Sun, 8 Jun 2025 13:43:54 +0000
Subject: [PATCH 2/4] feat(related-courses): add related courses component

---
 lms/lms/utils.py | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/lms/lms/utils.py b/lms/lms/utils.py
index 8e5f290e..110097ef 100644
--- a/lms/lms/utils.py
+++ b/lms/lms/utils.py
@@ -2171,5 +2171,16 @@ def get_palette(full_name):
 	return palette[idx % 8]
 
 
+@frappe.whitelist(allow_guest=True)
+def get_related_courses(course):
+	related_course_details = []
+	related_courses = frappe.get_all(
+		"Related Courses", {"parent": course}, order_by="idx", pluck="course"
+	)
+
+	for related_course in related_courses:
+		related_course_details.append(get_course_details(related_course))
+	return related_course_details
+
 def persona_captured():
 	frappe.db.set_single_value("LMS Settings", "persona_captured", 1)

From 212800155bc188f0de6bfcb0a9ea07bff9f5d5dc Mon Sep 17 00:00:00 2001
From: OsafAliSayed <aousafalisayedb2@gmail.com>
Date: Mon, 9 Jun 2025 06:05:44 +0000
Subject: [PATCH 3/4] style(linter): apply linting fixes

---
 frontend/src/components/RelatedCourses.vue | 62 +++++++++++-----------
 frontend/src/pages/CourseDetail.vue        | 20 +++----
 lms/lms/utils.py                           |  1 +
 3 files changed, 42 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/RelatedCourses.vue b/frontend/src/components/RelatedCourses.vue
index c846935f..4f3d5ae7 100644
--- a/frontend/src/components/RelatedCourses.vue
+++ b/frontend/src/components/RelatedCourses.vue
@@ -1,23 +1,25 @@
 <template>
 	<div v-if="relatedCourses.data?.length" class="mt-10">
-        <div class="flex items-center justify-between mb-6">
-            <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"
-                :to="{ name: 'CourseDetail', params: { courseName: course.name } }"
-                class="cursor-pointer"
-            >
-                <CourseCard :course="course" />
-            </router-link>
-        </div>
-    </div>
+		<div class="flex items-center justify-between mb-6">
+			<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"
+				:to="{ name: 'CourseDetail', params: { courseName: course.name } }"
+				class="cursor-pointer"
+			>
+				<CourseCard :course="course" />
+			</router-link>
+		</div>
+	</div>
 	<div v-else-if="relatedCourses.loading" class="mt-10">
 		<div class="text-2xl font-semibold text-ink-gray-9 mb-6">
 			{{ __('Related Courses') }}
@@ -38,7 +40,7 @@ import CourseCard from '@/components/CourseCard.vue'
 import { useRoute } from 'vue-router'
 import { watch } from 'vue'
 
-const route = useRoute() 
+const route = useRoute()
 
 const props = defineProps({
 	courseName: {
@@ -57,17 +59,15 @@ const relatedCourses = createResource({
 })
 
 watch(
-    () => route.params.courseName,
-    (newCourseName, oldCourseName) => {
-        if (newCourseName && newCourseName !== oldCourseName) {
-
-            relatedCourses.update({
-                cache: ['related_courses', newCourseName],
-                params: { course: newCourseName }
-            })
-            relatedCourses.reload()
-        }
-    }
+	() => route.params.courseName,
+	(newCourseName, oldCourseName) => {
+		if (newCourseName && newCourseName !== oldCourseName) {
+			relatedCourses.update({
+				cache: ['related_courses', newCourseName],
+				params: { course: newCourseName },
+			})
+			relatedCourses.reload()
+		}
+	}
 )
-
 </script>
diff --git a/frontend/src/pages/CourseDetail.vue b/frontend/src/pages/CourseDetail.vue
index 7e5c8d4f..da16d37e 100644
--- a/frontend/src/pages/CourseDetail.vue
+++ b/frontend/src/pages/CourseDetail.vue
@@ -131,16 +131,16 @@ const course = createResource({
 })
 
 watch(
-    () => route.params.courseName,
-    (newCourseName, oldCourseName) => {
-        if (newCourseName && newCourseName !== oldCourseName) {
-            course.update({
-                cache: ['course', newCourseName],
-                params: { course: newCourseName }
-            })
-            course.reload()
-        }
-    }
+	() => route.params.courseName,
+	(newCourseName, oldCourseName) => {
+		if (newCourseName && newCourseName !== oldCourseName) {
+			course.update({
+				cache: ['course', newCourseName],
+				params: { course: newCourseName },
+			})
+			course.reload()
+		}
+	}
 )
 
 const breadcrumbs = computed(() => {
diff --git a/lms/lms/utils.py b/lms/lms/utils.py
index 110097ef..28fee41a 100644
--- a/lms/lms/utils.py
+++ b/lms/lms/utils.py
@@ -2182,5 +2182,6 @@ def get_related_courses(course):
 		related_course_details.append(get_course_details(related_course))
 	return related_course_details
 
+
 def persona_captured():
 	frappe.db.set_single_value("LMS Settings", "persona_captured", 1)

From b1e78835260a58a83fe4bd9cce1965cf10561b43 Mon Sep 17 00:00:00 2001
From: OsafAliSayed <aousafalisayedb2@gmail.com>
Date: Tue, 10 Jun 2025 18:03:43 +0000
Subject: [PATCH 4/4] fix(relatedCourses): remove loading component

---
 frontend/src/components/RelatedCourses.vue | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/frontend/src/components/RelatedCourses.vue b/frontend/src/components/RelatedCourses.vue
index 4f3d5ae7..8a359294 100644
--- a/frontend/src/components/RelatedCourses.vue
+++ b/frontend/src/components/RelatedCourses.vue
@@ -20,18 +20,6 @@
 			</router-link>
 		</div>
 	</div>
-	<div v-else-if="relatedCourses.loading" class="mt-10">
-		<div class="text-2xl font-semibold text-ink-gray-9 mb-6">
-			{{ __('Related Courses') }}
-		</div>
-		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-			<div
-				v-for="n in 3"
-				:key="n"
-				class="animate-pulse bg-gray-200 rounded-md h-80"
-			></div>
-		</div>
-	</div>
 </template>
 
 <script setup>