feat: course home

community/lms/doctype/lms_batch_membership/lms_batch_membership.js

@@ -10,5 +10,5 @@ frappe.ui.form.on('LMS Batch Membership', {
 				}
 			};
 		});
-	},
+	}
 });

community/lms/doctype/lms_course/lms_course.py

@@ -274,6 +274,11 @@ class LMSCourse(Document):
             return False
         return True
 
+    def get_average_rating(self):
+        ratings = [review.rating for review in self.get_reviews()]
+        if not len(ratings):
+            return None
+        return sum(ratings)/len(ratings)
 
     def get_outline(self):
         return CourseOutline(self)

community/lms/doctype/lms_course_mentor_mapping/lms_course_mentor_mapping.js

@@ -2,7 +2,13 @@
 // For license information, please see license.txt
 
 frappe.ui.form.on('LMS Course Mentor Mapping', {
-	// refresh: function(frm) {
+	onload: function(frm) {
-
+		frm.set_query('mentor', function(doc) {
-	// }
+			return {
+				filters: {
+					"ignore_user_type": 1,
+				}
+			};
+		});
+	},
 });

community/lms/doctype/lms_course_review/lms_course_review.json

@@ -13,23 +13,26 @@
   {
    "fieldname": "review",
    "fieldtype": "Small Text",
+   "in_list_view": 1,
    "label": "Review"
   },
   {
    "fieldname": "rating",
    "fieldtype": "Rating",
+   "in_list_view": 1,
    "label": "Rating"
   },
   {
    "fieldname": "course",
    "fieldtype": "Link",
+   "in_list_view": 1,
    "label": "Course",
    "options": "LMS Course"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2021-06-28 15:00:35.146196",
+ "modified": "2021-07-05 14:57:03.841430",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Course Review",

community/lms/doctype/lms_course_review/lms_course_review.py

@@ -1,8 +1,18 @@
 # Copyright (c) 2021, FOSS United and contributors
 # For license information, please see license.txt
 
-# import frappe
+import frappe
 from frappe.model.document import Document
 
 class LMSCourseReview(Document):
 	pass
+
+@frappe.whitelist()
+def submit_review(rating, review, course):
+    frappe.get_doc({
+        "doctype": "LMS Course Review",
+        "rating": rating,
+        "review": review,
+        "course": course
+    }).save(ignore_permissions=True)
+    return "OK"

community/lms/widgets/ChapterTeaser.html

@@ -1,42 +1,33 @@
 <div>
-  <a data-target="#{{ chapter.get_slugified_chapter_title() }}" data-toggle="collapse" aria-expanded="false">
+  <div class="small-title chapter-title" data-target="#{{ chapter.get_slugified_chapter_title() }}" data-toggle="collapse"
-    <img class="" src="/assets/community/icons/side-arrow.svg"/>
+    aria-expanded="false">
-    <span class="chapter-title">
+    <img class="chapter-icon" src="/assets/community/icons/side-arrow.svg">
-      {{ chapter.title }}
+    {{ index }}. {{ chapter.title }}
-    </span>
+  </div>
-  </a>
   <div class="chapter-content collapse navbar-collapse" id="{{ chapter.get_slugified_chapter_title() }}">
-    <div class="course-card-meta">
+    <div class="chapter-description muted-text">
       {{ chapter.description }}
     </div>
     <div class="lessons">
       {% for lesson in chapter.get_lessons() %}
-        <div class="lesson-info">
+      <div class="lesson-info">
-          {% if show_link or lesson.include_in_preview %}
+        {% if show_link or lesson.include_in_preview %}
-            <a class="" href="{{ course.get_learn_url(course.get_lesson_index(lesson.name)) }}{{course.query_parameter}}" data-course="{{ course.name }}">
+        <a class="dark-links" href="{{ course.get_learn_url(course.get_lesson_index(lesson.name)) }}{{course.query_parameter}}"
-              {{ loop.index }}.
+          data-course="{{ course.name }}">
-              {{ lesson.title }}</a>
+          {{ lesson.title }}</a>
-          {% else %}
+        {% else %}
-            <div title="This lesson is not available for preview">
+        <div title="This lesson is not available for preview">
-              <span class="">
+          <span class="dark-links">
-                {{ loop.index }}.
+            {{ lesson.title }}
-                {{ lesson.title }}
+          </span>
-              </span>
+          <i class="fa fa-lock ml-2"></i>
-              <i class="fa fa-lock ml-2"></i>
-            </div>
-          {% endif %}
         </div>
+        {% endif %}
+      </div>
       {% endfor %}
     </div>
   </div>
 </div>
-<script>
+{% if index != course.get_chapters() | length %}
-  frappe.ready(() => {
+<div class="card-divider"></div>
-    var elements = $(".collapse")
+{% endif %}
-    elements.each((i, elem) => {
-      if (i <= 5) {
-        $(elem).addClass("show")
-      }
-    })
-  })
-</script>

community/lms/widgets/CourseOutline.html

@@ -1,10 +1,12 @@
+{% if course.get_chapters() | length %}
 <div class="">
-  <h3>
+  <div class="course-home-headings">
     Course Outline
-  </h3>
+  </div>
   <div class="coure-outline">
     {% for chapter in course.get_chapters() %}
-      {{ widgets.ChapterTeaser(index=loop.index, chapter=chapter, course=course, batch=batch, show_link=show_link, show_progress=show_progress)}}
+    {{ widgets.ChapterTeaser(index=loop.index, chapter=chapter, course=course, batch=batch, show_link=show_link, show_progress=show_progress)}}
     {% endfor %}
   </div>
 </div>
+{% endif %}

community/lms/widgets/MemberCard.html

@@ -0,0 +1,14 @@
+<div class="common-card-style member-card {{dimension_class}} ">
+  {% set avatar_class = "avatar-xl" if dimension_class == "member-card-large" else "avatar-large"%}
+  {{ widgets.Avatar(member=member, avatar_class=avatar_class) }}
+  <div class="small-title member-card-title">
+    {{ member.full_name }}
+  </div>
+  {% set course_count = member.get_course_count() %}
+  {% if show_course_count and course_count > 0 %}
+  {% set suffix = "Courses" if course_count > 1 else "Course" %}
+  <div class="small-title">
+    Created {{ course_count }} {{ suffix }}
+  </div>
+  {% endif %}
+</div>

community/lms/widgets/Reviews.html

@@ -1,22 +1,22 @@
-<div>
+{% if course.get_reviews() | length %}
+<div class="reviews-parent">
   <div class="reviews-heading">
-    <div class="reviews-title mb-5">Review</div>
+    <div class="course-home-headings">Review</div>
     {% if course.is_eligible_to_review(membership) %}
-    <a href="/lms-course-review?new=1">
+    <a class="review-link" href="">
       Provide your Feedback
     </a>
     {% endif %}
   </div>
-  <div class="cards-parent">
+  <div class="mentors-section">
     {% for review in course.get_reviews() %}
-    <div class="common-card-style review-card">
+    <div class="review-card">
-      <div class="review-content"> {{ review.review }} </div>
+      <div class="common-card-style review-content small-title"> {{ review.review }} </div>
-      <div class="card-divider"></div>
       <div class="review-card-footer">
         <div>
-          {{ widgets.Avatar(member=review.owner_details, avatar_class="avatar-small") }}
+          {{ widgets.Avatar(member=review.owner_details, avatar_class="avatar-medium") }}
           <span class="course-instructor">
-            {{ course.get_instructor().full_name }}
+            {{ review.owner_details.full_name }}
           </span>
         </div>
         <div class="rating">
@@ -32,33 +32,54 @@
   </div>
 </div>
 
-
+<div class="modal fade review-modal" id="review-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
-
+  aria-hidden="true">
-<!-- Modal -->
-<div class="modal fade" id="review-modal" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title">Modal title</h5>
+        <div class="course-home-headings modal-headings">Review</div>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div class="modal-body">
-        <iframe src="/lms-course-review?new=1"></iframe>
+        <form class="review-form" id="review-form">
+          <div class="form-group">
+            <div class="clearfix">
+              <label class="control-label reqd" style="padding-right: 0px;">Rating</label>
+            </div>
+            <div class="control-input-wrapper">
+              <div class="control-input">
+                <div class="rating rating-field" id="rating">
+                  {% for i in [1, 2, 3, 4, 5] %}
+                  <svg class="icon icon-md icon-rating" data-rating="{{ i }}">
+                    <use href="#icon-star"></use>
+                  </svg>
+                  {% endfor %}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <div class="clearfix">
+              <label class="control-label reqd" style="padding-right: 0px;">Review</label>
+            </div>
+            <div class="control-input-wrapper">
+              <div class="control-input">
+                <textarea type="text" autocomplete="off" class="input-with-feedback form-control review-field" data-fieldtype="Text"
+                  data-fieldname="feedback_comments" placeholder="" style="height: 300px;"
+                  spellcheck="false"></textarea>
+              </div>
+            </div>
+          </div>
+          <p class="error-field muted-text"></p>
+        </form>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <div class="wide-button submit-review is-primary" data-course="{{ course.name | urlencode}}" id="submit-review">Submit</div>
-        <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
   </div>
 </div>
-<script>
+{% endif %}
-
-  frappe.ready(() => {
-    frappe.provide('frappe.ui');
-    console.log(frappe.ui)
-  })
-
-</script>

community/www/courses/course.html

@@ -3,107 +3,215 @@
 {% block title %}{{ course.title }}
 {% endblock %}
 {% block head_include %}
-  <meta name="description" content="Courses"/>
+<meta name="description" content="Courses" />
-  <meta name="keywords" content="Courses {{course.title}}"/>
+<meta name="keywords" content="Courses {{course.title}}" />
-  <link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
+<link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
 {% endblock %}
 {% block content %}
-  <div class="common-page-style course-home-page">
+<div class="common-page-style">
-    <div class="common-card-style course-card-wide">
+  <div class="course-home-page">
-      <div class="course-image-wide" style="background-image: url({{ course.image }});">
+    {{ BreadCrum(course) }}
-        <div class="course-tags">
+    {{ CourseCardWide(course) }}
-          {% for tag in course.get_tags() %}
+    {{ CourseOutlineAndCreator(course) }}
-            <div class="course-card-pills">{{ tag }}</div>
+    {{ Mentors(course) }}
-          {% endfor %}
+    {{ CourseDescriptionAndOverview(course) }}
-        </div>
+    {{ widgets.Reviews(course=course, membership=membership) }}
-      </div>
-      <div class="course-card-wide-content">
-        <div class="course-card-wide-title">
-          {{ course.title }}
-        </div>
-        <div class="course-card-wide-intro">
-          {{ course.short_introduction }}
-        </div>
-        <div class="course-buttons">
-          <div class="wide-button start-learning">
-            Start Learning
-            <img class="" src="/assets/community/icons/white-arrow.svg"/>
-          </div>
-          <div class="wide-button video-preview">
-            Watch Video Preview
-            <img class="" src="/assets/community/icons/play.svg"/>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="course-home-outline">
-      {{ widgets.CourseOutline(course=course, show_link=membership) }}
-    </div>
   </div>
+</div>
 {% endblock %}
-{% macro CourseVideo(course) %}
-  {% if course.video_link %}
-    <div class="preview-video">
-      <iframe width="560" height="315" src="{{course.video_link}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
-    </div>
-  {% endif %}
-{% endmacro %}
-{% macro CourseDescription(course) %}
-  <div class="mt-5">
-    <h3>Course Description</h3>
 
-    <div class="course-description text-justify">
+{% macro BreadCrum(course) %}
-      {{ frappe.utils.md_to_html(course.description) }}
+<div class="course-instructor breadcrum">
+  <a class="dark-links" href="/courses">All Courses</a> > <span class="muted-text">{{ course.title }}</span>
+</div>
+{% endmacro %}
+
+<!-- Course Card -->
+
+{% macro CourseCardWide(course) %}
+<div class="common-card-style course-card-wide">
+  <div class="course-image-wide" style="background-image: url({{ course.image }});">
+    <div class="course-tags">
+      {% for tag in course.get_tags() %}
+      <div class="course-card-pills">{{ tag }}</div>
+      {% endfor %}
     </div>
   </div>
-{% endmacro %}
+  <div class="course-card-wide-content">
-{% macro BatchSection(course) %}
+    <div class="course-card-wide-title">
-  <div class="row">
+      {{ course.title }}
-    <div class="col-lg-8 col-md-12">
+    </div>
-      {% if course.is_mentor(frappe.session.user) %}
+    <div class="course-card-wide-intro">
-        {{ BatchSectionForMentors(course, course.get_batches(mentor=frappe.session.user)) }}
+      {{ course.short_introduction }}
-      {% else %}
+    </div>
-        {{ BatchSectionForStudents(course, course.get_upcoming_batches()) }}
+    <div class="course-buttons">
+      {% if not course.disable_self_learning and not membership %}
+      <div class="wide-button start-learning is-primary join-batch" data-course="{{ course.name | urlencode }}">
+        Start Learning
+        <img class="ml-2" src="/assets/community/icons/white-arrow.svg" />
+      </div>
+      {% endif %}
+      {% if membership %}
+      {% set lesson_index = course.get_lesson_index(membership.current_lesson) if membership and
+      membership.current_lesson
+      else '1.1' %}
+      <a class="wide-button is-primary" id="continue-learning"
+        href="{{ course.get_learn_url(lesson_index) }}{{ course.query_parameter }}">
+        Continue Learning <img class="ml-2" src="/assets/community/icons/white-arrow.svg" />
+      </a>
+      {% endif %}
+      {% if course.video_link %}
+      <div class="wide-button video-preview">
+        Watch Video Preview
+        <img class="ml-2" src="/assets/community/images/play.png" />
+      </div>
       {% endif %}
     </div>
   </div>
-{% endmacro %}
+</div>
-{% macro BatchSectionForMentors(course, mentor_batches) %}
-  <h2>Your Batches</h2>
 
-  {% if mentor_batches %}
+<div class="modal fade preview-modal" id="video-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
-
+  aria-hidden="true">
-    <div class="row">
+  <div class="modal-dialog" role="document">
-      {% for batch in mentor_batches %}
+    <div class="modal-content">
-        <div class="col-lg-4 col-md-6">
+      <div class="modal-header">
-          {{ widgets.RenderBatch(course=course, batch=batch, can_manage=True) }}
+        <div class="course-home-headings modal-headings">{{ course.title }}</div>
-        </div>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-      {% endfor %}
+          <span aria-hidden="true">&times;</span>
-    </div>
+        </button>
-
-    <a class="add-batch margin-bottom" href="/add-a-new-batch?new=1&course={{course.name}}">Add a new batch</a>
-  {% else %}
-    <div class="mentor_message">
-      <p>
-        You are a mentor for this course.
-      </p>
-      <a class="" href="/add-a-new-batch?new=1&course={{course.name}}">Create your first batch</a>
-    </div>
-  {% endif %}
-{% endmacro %}
-{% macro BatchSectionForStudents(course, upcoming_batches) %}
-  {% if upcoming_batches %}
-    <div class="mt-5">
-      <h3 class="upcoming">Upcoming Batches</h3>
-      <div class="row">
-        {% for batch in upcoming_batches %}
-          <div class="col-lg-4 col-md-6">
-            {{ widgets.RenderBatch(course=course, batch=batch, can_join=True) }}
-          </div>
-        {% endfor %}
       </div>
+      <div class="modal-body">
+        <iframe class="video-iframe" frameborder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen src="{{ course.video_link }}"></iframe>
+      </div>
+    </div>
+  </div>
+</div>
+{% endmacro%}
+
+<!-- Course Outline and Creator -->
+
+{% macro CourseOutlineAndCreator(course) %}
+<div class="course-outline-instructor-parent">
+  <div class="course-home-outline">
+    {{ widgets.CourseOutline(course=course, show_link=membership) }}
+  </div>
+  <div class="">
+    <div class="course-home-headings">
+      Creator
+    </div>
+    {{ widgets.MemberCard(member=course.get_instructor(), show_course_count=True, dimension_class="member-card-large") }}
+  </div>
+</div>
+{% endmacro %}
+
+<!-- Mentors -->
+
+{% macro Mentors(course) %}
+{% if course.get_mentors() | length %}
+<div class="course-home-mentors">
+  <div class="course-home-headings">
+    Mentors
+  </div>
+  <div class="mentors-section">
+    {% for mentor in course.get_mentors() %}
+    {{ widgets.MemberCard(member=mentor, show_course_count=False, dimension_class="member-card-medium") }}
+    {% endfor %}
+    <div class="view-all-mentors">
+      <span class="card-divider flex-one"></span>
+      <span class="course-instructor"><span class="all-mentors-text">View all mentors</span> <img class="mentor-icon"
+          src="/assets/community/icons/down-arrow.svg" /></span>
+      <span class="card-divider flex-one"></span>
+    </div>
+  </div>
+</div>
+{% endif %}
+{% endmacro %}
+
+<!-- Course Description and Overview -->
+
+{% macro CourseDescriptionAndOverview(course) %}
+<div class="course-outline-instructor-parent">
+  <div>
+    <div class="course-home-headings">
+      Course Description
+    </div>
+    <div class="common-card-style description-card small-title">
+      {{ frappe.utils.md_to_html(course.description) }}
+    </div>
+  </div>
+  <div>
+    <div class="course-home-headings">
+      Overview
+    </div>
+    <div class="common-card-style overview-card small-title">
+      {% if course.get_students() | length %}
+      <div class="overtime-item">
+        <img class="icon-background mr-1" src="/assets/community/icons/user.svg" />
+        {{ course.get_students() | length }} Enrolled
+      </div>
+      {% endif %}
+      {% set avg_rating = course.get_average_rating() %}
+      {% if avg_rating %}
+      <div class="overtime-item">
+        <img class="icon-background mr-1" src="/assets/community/icons/rating.svg" />
+        {{ avg_rating }} Rating
+      </div>
+      {% endif %}
+    </div>
+  </div>
+</div>
+{% endmacro %}
+
+{% macro BatchSection(course) %}
+<div class="row">
+  <div class="col-lg-8 col-md-12">
+    {% if course.is_mentor(frappe.session.user) %}
+    {{ BatchSectionForMentors(course, course.get_batches(mentor=frappe.session.user)) }}
     {% else %}
-      <div class="mt-5 upcoming">There are no Upcoming Batches for this course currently.</div>
+    {{ BatchSectionForStudents(course, course.get_upcoming_batches()) }}
     {% endif %}
   </div>
+</div>
+{% endmacro %}
+{% macro BatchSectionForMentors(course, mentor_batches) %}
+<h2>Your Batches</h2>
+
+{% if mentor_batches %}
+
+<div class="row">
+  {% for batch in mentor_batches %}
+  <div class="col-lg-4 col-md-6">
+    {{ widgets.RenderBatch(course=course, batch=batch, can_manage=True) }}
+  </div>
+  {% endfor %}
+</div>
+
+<a class="add-batch margin-bottom" href="/add-a-new-batch?new=1&course={{course.name}}">Add a new batch</a>
+{% else %}
+<div class="mentor_message">
+  <p>
+    You are a mentor for this course.
+  </p>
+  <a class="" href="/add-a-new-batch?new=1&course={{course.name}}">Create your first batch</a>
+</div>
+{% endif %}
+{% endmacro %}
+
+{% macro BatchSectionForStudents(course, upcoming_batches) %}
+{% if upcoming_batches %}
+<div class="mt-5">
+  <h3 class="upcoming">Upcoming Batches</h3>
+  <div class="row">
+    {% for batch in upcoming_batches %}
+    <div class="col-lg-4 col-md-6">
+      {{ widgets.RenderBatch(course=course, batch=batch, can_join=True) }}
+    </div>
+    {% endfor %}
+  </div>
+  {% else %}
+  <div class="mt-5 upcoming">There are no Upcoming Batches for this course currently.</div>
+  {% endif %}
+</div>
 {% endmacro %}

community/www/courses/course.js

@@ -1,78 +1,223 @@
 frappe.ready(() => {
   if (frappe.session.user != "Guest") {
-    frappe.call({
+    check_mentor_request();
-      'method': 'community.lms.doctype.lms_mentor_request.lms_mentor_request.has_requested',
-      'args': {
-        course: decodeURIComponent($("#course-title").attr("data-course")),
-      },
-      'callback': (data) => {
-        if (data.message > 0) {
-          $("#mentor-request").addClass("hide");
-          $("#already-applied").removeClass("hide")
-        }
-      }
-    })
   }
 
+  expand_the_first_chapter();
+
+  hide_wrapped_mentor_cards();
+
   $("#apply-now").click((e) => {
-    e.preventDefault();
+    create_mentor_request(e);
-    if (frappe.session.user == "Guest") {
+  });
-      window.location.href = `/login?redirect-to=/courses/${$(e.currentTarget).attr("data-course")}`;
-      return;
-    }
-    frappe.call({
-      "method": "community.lms.doctype.lms_mentor_request.lms_mentor_request.create_request",
-      "args": {
-        "course": decodeURIComponent($(e.currentTarget).attr("data-course"))
-      },
-      "callback": (data) => {
-        if (data.message == "OK") {
-          $("#mentor-request").addClass("hide");
-          $("#already-applied").removeClass("hide")
-        }
-      }
-    })
-  })
 
   $("#cancel-request").click((e) => {
-    e.preventDefault()
+    cancel_mentor_request(e);
-    frappe.call({
+  });
-      "method": "community.lms.doctype.lms_mentor_request.lms_mentor_request.cancel_request",
-      "args": {
-        "course": decodeURIComponent($(e.currentTarget).attr("data-course"))
-      },
-      "callback": (data) => {
-        if (data.message == "OK") {
-          $("#mentor-request").removeClass("hide");
-          $("#already-applied").addClass("hide")
-        }
-      }
-    })
-  })
 
   $(".join-batch").click((e) => {
-    e.preventDefault();
+    join_course(e)
-    var course = $(e.currentTarget).attr("data-course")
+  });
-    if (frappe.session.user == "Guest") {
+
-      window.location.href = `/login?redirect-to=/courses/${course}`;
+  $(".view-all-mentors").click((e) => {
-      return;
+    view_all_mentors(e);
-    }
+  });
-    var batch = $(e.currentTarget).attr("data-batch");
+
-    batch = batch ? decodeURIComponent(batch) : "";
+  $(".video-preview").click((e) => {
-    frappe.call({
+    show_video_dialog(e);
-      "method": "community.lms.doctype.lms_batch_membership.lms_batch_membership.create_membership",
+  });
-      "args": {
+
-        "batch": batch ? batch : "",
+  $(".review-link").click((e) => {
-        "course": course
+    show_review_dialog(e);
-      },
+  });
-      "callback": (data) => {
+
-        if (data.message == "OK") {
+  $(".chapter-title").click((e) => {
-          frappe.msgprint(__("You are now a student of this course."));
+    rotate_chapter_icon(e);
-          setTimeout(function () {
+  });
-            window.location.href = `/courses/${course}/home`;
+
-          }, 2000);
+  $(".icon-rating").click((e) => {
-        }
+    highlight_rating(e);
-      }
+  });
-    })
+
+  $("#submit-review").click((e) => {
+    submit_review(e);
   })
+
 })
+
+var check_mentor_request = () => {
+  frappe.call({
+    'method': 'community.lms.doctype.lms_mentor_request.lms_mentor_request.has_requested',
+    'args': {
+      course: decodeURIComponent($("#course-title").attr("data-course")),
+    },
+    'callback': (data) => {
+      if (data.message > 0) {
+        $("#mentor-request").addClass("hide");
+        $("#already-applied").removeClass("hide")
+      }
+    }
+  })
+}
+
+var hide_wrapped_mentor_cards = () => {
+  var offset_top_prev;
+
+  $('.member-card-medium').each(function () {
+    var offset_top = $(this).offset().top;
+    if (offset_top > offset_top_prev) {
+      $(this).addClass('wrapped').slideUp("fast");
+    }
+    if (!offset_top_prev) {
+      offset_top_prev = offset_top;
+    }
+
+  });
+
+  if ($(".wrapped").length < 1) {
+    $(".view-all-mentors").hide();
+  }
+}
+
+var create_mentor_request = (e) => {
+  e.preventDefault();
+  if (frappe.session.user == "Guest") {
+    window.location.href = `/login?redirect-to=/courses/${$(e.currentTarget).attr("data-course")}`;
+    return;
+  }
+  frappe.call({
+    "method": "community.lms.doctype.lms_mentor_request.lms_mentor_request.create_request",
+    "args": {
+      "course": decodeURIComponent($(e.currentTarget).attr("data-course"))
+    },
+    "callback": (data) => {
+      if (data.message == "OK") {
+        $("#mentor-request").addClass("hide");
+        $("#already-applied").removeClass("hide")
+      }
+    }
+  })
+}
+
+var cancel_mentor_request = (e) => {
+  e.preventDefault()
+  frappe.call({
+    "method": "community.lms.doctype.lms_mentor_request.lms_mentor_request.cancel_request",
+    "args": {
+      "course": decodeURIComponent($(e.currentTarget).attr("data-course"))
+    },
+    "callback": (data) => {
+      if (data.message == "OK") {
+        $("#mentor-request").removeClass("hide");
+        $("#already-applied").addClass("hide")
+      }
+    }
+  })
+}
+
+var join_course = (e) => {
+  e.preventDefault();
+  var course = $(e.currentTarget).attr("data-course")
+  if (frappe.session.user == "Guest") {
+    window.location.href = `/login?redirect-to=/courses/${course}`;
+    return;
+  }
+  var batch = $(e.currentTarget).attr("data-batch");
+  batch = batch ? decodeURIComponent(batch) : "";
+  frappe.call({
+    "method": "community.lms.doctype.lms_batch_membership.lms_batch_membership.create_membership",
+    "args": {
+      "batch": batch ? batch : "",
+      "course": course
+    },
+    "callback": (data) => {
+      if (data.message == "OK") {
+        frappe.msgprint(__("You are now a student of this course."));
+        setTimeout(function () {
+          window.location.href = `/courses/${course}/home`;
+        }, 2000);
+      }
+    }
+  })
+}
+
+var view_all_mentors = (e) => {
+  $(".wrapped").each((i, element) => {
+    $(element).slideToggle("slow");
+  })
+  var text_element = $(".view-all-mentors .course-instructor .all-mentors-text");
+  var text = text_element.text() == "View all mentors" ? "View less" : "View all mentors";
+  text_element.text(text);
+
+  if ($(".mentor-icon").css("transform") == "none") {
+    $(".mentor-icon").css("transform", "rotate(180deg)");
+  } else {
+    $(".mentor-icon").css("transform", "");
+  }
+}
+
+var show_video_dialog = (e) => {
+  e.preventDefault();
+  $("#video-modal").modal("show");
+}
+
+var show_review_dialog = (e) => {
+  e.preventDefault();
+  $("#review-modal").modal("show");
+}
+
+var rotate_chapter_icon = (e) => {
+  var icon = $(e.currentTarget).children(".chapter-icon");
+  if (icon.css("transform") == "none") {
+    icon.css("transform", "rotate(90deg)");
+  } else {
+    icon.css("transform", "none");
+  }
+}
+
+var expand_the_first_chapter = () => {
+  var elements = $(".collapse");
+  elements.each((i, elem) => {
+    if (i <= 1) {
+      $(elem).addClass("show");
+      $(elem).siblings(".chapter-title").children(".chapter-icon").css("transform", "rotate(90deg)");
+    }
+  });
+}
+
+var highlight_rating = (e) => {
+  var rating = $(e.currentTarget).attr("data-rating");
+  $(".icon-rating").removeClass("star-click");
+  $(".icon-rating").each((i, elem) => {
+    if (i <= rating-1) {
+      $(elem).addClass("star-click");
+    }
+  })
+}
+
+var submit_review = (e) => {
+  e.preventDefault();
+  var rating = $(".rating-field").children(".star-click").length;
+  var review = $(".review-field").val();
+  if (!review || !rating) {
+    $(".error-field").text("Both Rating and Review are required.");
+    return;
+  }
+  frappe.call({
+    method: "community.lms.doctype.lms_course_review.lms_course_review.submit_review",
+    args: {
+      "rating": rating,
+      "review": review,
+      "course": decodeURIComponent($(e.currentTarget).attr("data-course"))
+    },
+    callback: (data) => {
+      if (data.message == "OK") {
+        $(".review-modal").modal("hide");
+        frappe.msgprint("Thanks for providing your feedback!");
+        setTimeout(() => {
+          window.location.reload();
+        }, 2000);
+      }
+    }
+  })
+}

community/www/courses/index.html

@@ -36,7 +36,7 @@
     </div>
   </div>
   <div class="course-card-content">
-    <div class="course-card-meta">
+    <div class="course-card-meta muted-text">
       {% if course.get_chapters() | length %}
       <span>
         {{ course.get_chapters() | length }} Chapters