fix: review button

This commit is contained in:
Jannat Patel
2024-02-01 10:48:05 +05:30
parent 8f317d2f44
commit 53eb95612c
11 changed files with 237 additions and 199 deletions

View File

@@ -2,8 +2,8 @@
<div class="flex text-center">
<div v-for="index in 5">
<Star
:class="{ 'fill-orange-500': index <= rating }"
class="h-5 w-5 fill-gray-400 text-gray-200 mr-1 cursor-pointer"
:class="index <= rating ? 'fill-orange-500' : ''"
class="h-6 w-6 fill-gray-400 text-gray-50 mr-1 cursor-pointer"
@click="markRating(index)"
/>
</div>

View File

@@ -1,7 +1,7 @@
<template>
<div
v-if="course.title"
class="flex flex-col border border-gray-200 h-full rounded-md shadow-sm text-base overflow-auto"
class="flex flex-col h-full rounded-md shadow-md text-base overflow-auto"
style="min-height: 320px"
>
<div
@@ -10,12 +10,9 @@
:style="{ backgroundImage: 'url(' + encodeURI(course.image) + ')' }"
>
<div class="flex relative top-4 left-4 w-fit">
<div
class="course-card-pills rounded-md border border-gray-200"
v-for="tag in course.tags"
>
<Badge theme="gray" size="lg" class="mr-2" v-for="tag in course.tags">
{{ tag }}
</div>
</Badge>
</div>
<div v-if="!course.image" class="image-placeholder">
{{ course.title[0] }}
@@ -23,25 +20,34 @@
</div>
<div class="flex flex-col flex-auto p-4">
<div class="flex items-center justify-between mb-2">
<div
v-if="course.lesson_count"
class="flex items-center space-x-1 py-1"
>
<BookOpen class="h-4 w-4 stroke-1.5 text-gray-700" />
<span> {{ course.lesson_count }} </span>
<div v-if="course.lesson_count">
<Tooltip
:text="__('Lessons')"
class="flex items-center space-x-1 py-1"
>
<BookOpen class="h-4 w-4 stroke-1.5 text-gray-700" />
<span> {{ course.lesson_count }} </span>
</Tooltip>
</div>
<div
v-if="course.enrollment_count"
class="flex items-center space-x-1 py-1"
>
<Users class="h-4 w-4 stroke-1.5 text-gray-700" />
<span> {{ course.enrollment_count }} </span>
<div v-if="course.enrollment_count">
<Tooltip
:text="__('Enrolled Students')"
class="flex items-center space-x-1 py-1"
>
<Users class="h-4 w-4 stroke-1.5 text-gray-700" />
<span> {{ course.enrollment_count }} </span>
</Tooltip>
</div>
<div v-if="course.avg_rating" class="flex items-center space-x-1 py-1">
<Star class="h-4 w-4 stroke-1.5 text-gray-700" />
<span> {{ course.avg_rating }} </span>
<div v-if="course.avg_rating">
<Tooltip
:text="__('Average Rating')"
class="flex items-center space-x-1 py-1"
>
<Star class="h-4 w-4 stroke-1.5 text-gray-700" />
<span> {{ course.avg_rating }} </span>
</Tooltip>
</div>
<div v-if="course.status != 'Approved'">
@@ -110,8 +116,7 @@
import { BookOpen, Users, Star } from 'lucide-vue-next'
import UserAvatar from '@/components/UserAvatar.vue'
import { sessionStore } from '@/stores/session'
import { Badge, createResource } from 'frappe-ui'
import { ref, watchEffect } from 'vue'
import { Badge, Tooltip } from 'frappe-ui'
const { user } = sessionStore()

View File

@@ -1,11 +1,14 @@
<template>
<div class="shadow rounded-md" style="width: 300px">
<div class="border border-gray-200 rounded-md min-w-80">
<iframe
v-if="course.data.video_link"
:src="video_link"
class="rounded-t-md"
class="rounded-t-md min-h-56 min-w-80"
/>
<div class="p-5">
<div v-if="course.data.price" class="text-2xl font-semibold mb-3">
{{ course.data.price }}
</div>
<router-link
v-if="course.data.membership"
:to="{
@@ -21,7 +24,7 @@
},
}"
>
<Button variant="solid" class="w-full mb-3">
<Button variant="solid" size="md" class="w-full">
<span>
{{ __('Continue Learning') }}
</span>
@@ -37,7 +40,7 @@
},
}"
>
<Button variant="solid" class="w-full mb-3">
<Button variant="solid" size="md" class="w-full">
<span>
{{ __('Buy this course') }}
</span>
@@ -47,7 +50,8 @@
v-else
@click="enrollStudent()"
variant="solid"
class="w-full mb-3"
class="w-full"
size="md"
>
<span>
{{ __('Start Learning') }}
@@ -56,30 +60,32 @@
<Button
v-if="user?.data?.is_moderator"
variant="subtle"
class="w-full mb-3"
class="w-full"
size="md"
>
<span>
{{ __('Edit') }}
</span>
</Button>
<div class="text-lg font-semibold mb-3">
{{ course.data.price }}
<div class="mt-8 mb-4 font-medium">
{{ __('This course has:') }}
</div>
<div class="flex items-center mb-3">
<Users class="h-4 w-4 text-gray-700" />
<span class="ml-1">
{{ course.data.enrollment_count_formatted }} {{ __('Enrolled') }}
</span>
</div>
<div class="flex items-center mb-3">
<BookOpen class="h-4 w-4 text-gray-700" />
<span class="ml-1">
<div class="flex items-center mb-4">
<BookOpen class="h-5 w-5 stroke-1.5 text-gray-600" />
<span class="ml-2">
{{ course.data.lesson_count }} {{ __('Lessons') }}
</span>
</div>
<div class="flex items-center mb-4">
<Users class="h-5 w-5 stroke-1.5 text-gray-600" />
<span class="ml-2">
{{ course.data.enrollment_count_formatted }}
{{ __('Enrolled Students') }}
</span>
</div>
<div class="flex items-center">
<Star class="h-4 w-4 fill-orange-500 text-gray-100" />
<span class="ml-1">
<Star class="h-5 w-5 stroke-1.5 fill-orange-500 text-gray-50" />
<span class="ml-2">
{{ course.data.avg_rating }} {{ __('Rating') }}
</span>
</div>

View File

@@ -1,28 +1,40 @@
<template>
<div class="course-outline text-base">
<div class="mt-4">
<div class="text-base">
<div v-if="showHeader" class="flex justify-between mb-4">
<div class="text-2xl font-semibold">
{{ __('Course Content') }}
</div>
<!-- <span class="font-medium cursor-pointer" @click="expandAllChapters()">
{{ expandAll ? __("Collapse all chapters") : __("Expand all chapters") }}
</span> -->
</div>
<div :class="{ 'shadow rounded-md pt-2 px-2': showOutline }">
<Disclosure
v-slot="{ open }"
v-for="(chapter, index) in outline.data"
:key="chapter.name"
:defaultOpen="openChapter(chapter.idx)"
>
<DisclosureButton class="flex w-full px-2 pt-2 pb-3">
<DisclosureButton ref="" class="flex w-full px-2 py-4">
<ChevronRight
:class="{
'rotate-90 transform duration-200': open,
'duration-200': !open,
open: index == 1,
}"
class="h-5 w-5 text-gray-900 stroke-1 mr-2"
class="h-4 w-4 text-gray-900 stroke-1 mr-2"
/>
<div class="text-base font-medium">
<div class="text-base text-left font-medium">
{{ chapter.title }}
</div>
<div class="ml-auto text-sm">
{{ chapter.lessons.length }}
{{ chapter.lessons.length == 1 ? __('lesson') : __('lessons') }}
</div>
</DisclosureButton>
<DisclosurePanel class="pb-2">
<div v-for="lesson in chapter.lessons" :key="lesson.name">
<div class="outline-lesson my-2 pl-9">
<div class="outline-lesson py-2 pl-8">
<router-link
:to="{
name: 'Lesson',
@@ -58,6 +70,7 @@
</template>
<script setup>
import { createResource } from 'frappe-ui'
import { ref } from 'vue'
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
import {
ChevronRight,
@@ -68,11 +81,20 @@ import {
import { useRoute } from 'vue-router'
const route = useRoute()
const expandAll = ref(true)
const props = defineProps({
courseName: {
type: String,
required: true,
},
showOutline: {
type: Boolean,
default: false,
},
showHeader: {
type: Boolean,
default: false,
},
})
const outline = createResource({
@@ -87,10 +109,13 @@ const outline = createResource({
const openChapter = (index) => {
return index == route.params.chapterNumber || index == 1
}
const expandAllChapters = () => {
expandAll.value = !expandAll.value
}
</script>
<style>
.outline-lesson:has(.router-link-active) {
background-color: theme('colors.gray.100');
padding: 0.5rem 0 0.5rem 2.25rem;
}
</style>

View File

@@ -1,86 +1,51 @@
<template>
<div v-if="reviews.data" class="my-10">
<div class="text-2xl font-semibold mb-5">
{{ __('Reviews') }}
<div v-if="reviews.data" class="mt-20 mb-10">
<Button
v-if="membership && !hasReviewed.data"
@click="openReviewModal()"
class="float-right"
>
{{ __('Write a Review') }}
</Button>
<div class="flex items-center font-semibold text-2xl">
<Star class="h-6 w-6 stroke-1 text-gray-50 fill-orange-500 mr-1" />
{{ avg_rating }} {{ __('ratings and ') }} {{ reviews.data.length }}
{{ __('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 v-if="membership" @click="openReviewModal()">
<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 class="grid gap-8 mt-10">
<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 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 class="mt-4 leading-5">
{{ review.review }}
</div>
</div>
<div
class="mx-3 h-px border-t border-gray-200"
v-if="index < reviews.data.length - 1"
></div>
<div v-if="review.review" class="mt-4 leading-5">
{{ review.review }}
</div>
</div>
</div>
</div>
<ReviewModal
v-model="showReviewModal"
v-model:reloadReviews="reviews"
v-model:hasReviewed="hasReviewed"
:courseName="courseName"
/>
</template>
@@ -106,6 +71,19 @@ const props = defineProps({
},
})
const hasReviewed = createResource({
url: 'frappe.client.get_count',
cache: ['eligible_to_review', props.courseName, props.membership.member],
params: {
doctype: 'LMS Course Review',
filters: {
course: props.courseName,
owner: props.membership.member,
},
},
auto: true,
})
const reversedRange = (count) =>
Array.from({ length: count }, (_, index) => count - index)

View File

@@ -39,6 +39,8 @@ import { createToast } from '@/utils/'
const show = defineModel()
const reviews = defineModel('reloadReviews')
const hasReviewed = defineModel('hasReviewed')
let review = reactive({
review: '',
rating: 0,
@@ -73,6 +75,7 @@ function submitReview(close) {
},
onSuccess() {
reviews.value.reload()
hasReviewed.value.reload()
},
onError(err) {
createToast({

View File

@@ -6,65 +6,84 @@
<Breadcrumbs class="h-7" :items="breadcrumbs" />
</header>
<div class="m-5">
<div>
<div class="text-3xl font-semibold">
{{ course.data.title }}
</div>
<div class="my-3">
{{ course.data.short_introduction }}
</div>
<div class="flex items-center justify-between w-1/3">
<div v-if="course.data.avg_rating" 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 class="flex justify-between w-full">
<div class="w-2/3">
<div class="text-3xl font-semibold">
{{ course.data.title }}
</div>
<span v-if="course.data.avg_rating">&middot;</span>
<div v-if="course.data.enrollment_count" class="flex items-center">
<Users class="h-4 w-4 text-gray-700" />
<span class="ml-1">
{{ course.data.enrollment_count_formatted }}
</span>
<div class="my-3">
{{ course.data.short_introduction }}
</div>
<span v-if="course.data.enrollment_count">&middot;</span>
<div class="flex items-center">
<span
class="mr-1"
:class="{
'avatar-group overlap': course.data.instructors.length > 1,
}"
<Tooltip
v-if="course.data.avg_rating"
:text="__('Average Rating')"
class="flex items-center"
>
<UserAvatar
v-for="instructor in course.data.instructors"
:user="instructor"
/>
</span>
<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>
<Star class="h-5 w-5 text-gray-100 fill-orange-500" />
<span class="ml-1">
{{ course.data.avg_rating }}
</span>
</Tooltip>
<span v-if="course.data.avg_rating" class="mx-3">&middot;</span>
<Tooltip
v-if="course.data.enrollment_count"
:text="__('Enrolled Students')"
class="flex items-center"
>
<Users class="h-4 w-4 text-gray-700" />
<span class="ml-1">
{{ course.data.enrollment_count_formatted }}
</span>
</Tooltip>
<span v-if="course.data.enrollment_count" class="mx-3"
>&middot;</span
>
<div class="flex items-center">
<span
class="mr-1"
:class="{
'avatar-group overlap': course.data.instructors.length > 1,
}"
>
<UserAvatar
v-for="instructor in course.data.instructors"
:user="instructor"
/>
</span>
<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 class="flex mt-3 mb-4 w-fit">
<Badge
theme="gray"
size="lg"
class="mr-2"
v-for="tag in course.data.tags"
>
{{ tag }}
</Badge>
</div>
</div>
</div>
<div class="grid grid-cols-[60%,20%] gap-20 mt-10">
<div class="">
<div
v-html="course.data.description"
class="course-description"
></div>
<div class="mt-10">
<div class="text-2xl font-semibold">
{{ __('Course Content') }}
</div>
<CourseOutline :courseName="course.data.name" />
<CourseOutline
:courseName="course.data.name"
:showOutline="true"
:showHeader="true"
/>
</div>
<CourseReviews
v-if="course.data.avg_rating"
@@ -73,7 +92,7 @@
:membership="course.data.membership"
/>
</div>
<div>
<div class="">
<CourseCardOverlay :course="course" />
</div>
</div>
@@ -81,7 +100,7 @@
</div>
</template>
<script setup>
import { createResource, Breadcrumbs } from 'frappe-ui'
import { createResource, Breadcrumbs, Badge, Tooltip } from 'frappe-ui'
import { computed } from 'vue'
import { Users, Star } from 'lucide-vue-next'
import CourseCardOverlay from '@/components/CourseCardOverlay.vue'

View File

@@ -9,7 +9,7 @@
:items="[{ label: __('All Courses'), route: { name: 'Courses' } }]"
/>
<div class="flex">
<Button v-if="user.data.is_moderator" variant="solid">
<Button v-if="user.data?.is_moderator" variant="solid">
<template #prefix>
<Plus class="h-4 w-4" />
</template>
@@ -17,8 +17,19 @@
</Button>
</div>
</header>
<div class="pb-5">
<Tabs v-model="tabIndex" :tabs="tabs" tablistClass="overflow-x-visible">
<div class="">
<div
v-if="courses.data.length == 0 && courses.list.loading"
class="p-5 text-base text-gray-700"
>
Loading Courses...
</div>
<Tabs
v-else
v-model="tabIndex"
:tabs="tabs"
tablistClass="overflow-x-visible"
>
<template #tab="{ tab, selected }">
<div>
<button
@@ -27,16 +38,7 @@
>
<component v-if="tab.icon" :is="tab.icon" class="h-5" />
{{ __(tab.label) }}
<Badge
:class="
selected
? 'text-gray-800 border border-gray-800'
: 'border border-gray-500'
"
variant="subtle"
theme="gray"
size="sm"
>
<Badge theme="gray">
{{ tab.count }}
</Badge>
</button>
@@ -45,7 +47,7 @@
<template #default="{ tab }">
<div
v-if="tab.courses && tab.courses.value.length"
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 mt-5 mx-5"
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5 my-5 mx-5"
>
<router-link
v-for="course in tab.courses.value"

View File

@@ -98,7 +98,7 @@
allowfullscreen
></iframe>
</div>
<div v-for="block in lesson.data.body.split('\n\n')">
<div v-for="block in lesson.data.body.split('\n\n\n')">
<div v-if="block.includes('{{ YouTubeVideo')">
<iframe
class="youtube-video"

View File

@@ -84,7 +84,7 @@ def get_membership(course, member=None, batch=None):
membership = frappe.db.get_value(
"LMS Enrollment",
filters,
["name", "batch_old", "current_lesson", "member_type", "progress"],
["name", "batch_old", "current_lesson", "member_type", "progress", "member"],
as_dict=True,
)
@@ -362,10 +362,8 @@ def get_mentors(course):
return course_mentors
def is_eligible_to_review(course, membership):
def is_eligible_to_review(course):
"""Checks if user is eligible to review the course"""
if not membership:
return False
if frappe.db.count(
"LMS Course Review", {"course": course, "owner": frappe.session.user}
):
@@ -1184,6 +1182,7 @@ def get_course_details(course):
[
"name",
"title",
"tags",
"description",
"image",
"video_link",
@@ -1198,7 +1197,7 @@ def get_course_details(course):
],
as_dict=1,
)
course_details.tags = get_tags(course_details.name)
course_details.tags = course_details.tags.split(",") if course_details.tags else []
course_details.lesson_count = get_lesson_count(course_details.name)
course_details.enrollment_count = frappe.db.count(
@@ -1215,9 +1214,9 @@ def get_course_details(course):
course_details.instructors = get_instructors(course_details.name)
if course_details.paid_course:
course_details.course_price, course_details.currency = check_multicurrency(
course_details.course_price, course_details.currency, None, course_details.amount_usd
)
"""course_details.course_price, course_details.currency = check_multicurrency(
course_details.course_price, course_details.currency, None, course_details.amount_usd
)"""
course_details.price = fmt_money(
course_details.course_price, 0, course_details.currency
)
@@ -1229,7 +1228,7 @@ def get_course_details(course):
course_details.membership = frappe.db.get_value(
"LMS Enrollment",
{"member": frappe.session.user, "course": course_details.name},
["name", "course", "current_lesson", "progress"],
["name", "course", "current_lesson", "progress", "member"],
as_dict=1,
)
course_details.is_instructor = is_instructor(course_details.name)
@@ -1238,6 +1237,7 @@ def get_course_details(course):
course_details.current_lesson = get_lesson_index(
course_details.membership.current_lesson
)
return course_details
@@ -1306,7 +1306,7 @@ def get_lesson(course, chapter, lesson):
not lesson_details.include_in_preview
and not membership
and not has_course_moderator_role()
and not is_instructor(course.name)
and not is_instructor(course)
):
return {
"no_preview": 1,

View File

@@ -1,4 +1,4 @@
{% if is_eligible_to_review(course.name, membership) %}
{% if membership and is_eligible_to_review(course.name) %}
<span class="btn btn-secondary btn-sm review-link">
{{ _("Write a review") }}
</span>