From eb3afbbad1c0b7ea74ae2482dc71a9451c3b49f8 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Wed, 20 Dec 2023 10:35:12 +0530
Subject: [PATCH] feat: rating component

---
 frontend/src/components/CourseCardOverlay.vue |  64 +++++++++--
 frontend/src/components/CourseOutline.vue     |   4 +-
 frontend/src/components/CourseReviews.vue     |  18 ++-
 frontend/src/components/Rating.vue            |  34 ++++++
 frontend/src/components/ReviewModal.vue       |  26 +++++
 frontend/src/pages/Courses.vue                | 108 +++++++++---------
 frontend/src/utils/dialogs.js                 |  35 ++++++
 frontend/src/utils/index.js                   |   8 ++
 frontend/vite.config.js                       |  10 +-
 lms/lms/utils.py                              |  48 ++++----
 10 files changed, 267 insertions(+), 88 deletions(-)
 create mode 100644 frontend/src/components/Rating.vue
 create mode 100644 frontend/src/components/ReviewModal.vue
 create mode 100644 frontend/src/utils/dialogs.js
 create mode 100644 frontend/src/utils/index.js

diff --git a/frontend/src/components/CourseCardOverlay.vue b/frontend/src/components/CourseCardOverlay.vue
index c04625b3..5f8d82c4 100644
--- a/frontend/src/components/CourseCardOverlay.vue
+++ b/frontend/src/components/CourseCardOverlay.vue
@@ -2,16 +2,28 @@
     <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 v-if="course.data.membership" variant="solid" class="w-full mb-3">
-                <span>
-                    {{ __("Continue Learning") }}
-                </span>
-            </Button>
-            <Button v-else variant="solid" class="w-full mb-3" >
+            <router-link v-if="course.data.membership && course.data.current_lesson"
+                :to="{name: 'Lesson', params: {
+                    courseName: course.name,
+                    chapterNumber: course.data.current_lesson.split('.')[0],
+                    lessonNumber: course.data.current_lesson.split('.')[1]
+                }}">
+                <Button variant="solid" class="w-full mb-3">
+                    <span>
+                        {{ __("Continue Learning") }}
+                    </span>
+                </Button>
+            </router-link>
+            <Button v-else @click="enrollStudent()" variant="solid" class="w-full mb-3">
                 <span>
                     {{ __("Start Learning") }}
                 </span>
             </Button>
+            <Button v-if="user?.data?.is_moderator" variant="subtle" class="w-full mb-3">
+                <span>
+                    {{ __("Edit") }}
+                </span>
+            </Button>
             <div class="flex items-center mb-3">
                 <Users class="h-4 w-4 text-gray-700"/>
                 <span class="ml-1">
@@ -35,8 +47,14 @@
 </template>
 <script setup>
 import { BookOpen, Users, Star } from 'lucide-vue-next'
-import { computed } from 'vue'
-import { Button } from "frappe-ui"
+import { computed, inject } from 'vue'
+import { Button, createResource } from "frappe-ui"
+import { createToast } from "@/utils/"
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+const user = inject("$user");
+
 const props = defineProps({
     course: {
         type: Object,
@@ -50,4 +68,34 @@ const video_link = computed(() => {
     }
     return null;
 });
+
+function enrollStudent() {
+    if (!user.data) {
+        createToast({
+            title: "Please Login",
+            icon: 'alert-circle',
+            iconClasses: 'text-yellow-600 bg-yellow-100',
+        })
+        setTimeout(() => {
+            window.location.href = `/login?redirect-to=${window.location.pathname}`
+        }, 3000)
+    } else {
+        const enrollStudentResource = createResource({
+            url: "lms.lms.doctype.lms_enrollment.lms_enrollment.create_membership"
+        })
+        console.log(props.course)
+        enrollStudentResource.submit({
+            course: props.course.data.name
+        }).then(() => {
+            createToast({
+                title: "Enrolled Successfully",
+                icon: 'check',
+                iconClasses: 'text-green-600 bg-green-100',
+            })
+            setTimeout(() => {
+                router.push({ name: 'Lesson', params: { courseName: props.course.data.name, chapterNumber: 1, lessonNumber: 1 } })
+            }, 3000)
+        })
+    }
+}
 </script>
\ No newline at end of file
diff --git a/frontend/src/components/CourseOutline.vue b/frontend/src/components/CourseOutline.vue
index e00d6ee9..5e383814 100644
--- a/frontend/src/components/CourseOutline.vue
+++ b/frontend/src/components/CourseOutline.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="text-base">
         <div class="mt-4">
-            <Disclosure v-slot="{ open }" v-for="(chapter, index) in outline.data" :key="chapter.name">
+            <Disclosure v-slot="{ open }" v-for="(chapter, index) in outline.data" :key="chapter.name" :defaultOpen="index == 0">
                 <DisclosureButton class="flex w-full px-2 pt-2 pb-3">
                     <ChevronRight
                         :class="{'rotate-90 transform duration-200' : open, 'duration-200' : !open, 'open': index == 1}"
@@ -11,7 +11,7 @@
                         {{ chapter.title }}
                     </div>
                 </DisclosureButton>
-                <DisclosurePanel class="px-10 pb-4" :static="index == 0">
+                <DisclosurePanel class="px-10 pb-4">
                     <div v-for="lesson in chapter.lessons" :key="lesson.name">
                         <div class="flex items-center text-base mb-3">
                             <MonitorPlay v-if="lesson.icon === 'icon-youtube'" class="h-4 w-4 text-gray-900 stroke-1 mr-2"/>
diff --git a/frontend/src/components/CourseReviews.vue b/frontend/src/components/CourseReviews.vue
index d620e818..735acafd 100644
--- a/frontend/src/components/CourseReviews.vue
+++ b/frontend/src/components/CourseReviews.vue
@@ -14,7 +14,7 @@
                 <div class="mb-2">
                     {{ reviews.data.length }} {{ __("reviews") }}
                 </div>
-                <Button>
+                <Button @click="openReviewModal()">
                     <span>
                         {{ __("Write a review") }}
                     </span>
@@ -53,11 +53,8 @@
                                 <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">
+                    <div class="mt-4 leading-5">
                         {{ review.review }}
                     </div>
                 </div>
@@ -65,12 +62,15 @@
             </div>
         </div>
     </div>
+    {{ showReviewModal }}
+    <ReviewModal v-model="showReviewModal"/>
 </template>
 <script setup>
 import { Star } from 'lucide-vue-next'
 import { createResource, Button } from "frappe-ui";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import UserAvatar from '@/components/UserAvatar.vue';
+import ReviewModal from '@/components/ReviewModal.vue';
 
 const props = defineProps({
     courseName: {
@@ -111,4 +111,10 @@ const rating_percent = computed(() => {
     });
     return rating_percent;
 });
+const showReviewModal = ref(false)
+
+function openReviewModal() {
+    console.log("called")
+    showReviewModal.value = true;
+}
 </script>
\ No newline at end of file
diff --git a/frontend/src/components/Rating.vue b/frontend/src/components/Rating.vue
new file mode 100644
index 00000000..c0b8a004
--- /dev/null
+++ b/frontend/src/components/Rating.vue
@@ -0,0 +1,34 @@
+<template>
+    <div class="flex text-center">
+        <div v-for="index in 5">
+            <Star class="h-5 w-5 fill-gray-400 text-gray-200 mr-1 cursor-pointer hover:fill-orange-500" @input="handleChange"/>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+import { Star } from 'lucide-vue-next'
+
+const props = defineProps({
+    id: {
+        type: String,
+        default: '',
+    },
+    modelValue: {
+        type: String,
+        default: '',
+    },
+})
+
+const emit = defineEmits(['update:modelValue'])
+const attrs = useAttrs()
+
+let emitChange = (value: string) => {
+    emit('update:modelValue', value)
+}
+
+let handleChange = (e: Event) => {
+    emitChange((e.target as HTMLInputElement).value)
+}
+</script>
diff --git a/frontend/src/components/ReviewModal.vue b/frontend/src/components/ReviewModal.vue
new file mode 100644
index 00000000..2e83c9c5
--- /dev/null
+++ b/frontend/src/components/ReviewModal.vue
@@ -0,0 +1,26 @@
+<template>
+    <Dialog v-model="show" :options='{
+        title: __("Write a Review"),
+        size: "xl",
+        actions: [
+            {
+                label: "Submit",
+                variant: "solid",
+                onClick: ({ close }) => submitReview(close)
+            }
+        ]
+    }'>
+        <template #body-content>
+            <Textarea type="text" size="md" rows="5" />
+            <Rating />
+        </template>
+    </Dialog>
+</template>
+<script setup>
+import { Dialog, Textarea } from 'frappe-ui'
+import { defineModel } from "vue"
+import Rating from '@/components/Rating.vue';
+
+const show = defineModel()
+console.log(show)
+</script>
diff --git a/frontend/src/pages/Courses.vue b/frontend/src/pages/Courses.vue
index 44865d36..0d766ab9 100644
--- a/frontend/src/pages/Courses.vue
+++ b/frontend/src/pages/Courses.vue
@@ -1,58 +1,64 @@
 <template>
-  <div v-if="courses.data" 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 Courses'), route: { name: 'Courses' } }]" />
-      <div class="flex">
-        <Button variant="solid">
-          <template #prefix>
-            <Plus class="h-4 w-4" />
+  <div class="h-screen">
+    <div v-if="courses.data">
+      <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 Courses'), route: { name: 'Courses' } }]" />
+        <div class="flex">
+          <Button variant="solid">
+            <template #prefix>
+              <Plus class="h-4 w-4" />
+            </template>
+            {{ __("New Course") }}
+          </Button>
+        </div>
+      </header>
+      <div class="mx-5 py-5">
+        <Tabs class="overflow-hidden" v-model="tabIndex" :tabs="tabs">
+          <template #tab="{ tab, selected }">
+            <div>
+              <button
+                class="group -mb-px flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
+                :class="{ 'text-gray-900': selected }">
+                <component v-if="tab.icon" :is="tab.icon" class="h-5" />
+                {{ __(tab.label) }}
+                <Badge :class="{ 'text-gray-900 border border-gray-900': selected }" variant="subtle" theme="gray"
+                  size="sm">
+                  {{ tab.count }}
+                </Badge>
+              </button>
+            </div>
           </template>
-          {{ __("New Course") }}
-        </Button>
-      </div>
-    </header>
-    <div class="mx-5 py-5">
-      <Tabs class="overflow-hidden" v-model="tabIndex" :tabs="tabs">
-        <template #tab="{ tab, selected }">
-          <div>
-            <button
-              class="group -mb-px flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
-              :class="{ 'text-gray-900': selected }">
-              <component v-if="tab.icon" :is="tab.icon" class="h-5" />
-              {{ __(tab.label) }}
-              <Badge :class="{ 'text-gray-900 border border-gray-900': selected }" variant="subtle" theme="gray"
-                size="sm">
-                {{ tab.count }}
-              </Badge>
-            </button>
-          </div>
-        </template>
-        <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">
-            <router-link v-for="course in tab.courses.value"
-              :to="
-							course.membership && course.current_lesson 
-								? {name: 'Lesson', params: { 
-										courseName: course.name, 
-										chapterNumber: course.current_lesson.split('.')[0], 
-										lessonNumber: course.current_lesson.split('.')[1] }} 
-								: course.membership ? { name: 'Lesson', params: { 
-										courseName: course.name, 
-										chapterNumber: 1, 
-										lessonNumber: 1 } 
-								} : { name: 'CourseDetail', params: { courseName: course.name } }">
-              <CourseCard :course="course" />
-            </router-link>
-          </div>
-          <div v-else class="grid flex-1 place-items-center text-xl font-medium text-gray-500">
-            <div class="flex flex-col items-center justify-center mt-4">
-              <div>
-                {{ __("No {0} courses found").format(tab.label.toLowerCase()) }}
+          <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">
+              <router-link v-for="course in tab.courses.value"
+                :to="course.membership && course.current_lesson
+                    ? {
+                      name: 'Lesson', params: {
+                        courseName: course.name,
+                        chapterNumber: course.current_lesson.split('.')[0],
+                        lessonNumber: course.current_lesson.split('.')[1]
+                      }
+                    }
+                    : course.membership ? {
+                      name: 'Lesson', params: {
+                        courseName: course.name,
+                        chapterNumber: 1,
+                        lessonNumber: 1
+                      }
+                    } : { name: 'CourseDetail', params: { courseName: course.name } }">
+                <CourseCard :course="course" />
+              </router-link>
+            </div>
+            <div v-else class="grid flex-1 place-items-center text-xl font-medium text-gray-500">
+              <div class="flex flex-col items-center justify-center mt-4">
+                <div>
+                  {{ __("No {0} courses found").format(tab.label.toLowerCase()) }}
+                </div>
               </div>
             </div>
-          </div>
-        </template>
-      </Tabs>
+          </template>
+        </Tabs>
+      </div>
     </div>
   </div>
 </template>
diff --git a/frontend/src/utils/dialogs.js b/frontend/src/utils/dialogs.js
new file mode 100644
index 00000000..9750e6cf
--- /dev/null
+++ b/frontend/src/utils/dialogs.js
@@ -0,0 +1,35 @@
+import { Dialog, ErrorMessage } from 'frappe-ui'
+import { h, reactive, ref } from 'vue'
+
+let dialogs = ref([])
+
+export let Dialogs = {
+	name: 'Dialogs',
+	render() {
+		return dialogs.value.map((dialog) => {
+			return h(
+				Dialog,
+				{
+					options: dialog,
+					modelValue: dialog.show,
+					'onUpdate:modelValue': (val) => (dialog.show = val),
+				},
+				() => [
+					h(
+						'p',
+						{ class: 'text-p-base text-gray-700' },
+						dialog.message
+					),
+					h(ErrorMessage, { class: 'mt-2', message: dialog.error }),
+				]
+			)
+		})
+	},
+}
+
+export function createDialog(options) {
+	let dialog = reactive(options)
+	dialog.key = `dialog-${Math.random().toString(36).slice(2, 9)}`
+	dialogs.value.push(dialog)
+	dialog.show = true
+}
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
new file mode 100644
index 00000000..a5f6b104
--- /dev/null
+++ b/frontend/src/utils/index.js
@@ -0,0 +1,8 @@
+import { toast } from 'frappe-ui'
+
+export function createToast(options) {
+	toast({
+		position: 'bottom-right',
+		...options,
+	})
+}
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index b4a7c19d..2fe3fca7 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -5,7 +5,15 @@ import frappeui from 'frappe-ui/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-	plugins: [frappeui(), vue()],
+	plugins: [
+		frappeui(),
+		vue({
+			script: {
+				defineModel: true,
+				propsDestructure: true,
+			},
+		}),
+	],
 	resolve: {
 		alias: {
 			'@': path.resolve(__dirname, 'src'),
diff --git a/lms/lms/utils.py b/lms/lms/utils.py
index bf62643f..37ab6286 100644
--- a/lms/lms/utils.py
+++ b/lms/lms/utils.py
@@ -1169,7 +1169,7 @@ def get_courses():
 
 @frappe.whitelist(allow_guest=True)
 def get_course_details(course):
-	course = frappe.db.get_value(
+	course_details = frappe.db.get_value(
 		"LMS Course",
 		course,
 		[
@@ -1185,38 +1185,46 @@ def get_course_details(course):
 		],
 		as_dict=1,
 	)
-	course.tags = get_tags(course.name)
-	course.lesson_count = get_lesson_count(course.name)
+	course_details.tags = get_tags(course_details.name)
+	course_details.lesson_count = get_lesson_count(course_details.name)
 
-	course.enrollment_count = frappe.db.count(
-		"LMS Enrollment", {"course": course.name, "member_type": "Student"}
+	course_details.enrollment_count = frappe.db.count(
+		"LMS Enrollment", {"course": course_details.name, "member_type": "Student"}
+	)
+	course_details.enrollment_count_formatted = format_number(
+		course_details.enrollment_count
 	)
-	course.enrollment_count_formatted = format_number(course.enrollment_count)
 
-	avg_rating = get_average_rating(course.name) or 0
-	course.avg_rating = flt(avg_rating, frappe.get_system_settings("float_precision") or 3)
+	avg_rating = get_average_rating(course_details.name) or 0
+	course_details.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 = fmt_money(course.course_price, 0, course.currency)
+	course_details.instructors = get_instructors(course_details.name)
+	if course_details.paid_course:
+		course_details.price = fmt_money(
+			course_details.course_price, 0, course_details.currency
+		)
 	else:
-		course.price = _("Free")
+		course_details.price = _("Free")
 
 	if frappe.session.user == "Guest":
-		course.membership = None
-		course.is_instructor = False
+		course_details.membership = None
+		course_details.is_instructor = False
 	else:
-		course.membership = frappe.db.get_value(
+		course_details.membership = frappe.db.get_value(
 			"LMS Enrollment",
-			{"member": frappe.session.user, "course": course.name},
+			{"member": frappe.session.user, "course": course_details.name},
 			["name", "course", "current_lesson", "progress"],
 			as_dict=1,
 		)
-		course.is_instructor = is_instructor(course.name)
+		course_details.is_instructor = is_instructor(course_details.name)
 
-	if course.membership and course.membership.current_lesson:
-		course.current_lesson = get_lesson_index(course.membership.current_lesson)
-	return course
+	if course_details.membership and course_details.membership.current_lesson:
+		course_details.current_lesson = get_lesson_index(
+			course_details.membership.current_lesson
+		)
+	return course_details
 
 
 def get_categorized_courses(courses):