eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: course details page design

Browse Source
This commit is contained in:
Jannat Patel
2023-12-13 10:33:34 +05:30
parent d4671fb888
commit c50f2147fd
11 changed files with 340 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/components/BatchCard.vue Normal file
View 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>

28
frontend/src/components/CourseCardOverlay.vue
View File

@@ -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>

36
frontend/src/components/CourseOutline.vue
View File

@@ -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
View 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>

5
frontend/src/components/UserAvatar.vue
View File

@@ -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
View 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>

30
frontend/src/pages/CourseDetail.vue
View File

@@ -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>

2
frontend/src/pages/Courses.vue
View File

@@ -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
View 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>

12
frontend/src/router.js
View File

@@ -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({

59
lms/lms/utils.py
View File

@@ -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(
avg_rating, frappe.get_system_settings("float_precision") or 3
)
course.avg_rating = flt(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