Re-factored CourseCard UI
diff --git a/erpnext/public/js/education/web-academy/components/AcademyCourseCard.vue b/erpnext/public/js/education/web-academy/components/AcademyCourseCard.vue
index 3620ccb..5fc44cc 100644
--- a/erpnext/public/js/education/web-academy/components/AcademyCourseCard.vue
+++ b/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>
- <button class='btn btn-primary btn-sm btn-block'>Continue</button>
- <button class='btn btn-success btn-sm btn-block'>Completed</button>
+ <AcademyCourseCardButton :course="course.name" :nextContent="nextContent" :nextContentType="nextContentType"/>
</div>
</div>
</div>
@@ -22,6 +20,8 @@
</template>
<script>
+import AcademyCourseCardButton from './AcademyCourseCardButton.vue'
+
export default {
props: ['course'],
name: "AcademyCourseCard",
@@ -41,6 +41,9 @@
this.nextContent = r.message.content,
this.nextContentType = r.message.content_type
});
+ },
+ components: {
+ AcademyCourseCardButton
}
};
</script>
diff --git a/erpnext/public/js/education/web-academy/components/AcademyCourseCardButton.vue b/erpnext/public/js/education/web-academy/components/AcademyCourseCardButton.vue
new file mode 100644
index 0000000..a6e6f56
--- /dev/null
+++ b/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>
\ No newline at end of file