fix: review button

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)