UI for home page and program page
diff --git a/erpnext/public/js/education/web-academy/components/AcademyCardList.vue b/erpnext/public/js/education/web-academy/components/AcademyCardList.vue
deleted file mode 100644
index 16e1924..0000000
--- a/erpnext/public/js/education/web-academy/components/AcademyCardList.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
- <section class='section-padding section-bg'>
- <div class='container'>
- <h3 class='text-center'>Featured Programs</h3>
- <p class='lead text-center'>Master Engineering</p>
- <AcademyProgramCard v-for="program in featured_programs" v-bind:id="program" v-bind:title="program"/>
- <div class='mt-4 text-center'>
- <a class="btn btn-primary btn-lg" href="/program">View All</a>
- </div>
- </div>
-</section>
-</template>
-<script>
-import AcademyProgramCard from "../components/AcademyProgramCard.vue"
-export default {
- name: "AcademyCardList",
- data() {
- return {
- featured_programs: [],
- };
- },
- mounted() {
- frappe.call("erpnext.www.academy.get_featured_programs").then(r => {
- this.featured_programs = r.message
- })
- },
- components: {
- AcademyProgramCard
- }
-};
-</script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/web-academy/components/AcademyList.vue b/erpnext/public/js/education/web-academy/components/AcademyList.vue
new file mode 100644
index 0000000..919a3a9
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/components/AcademyList.vue
@@ -0,0 +1,18 @@
+<template>
+ <section class='section-padding section-bg'>
+ <div class='container'>
+ <h3 class='text-center' v-html="title"></h3>
+ <p class='lead text-center' v-html="description"></p>
+ <slot></slot>
+ <div class='mt-4 text-center'>
+ <a class="btn btn-primary btn-lg" href="/program">View All</a>
+ </div>
+ </div>
+</section>
+</template>
+<script>
+export default {
+ props:['title', 'description'],
+ name: "AcademyList",
+};
+</script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/web-academy/components/AcademyProgramCard.vue b/erpnext/public/js/education/web-academy/components/AcademyProgramCard.vue
index 3228421..c03261f 100644
--- a/erpnext/public/js/education/web-academy/components/AcademyProgramCard.vue
+++ b/erpnext/public/js/education/web-academy/components/AcademyProgramCard.vue
@@ -1,10 +1,10 @@
<template>
<div class='card-deck mt-5'>
<div class="card">
- <img :src="program.hero_image" style='height: 150px'>
+ <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.name }}</h5>
+ <h5 class='card-title'>{{ program.program_name }}</h5>
</router-link>
<div v-html="program.description"></div>
</div>
@@ -17,7 +17,7 @@
</template>
<script>
export default {
- props: ['title'],
+ props: ['program_code'],
name: "AcademyProgramCard",
data() {
return {
@@ -28,11 +28,17 @@
frappe.call({
method: "erpnext.www.academy.get_program_details",
args: {
- program_name: this.title
+ program_name: this.program_code
}
}).then(r => {
this.program = r.message
})
},
};
-</script>
\ No newline at end of file
+</script>
+
+<style lang="css" scoped>
+ a {
+ text-decoration: none;
+}
+</style>
\ No newline at end of file
diff --git a/erpnext/public/js/education/web-academy/components/AcademyTopSection.vue b/erpnext/public/js/education/web-academy/components/AcademyTopSection.vue
index 0c1f5a6..93724c6 100644
--- a/erpnext/public/js/education/web-academy/components/AcademyTopSection.vue
+++ b/erpnext/public/js/education/web-academy/components/AcademyTopSection.vue
@@ -17,18 +17,7 @@
</template>
<script>
export default {
+ props: ['title', 'description'],
name: "AcademyTopSection",
- data() {
- return {
- title: '',
- description: ''
- };
- },
- mounted() {
- frappe.call("erpnext.www.academy.get_portal_details").then(r => {
- this.title = r.message.title,
- this.description = r.message.description
- })
- },
};
</script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue b/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue
index 813e012..eac3eff 100644
--- a/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue
+++ b/erpnext/public/js/education/web-academy/pages/AcademyProgramPage.vue
@@ -1,14 +1,52 @@
<template>
<div>
- Program Page {{ code }}
+ <AcademyTopSection v-bind:title="program.program_name" v-bind:description="program.description"/>
+ <AcademyList :title="'Courses'" :description="''">
+ <AcademyCourseCard v-for="course in course_list" :course="course" :key="course.name"/>
+ </AcademyList>
</div>
</template>
<script>
+import AcademyTopSection from "../components/AcademyTopSection.vue"
+import AcademyList from "../components/AcademyList.vue"
+import AcademyCourseCard from "../components/AcademyCourseCard.vue"
+
export default {
props: ['code'],
name: "AcademyProgramPage",
- data() {
- return this.code
- }
+ components: {
+ AcademyTopSection,
+ AcademyList,
+ AcademyCourseCard
+ },
+ data() {
+ return {
+ program: '',
+ course_list: []
+ }
+ },
+ mounted() {
+ frappe.call({
+ method: "erpnext.www.academy.get_program_details",
+ args: {
+ program_name: this.code
+ }
+ }).then(r => {
+ this.program = r.message
+ });
+ frappe.call({
+ method: "erpnext.www.academy.get_courses",
+ args: {
+ program_name: this.code
+ }
+ }).then(r => {
+ this.course_list = r.message
+ })
+ },
+ watch: {
+ '$route' (to, from) {
+ // react to route changes...
+ }
+ }
};
</script>
\ No newline at end of file