Merge pull request #200 from pateljannat/progress-indicators-and-dashboard
fix: profile and progress on dashboard
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
<div class="p-5 batch-header">
|
||||
<h3>{{batch_name}}</h3>
|
||||
<div class="text-muted">{{member_count}} members</div>
|
||||
</div>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
6
community/public/js/profile.js
Normal file
6
community/public/js/profile.js
Normal 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");
|
||||
}
|
||||
})
|
||||
1
community/public/js/website.bundle.js
Normal file
1
community/public/js/website.bundle.js
Normal file
@@ -0,0 +1 @@
|
||||
import "./profile.js"
|
||||
@@ -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 -->
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user