fix: review button
This commit is contained in:
@@ -2,8 +2,8 @@
|
|||||||
<div class="flex text-center">
|
<div class="flex text-center">
|
||||||
<div v-for="index in 5">
|
<div v-for="index in 5">
|
||||||
<Star
|
<Star
|
||||||
:class="{ 'fill-orange-500': index <= rating }"
|
:class="index <= rating ? 'fill-orange-500' : ''"
|
||||||
class="h-5 w-5 fill-gray-400 text-gray-200 mr-1 cursor-pointer"
|
class="h-6 w-6 fill-gray-400 text-gray-50 mr-1 cursor-pointer"
|
||||||
@click="markRating(index)"
|
@click="markRating(index)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
v-if="course.title"
|
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"
|
style="min-height: 320px"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
@@ -10,12 +10,9 @@
|
|||||||
:style="{ backgroundImage: 'url(' + encodeURI(course.image) + ')' }"
|
:style="{ backgroundImage: 'url(' + encodeURI(course.image) + ')' }"
|
||||||
>
|
>
|
||||||
<div class="flex relative top-4 left-4 w-fit">
|
<div class="flex relative top-4 left-4 w-fit">
|
||||||
<div
|
<Badge theme="gray" size="lg" class="mr-2" v-for="tag in course.tags">
|
||||||
class="course-card-pills rounded-md border border-gray-200"
|
|
||||||
v-for="tag in course.tags"
|
|
||||||
>
|
|
||||||
{{ tag }}
|
{{ tag }}
|
||||||
</div>
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="!course.image" class="image-placeholder">
|
<div v-if="!course.image" class="image-placeholder">
|
||||||
{{ course.title[0] }}
|
{{ course.title[0] }}
|
||||||
@@ -23,25 +20,34 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col flex-auto p-4">
|
<div class="flex flex-col flex-auto p-4">
|
||||||
<div class="flex items-center justify-between mb-2">
|
<div class="flex items-center justify-between mb-2">
|
||||||
<div
|
<div v-if="course.lesson_count">
|
||||||
v-if="course.lesson_count"
|
<Tooltip
|
||||||
class="flex items-center space-x-1 py-1"
|
: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>
|
<BookOpen class="h-4 w-4 stroke-1.5 text-gray-700" />
|
||||||
|
<span> {{ course.lesson_count }} </span>
|
||||||
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div v-if="course.enrollment_count">
|
||||||
v-if="course.enrollment_count"
|
<Tooltip
|
||||||
class="flex items-center space-x-1 py-1"
|
: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>
|
<Users class="h-4 w-4 stroke-1.5 text-gray-700" />
|
||||||
|
<span> {{ course.enrollment_count }} </span>
|
||||||
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="course.avg_rating" class="flex items-center space-x-1 py-1">
|
<div v-if="course.avg_rating">
|
||||||
<Star class="h-4 w-4 stroke-1.5 text-gray-700" />
|
<Tooltip
|
||||||
<span> {{ course.avg_rating }} </span>
|
: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>
|
||||||
|
|
||||||
<div v-if="course.status != 'Approved'">
|
<div v-if="course.status != 'Approved'">
|
||||||
@@ -110,8 +116,7 @@
|
|||||||
import { BookOpen, Users, Star } from 'lucide-vue-next'
|
import { BookOpen, Users, Star } from 'lucide-vue-next'
|
||||||
import UserAvatar from '@/components/UserAvatar.vue'
|
import UserAvatar from '@/components/UserAvatar.vue'
|
||||||
import { sessionStore } from '@/stores/session'
|
import { sessionStore } from '@/stores/session'
|
||||||
import { Badge, createResource } from 'frappe-ui'
|
import { Badge, Tooltip } from 'frappe-ui'
|
||||||
import { ref, watchEffect } from 'vue'
|
|
||||||
|
|
||||||
const { user } = sessionStore()
|
const { user } = sessionStore()
|
||||||
|
|
||||||
|
|||||||
@@ -1,11 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="shadow rounded-md" style="width: 300px">
|
<div class="border border-gray-200 rounded-md min-w-80">
|
||||||
<iframe
|
<iframe
|
||||||
v-if="course.data.video_link"
|
v-if="course.data.video_link"
|
||||||
:src="video_link"
|
:src="video_link"
|
||||||
class="rounded-t-md"
|
class="rounded-t-md min-h-56 min-w-80"
|
||||||
/>
|
/>
|
||||||
<div class="p-5">
|
<div class="p-5">
|
||||||
|
<div v-if="course.data.price" class="text-2xl font-semibold mb-3">
|
||||||
|
{{ course.data.price }}
|
||||||
|
</div>
|
||||||
<router-link
|
<router-link
|
||||||
v-if="course.data.membership"
|
v-if="course.data.membership"
|
||||||
:to="{
|
:to="{
|
||||||
@@ -21,7 +24,7 @@
|
|||||||
},
|
},
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<Button variant="solid" class="w-full mb-3">
|
<Button variant="solid" size="md" class="w-full">
|
||||||
<span>
|
<span>
|
||||||
{{ __('Continue Learning') }}
|
{{ __('Continue Learning') }}
|
||||||
</span>
|
</span>
|
||||||
@@ -37,7 +40,7 @@
|
|||||||
},
|
},
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<Button variant="solid" class="w-full mb-3">
|
<Button variant="solid" size="md" class="w-full">
|
||||||
<span>
|
<span>
|
||||||
{{ __('Buy this course') }}
|
{{ __('Buy this course') }}
|
||||||
</span>
|
</span>
|
||||||
@@ -47,7 +50,8 @@
|
|||||||
v-else
|
v-else
|
||||||
@click="enrollStudent()"
|
@click="enrollStudent()"
|
||||||
variant="solid"
|
variant="solid"
|
||||||
class="w-full mb-3"
|
class="w-full"
|
||||||
|
size="md"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
{{ __('Start Learning') }}
|
{{ __('Start Learning') }}
|
||||||
@@ -56,30 +60,32 @@
|
|||||||
<Button
|
<Button
|
||||||
v-if="user?.data?.is_moderator"
|
v-if="user?.data?.is_moderator"
|
||||||
variant="subtle"
|
variant="subtle"
|
||||||
class="w-full mb-3"
|
class="w-full"
|
||||||
|
size="md"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
{{ __('Edit') }}
|
{{ __('Edit') }}
|
||||||
</span>
|
</span>
|
||||||
</Button>
|
</Button>
|
||||||
<div class="text-lg font-semibold mb-3">
|
<div class="mt-8 mb-4 font-medium">
|
||||||
{{ course.data.price }}
|
{{ __('This course has:') }}
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center mb-3">
|
<div class="flex items-center mb-4">
|
||||||
<Users class="h-4 w-4 text-gray-700" />
|
<BookOpen class="h-5 w-5 stroke-1.5 text-gray-600" />
|
||||||
<span class="ml-1">
|
<span class="ml-2">
|
||||||
{{ 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">
|
|
||||||
{{ course.data.lesson_count }} {{ __('Lessons') }}
|
{{ course.data.lesson_count }} {{ __('Lessons') }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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">
|
<div class="flex items-center">
|
||||||
<Star class="h-4 w-4 fill-orange-500 text-gray-100" />
|
<Star class="h-5 w-5 stroke-1.5 fill-orange-500 text-gray-50" />
|
||||||
<span class="ml-1">
|
<span class="ml-2">
|
||||||
{{ course.data.avg_rating }} {{ __('Rating') }}
|
{{ course.data.avg_rating }} {{ __('Rating') }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,28 +1,40 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="course-outline text-base">
|
<div class="text-base">
|
||||||
<div class="mt-4">
|
<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
|
<Disclosure
|
||||||
v-slot="{ open }"
|
v-slot="{ open }"
|
||||||
v-for="(chapter, index) in outline.data"
|
v-for="(chapter, index) in outline.data"
|
||||||
:key="chapter.name"
|
:key="chapter.name"
|
||||||
:defaultOpen="openChapter(chapter.idx)"
|
: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
|
<ChevronRight
|
||||||
:class="{
|
:class="{
|
||||||
'rotate-90 transform duration-200': open,
|
'rotate-90 transform duration-200': open,
|
||||||
'duration-200': !open,
|
'duration-200': !open,
|
||||||
open: index == 1,
|
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 }}
|
{{ chapter.title }}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="ml-auto text-sm">
|
||||||
|
{{ chapter.lessons.length }}
|
||||||
|
{{ chapter.lessons.length == 1 ? __('lesson') : __('lessons') }}
|
||||||
|
</div>
|
||||||
</DisclosureButton>
|
</DisclosureButton>
|
||||||
<DisclosurePanel class="pb-2">
|
<DisclosurePanel class="pb-2">
|
||||||
<div v-for="lesson in chapter.lessons" :key="lesson.name">
|
<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
|
<router-link
|
||||||
:to="{
|
:to="{
|
||||||
name: 'Lesson',
|
name: 'Lesson',
|
||||||
@@ -58,6 +70,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { createResource } from 'frappe-ui'
|
import { createResource } from 'frappe-ui'
|
||||||
|
import { ref } from 'vue'
|
||||||
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
|
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
|
||||||
import {
|
import {
|
||||||
ChevronRight,
|
ChevronRight,
|
||||||
@@ -68,11 +81,20 @@ import {
|
|||||||
import { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
const expandAll = ref(true)
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
courseName: {
|
courseName: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
showOutline: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
showHeader: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const outline = createResource({
|
const outline = createResource({
|
||||||
@@ -87,10 +109,13 @@ const outline = createResource({
|
|||||||
const openChapter = (index) => {
|
const openChapter = (index) => {
|
||||||
return index == route.params.chapterNumber || index == 1
|
return index == route.params.chapterNumber || index == 1
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const expandAllChapters = () => {
|
||||||
|
expandAll.value = !expandAll.value
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
.outline-lesson:has(.router-link-active) {
|
.outline-lesson:has(.router-link-active) {
|
||||||
background-color: theme('colors.gray.100');
|
background-color: theme('colors.gray.100');
|
||||||
padding: 0.5rem 0 0.5rem 2.25rem;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,86 +1,51 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="reviews.data" class="my-10">
|
<div v-if="reviews.data" class="mt-20 mb-10">
|
||||||
<div class="text-2xl font-semibold mb-5">
|
<Button
|
||||||
{{ __('Reviews') }}
|
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>
|
||||||
<div class="flex justify-between">
|
<div class="grid gap-8 mt-10">
|
||||||
<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 v-for="(review, index) in reviews.data">
|
<div v-for="(review, index) in reviews.data">
|
||||||
<div class="my-4">
|
<div class="flex items-center">
|
||||||
<div class="flex items-center">
|
<UserAvatar :user="review.owner_details" :size="'2xl'" />
|
||||||
<UserAvatar :user="review.owner_details" :size="'2xl'" />
|
<div class="mx-4">
|
||||||
<div class="mx-4">
|
<span class="text-lg font-medium mr-4">
|
||||||
<span class="text-lg font-medium mr-4">
|
{{ review.owner_details.full_name }}
|
||||||
{{ review.owner_details.full_name }}
|
</span>
|
||||||
</span>
|
<span>
|
||||||
<span>
|
{{ review.creation }}
|
||||||
{{ review.creation }}
|
</span>
|
||||||
</span>
|
<div class="flex mt-2">
|
||||||
<div class="flex mt-2">
|
<Star
|
||||||
<Star
|
v-for="index in 5"
|
||||||
v-for="index in 5"
|
class="h-5 w-5 text-gray-100 bg-gray-200 rounded-sm mr-2"
|
||||||
class="h-5 w-5 text-gray-100 bg-gray-200 rounded-sm mr-2"
|
:class="
|
||||||
:class="
|
index <= Math.ceil(review.rating)
|
||||||
index <= Math.ceil(review.rating)
|
? 'fill-orange-500'
|
||||||
? 'fill-orange-500'
|
: 'fill-gray-600'
|
||||||
: 'fill-gray-600'
|
"
|
||||||
"
|
/>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-4 leading-5">
|
|
||||||
{{ review.review }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div v-if="review.review" class="mt-4 leading-5">
|
||||||
class="mx-3 h-px border-t border-gray-200"
|
{{ review.review }}
|
||||||
v-if="index < reviews.data.length - 1"
|
</div>
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ReviewModal
|
<ReviewModal
|
||||||
v-model="showReviewModal"
|
v-model="showReviewModal"
|
||||||
v-model:reloadReviews="reviews"
|
v-model:reloadReviews="reviews"
|
||||||
|
v-model:hasReviewed="hasReviewed"
|
||||||
:courseName="courseName"
|
:courseName="courseName"
|
||||||
/>
|
/>
|
||||||
</template>
|
</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) =>
|
const reversedRange = (count) =>
|
||||||
Array.from({ length: count }, (_, index) => count - index)
|
Array.from({ length: count }, (_, index) => count - index)
|
||||||
|
|
||||||
|
|||||||
@@ -39,6 +39,8 @@ import { createToast } from '@/utils/'
|
|||||||
|
|
||||||
const show = defineModel()
|
const show = defineModel()
|
||||||
const reviews = defineModel('reloadReviews')
|
const reviews = defineModel('reloadReviews')
|
||||||
|
const hasReviewed = defineModel('hasReviewed')
|
||||||
|
|
||||||
let review = reactive({
|
let review = reactive({
|
||||||
review: '',
|
review: '',
|
||||||
rating: 0,
|
rating: 0,
|
||||||
@@ -73,6 +75,7 @@ function submitReview(close) {
|
|||||||
},
|
},
|
||||||
onSuccess() {
|
onSuccess() {
|
||||||
reviews.value.reload()
|
reviews.value.reload()
|
||||||
|
hasReviewed.value.reload()
|
||||||
},
|
},
|
||||||
onError(err) {
|
onError(err) {
|
||||||
createToast({
|
createToast({
|
||||||
|
|||||||
@@ -6,65 +6,84 @@
|
|||||||
<Breadcrumbs class="h-7" :items="breadcrumbs" />
|
<Breadcrumbs class="h-7" :items="breadcrumbs" />
|
||||||
</header>
|
</header>
|
||||||
<div class="m-5">
|
<div class="m-5">
|
||||||
<div>
|
<div class="flex justify-between w-full">
|
||||||
<div class="text-3xl font-semibold">
|
<div class="w-2/3">
|
||||||
{{ course.data.title }}
|
<div class="text-3xl font-semibold">
|
||||||
</div>
|
{{ course.data.title }}
|
||||||
<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>
|
</div>
|
||||||
<span v-if="course.data.avg_rating">·</span>
|
<div class="my-3">
|
||||||
<div v-if="course.data.enrollment_count" class="flex items-center">
|
{{ course.data.short_introduction }}
|
||||||
<Users class="h-4 w-4 text-gray-700" />
|
|
||||||
<span class="ml-1">
|
|
||||||
{{ course.data.enrollment_count_formatted }}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<span v-if="course.data.enrollment_count">·</span>
|
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<span
|
<Tooltip
|
||||||
class="mr-1"
|
v-if="course.data.avg_rating"
|
||||||
:class="{
|
:text="__('Average Rating')"
|
||||||
'avatar-group overlap': course.data.instructors.length > 1,
|
class="flex items-center"
|
||||||
}"
|
|
||||||
>
|
>
|
||||||
<UserAvatar
|
<Star class="h-5 w-5 text-gray-100 fill-orange-500" />
|
||||||
v-for="instructor in course.data.instructors"
|
<span class="ml-1">
|
||||||
:user="instructor"
|
{{ course.data.avg_rating }}
|
||||||
/>
|
</span>
|
||||||
</span>
|
</Tooltip>
|
||||||
<span v-if="course.data.instructors.length == 1">
|
<span v-if="course.data.avg_rating" class="mx-3">·</span>
|
||||||
{{ course.data.instructors[0].full_name }}
|
<Tooltip
|
||||||
</span>
|
v-if="course.data.enrollment_count"
|
||||||
<span v-if="course.data.instructors.length == 2">
|
:text="__('Enrolled Students')"
|
||||||
{{ course.data.instructors[0].first_name }} and
|
class="flex items-center"
|
||||||
{{ course.data.instructors[1].first_name }}
|
>
|
||||||
</span>
|
<Users class="h-4 w-4 text-gray-700" />
|
||||||
<span v-if="course.data.instructors.length > 2">
|
<span class="ml-1">
|
||||||
{{ course.data.instructors[0].first_name }} and
|
{{ course.data.enrollment_count_formatted }}
|
||||||
{{ course.data.instructors.length - 1 }} others
|
</span>
|
||||||
</span>
|
</Tooltip>
|
||||||
|
<span v-if="course.data.enrollment_count" class="mx-3"
|
||||||
|
>·</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>
|
|
||||||
<div class="grid grid-cols-[60%,20%] gap-20 mt-10">
|
|
||||||
<div class="">
|
|
||||||
<div
|
<div
|
||||||
v-html="course.data.description"
|
v-html="course.data.description"
|
||||||
class="course-description"
|
class="course-description"
|
||||||
></div>
|
></div>
|
||||||
<div class="mt-10">
|
<div class="mt-10">
|
||||||
<div class="text-2xl font-semibold">
|
<CourseOutline
|
||||||
{{ __('Course Content') }}
|
:courseName="course.data.name"
|
||||||
</div>
|
:showOutline="true"
|
||||||
<CourseOutline :courseName="course.data.name" />
|
:showHeader="true"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<CourseReviews
|
<CourseReviews
|
||||||
v-if="course.data.avg_rating"
|
v-if="course.data.avg_rating"
|
||||||
@@ -73,7 +92,7 @@
|
|||||||
:membership="course.data.membership"
|
:membership="course.data.membership"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="">
|
||||||
<CourseCardOverlay :course="course" />
|
<CourseCardOverlay :course="course" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -81,7 +100,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { createResource, Breadcrumbs } from 'frappe-ui'
|
import { createResource, Breadcrumbs, Badge, Tooltip } from 'frappe-ui'
|
||||||
import { computed } from 'vue'
|
import { computed } from 'vue'
|
||||||
import { Users, Star } from 'lucide-vue-next'
|
import { Users, Star } from 'lucide-vue-next'
|
||||||
import CourseCardOverlay from '@/components/CourseCardOverlay.vue'
|
import CourseCardOverlay from '@/components/CourseCardOverlay.vue'
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
:items="[{ label: __('All Courses'), route: { name: 'Courses' } }]"
|
:items="[{ label: __('All Courses'), route: { name: 'Courses' } }]"
|
||||||
/>
|
/>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<Button v-if="user.data.is_moderator" variant="solid">
|
<Button v-if="user.data?.is_moderator" variant="solid">
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<Plus class="h-4 w-4" />
|
<Plus class="h-4 w-4" />
|
||||||
</template>
|
</template>
|
||||||
@@ -17,8 +17,19 @@
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="pb-5">
|
<div class="">
|
||||||
<Tabs v-model="tabIndex" :tabs="tabs" tablistClass="overflow-x-visible">
|
<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 }">
|
<template #tab="{ tab, selected }">
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
@@ -27,16 +38,7 @@
|
|||||||
>
|
>
|
||||||
<component v-if="tab.icon" :is="tab.icon" class="h-5" />
|
<component v-if="tab.icon" :is="tab.icon" class="h-5" />
|
||||||
{{ __(tab.label) }}
|
{{ __(tab.label) }}
|
||||||
<Badge
|
<Badge theme="gray">
|
||||||
:class="
|
|
||||||
selected
|
|
||||||
? 'text-gray-800 border border-gray-800'
|
|
||||||
: 'border border-gray-500'
|
|
||||||
"
|
|
||||||
variant="subtle"
|
|
||||||
theme="gray"
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
{{ tab.count }}
|
{{ tab.count }}
|
||||||
</Badge>
|
</Badge>
|
||||||
</button>
|
</button>
|
||||||
@@ -45,7 +47,7 @@
|
|||||||
<template #default="{ tab }">
|
<template #default="{ tab }">
|
||||||
<div
|
<div
|
||||||
v-if="tab.courses && tab.courses.value.length"
|
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
|
<router-link
|
||||||
v-for="course in tab.courses.value"
|
v-for="course in tab.courses.value"
|
||||||
|
|||||||
@@ -98,7 +98,7 @@
|
|||||||
allowfullscreen
|
allowfullscreen
|
||||||
></iframe>
|
></iframe>
|
||||||
</div>
|
</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')">
|
<div v-if="block.includes('{{ YouTubeVideo')">
|
||||||
<iframe
|
<iframe
|
||||||
class="youtube-video"
|
class="youtube-video"
|
||||||
|
|||||||
@@ -84,7 +84,7 @@ def get_membership(course, member=None, batch=None):
|
|||||||
membership = frappe.db.get_value(
|
membership = frappe.db.get_value(
|
||||||
"LMS Enrollment",
|
"LMS Enrollment",
|
||||||
filters,
|
filters,
|
||||||
["name", "batch_old", "current_lesson", "member_type", "progress"],
|
["name", "batch_old", "current_lesson", "member_type", "progress", "member"],
|
||||||
as_dict=True,
|
as_dict=True,
|
||||||
)
|
)
|
||||||
|
|
||||||
@@ -362,10 +362,8 @@ def get_mentors(course):
|
|||||||
return course_mentors
|
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"""
|
"""Checks if user is eligible to review the course"""
|
||||||
if not membership:
|
|
||||||
return False
|
|
||||||
if frappe.db.count(
|
if frappe.db.count(
|
||||||
"LMS Course Review", {"course": course, "owner": frappe.session.user}
|
"LMS Course Review", {"course": course, "owner": frappe.session.user}
|
||||||
):
|
):
|
||||||
@@ -1184,6 +1182,7 @@ def get_course_details(course):
|
|||||||
[
|
[
|
||||||
"name",
|
"name",
|
||||||
"title",
|
"title",
|
||||||
|
"tags",
|
||||||
"description",
|
"description",
|
||||||
"image",
|
"image",
|
||||||
"video_link",
|
"video_link",
|
||||||
@@ -1198,7 +1197,7 @@ def get_course_details(course):
|
|||||||
],
|
],
|
||||||
as_dict=1,
|
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.lesson_count = get_lesson_count(course_details.name)
|
||||||
|
|
||||||
course_details.enrollment_count = frappe.db.count(
|
course_details.enrollment_count = frappe.db.count(
|
||||||
@@ -1215,9 +1214,9 @@ def get_course_details(course):
|
|||||||
|
|
||||||
course_details.instructors = get_instructors(course_details.name)
|
course_details.instructors = get_instructors(course_details.name)
|
||||||
if course_details.paid_course:
|
if course_details.paid_course:
|
||||||
course_details.course_price, course_details.currency = check_multicurrency(
|
"""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, None, course_details.amount_usd
|
||||||
)
|
)"""
|
||||||
course_details.price = fmt_money(
|
course_details.price = fmt_money(
|
||||||
course_details.course_price, 0, course_details.currency
|
course_details.course_price, 0, course_details.currency
|
||||||
)
|
)
|
||||||
@@ -1229,7 +1228,7 @@ def get_course_details(course):
|
|||||||
course_details.membership = frappe.db.get_value(
|
course_details.membership = frappe.db.get_value(
|
||||||
"LMS Enrollment",
|
"LMS Enrollment",
|
||||||
{"member": frappe.session.user, "course": course_details.name},
|
{"member": frappe.session.user, "course": course_details.name},
|
||||||
["name", "course", "current_lesson", "progress"],
|
["name", "course", "current_lesson", "progress", "member"],
|
||||||
as_dict=1,
|
as_dict=1,
|
||||||
)
|
)
|
||||||
course_details.is_instructor = is_instructor(course_details.name)
|
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.current_lesson = get_lesson_index(
|
||||||
course_details.membership.current_lesson
|
course_details.membership.current_lesson
|
||||||
)
|
)
|
||||||
|
|
||||||
return course_details
|
return course_details
|
||||||
|
|
||||||
|
|
||||||
@@ -1306,7 +1306,7 @@ def get_lesson(course, chapter, lesson):
|
|||||||
not lesson_details.include_in_preview
|
not lesson_details.include_in_preview
|
||||||
and not membership
|
and not membership
|
||||||
and not has_course_moderator_role()
|
and not has_course_moderator_role()
|
||||||
and not is_instructor(course.name)
|
and not is_instructor(course)
|
||||||
):
|
):
|
||||||
return {
|
return {
|
||||||
"no_preview": 1,
|
"no_preview": 1,
|
||||||
|
|||||||
@@ -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">
|
<span class="btn btn-secondary btn-sm review-link">
|
||||||
{{ _("Write a review") }}
|
{{ _("Write a review") }}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user