Re-factored CourseCard UI

erpnext/public/js/education/web-academy/components/AcademyCourseCard.vue

@@ -12,9 +12,7 @@
                 </span>
             </div>
             <div class='course-buttons text-center col-xs-4 col-sm-3 col-md-2'>
-                <button class='btn btn-primary btn-sm btn-block' @click="$router.push($route.path + '/' + course.name + '/' + nextContentType + '/' + nextContent)">Start Course</button>
+                <AcademyCourseCardButton :course="course.name" :nextContent="nextContent" :nextContentType="nextContentType"/>
-                <button class='btn btn-primary btn-sm btn-block'>Continue</button>
-                <button class='btn btn-success btn-sm btn-block'>Completed</button>
             </div>
         </div>
     </div>
@@ -22,6 +20,8 @@
 </template>
 
 <script>
+import AcademyCourseCardButton from './AcademyCourseCardButton.vue'
+
 export default {
     props: ['course'],
     name: "AcademyCourseCard",
@@ -41,6 +41,9 @@ export default {
             this.nextContent = r.message.content,
             this.nextContentType = r.message.content_type
         });
+    },
+    components: {
+        AcademyCourseCardButton
     }
 };
 </script>

erpnext/public/js/education/web-academy/components/AcademyCourseCardButton.vue

@@ -0,0 +1,22 @@
+<template>
+	<button :class="className" class='btn btn-primary btn-sm btn-block' @click="$router.push($route.path + '/' + course + '/' + nextContentType + '/' + nextContent)">{{ buttonName }}</button>
+</template>
+<script>
+export default {
+    props: ['course', 'nextContent', 'nextContentType'],
+    name: "AcademyCourseCardButton",
+    data() {
+        return {
+            buttonName: 'Start',
+            className: 'btn-primary'
+        }
+    },
+    mounted() {
+    	if(this.$root.$data.checkCourseCompletion(this.course)){
+    		console.log('Completed', this.course)
+    		this.buttonName = 'Completed'
+    		this.className = 'btn-success'
+    	}
+    }
+};
+</script>