Built Student Profile Page
This commit is contained in:
scmmishra
Aditya Hase
parent
308f235859
commit
2955851867
89
erpnext/public/js/education/lms/components/ProfileInfo.vue
Normal file
89
erpnext/public/js/education/lms/components/ProfileInfo.vue
Normal file
@ -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>
|
||||
@ -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 @@ 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
|
||||
},
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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 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() {
|
||||
@ -75,19 +38,3 @@ export default {
|
||||
}
|
||||
};
|
||||
</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>
|
||||
@ -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
|
||||
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
|
||||
Loading…
x
Reference in New Issue
Block a user