94 lines
2.8 KiB
Vue
94 lines
2.8 KiB
Vue
<template>
|
|
<div class="card mt-3" data-list="getting-started">
|
|
<div class='card-body'>
|
|
<div class="row">
|
|
<div class="course-details col-xs-8 col-sm-9 col-md-10">
|
|
<h5 class="card-title">{{ course.course_name }}</h5>
|
|
<span class="course-list text-muted" id="getting-started">
|
|
Course Content
|
|
<ul class="mb-0 mt-1">
|
|
<li v-for="content in course.course_content" :key="content.name">{{ content.content }}</li>
|
|
</ul>
|
|
</span>
|
|
</div>
|
|
<div v-if="$root.$data.isLogin" class='course-buttons text-center col-xs-4 col-sm-3 col-md-2'>
|
|
<!-- <AcademyCourseCardButton
|
|
v-if="this.$root.$data.checkProgramEnrollment(this.$route.params.code)"
|
|
:course="course.name"
|
|
:nextContent="nextContent"
|
|
:nextContentType="nextContentType"
|
|
/> -->
|
|
|
|
<a-button
|
|
v-if="showCompleted"
|
|
type="success"
|
|
size="sm"
|
|
:route="firstContentRoute"
|
|
>
|
|
Completed
|
|
</a-button>
|
|
<a-button
|
|
v-if="showStart"
|
|
type="primary"
|
|
size="sm"
|
|
:route="firstContentRoute"
|
|
>
|
|
Start
|
|
</a-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import AButton from './Button';
|
|
import AcademyCourseCardButton from './AcademyCourseCardButton.vue'
|
|
|
|
export default {
|
|
props: ['course'],
|
|
name: "AcademyCourseCard",
|
|
data() {
|
|
return {
|
|
nextContent: '',
|
|
nextContentType: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
if(this.$root.$data.checkLogin()) {
|
|
frappe.call({
|
|
method: "erpnext.www.academy.get_starting_content",
|
|
args: {
|
|
course_name: this.course.name
|
|
}
|
|
}).then(r => {
|
|
this.nextContent = r.message.content,
|
|
this.nextContentType = r.message.content_type
|
|
});
|
|
}
|
|
},
|
|
components: {
|
|
AcademyCourseCardButton,
|
|
AButton
|
|
},
|
|
computed: {
|
|
showStart() {
|
|
return academy.loggedIn && !this.course.completed;
|
|
},
|
|
showCompleted() {
|
|
return academy.loggedIn && this.course.completed;
|
|
},
|
|
firstContentRoute() {
|
|
return `${course.name}/${course.content_type}/${data.content}`
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
@media only screen and (max-width: 576px) {
|
|
.course-buttons {
|
|
margin-top: 1em;
|
|
}
|
|
}
|
|
</style> |