feat: course outline page

lms/www/courses/outline.html

@@ -7,12 +7,105 @@
 
 {% block page_content %}
 <main class="common-page-style">
-    <div class="container">
+
+    <header class="sticky">
+        <div class="container w-75">
+            <button class="btn btn-primary btn-sm btn-save-course pull-right mt-1">
+                {{ _("Save") }}
+            </button>
+
+            <div class="page-title"> {{ _("Course Outline") }} </div>
+        </div>
+    </header>
+
+    <div class="container w-75">
+        {{ Outline(chapters) }}
+        {{ CreateChapter() }}
         {{ EmptyState() }}
     </div>
 </main>
 {% endblock %}
 
+{% macro Outline(chapters) %}
+{% if chapters %}
+{% for chapter in chapters %}
+<article>
+    <div class="common-card-style column-card p-4 mb-5">
+        <div class="level">
+            <svg class="icon icon-xs level-item mr-2">
+                <use class="" href="#icon-drag"></use>
+            </svg>
+            <div class="bold-heading">
+                {{ chapter.title }}
+            </div>
+        </div>
+
+        {% for lesson in get_lessons(course.name, chapter) %}
+        <div class="outline-lesson level">
+            <svg class="icon icon-xs level-item mr-2">
+                <use class="" href="#icon-drag"></use>
+            </svg>
+            <!-- <div class="icon-bg">
+                <svg class="icon icon-sm level-item">
+                    <use class="" href="#{{ lesson.icon }}">
+                </svg>
+            </div> -->
+            <div class="">
+                {{ lesson.title }}
+            </div>
+        </div>
+        {% endfor %}
+
+        <button class="btn btn-default btn-sm align-self-start">
+            <svg class="icon  icon-xs">
+                <use class="" href="#icon-add"></use>
+            </svg>
+            <span>
+                {{ _("Add Lesson") }}
+            </span>
+        </button>
+    </div>
+</article>
+{% endfor %}
+{% endif %}
+{% endmacro %}
+
+
+{% macro CreateChapter() %}
+<article>
+    <div class="common-card-style column-card p-4">
+        <div class="field-group">
+            <div>
+                <div class="field-label">
+                    {{ _("Chapter Title") }}
+                </div>
+                <div class="field-description">
+                    {{ _("Something Short and Concise") }}
+                </div>
+            </div>
+            <div class="">
+                <input id="chapter-title" type="text" class="field-input">
+            </div>
+        </div>
+
+        <div class="field-group">
+            <div>
+                <div class="field-label">
+                    {{ _("Short Description") }}
+                </div>
+                <div class="field-description">
+                    {{ _("A breif description about this chapter.") }}
+                </div>
+            </div>
+            <div class="">
+                <input id="chapter-description" type="text" class="field-input">
+            </div>
+        </div>
+    </div>
+</article>
+{% endmacro %}
+
+
 {% macro EmptyState() %}
 <article class="empty-state">
     <div class="text-center">

lms/www/courses/outline.js

@@ -0,0 +1,13 @@
+frappe.ready(() => {
+	pin_header();
+});
+
+const pin_header = () => {
+	const el = document.querySelector(".sticky");
+	const observer = new IntersectionObserver(
+		([e]) =>
+			e.target.classList.toggle("is-pinned", e.intersectionRatio < 1),
+		{ threshold: [1] }
+	);
+	observer.observe(el);
+};

lms/www/courses/outline.py

@@ -1,4 +1,5 @@
 import frappe
+from lms.lms.utils import get_chapters
 
 
 def get_context(context):
@@ -6,3 +7,4 @@ def get_context(context):
 	context.course = frappe.db.get_value(
 		"LMS Course", frappe.form_dict["course"], ["name", "title"], as_dict=True
 	)
+	context.chapters = get_chapters(context.course.name)