brotherton-erpnext/erpnext/public/js/education/web-academy/components/AcademyProgramCard.vue

56 lines
1.7 KiB
Vue

<template>
<div class='card-deck mt-5'>
<div class="card">
<img :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>
</router-link>
<div v-html="program.description"></div>
</div>
<div class='card-footer text-right'>
<!-- <a class='video-btn btn btn-secondary btn-sm' data-toggle="modal" data-src=" insert jinja stuff here " data-target="#myModal">Watch Intro</a>&nbsp;&nbsp; -->
<a v-if="this.$root.$data.checkProgramEnrollment(program_code)" class='btn btn-secondary btn-sm' @click="$router.push('/Program/' + program.name)">Start Course</a>
<a v-else class='btn btn-secondary btn-sm' @click="enroll()">Enroll Now</a>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['program_code'],
name: "AcademyProgramCard",
data() {
return {
program: ''
};
},
mounted() {
frappe.call({
method: "erpnext.www.academy.get_program_details",
args: {
program_name: this.program_code
}
}).then(r => {
this.program = r.message
})
},
methods: {
enroll() {
frappe.call({
method: "erpnext.www.academy.enroll_in_program",
args:{
program_name: this.program_code,
student_email_id: frappe.session.user
}
})
}
}
};
</script>
<style lang="css" scoped>
a {
text-decoration: none;
}
</style>