fix: review button

frontend/src/components/Controls/Rating.vue

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

frontend/src/components/CourseCard.vue

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

frontend/src/components/CourseCardOverlay.vue

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

frontend/src/components/CourseOutline.vue

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

frontend/src/components/CourseReviews.vue

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

frontend/src/components/Modals/ReviewModal.vue

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