Merge pull request #200 from pateljannat/progress-indicators-and-dashboard

fix: profile and progress on dashboard

community/hooks.py

@@ -21,7 +21,7 @@ app_license = "AGPL"
 # include js, css files in header of web template
 web_include_css = "community.bundle.css"
 # web_include_css = "/assets/community/css/community.css"
-# web_include_js = "/assets/community/js/community.js"
+web_include_js = "website.bundle.js"
 
 # include custom scss in every website theme (without file extension ".scss")
 # website_theme_scss = "community/public/scss/website"
@@ -141,6 +141,7 @@ website_route_rules = [
 	{"from_route": "/courses/<course>/learn/<int:chapter>.<int:lesson>", "to_route": "batch/learn"},
 	{"from_route": "/courses/<course>/progress", "to_route": "batch/progress"},
 	{"from_route": "/courses/<course>/join", "to_route": "batch/join"},
+	{"from_route": "/users", "to_route": "profiles/profile"}
 ]
 
 website_redirects = [
@@ -150,6 +151,7 @@ website_redirects = [
 update_website_context = [
     'community.widgets.update_website_context',
 ]
+
 jinja = {
     "methods": [
         "community.page_renderers.get_profile_url"

community/lms/doctype/lms_course/lms_course.py

@@ -187,20 +187,6 @@ class LMSCourse(Document):
     def get_slugified_chapter_title(self, chapter):
         return slugify(chapter)
 
-    def get_course_progress(self):
-        """ Returns the course progress of the session user """
-        lesson_count = len(self.get_lessons())
-        completed_lessons = frappe.db.count("LMS Course Progress",
-                                {
-                                    "course": self.name,
-                                    "owner": frappe.session.user,
-                                    "status": "Complete"
-                                })
-        precision = cint(frappe.db.get_default("float_precision")) or 3
-        if not lesson_count:
-            return 0
-        return flt(((completed_lessons/lesson_count) * 100), precision)
-
     def get_batch(self, batch_name):
         return find("LMS Batch", name=batch_name, course=self.name)
 
@@ -340,6 +326,20 @@ class LMSCourse(Document):
                 },
                 ["status"])
 
+    def get_course_progress(self, member=None):
+        """ Returns the course progress of the session user """
+        lesson_count = len(self.get_lessons())
+        completed_lessons = frappe.db.count("LMS Course Progress",
+                                {
+                                    "course": self.name,
+                                    "owner": member or frappe.session.user,
+                                    "status": "Complete"
+                                })
+        precision = cint(frappe.db.get_default("float_precision")) or 3
+        if not lesson_count:
+            return 0
+        return flt(((completed_lessons/lesson_count) * 100), precision)
+
     def get_neighbours(self, current, lessons):
         current = flt(current)
         numbers = sorted(lesson.number for lesson in lessons)

community/lms/web_template/course_cards/course_cards.html

@@ -3,7 +3,7 @@
   <div class="cards-parent mt-10">
     {% for course_row in courses %}
     {% set course = frappe.get_doc("LMS Course", course_row.course) %}
-    {{ widgets.CourseCard(course=course) }}
+    {{ widgets.CourseCard(course=course, read_only=False) }}
     {% endfor %}
   </div>
 </div>

community/lms/widgets/BatchHeader.html

@@ -1,4 +0,0 @@
-<div class="p-5 batch-header">
-  <h3>{{batch_name}}</h3>
-  <div class="text-muted">{{member_count}} members</div>
-</div>

community/lms/widgets/CourseCard.html

@@ -1,15 +1,26 @@
+{% set membership = course.get_membership(frappe.session.user) %}
+{% set progress = course.get_course_progress() %}
 <div class="common-card-style course-card">
+
   <div class="course-image {% if not course.image %}default-image{% endif %}"
     {% if course.image %} style="background-image: url( {{ course.image }} );" {% endif %}>
     <div class="course-tags">
       {% for tag in course.get_tags() %}
       <div class="course-card-pills">{{ tag }}</div>
       {% endfor %}
+      {% if membership and not read_only %}
+      {% if progress < 100 %}
+       <div class="course-card-pills dark-pills ml-auto">{{ frappe.utils.rounded(progress) }}% Completed</div>
+      {% else %}
+      <div class="course-card-pills dark-pills ml-auto"> <img src="/assets/community/icons/check.svg"> Completed </div>
+      {% endif %}
+      {% endif %}
     </div>
     {% if not course.image %}
     <div class="default-image-text">{{ course.title[0] }}</div>
     {% endif %}
   </div>
+
   <div class="course-card-content">
     <div class="course-card-meta muted-text">
       {% if course.get_chapters() | length %}
@@ -27,37 +38,57 @@
       {% endif %}
     </div>
     <div class="course-card-title">{{ course.title }}</div>
-    <div class="card-divider"></div>
+    <div {% if not read_only %} class="mb-4" {% endif %}>
-    <div class="course-card-meta-2">
+      <span class="zindex">
         {{ widgets.Avatar(member=course.get_instructor(), avatar_class="avatar-small") }}
+        <a class="button-links" href="{{ get_profile_url(course.get_instructor().username) }}">
           <span class="course-instructor">
             {{ course.get_instructor().full_name }}
           </span>
+        </a>
+      </span>
       <span class="course-student-count">
         {% if course.get_students() | length %}
         <span class="mr-4">
           <img class="icon-background" src="/assets/community/icons/user.svg" />
           {{ course.get_students() | length }}
-        </span>
+        </span> {% endif %}
-        {% endif %}
         {% set avg_rating = course.get_average_rating() %}
         {% if avg_rating %}
-        <span>
+        <span class="">
           <img class="icon-background" src="/assets/community/icons/rating.svg" />
           {{ avg_rating }}
         </span>
         {% endif %}
       </span>
     </div>
-    {% set membership = course.get_membership(frappe.session.user) %}
+
+    {% if not read_only %}
 
     {% set lesson_index = course.get_lesson_index(membership.current_lesson) if membership and
-    membership.current_lesson
+    membership.current_lesson else '1.1' %}
-    else '1.1' %}
+    {% set query_parameter = "?batch=" + membership.batch if membership and
+    membership.batch else "" %}
+    {% set certificate = course.is_certified() %}
 
-    {% set query_parameter = "?batch=" + membership.batch if membership and membership.batch else "" %}
+    {% if certificate %}
+    <div class="view-course-link is-default">
+      Get Certificate <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
+    </div>
+    <a class="stretched-link" href="/courses/{{ course.name }}/{{ certificate }}"></a>
 
-    {% if course.upcoming %}
+    {% elif course.enable_certification and progress == 100 %}
+    <div class="view-course-link is-default" id="certification" data-course="{{ course.name }}">
+      Get Certificate <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
+    </div>
+
+    {% elif progress == 100 %}
+    <div class="view-course-link is-default">
+      Course Completed <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
+    </div>
+    <a class="stretched-link" href="/courses/{{ course.name }}"></a>
+
+    {% elif course.upcoming %}
     <div class="view-course-link is-secondary border">
       Upcoming Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
     </div>
@@ -76,15 +107,39 @@
     <a class="stretched-link" href="/courses/{{ course.name }}"></a>
 
     {% endif %}
+    {% endif %}
   </div>
 </div>
+
 <script>
   frappe.ready(() => {
+    trim_course_titles();
+
+    $("#certification").unbind().click((e) => {
+      create_certificate(e);
+    });
+  })
+
+  var trim_course_titles = () => {
     $(".course-card-title").each((i, element) => {
       var title = $(element).text();
       var length = $(window).width() <= 375 ? 60 : 65;
       var suffix = title.length > length ? "..." : "";
       $(element).text(title.substring(0, length) + suffix);
+    });
+  }
+
+  var create_certificate = (e) => {
+    e.preventDefault();
+    course = $(e.currentTarget).attr("data-course");
+    frappe.call({
+      method: "community.lms.doctype.lms_certification.lms_certification.create_certificate",
+      args: {
+        "course": course
+      },
+      callback: (data) => {
+        window.location.href = `/courses/${course}/${data.message}`;
+      }
     })
-  })
+  }
 </script>

community/lms/widgets/InstructorSection.html

@@ -1,6 +0,0 @@
-<div class="instructor">
-  {{ widgets.Avatar(member=instructor, avatar_class="avatar-medium") }}
-  <a class="ml-1 instructor-title" href="{{get_profile_url(instructor.username)}}">{{ instructor.full_name }}</a>
-  <div class="instructor-subtitle">Course Creator</div>
-  <!-- <div class="instructor-subtitle">Created {{instructor.get_course_count()}} courses</div> -->
-</div>

community/overrides/user.py

@@ -124,3 +124,20 @@ class CustomUser(User):
                 mentored_courses.append(map)
 
         return mentored_courses
+
+    def get_enrolled_courses(self):
+        in_progress = []
+        completed = []
+        memberships = self.get_course_membership("Student");
+        for membership in memberships:
+            course = frappe.get_doc("LMS Course", membership.course)
+            progress = course.get_course_progress(member=self.name)
+            if progress < 100:
+                in_progress.append(course)
+            else:
+                completed.append(course)
+
+        return {
+            "in_progress": in_progress,
+            "completed": completed
+        }

community/public/css/style.css

@@ -66,6 +66,7 @@ input[type=checkbox] {
   position: relative;
   top: 1rem;
   left: 1rem;
+  width: 95%;
 }
 
 .course-card-pills {
@@ -75,7 +76,6 @@ input[type=checkbox] {
   border-radius: 4px;
   padding: 4px 6px;
   font-size: 10px;
-  line-height: 120%;
   text-align: center;
   letter-spacing: 0.011em;
   text-transform: uppercase;
@@ -84,6 +84,15 @@ input[type=checkbox] {
   box-shadow: 0px 5px 10px rgb(0 0 0 / 10%);
 }
 
+.dark-pills {
+  background: rgba(25, 39, 52, 0.8);
+  color: #ffffff;
+}
+.dark-pills img {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
 .common-page-style {
   background: #F4F5F6;
   padding-bottom: 5rem;
@@ -102,7 +111,6 @@ input[type=checkbox] {
 
 .course-card {
   flex-direction: column;
-  height: 380px;
 }
 
 .muted-text {
@@ -132,8 +140,8 @@ input[type=checkbox] {
   letter-spacing: -0.014em;
   color: var(--text-color);
   align-self: stretch;
-  margin-bottom: 16px;
+  margin-bottom: 1.5rem;
-  height: 45px;
+  height: 56px;
 }
 
 @media (max-width: 360px) {
@@ -152,10 +160,6 @@ input[type=checkbox] {
   margin-bottom: 16px;
 }
 
-.course-card-meta-2 {
-  margin-bottom: 16px;
-}
-
 .course-instructor {
   margin: 0px 8px;
   font-size: 12px;
@@ -176,6 +180,7 @@ input[type=checkbox] {
   padding: 8px 0px 8px;
   text-align: center;
   line-height: 135%;
+  cursor: pointer;
 }
 
 .cards-parent {
@@ -1149,13 +1154,18 @@ input[type=checkbox] {
   }
 }
 
+.zindex {
+  position: relative;
+  z-index: 2;
+}
+
 .progress {
   width: 100%;
   height: 8px;
 }
 
 .progress-bar {
-  background-color: #318AD8;
+  background-color: var(--primary-color);
 }
 
 .progress-percentage {

community/public/js/profile.js

@@ -0,0 +1,6 @@
+frappe.ready(() => {
+  if (frappe.session.user == "Guest") {
+    var link_array = $('.nav-link').filter((i, elem) => $(elem).text().trim() === "My Profile");
+    link_array.length && $(link_array[0]).addClass("hide");
+  }
+})

community/public/js/website.bundle.js

@@ -0,0 +1 @@
+import "./profile.js"

community/www/courses/course.html

@@ -74,6 +74,7 @@
   </div>
 </div>
 
+{% if course.video_link %}
 <div class="modal fade preview-modal" id="video-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
   aria-hidden="true">
   <div class="modal-dialog" role="document">
@@ -92,6 +93,7 @@
     </div>
   </div>
 </div>
+{% endif %}
 {% endmacro%}
 
 <!-- Course Outline and Creator -->

community/www/courses/index.html

@@ -14,7 +14,7 @@
     </div>
     <div class="cards-parent">
       {% for course in courses %}
-      {{ widgets.CourseCard(course=course) }}
+      {{ widgets.CourseCard(course=course, read_only=False) }}
       {% endfor %}
     </div>
   </div>

community/www/profiles/profile.html

@@ -7,11 +7,12 @@
 {% block content %}
 <div class="common-page-style">
   <div class="container profile-page">
+    {% set read_only = member.name != frappe.session.user %}
     {{ ProfileBanner(member) }}
     {{ AboutOverviewSection(member) }}
-    {{ CoursesCreated(member) }}
+    {{ CoursesEnrolled(member, read_only) }}
-    {{ CoursesMentored(member) }}
+    {{ CoursesCreated(member, read_only) }}
-    {{ CoursesEnrolled(member) }}
+    {{ CoursesMentored(member, read_only) }}
     {{ ProfileTabs(profile_tabs) }}
   </div>
 </div>
@@ -106,7 +107,7 @@
 {% endmacro %}
 
 
-{% macro CoursesCreated(member) %}
+{% macro CoursesCreated(member, read_only) %}
 {% if member.get_authored_courses() | length %}
 <div class="profile-courses">
   <div class="course-home-headings">
@@ -115,14 +116,14 @@
   <div class="cards-parent">
     {% for course in member.get_authored_courses() %}
     {% set course_details = frappe.get_doc("LMS Course", course) %}
-    {{ widgets.CourseCard(course=course_details) }}
+    {{ widgets.CourseCard(course=course_details, read_only=read_only) }}
     {% endfor %}
   </div>
 </div>
 {% endif %}
 {% endmacro %}
 
-{% macro CoursesMentored(member) %}
+{% macro CoursesMentored(member, read_only) %}
 {% if member.get_mentored_courses() | length %}
 <div class="profile-courses">
   <div class="course-home-headings">
@@ -131,27 +132,42 @@
   <div class="cards-parent">
     {% for mentorship in member.get_mentored_courses() %}
     {% set course_details = frappe.get_doc("LMS Course", mentorship.course) %}
-    {{ widgets.CourseCard(course=course_details) }}
+    {{ widgets.CourseCard(course=course_details, read_only=read_only) }}
     {% endfor %}
   </div>
 </div>
 {% endif %}
 {% endmacro %}
 
-{% macro CoursesEnrolled(member) %}
+{% macro CoursesEnrolled(member, read_only) %}
-{% if member.get_course_membership("Student") | length %}
+{% set enrolled = member.get_enrolled_courses() %}
+
+{% if enrolled.completed | length %}
 <div class="profile-courses">
   <div class="course-home-headings">
-    Courses Enrolled
+    Courses Completed
   </div>
   <div class="cards-parent">
-    {% for membership in member.get_course_membership("Student") %}
+    {% for course in enrolled.completed %}
-    {% set course_details = frappe.get_doc("LMS Course", membership.course) %}
+    {{ widgets.CourseCard(course=course, read_only=read_only) }}
-    {{ widgets.CourseCard(course=course_details) }}
     {% endfor %}
   </div>
 </div>
 {% endif %}
+
+{% if enrolled.in_progress | length %}
+<div class="profile-courses">
+  <div class="course-home-headings">
+    Courses In Progress
+  </div>
+  <div class="cards-parent">
+    {% for course in enrolled.in_progress %}
+    {{ widgets.CourseCard(course=course, read_only=read_only) }}
+    {% endfor %}
+  </div>
+</div>
+{% endif %}
+
 {% endmacro %}
 
 {% macro ProfileTabs(profile_tabs) %}
@@ -166,3 +182,16 @@
   {% endfor %}
 </div>
 {% endmacro %}
+
+{% block script %}
+<script>
+  frappe.ready(() => {
+    if ("{{ member.name }}" == frappe.session.user) {
+      setTimeout(() => {
+        var link_array = $('.nav-link').filter((i, elem) => $(elem).text().trim() === "My Profile");
+        link_array.length && $(link_array[0]).addClass("active");
+      }, 0)
+    }
+  })
+</script>
+{% endblock %}

community/www/profiles/profile.py

@@ -1,10 +1,18 @@
 import frappe
+from community.page_renderers import get_profile_url_prefix
 
 def get_context(context):
     context.no_cache = 1
 
     try:
-        context.member = frappe.get_doc("User", {"username": frappe.form_dict["username"]})
+        username = frappe.form_dict["username"]
+    except KeyError:
+        username = frappe.db.get_value("User", frappe.session.user, ["username"])
+        if username:
+            frappe.local.flags.redirect_location = get_profile_url_prefix() + username
+            raise frappe.Redirect
+    try:
+        context.member = frappe.get_doc("User", {"username": username})
     except:
         context.template = "www/404.html"
         return