Built Student Profile Page
diff --git a/erpnext/public/js/education/lms/components/ProfileInfo.vue b/erpnext/public/js/education/lms/components/ProfileInfo.vue
new file mode 100644
index 0000000..a6118a0
--- /dev/null
+++ b/erpnext/public/js/education/lms/components/ProfileInfo.vue
@@ -0,0 +1,89 @@
+<template>
+<section>
+ <div class='container'>
+ <div class="row">
+ <div class="col-sm-3 text-center">
+ <span class="sidebar-standard-image" title="Lorem Ipsum">
+ <span v-if="avatar" class="avatar-frame" :style="avatarStyle">
+ </span>
+ <div v-else class="standard-image" style="background-color: #fafbfc;">
+ {{ abbr }}
+ </div>
+ </span>
+ </div>
+ <div class="col-sm-9">
+ <div>
+ <h3>{{ fullName }}</h3>
+ <ul>
+ <li class="row">
+ <div class="col-md-3 col-sm-4 pr-0 text-muted">Email:</div>
+ <div class="col-md-9 col-sm-8">{{ email }}</div>
+ </li>
+ <li class="row">
+ <div class="col-md-3 col-sm-4 pr-0 text-muted">Date of Joining:</div>
+ <div class="col-md-9 col-sm-8">{{ joiningDate }}</div>
+ </li>
+ <!-- <li><span class="text-muted">Date of Joining: </span>3rd July 2018</li> -->
+ <!-- <li><span class="text-muted">Programs Enrolled: </span>ERPNext Certified Professional 2018</li> -->
+ <li class="row">
+ <div class="col-md-3 col-sm-4 pr-0 text-muted">Programs Enrolled:</div>
+ <div class="col-md-9 col-sm-8">
+ <ul>
+ <li v-for="program in enrolledPrograms" :key="program">{{ program }}</li>
+ </ul>
+ </div>
+ </li>
+ </ul>
+ </div>
+ <a href="/update-profile" class="edit-button text-muted"><i class="fa fa-pencil" aria-hidden="true"></i></a>
+ </div>
+ </div>
+ <div ></div>
+ </div>
+ </section>
+</template>
+<script>
+
+export default {
+ props: ['enrolledPrograms'],
+ name: "ProfileInfo",
+ data() {
+ return {
+ avatar: frappe.get_cookie("user_image"),
+ fullName: frappe.get_cookie("full_name"),
+ abbr: frappe.get_abbr(frappe.get_cookie("full_name")),
+ email: frappe.session.user,
+ joiningDate: 'fetching...'
+ }
+ },
+ mounted(){
+ this.getJoiningDate().then(data => this.joiningDate = lms.moment(String(data)).format('D MMMM YYYY'))
+ },
+ computed: {
+ avatarStyle() {
+ return `background-image: url("${this.avatar}")`
+ },
+ },
+ methods: {
+ getJoiningDate() {
+ return lms.call("get_joining_date")
+ }
+ }
+};
+</script>
+<style scoped>
+ .edit-button{
+ position:absolute;
+ top:0;
+ right:0;
+ }
+ .standard-image {
+ font-size: 72px;
+ border-radius: 6px;
+ }
+ ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0
+ }
+</style>
\ No newline at end of file
diff --git a/erpnext/public/js/education/lms/components/ProgressCard.vue b/erpnext/public/js/education/lms/components/ProgressCard.vue
index 9666ab4..ad38de9 100644
--- a/erpnext/public/js/education/lms/components/ProgressCard.vue
+++ b/erpnext/public/js/education/lms/components/ProgressCard.vue
@@ -20,12 +20,11 @@
</div>
<div class='course-buttons text-center col-xs-5 col-sm-4 col-md-3'>
<a-button
- v-if="programData.name == 'ECP2018'"
- :type="'success'"
+ :type="buttonType"
size="sm btn-block"
- :route="{name: 'home'}"
+ :route="programRoute"
>
- Download Certificate
+ {{ buttonName }}
</a-button>
</div>
</div>
@@ -53,6 +52,30 @@
})
},
},
+ computed: {
+ programRoute() {
+ return {name: 'program', params: {program_name: this.program}}
+ },
+ buttonType() {
+ if (this.programData.percentage == 100 ){
+ return "success"
+ }
+ else if (this.programData.percentage == "0" ) {
+ return "secondary"
+ }
+ else {
+ return "info"
+ }
+ },
+ buttonName() {
+ if (this.programData.percentage == 100 ){
+ return "Program Complete"
+ }
+ else {
+ return `${this.programData.percentage}% Completed`
+ }
+ }
+ },
components: {
AButton
},
diff --git a/erpnext/public/js/education/lms/lms.js b/erpnext/public/js/education/lms/lms.js
index d45b4ef..3d2bd50 100644
--- a/erpnext/public/js/education/lms/lms.js
+++ b/erpnext/public/js/education/lms/lms.js
@@ -1,5 +1,6 @@
import Vue from 'vue/dist/vue.js';
import VueRouter from 'vue-router/dist/vue-router.js'
+import moment from 'moment/min/moment.min.js'
import lmsRoot from "./lmsRoot.vue";
import routes from './routes';
@@ -17,6 +18,8 @@
frappe.provide('lms')
// frappe.utils.make_event_emitter(lms);
+ lms.moment = moment
+
lms.store = new Vue({
data: store,
methods: {
diff --git a/erpnext/public/js/education/lms/pages/ProfilePage.vue b/erpnext/public/js/education/lms/pages/ProfilePage.vue
index 59d5aaa..6d303c7 100644
--- a/erpnext/public/js/education/lms/pages/ProfilePage.vue
+++ b/erpnext/public/js/education/lms/pages/ProfilePage.vue
@@ -1,45 +1,6 @@
<template>
<div>
- <section>
- <div class='container'>
- <div class="row">
- <div class="col-sm-3 text-center">
- <span class="sidebar-standard-image" title="Lorem Ipsum">
- <div class="standard-image" style="background-color: #fafbfc;">
- LP
- </div>
- </span>
- </div>
- <div class="col-sm-9">
- <div>
- <h3>Lorem Ipsum</h3>
- <ul>
- <li class="row">
- <div class="col-md-3 col-sm-4 pr-0 text-muted">Email:</div>
- <div class="col-md-9 col-sm-8">lorem@example.com</div>
- </li>
- <li class="row">
- <div class="col-md-3 col-sm-4 pr-0 text-muted">Date of Joining:</div>
- <div class="col-md-9 col-sm-8">18th July 2018</div>
- </li>
- <!-- <li><span class="text-muted">Date of Joining: </span>3rd July 2018</li> -->
- <!-- <li><span class="text-muted">Programs Enrolled: </span>ERPNext Certified Professional 2018</li> -->
- <li class="row">
- <div class="col-md-3 col-sm-4 pr-0 text-muted">Programs Enrolled:</div>
- <div class="col-md-9 col-sm-8">
- <ul>
- <li>Frappe Certified ERPNext Professional</li>
- <li>Frappe Certified Developer</li>
- </ul>
- </div>
- </li>
- </ul>
- </div>
- <a href="" class="edit-button text-muted"><i class="fa fa-pencil" aria-hidden="true"></i></a>
- </div>
- </div>
- </div>
- </section>
+ <ProfileInfo :enrolledPrograms="enrolledPrograms"></ProfileInfo>
<CardList :title="'Your Progress'" :description="''">
<ProgressCard slot="card-list-slot" v-for="program in enrolledPrograms" :program="program" :key="program"/>
</CardList>
@@ -50,6 +11,7 @@
import TopSection from "../components/TopSection.vue"
import CardList from "../components/CardList.vue"
import ProgressCard from "../components/ProgressCard.vue"
+import ProfileInfo from "../components/ProfileInfo.vue"
export default {
@@ -58,6 +20,7 @@
AButton: Button,
TopSection,
CardList,
+ ProfileInfo,
ProgressCard
},
data() {
@@ -74,20 +37,4 @@
}
}
};
-</script>
-<style scoped>
- .edit-button{
- position:absolute;
- top:0;
- right:0;
- }
- .standard-image {
- font-size: 72px;
- border-radius: 6px;
- }
- ul {
- list-style-type: none;
- padding: 0;
- margin: 0
- }
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/erpnext/www/lms.py b/erpnext/www/lms.py
index 17afbae..d3d47d6 100644
--- a/erpnext/www/lms.py
+++ b/erpnext/www/lms.py
@@ -215,6 +215,7 @@
@frappe.whitelist()
def get_program_progress(program_name):
+ import math
program = frappe.get_doc("Program", program_name)
program_enrollment = frappe.get_list("Program Enrollment", filters={'student': utils.get_current_student(), 'program': program_name })[0].name
program_meta = {}
@@ -231,4 +232,10 @@
program_meta['progress'] = progress
program_meta['name'] = program_name
program_meta['program'] = program.program_name
- return program_meta
\ No newline at end of file
+ program_meta['percentage'] = math.ceil((sum([item['is_complete'] for item in progress] * 100)/len(progress)))
+ return program_meta
+
+@frappe.whitelist()
+def get_joining_date():
+ student = frappe.get_doc("Student", utils.get_current_student())
+ return student.joining_date
\ No newline at end of file