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(
-                lms.store.enrolledPrograms.add(this.program.name),
-                lms.store.updateEnrolledPrograms(),
-                this.router.push('Program/' + this.program.name)
-            )
+            }).then(data => {
+                console.log(data)
+                lms.store.enrolledPrograms.add(data),
+                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)
@@ -71,6 +74,9 @@ export default {
 
 <style lang="css" scoped>
     a {
-    text-decoration: none;
-}
+        text-decoration: none;
+    }
+    a.btn-secondary {
+        color: white !important;
+    }
 </style>