feat: course details page

frontend/src/components/CourseCard.vue

@@ -68,10 +68,8 @@ import { BookOpen, Users, Star } from 'lucide-vue-next'
 import { computed } from 'vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { sessionStore } from '@/stores/session'
-import { usersStore } from '@/stores/user'
 
-const { isLoggedIn } = sessionStore()
-const { getUser } = usersStore()
+const { isLoggedIn, getUser } = sessionStore()
 const user = computed(() => isLoggedIn && getUser())
 
 const props = defineProps({

frontend/src/components/CourseCardOverlay.vue

@@ -0,0 +1,47 @@
+<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">
+                <span>
+                    {{ __("Start Learning") }}
+                </span>
+            </Button>
+            <div class="flex items-center">
+                <Users class="h-4 w-4 text-gray-700"/>
+                <span class="ml-1">
+                    {{ course.data.enrollment_count }}
+                </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">
+                <BookOpen class="h-4 w-4 text-gray-700"/>
+                <span class="ml-1">
+                    {{ course.data.lesson_count }}
+                </span>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { BookOpen, Users, Star } from 'lucide-vue-next'
+import { computed } from 'vue'
+const props = defineProps({
+    course: {
+        type: Object,
+        default: null,
+    },
+});
+
+const video_link = computed(() => {
+    if (props.course.data.video_link) {
+        return "https://www.youtube.com/embed/" + props.course.data.video_link;
+    }
+    return null;
+});
+</script>

frontend/src/components/CourseOutline.vue

@@ -0,0 +1,21 @@
+<template>
+    {{ outline }}
+</template>
+<script setup>
+import { createResource } from "frappe-ui";
+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],
+    params: {
+        course: props.courseName
+    },
+    auto: true,
+});
+</script>

frontend/src/components/UserDropdown.vue

@@ -33,7 +33,6 @@
 <script setup>
 import LMSLogo from '@/components/Icons/LMSLogo.vue'
 import { sessionStore } from '@/stores/session'
-import { usersStore } from '@/stores/user'
 import { Dropdown } from 'frappe-ui'
 import { ChevronDown } from 'lucide-vue-next'
 import { computed } from 'vue'
@@ -45,16 +44,17 @@ const props = defineProps({
     },
 })
 
-const { logout, isLoggedIn } = sessionStore()
-const { getUser } = usersStore()
-
+const { getUser, logout } = sessionStore()
+let { isLoggedIn } = sessionStore();
 const user = computed(() => isLoggedIn && getUser())
 const userDropdownOptions = [
     {
         icon: 'log-out',
         label: 'Log out',
         onClick: () => {
-            logout.submit()
+            logout.submit().then(() => {
+                isLoggedIn = false;
+            });
         },
         condition: () => {
             return isLoggedIn