Built Student Profile Page

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>

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="buttonType"
-                    :type="'success'"
                     size="sm btn-block"
-                    :route="{name: 'home'}"
+                    :route="programRoute"
                 >
-                    Download Certificate
+                    {{ buttonName }}
                 </a-button>
             </div>
         </div>
@@ -53,6 +52,30 @@ export default {
 				})
         },
     },
+    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
     },

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.ready(() => {
 	frappe.provide('lms')
 	// frappe.utils.make_event_emitter(lms);
 
+	lms.moment = moment
+
 	lms.store = new Vue({
 		data: store,
 		methods: {

erpnext/public/js/education/lms/pages/ProfilePage.vue

@@ -1,45 +1,6 @@
 <template>
 <div>
-	<section>
+	<ProfileInfo :enrolledPrograms="enrolledPrograms"></ProfileInfo>
-		<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>
 	<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 Button from '../components/Button.vue';
 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 @@ export default {
         AButton: Button,
 		TopSection,
 		CardList,
+		ProfileInfo,		
 		ProgressCard		
 	},
 	data() {
@@ -74,20 +37,4 @@ export default {
         }
     }
 };
-</script>
+</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>

erpnext/www/lms.py

@@ -215,6 +215,7 @@ def get_course_meta(course_name, program_name):
 	
 @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 @@ def get_program_progress(program_name):
 		program_meta['progress'] = progress
 		program_meta['name'] = program_name
 		program_meta['program'] = program.program_name
-		return program_meta
+		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