feat: Added breadcrumbs
This commit is contained in:
parent
a409400e58
commit
88f0c464b4
49
erpnext/public/js/education/lms/components/Breadcrumb.vue
Normal file
49
erpnext/public/js/education/lms/components/Breadcrumb.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div>
|
||||
<span v-for="(route, index) in routeData">
|
||||
<a href="route.route">{{ route.label }}</a><span> / </span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
name: "Breadcrumb",
|
||||
data() {
|
||||
return {
|
||||
routeName: this.$route.name,
|
||||
routeParams: this.$route.params,
|
||||
routeData: [{
|
||||
label: "All Programs",
|
||||
route: "/List/Program"
|
||||
}]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.buildBreadcrumb()
|
||||
},
|
||||
methods: {
|
||||
buildBreadcrumb() {
|
||||
if(this.routeName == 'program') {
|
||||
return
|
||||
}
|
||||
if(this.routeName == 'course') {
|
||||
let routeObject = {
|
||||
label: this.routeParams.program_name,
|
||||
route: `/Program/${this.routeParams.program_name}`
|
||||
}
|
||||
this.routeData.push(routeObject)
|
||||
}
|
||||
if(this.routeName == 'content') {
|
||||
this.routeData.push({
|
||||
label: this.routeParams.program_name,
|
||||
route: `/Program/${this.routeParams.program_name}`
|
||||
})
|
||||
this.routeData.push({
|
||||
label: this.routeParams.course_name,
|
||||
route: `/Program/${this.routeParams.program_name}/${this.routeParams.course_name}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
@ -12,11 +12,11 @@
|
||||
</div>
|
||||
</router-link>
|
||||
<div class='text-right p-3'>
|
||||
<button v-if="program.intro_video" class='btn btn-secondary btn-sm text-white' data-toggle="modal" data-target="#videoModal">Watch Intro</button>
|
||||
<button v-if="program.intro_video" class='btn btn-light btn-sm' data-toggle="modal" data-target="#videoModal">Watch Intro</button>
|
||||
<a-button v-if="enrolled" type="dark" size="sm" :route="programPageRoute">
|
||||
{{ buttonName }}
|
||||
</a-button>
|
||||
<a v-else-if="isLogin" class='btn btn-secondary btn-sm' @click="enroll()">{{ enrollButton }}</a>
|
||||
<button v-else-if="isLogin" class='btn btn-dark btn-sm' @click="enroll()">{{ enrollButton }}</button>
|
||||
<a v-else class='btn btn-secondary btn-sm' href="/login#signup">Sign Up</a>
|
||||
</div>
|
||||
<VideoModal v-if="program.intro_video" :title="program.program_name" :video="program.intro_video"/>
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<section class='video-top-section video-section-bg'>
|
||||
<section class='mt-2'>
|
||||
<div>
|
||||
<youtube-player :url="contentData.url"/>
|
||||
<div class="mt-3 row">
|
||||
@ -61,4 +61,4 @@ export default {
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</script>
|
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<breadcrumb/>
|
||||
<component v-bind:is="currentComponent" :content="content" :type="type">
|
||||
<ContentNavigation :nextContent="nextContent" :nextContentType="nextContentType"/>
|
||||
</component>
|
||||
@ -10,6 +11,7 @@ import Article from "../components/Article.vue"
|
||||
import Quiz from "../components/Quiz.vue"
|
||||
import Video from "../components/Video.vue"
|
||||
import ContentNavigation from "../components/ContentNavigation.vue"
|
||||
import Breadcrumb from "../components/Breadcrumb.vue"
|
||||
|
||||
export default {
|
||||
props:['program_name', 'course_name', 'topic', 'type', 'content'],
|
||||
@ -54,7 +56,8 @@ export default {
|
||||
Article,
|
||||
Video,
|
||||
Quiz,
|
||||
ContentNavigation
|
||||
ContentNavigation,
|
||||
Breadcrumb
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<breadcrumb></breadcrumb>
|
||||
<TopSection v-bind:title="course.course_name" v-bind:description="course.description">
|
||||
</TopSection>
|
||||
<CardList :title="'Topics'" :description="''" :sectionType="'section-padding section-bg'">
|
||||
@ -11,7 +12,7 @@
|
||||
import TopSection from "../components/TopSection.vue"
|
||||
import CardList from "../components/CardList.vue"
|
||||
import TopicCard from "../components/TopicCard.vue"
|
||||
|
||||
import Breadcrumb from "../components/Breadcrumb.vue"
|
||||
|
||||
export default {
|
||||
props: ['program_name','course_name'],
|
||||
@ -19,7 +20,8 @@ export default {
|
||||
components: {
|
||||
TopSection,
|
||||
CardList,
|
||||
TopicCard
|
||||
TopicCard,
|
||||
Breadcrumb
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<breadcrumb></breadcrumb>
|
||||
<TopSection v-bind:title="program.program_name" v-bind:description="program.description">
|
||||
</TopSection>
|
||||
<CardList :title="'Courses'" :description="''" :sectionType="'section-padding'">
|
||||
@ -11,7 +12,7 @@
|
||||
import TopSection from "../components/TopSection.vue"
|
||||
import CardList from "../components/CardList.vue"
|
||||
import CourseCard from "../components/CourseCard.vue"
|
||||
|
||||
import Breadcrumb from "../components/Breadcrumb.vue"
|
||||
|
||||
export default {
|
||||
props: ['program_name'],
|
||||
@ -19,7 +20,8 @@ export default {
|
||||
components: {
|
||||
TopSection,
|
||||
CardList,
|
||||
CourseCard
|
||||
CourseCard,
|
||||
Breadcrumb
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
Loading…
x
Reference in New Issue
Block a user