feat: course details page design
This commit is contained in:
Jannat Patel
27
frontend/src/components/BatchCard.vue
Normal file
27
frontend/src/components/BatchCard.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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],
|
||||
|
||||
115
frontend/src/components/CourseReviews.vue
Normal file
115
frontend/src/components/CourseReviews.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
34
frontend/src/pages/Batches.vue
Normal file
34
frontend/src/pages/Batches.vue
Normal file
@@ -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>
|
||||
@@ -43,17 +43,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-[70%,20%] gap-10">
|
||||
<div>
|
||||
<div v-html="course.data.description"></div>
|
||||
<div class="grid grid-cols-[60%,20%] gap-20 mt-10">
|
||||
<div class="">
|
||||
<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({
|
||||
@@ -87,4 +88,19 @@ const breadcrumbs = computed(() => {
|
||||
})
|
||||
return items
|
||||
})
|
||||
</script>
|
||||
</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>
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
27
frontend/src/pages/Lesson.vue
Normal file
27
frontend/src/pages/Lesson.vue
Normal file
@@ -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>
|
||||
@@ -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({
|
||||
|
||||
Reference in New Issue
Block a user