Refactored State management store

erpnext/public/js/education/lms/components/ProgramCard.vue

@@ -1,7 +1,7 @@
 <template>
     <div class='card-deck mt-5'>
     <div class="card">
-        <img :src="program.hero_image" style='height: 150px; width: auto'>
+        <img v-if="program.hero_image" :src="program.hero_image" style='height: 150px; width: auto'>
         <div class='card-body'>
             <router-link :to="'/Program/' + program.name">
                 <h5 class='card-title'>{{ program.program_name }}</h5>
@@ -18,7 +18,7 @@
                 >
                     {{ buttonName }}
             </a-button>
-            <a v-else-if="isLogin" class='btn btn-secondary btn-sm' @click="enroll()">Enroll</a>
+            <a v-else-if="isLogin" class='btn btn-secondary btn-sm' @click="enroll()">{{ enrollButton }}</a>
             <a v-else class='btn btn-secondary btn-sm' href="/login#signup">Sign Up</a>
         </div>
     </div>
@@ -31,20 +31,23 @@ export default {
     name: "ProgramCard",
     data() {
     	return {
-            isLogin: lms.store.isLogin
+            isLogin: lms.store.isLogin,
+            enrollButton: 'Enroll Now',
+            programRoute: { name: 'program', params: { program_name: this.program.name }}
     	};
     },
     created() {
     },
     methods: {
         enroll() {
+            this.enrollButton = 'Enrolling...'
             lms.call('enroll_in_program', {
                 program_name: this.program.name,
-            }).then(
+            }).then(data => {
-                lms.store.enrolledPrograms.add(this.program.name),
+                console.log(data)
-                lms.store.updateEnrolledPrograms(),
+                lms.store.enrolledPrograms.add(data),
-                this.router.push('Program/' + this.program.name)
+                this.$router.push(this.programRoute)
-            )
+            })
         }
     },
     computed: {
@@ -57,7 +60,7 @@ export default {
                 }
         },
         programPageRoute() {
-            return { name: 'program', params: { program_name: this.program.name }}
+            return this.programRoute
         },
         isEnrolled() {
             return lms.store.enrolledPrograms.has(this.program.name)
@@ -72,5 +75,8 @@ export default {
 <style lang="css" scoped>
     a {
         text-decoration: none;
-}
+    }
+    a.btn-secondary {
+        color: white !important;
+    }
 </style>

erpnext/public/js/education/lms/components/TopSectionButton.vue

@@ -30,7 +30,7 @@ export default {
         }
 
         if(this.isLoggedIn){
-            if(lms.store.checkProgramEnrollment(this.$route.params.program_name)){
+            if(lms.store.enrolledPrograms.has(this.$route.params.program_name)){
             	if(this.$route.name == 'home'){
                     this.buttonName = 'Explore Courses'
             	}
@@ -51,7 +51,7 @@ export default {
             if(this.$route.name == 'home'){
                 return
             }
-            else if(this.$route.name == 'program' && lms.store.checkProgramEnrollment(this.$route.params.program_name)){
+            else if(this.$route.name == 'program' && lms.store.enrolledPrograms.has(this.$route.params.program_name)){
                 this.$router.push({ name: 'content', params: { program_name: this.$route.params.program_name, course: this.nextCourse, type: this.nextContentType, content: this.nextContent}})
             }
             else {

erpnext/public/js/education/lms/lms.js

@@ -9,7 +9,6 @@ Vue.use(VueRouter)
 
 var store = {
 	isLogin: false,
-	completedCourses: new Set(),
 	enrolledPrograms: new Set(),
 	enrolledCourses: {}
 }
@@ -21,65 +20,27 @@ frappe.ready(() => {
 	lms.store = new Vue({
 		data: store,
 		methods: {
-			addCompletedCourses (courseName){
+			updateEnrolledPrograms() {
-				if (lms.debug) console.log('addCompletedCourses triggered with', courseName)
+				if(this.isLogin) {
-				this.completedCourses.add(courseName)
-			},
-
-			checkCourseCompletion (courseName){
-				return this.completedCourses.has(courseName)
-			},
-
-			checkProgramEnrollment (programName){
-				return this.enrolledPrograms.has(programName)
-			},
-
-			checkCourseEnrollment (courseName){
-				course = new Set(Object.keys(enrolledCourses))
-				return course.has(courseName)
-			},
-
-			updateEnrolledPrograms (){
-				if (lms.debug) console.log('Updating enrolledPrograms')
 					lms.call("get_program_enrollments").then(data => {
+						if(data){
 							data.forEach(element => {
 								this.enrolledPrograms.add(element)
 							})
+						}
 					});
-				if (lms.debug) console.log('Updated State', this.enrolledPrograms)
+					if (lms.debug) console.log('Updated Enrolled Programs', this.enrolledPrograms)
+				}
 			},
 
-			updateEnrolledCourses (){
+			updateEnrolledCourses() {
-				if (lms.debug) console.log('Updating enrolledCourses')
+				lms.call("get_course_enrollments").then(data => {
-				frappe.call({
+					if(data) this.enrolledCourses = data
-					method: "erpnext.www.lms.get_course_enrollments",
-					args:{
-						email: frappe.session.user
-					}
-				}).then( r => {
-					this.enrolledCourses = r.message
 				})
-				if (lms.debug) console.log('Updated State', this.enrolledCourses)
+				if (lms.debug) console.log('Updated Enrolled Courses', this.enrolledCourses)
 			},
 
-			updateCompletedCourses (){
+			checkLogin() {
-				if (lms.debug) console.log('Updating States')
-				frappe.call({
-					method: "erpnext.www.lms.get_completed_courses",
-					args:{
-						email: frappe.session.user
-					}
-				}).then( r => {
-					if(r.message){
-						for(var ii=0; ii < r.message.length; ii++){
-							this.completedCourses.add(r.message[ii])
-						}
-					}
-				})
-				if (lms.debug) console.log('Updated State', this.completedCourses)
-			},
-
-			checkLogin (){
 				if(frappe.session.user === "Guest"){
 					if (lms.debug) console.log('No Session')
 					this.isLogin = false
@@ -91,11 +52,10 @@ frappe.ready(() => {
 				return this.isLogin
 			},
 
-			updateState (){
+			updateState() {
-				this.updateCompletedCourses()
+				this.checkLogin()
 				this.updateEnrolledPrograms()
 				this.updateEnrolledCourses()
-				this.checkLogin()
 			},
 		}
 	});
@@ -105,11 +65,9 @@ frappe.ready(() => {
 		router: new VueRouter({ routes }),
 		template: "<lms-root/>",
 		components: { lmsRoot },
-		created: function() {
+		mounted() {
-			if(lms.store.checkLogin()){
 				lms.store.updateState()
 		}
-		}
 	});
 
 	lms.debug = true

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

@@ -28,7 +28,7 @@ export default {
 		}
 	},
     beforeMount() {
-        if(lms.store.isLogin) lms.store.updateCompletedCourses()
+        // if(lms.store.isLogin) lms.store.updateCompletedCourses()
     },
 	mounted() {
 		this.getProgramDetails().then(data => this.program = data);