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

fix: profile and progress on dashboard
This commit is contained in:
Jannat Patel
2021-09-10 19:52:16 +05:30
committed by GitHub
14 changed files with 184 additions and 64 deletions

View File

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

View File

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

View File

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

View File

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

View File

@@ -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 class="course-card-meta-2">
{{ widgets.Avatar(member=course.get_instructor(), avatar_class="avatar-small") }}
<span class="course-instructor">
{{ course.get_instructor().full_name }}
<div {% if not read_only %} class="mb-4" {% endif %}>
<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>
{% endif %}
</span> {% 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
else '1.1' %}
membership.current_lesson 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>

View File

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

View File

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

View File

@@ -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;
height: 45px;
margin-bottom: 1.5rem;
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 {

View File

@@ -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");
}
})

View File

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

View File

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

View File

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

View File

@@ -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) }}
{{ CoursesMentored(member) }}
{{ CoursesEnrolled(member) }}
{{ CoursesEnrolled(member, read_only) }}
{{ CoursesCreated(member, read_only) }}
{{ 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) %}
{% if member.get_course_membership("Student") | length %}
{% macro CoursesEnrolled(member, read_only) %}
{% 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") %}
{% set course_details = frappe.get_doc("LMS Course", membership.course) %}
{{ widgets.CourseCard(course=course_details) }}
{% for course in enrolled.completed %}
{{ widgets.CourseCard(course=course, read_only=read_only) }}
{% 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 %}

View File

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