feat: course details page

frontend/src/pages/CourseDetail.vue

@@ -1,7 +1,90 @@
 <template>
-    <div>
-        Course Detail
+    <div v-if="course.data" class="h-screen text-base">
+        <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="breadcrumbs"
+            />
+        </header>
+        <div class="m-5">
+            <div>
+                <div class="text-3xl font-semibold">
+                    {{ course.data.title }}
+                </div>
+                 <div class="mt-1">
+                    {{ course.data.short_introduction }}
+                </div>
+                <div class="flex items-center justify-between mt-3 w-1/3">
+                    <div class="flex items-center">
+                        <Star class="h-5 w-5 text-gray-100 fill-orange-500"/>
+                        <span class="ml-1">
+                            {{ course.data.avg_rating }}
+                        </span>
+                    </div>
+                    &middot;
+                    <div class="flex items-center">
+                        <Users class="h-4 w-4 text-gray-700"/>
+                        <span class="ml-1">
+                            {{ course.data.enrollment_count }}
+                        </span>
+                    </div>
+                    &middot;
+                    <div class="flex items-center">
+                        <BookOpen class="h-4 w-4 text-gray-700 mr-1"/>
+                        <span v-if="course.data.instructors.length == 1">
+                            {{ course.data.instructors[0].full_name }}
+                        </span>
+                        <span v-if="course.data.instructors.length == 2">
+                            {{ course.data.instructors[0].first_name }} and {{ course.data.instructors[1].first_name }}
+                        </span>
+                        <span v-if="course.data.instructors.length > 2">
+                            {{ course.data.instructors[0].first_name }} and {{ course.data.instructors.length - 1 }} others
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="grid grid-cols-[70%,20%] gap-10">
+                <div>
+                    <div v-html="course.data.description"></div>
+                    <CourseOutline :courseName="course.data.name"/>
+                </div>
+                <div>
+                    <CourseCardOverlay :course="course"/>
+                </div>
+            </div>
+        </div>
+        
     </div>
 </template>
 <script setup>
+import { createResource, Breadcrumbs } from "frappe-ui";
+import { computed } from "vue";
+import { BookOpen, Users, Star } from 'lucide-vue-next'
+import CourseCardOverlay from '@/components/CourseCardOverlay.vue';
+import CourseOutline from '@/components/CourseOutline.vue';
+
+const props = defineProps({
+    courseName: {
+        type: String,
+        required: true,
+    },
+})
+console.log(props.courseName)
+const course = createResource({
+    url: "lms.lms.utils.get_course_details",
+    cache: ["course", props.courseName],
+    params: {
+        course: props.courseName
+    },
+    auto: true,
+});
+console.log(course)
+const breadcrumbs = computed(() => {
+    let items = [{ label: "All Courses", route: { name: "Courses" } }]
+    items.push({
+        label: course?.data?.title,
+        route: { name: "CourseDetail", params: { course: course?.data?.name } },
+    })
+    return items
+})
 </script>

frontend/src/pages/Courses.vue

@@ -42,8 +42,8 @@
           </div>
         </template>
         <template #default="{ tab }">
-          <div v-if="tab.courses && tab.courses.value.length" class="grid grid-cols-3 gap-8 mt-5" >
-            <router-link v-for="course in tab.courses.value" :to="{ name: 'CourseDetail', params: { course: course.name } }">
+          <div v-if="tab.courses && tab.courses.value.length" class="grid grid-cols-3 gap-8 mt-5">
+            <router-link v-for="course in tab.courses.value" :to="{ name: 'CourseDetail', params: { courseName: course.name } }">
               <CourseCard :course="course" />
             </router-link>
           </div>
@@ -62,17 +62,14 @@
 </template>
 
 <script setup>
+import { sessionStore } from '@/stores/session'
 import { createListResource, Breadcrumbs, Tabs, Badge, Select } from 'frappe-ui';
 import CourseCard from '@/components/CourseCard.vue';
 import { Plus } from 'lucide-vue-next'
 import { ref, computed } from 'vue'
-import { usersStore } from '@/stores/user'
-import { sessionStore } from '@/stores/session'
 
-const { isLoggedIn } = sessionStore()
-const { getUser } = usersStore()
+const { isLoggedIn, getUser } = sessionStore()
 const user = computed(() => isLoggedIn && getUser())
-
 const courses = createListResource({
   type: 'list',
   cache: "courses",
@@ -81,39 +78,58 @@ const courses = createListResource({
   auto: true,
 });
 
+const is_moderator = computed(() => {
+  if (user && user.value?.roles?.includes('Moderator')) {
+    return true;
+  }
+  return false;
+});
+
+const is_instructor = computed(() => {
+  if (user && user.value?.roles?.includes('Course Creator')) {
+    return true;
+  }
+  return false;
+});
+
 const tabIndex = ref(0)
 const tabs = [
   {
     label: 'Live',
     courses: computed(() => courses.data?.live || []),
     count: computed(() => courses.data?.live?.length),
-    show: true
   },
   {
     label: 'Upcoming',
     courses: computed(() => courses.data?.upcoming),
     count: computed(() => courses.data?.upcoming?.length),
-    show: true
-  },
-  {
+  }
+];
+
+if (user.value) {
+  tabs.push({
     label: 'Enrolled',
     courses: computed(() => courses.data?.enrolled),
     count: computed(() => courses.data?.enrolled?.length),
-    show: user
-  },
-  {
-    label: 'Created',
-    courses: computed(() => courses.data?.created),
-    count: computed(() => courses.data?.created?.length),
-    show: computed(() => user && (user.roles.includes('Course Creator') || user.roles.includes('Moderator')))
-  },
-  {
-    label: 'Under Review',
-    courses: computed(() => courses.data?.under_review),
-    count: computed(() => courses.data?.under_review?.length),
-    show: computed(() => user && user.roles.includes('Moderator'))
-  },
-];
+  });
+
+  if (is_moderator.value || is_instructor.value || courses.data?.created?.length) {
+    tabs.push({
+      label: 'Created',
+      courses: computed(() => courses.data?.created),
+      count: computed(() => courses.data?.created?.length),
+    });
+  };
+
+  if (is_moderator.value) {
+    tabs.push({
+      label: 'Under Review',
+      courses: computed(() => courses.data?.under_review),
+      count: computed(() => courses.data?.under_review?.length),
+    });
+  }
+};
+
 
 const orderOptions = [
   {