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;">
-        <iframe v-if="course.data.video_link" :src="video_link" />
-        <div>
-            <Button variant="solid" class="w-full">
+    <div class="shadow rounded-md"  style="width: 300px;">
+        <iframe v-if="course.data.video_link" :src="video_link" class="rounded-t-md" />
+        <div class="p-5">
+            <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">
-                <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">
+            <div class="flex items-center mb-3">
                 <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>