feat: course details page design

frontend/src/components/BatchCard.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="shadow rounded-md">
+        <div>
+            {{ batch.title }}
+        </div>
+        <div>
+            {{ batch.description }}
+        </div>
+        <div>
+            <Calendar class="h-4 w-4 stroke-1" />
+            {{ batch.start_date }} - {{ batch.end_date }}
+        </div>
+        <div>
+            <Clock class="h-4 w-4 stroke-1" />
+            {{ batch.start_time }} - {{ batch.end_time }}
+        </div>
+    </div>
+</template>
+<script setup>
+import { Calendar, Clock } from "lucide-vue-next"
+const props = defineProps({
+    batch: {
+        type: Object,
+        default: null,
+    },
+});
+</script>

frontend/src/components/CourseCardOverlay.vue

@@ -1,30 +1,30 @@
 <template>
-    <div class="border border-gray-200"  style="width: 300px;">
+    <div class="shadow rounded-md"  style="width: 300px;">
-        <iframe v-if="course.data.video_link" :src="video_link" />
+        <iframe v-if="course.data.video_link" :src="video_link" class="rounded-t-md" />
-        <div>
+        <div class="p-5">
-            <Button variant="solid" class="w-full">
+            <Button variant="solid" class="w-full mb-3">
                 <span>
                     {{ __("Start Learning") }}
                 </span>
             </Button>
-            <div class="flex items-center">
+            <div class="flex items-center mb-3">
                 <Users class="h-4 w-4 text-gray-700"/>
                 <span class="ml-1">
-                    {{ course.data.enrollment_count }}
+                    {{ course.data.enrollment_count }} {{ __("Enrolled") }}
                 </span>
             </div>
-            <div class="flex items-center">
+            <div class="flex items-center mb-3">
-                <Star class="h-5 w-5 fill-orange-500 text-gray-100"/>
-                <span class="ml-1">
-                    {{ course.data.avg_rating }}
-                </span>
-            </div>
-            <div class="flex items-center">
                 <BookOpen class="h-4 w-4 text-gray-700"/>
                 <span class="ml-1">
-                    {{ course.data.lesson_count }}
+                    {{ course.data.lesson_count }} {{ __("Lessons") }}
                 </span>
             </div>
+            <div class="flex items-center">
+                    <Star class="h-4 w-4 fill-orange-500 text-gray-100"/>
+                    <span class="ml-1">
+                        {{ course.data.avg_rating }} {{ __("Rating") }}
+                    </span>
+                </div>
         </div>
     </div>
 </template>

frontend/src/components/CourseOutline.vue

@@ -1,15 +1,47 @@
 <template>
-    {{ outline }}
+    <div class="text-base mt-10">
+        <div class="text-2xl font-semibold">
+            {{ __("Course Content") }}
+        </div>
+        <div class="mt-4">
+            <Disclosure v-slot="{ open }" v-for="chapter in outline.data" :key="chapter.name">
+                <DisclosureButton
+                    class="flex w-full px-2 py-4"
+                    >
+                    <ChevronUp
+                        :class="open ? 'rotate-180 transform' : ''"
+                        class="h-5 w-5 text-gray-900 stroke-1 mr-2"
+                    />
+                    <div class="text-lg font-medium">
+                        {{ chapter.title }}
+                    </div>
+                </DisclosureButton>
+                <DisclosurePanel class="px-10 pb-4">
+                    <div v-for="lesson in chapter.lessons" :key="lesson.name">
+                        <div class="flex items-center text-lg mb-2">
+                            <MonitorPlay v-if="lesson.icon === 'icon-youtube'" class="h-4 w-4 text-gray-900 stroke-1 mr-2"/>
+                            <HelpCircle v-else-if="lesson.icon === 'icon-quiz'" class="h-4 w-4 text-gray-900 stroke-1 mr-2"/>
+                            <FileText v-else-if="lesson.icon === 'icon-list'" class="h-4 w-4 text-gray-900 stroke-1 mr-2"/>
+                            {{ lesson.title }}
+                        </div>
+                    </div>
+                </DisclosurePanel>
+            </Disclosure>
+        </div>
+    </div>
 </template>
 <script setup>
 import { createResource } from "frappe-ui";
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue';
+import { ChevronUp, MonitorPlay, HelpCircle, FileText } from 'lucide-vue-next';
+
 const props = defineProps({
     courseName: {
         type: String,
         required: true,
     },
 });
-console.log(props);
+
 const outline = createResource({
     url: "lms.lms.utils.get_course_outline",
     cache: ["course_outline", props.courseName],

frontend/src/components/CourseReviews.vue

@@ -0,0 +1,115 @@
+<template>
+    <div v-if="reviews.data" class="my-10">
+        <div class="text-2xl font-semibold mb-5">
+            {{ __("Reviews") }}
+        </div>
+        <div class="flex justify-between">
+            <div class="flex flex-col items-center">
+                <div v-if="avg_rating" class="text-3xl font-semibold mb-2">
+                    {{ avg_rating }}
+                </div>
+                <div class="flex mb-2">
+                    <Star v-for="index in 5" class="h-5 w-5 text-gray-100 bg-gray-200 rounded-sm mr-1" :class="(index <= Math.ceil(avg_rating)) ? 'fill-orange-500' : 'fill-gray-600'"/>
+                </div>
+                <div class="mb-2">
+                    {{ reviews.data.length }} {{ __("reviews") }}
+                </div>
+                <Button>
+                    <span>
+                        {{ __("Write a review") }}
+                    </span>
+                </Button>
+            </div>
+            <div class="border border-gray-300 mx-4"></div>
+            <div class="flex flex-col">
+                <div v-for="index in reversedRange(5)">
+                    <div class="flex items-center mb-4">
+                        <span class="mr-2">
+                            {{ index }} {{ __("stars") }}
+                        </span>
+                        <div class="bg-gray-200 rounded-full w-52 mr-2">
+                            <div class="bg-gray-900 h-1 rounded-full" :style="{ width: rating_percent[index] + '%' }"></div>
+                        </div>
+                        <span>
+                            {{ Math.floor(rating_percent[index]) }}%
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="mt-12">
+            <div v-for="(review, index) in reviews.data">
+                <div class="my-4">
+                    <div class="flex items-center">
+                        <UserAvatar :user="review.owner_details" :size="'2xl'"/>
+                        <div class="mx-4">
+                            <span class="text-lg font-medium mr-4">
+                                {{ review.owner_details.full_name }}
+                            </span>
+                            <span>
+                                {{ review.creation }}
+                            </span>
+                            <div class="flex mt-2">
+                                <Star v-for="index in 5" class="h-5 w-5 text-gray-100 bg-gray-200 rounded-sm mr-2" :class="(index <= Math.ceil(review.rating)) ? 'fill-orange-500' : 'fill-gray-600'"/>
+                            </div>
+                        </div>
+                        <div>
+                            
+                        </div>
+                    </div>
+                    <div class="mt-4">
+                        {{ review.review }}
+                    </div>
+                </div>
+                <div class="mx-3 h-px border-t border-gray-200" v-if="index < reviews.data.length - 1"></div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { Star } from 'lucide-vue-next'
+import { createResource, Button } from "frappe-ui";
+import { computed } from "vue";
+import UserAvatar from '@/components/UserAvatar.vue';
+
+const props = defineProps({
+    courseName: {
+        type: String,
+        required: true,
+    },
+    avg_rating: {
+        type: Number,
+        required: true,
+    },
+});
+
+const reversedRange = (count) => Array.from({ length: count }, (_, index) => count - index);
+
+const reviews = createResource({
+    url: "lms.lms.utils.get_reviews",
+    cache: ["course_reviews", props.courseName],
+    params: {
+        course: props.courseName
+    },
+    auto: true,
+});
+
+const rating_percent = computed(() => {
+    let rating_count = {};
+    let rating_percent = {};
+
+    for (const key of [1, 2, 3, 4, 5]) {
+        rating_count[key] = 0;
+    }
+
+    for (const review of reviews?.data) {
+        rating_count[review.rating] += 1;
+    }
+
+    [1,2,3,4,5].forEach((key) => {
+        console.log(key, rating_count[key], reviews.data.length);
+        rating_percent[key] = (rating_count[key] / reviews.data.length * 100).toFixed(2);
+    });
+    return rating_percent;
+});
+</script>

frontend/src/components/UserAvatar.vue

@@ -1,5 +1,5 @@
 <template>
-    <Avatar class="avatar border border-gray-300" v-if="user" :label="user.full_name" :image="user.user_image" size="lg" v-bind="$attrs" />
+    <Avatar class="avatar border border-gray-300" v-if="user" :label="user.full_name" :image="user.user_image" :size="size" v-bind="$attrs" />
 </template>
 <script setup>
 import { Avatar } from 'frappe-ui'
@@ -8,5 +8,8 @@ const props = defineProps({
         type: Object,
         default: null,
     },
+    size: {
+        type: String,
+    },
 });
 </script>

frontend/src/pages/Batches.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="h-screen">
+        <header
+            class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+        >
+            <Breadcrumbs class="h-7" :items="[{ label: __('All Batches'), route: { name: 'Batches' } }]"/>
+            <div class="flex">
+                <Button variant="solid">
+                    <template #prefix>
+                        <Plus class="h-4 w-4" />
+                    </template>
+                    {{ __("New Batch") }}
+                </Button>
+            </div>
+        </header>
+        <div class="mx-5 my-10">
+            <div class="grid grid-cols-3 gap-8 mt-5">
+                <BatchCard v-for="batch in batches.data" :batch="batch" />
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { createResource, Breadcrumbs } from "frappe-ui";
+import { Plus } from "lucide-vue-next"
+import BatchCard from '@/components/BatchCard.vue';
+
+const batches = createResource({
+    url: "lms.lms.utils.get_batches",
+    cache: ["batches"],
+    auto: true,
+});
+console.log(batches)
+</script>

frontend/src/pages/CourseDetail.vue

@@ -43,17 +43,17 @@
                     </div>
                 </div>
             </div>
-            <div class="grid grid-cols-[70%,20%] gap-10">
+            <div class="grid grid-cols-[60%,20%] gap-20 mt-10">
-                <div>
+                <div class="">
-                    <div v-html="course.data.description"></div>
+                    <div v-html="course.data.description" class="course-description"></div>
                     <CourseOutline :courseName="course.data.name"/>
+                    <CourseReviews :courseName="course.data.name" :avg_rating="course.data.avg_rating"/>
                 </div>
                 <div>
                     <CourseCardOverlay :course="course"/>
                 </div>
             </div>
         </div>
-        
     </div>
 </template>
 <script setup>
@@ -62,6 +62,7 @@ import { computed } from "vue";
 import { BookOpen, Users, Star } from 'lucide-vue-next'
 import CourseCardOverlay from '@/components/CourseCardOverlay.vue';
 import CourseOutline from '@/components/CourseOutline.vue';
+import CourseReviews from '@/components/CourseReviews.vue';
 
 const props = defineProps({
     courseName: {
@@ -69,7 +70,7 @@ const props = defineProps({
         required: true,
     },
 })
-console.log(props.courseName)
+
 const course = createResource({
     url: "lms.lms.utils.get_course_details",
     cache: ["course", props.courseName],
@@ -78,7 +79,7 @@ const course = createResource({
     },
     auto: true,
 });
-console.log(course)
+
 const breadcrumbs = computed(() => {
     let items = [{ label: "All Courses", route: { name: "Courses" } }]
     items.push({
@@ -88,3 +89,18 @@ const breadcrumbs = computed(() => {
     return items
 })
 </script>
+<style>
+.course-description p {
+    margin-bottom: 1rem;
+    line-height: 1.7;
+}
+.course-description li {
+    line-height: 1.7;
+}
+
+.course-description ol {
+    list-style: auto;
+    margin: revert;
+    padding: revert;
+}
+</style>

frontend/src/pages/Courses.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-screen">
+    <div class="h-screen">
     <header
           class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
         >

frontend/src/pages/Lesson.vue

@@ -0,0 +1,27 @@
+<template>
+    Lesson Page
+</template>
+<script setup>
+import { createResource, Button } from "frappe-ui";
+
+const props = defineProps({
+    courseName: {
+        type: String,
+        required: true,
+    },
+    lessonNumber: {
+        type: Number,
+        required: true,
+    },
+});
+
+const lesson = createResource({
+    url: "lms.lms.utils.get_lesson",
+    cache: ["lesson", props.courseName, props.lessonNumber],
+    params: {
+        course: props.courseName,
+        lesson: props.lessonNumber,
+    },
+    auto: true,
+});
+</script>

frontend/src/router.js

@@ -17,6 +17,18 @@ const routes = [
 		component: () => import('@/pages/CourseDetail.vue'),
 		props: true,
 	},
+	{
+		// Create a route for path /courses/inventory-management/learn/1.1
+		path: '/courses/:courseName/learn/:chapterId',
+		name: 'Lesson',
+		component: () => import('@/pages/Lesson.vue'),
+		props: true,
+	},
+	{
+		path: '/batches',
+		name: 'Batches',
+		component: () => import('@/pages/Batches.vue'),
+	},
 ]
 
 let router = createRouter({

lms/lms/utils.py

@@ -11,7 +11,6 @@ from frappe.desk.doctype.notification_log.notification_log import (
 	enqueue_create_notification,
 	get_title,
 )
-from frappe.utils import get_fullname
 from frappe.desk.search import get_user_groups
 from frappe.desk.notifications import extract_mentions
 from frappe.utils import (
@@ -24,7 +23,8 @@ from frappe.utils import (
 	get_datetime,
 	getdate,
 	validate_phone_number,
-	ceil,
+	get_fullname,
+	pretty_date,
 )
 from frappe.utils.dateutils import get_period
 from lms.lms.md import find_macros, markdown_to_html
@@ -137,7 +137,6 @@ def get_lesson_details(chapter):
 	lesson_list = frappe.get_all(
 		"Lesson Reference", {"parent": chapter.name}, ["lesson", "idx"], order_by="idx"
 	)
-
 	for row in lesson_list:
 		lesson_details = frappe.db.get_value(
 			"Course Lesson",
@@ -220,6 +219,7 @@ def get_average_rating(course):
 	return sum(ratings) / len(ratings)
 
 
+@frappe.whitelist(allow_guest=True)
 def get_reviews(course):
 	reviews = frappe.get_all(
 		"LMS Course Review",
@@ -227,6 +227,7 @@ def get_reviews(course):
 		["review", "rating", "owner", "creation"],
 		order_by="creation desc",
 	)
+
 	out_of_ratings = frappe.db.get_all(
 		"DocField", {"parent": "LMS Course Review", "fieldtype": "Rating"}, ["options"]
 	)
@@ -236,6 +237,7 @@ def get_reviews(course):
 		review.owner_details = frappe.db.get_value(
 			"User", review.owner, ["name", "username", "full_name", "user_image"], as_dict=True
 		)
+		review.creation = pretty_date(review.creation)
 
 	return reviews
 
@@ -1163,7 +1165,6 @@ def get_courses():
 
 @frappe.whitelist(allow_guest=True)
 def get_course_details(course):
-	print(course)
 	course = frappe.db.get_value(
 		"LMS Course",
 		course,
@@ -1180,22 +1181,20 @@ def get_course_details(course):
 		],
 		as_dict=1,
 	)
-	print(course)
 	course.tags = get_tags(course.name)
 	course.lesson_count = get_lesson_count(course.name)
 
 	course.enrollment_count = frappe.db.count(
 		"LMS Enrollment", {"course": course.name, "member_type": "Student"}
 	)
+	course.enrollment_count = format_number(course.enrollment_count)
 
 	avg_rating = get_average_rating(course.name) or 0
-	course.avg_rating = frappe.utils.flt(
+	course.avg_rating = flt(avg_rating, frappe.get_system_settings("float_precision") or 3)
-		avg_rating, frappe.get_system_settings("float_precision") or 3
-	)
 
 	course.instructors = get_instructors(course.name)
 	if course.paid_course:
-		course.price = frappe.utils.fmt_money(course.course_price, 0, course.currency)
+		course.price = fmt_money(course.course_price, 0, course.currency)
 	else:
 		course.price = _("Free")
 
@@ -1256,6 +1255,46 @@ def get_course_outline(course):
 			["name", "title", "description", "idx"],
 			as_dict=True,
 		)
-		chapter_details.lessons = get_lessons(chapter.chapter)
+		chapter_details.lessons = get_lessons(course, chapter_details)
 		outline.append(chapter_details)
 	return outline
+
+
+@frappe.whitelist()
+def get_lesson(lesson):
+	lesson = frappe.db.get_value(
+		"Course Lesson",
+		lesson,
+		[
+			"name",
+			"title",
+			"description",
+			"idx",
+			"video_link",
+			"body",
+			"youtube",
+			"quiz_id",
+			"question",
+			"file_type",
+		],
+		as_dict=True,
+	)
+	return lesson
+
+
+@frappe.whitelist(allow_guest=True)
+def get_batches():
+	batches = frappe.get_all(
+		"LMS Batch",
+		fields=[
+			"title",
+			"description",
+			"start_date",
+			"end_date",
+			"start_time",
+			"end_time",
+			"seat_count",
+		],
+	)
+
+	return batches