UI for Course page

erpnext/public/js/education/web-academy/components/AcademyCourseCard.vue

@@ -0,0 +1,54 @@
+<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 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>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+    props: ['course'],
+    name: "AcademyCourseCard",
+    data() {
+        return {
+            nextContent: '',
+            nextContentType: ''
+        }
+    },
+    mounted() {
+        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
+        });
+    }
+};
+</script>
+
+<style scoped>
+    @media only screen and (max-width: 576px) {
+    .course-buttons {
+        margin-top: 1em;
+    }
+}
+</style>

erpnext/public/js/education/web-academy/pages/AcademyCoursePage.vue

@@ -1,10 +1,85 @@
 <template>
-<div>
-	Course Page
-</div>
+	<div>
+		<component v-bind:is="currentComponent" :content="content" :type="type">
+			<ContentNavigation :nextContent="nextContent" :nextContentType="nextContentType"/>
+		</component>
+	</div>
 </template>
 <script>
+import ContentArticle from "../components/ContentArticle.vue"
+import ContentQuiz from "../components/ContentQuiz.vue"
+import ContentVideo from "../components/ContentVideo.vue"
+import ContentNavigation from "../components/ContentNavigation.vue"
+
 export default {
-    name: "AcademyCoursePage"
+	props:['code', 'course', 'type', 'content'],
+	name: "AcademyCoursePage",
+	data() {
+		return{
+			nextContent: '',
+			nextContentType: '',
+		}
+	},
+	computed: {
+	  currentComponent: function() {
+	  	if(this.type === "Article") {
+	  		return 'ContentArticle'
+	  	}
+	  	else if(this.type === "Quiz") {
+	  		return 'ContentQuiz'
+	  	}
+	  	else if(this.type === "Video") {
+	  		return 'ContentVideo'
+	  	}
+	  },
+	},
+	mounted() {
+	  	frappe.call({
+	  		method: "erpnext.www.academy.get_next_content",
+	  		args:{
+	  			content: this.content,
+	  			content_type: this.type,
+	  			course: this.course
+	  		}
+	  	}).then(r => {
+	  		this.nextContent = r.message.content,
+	  		this.nextContentType = r.message.content_type
+	  	});
+	},
+	components: {
+		ContentArticle,
+		ContentVideo,
+		ContentQuiz,
+		ContentNavigation
+	}
 };
 </script>
+
+<style>
+.footer-message {
+	display: none;
+}
+
+.video-top-section {
+	padding-top: 3rem !important;
+	padding-bottom: 1rem !important;
+}
+
+.video-description-section {
+	padding-top: 0em !important;
+}
+
+.article-top-section {
+	padding-top: 0.5em !important;
+	padding-bottom: 0rem !important;
+}
+
+.article-content-section {
+	padding-top: 0em !important;
+}
+
+.quiz-section {
+	padding-top: 3rem !important;
+	padding-bottom: 0rem !important;
+}
+</style>