From a95204f02e5510580166509d433a722415e72269 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Mon, 1 Aug 2022 17:53:57 +0530
Subject: [PATCH] feat: add and update a chapter

---
 lms/lms/doctype/lms_course/lms_course.py |  26 +-
 lms/lms/widgets/CourseOutline.html       | 146 ++++----
 lms/public/js/common_functions.js        |  53 ++-
 lms/www/courses/course.html              | 432 +++++++++++++----------
 lms/www/courses/course.py                |  16 +-
 5 files changed, 397 insertions(+), 276 deletions(-)

diff --git a/lms/lms/doctype/lms_course/lms_course.py b/lms/lms/doctype/lms_course/lms_course.py
index 322cb77c..8385a988 100644
--- a/lms/lms/doctype/lms_course/lms_course.py
+++ b/lms/lms/doctype/lms_course/lms_course.py
@@ -228,23 +228,33 @@ def save_course(tags, title, short_introduction, video_link, image, description,
 
 
 @frappe.whitelist()
-def save_chapter(course, chapter, chapter_description, idx):
-    chapter = frappe.get_doc({
-        "doctype": "Course Chapter",
+def save_chapter(course, title, chapter_description, idx, chapter):
+    if chapter:
+        doc = frappe.get_doc("Course Chapter", chapter)
+    else:
+        doc = frappe.get_doc({
+            "doctype": "Course Chapter"
+        })
+
+    doc.update({
         "course": course,
-        "title": chapter,
+        "title": title,
         "description": chapter_description
     })
-    chapter.save(ignore_permissions=True)
+    doc.save(ignore_permissions=True)
 
-    chapter_reference = frappe.get_doc({
+    if chapter:
+        chapter_reference = frappe.get_doc("Chapter Reference", {"chapter": chapter})
+    else:
+        chapter_reference =  frappe.get_doc({
         "doctype": "Chapter Reference",
         "parent": course,
-        "chapter": chapter.name,
         "parenttype": "LMS Course",
         "parentfield": "chapters",
         "idx": idx
     })
+
+    chapter_reference.update({"chapter": doc.name})
     chapter_reference.save(ignore_permissions=True)
 
-    return chapter.name
+    return doc.name
diff --git a/lms/lms/widgets/CourseOutline.html b/lms/lms/widgets/CourseOutline.html
index b2de2df0..6f5d1131 100644
--- a/lms/lms/widgets/CourseOutline.html
+++ b/lms/lms/widgets/CourseOutline.html
@@ -1,19 +1,29 @@
-{% if get_chapters(course.name) | length %}
 <div class="course-home-outline">
+
+    {% if course.edit_mode and course.name %}
+    <div>
+        <button class="btn btn-md btn-secondary btn-chapter pull-right"> {{ _("New Chapter") }} </button>
+    </div>
+    {% endif %}
+
     <div class="course-home-headings">
         {{ _("Course Content") }}
     </div>
+
+    {% if get_chapters(course.name) | length %}
+
     {% for chapter in get_chapters(course.name) %}
-    <div class="">
-        <div class="chapter-title" data-target="#{{ get_slugified_chapter_title(chapter.title) }}"
-        data-toggle="collapse" aria-expanded="false">
+    <div class="chapter-parent">
+        <div class="chapter-title" {% if not course.edit_mode %}  data-toggle="collapse" aria-expanded="false"
+        data-target="#{{ get_slugified_chapter_title(chapter.title) }}" {% endif %} >
             {% if not course.edit_mode %}
             <img class="chapter-icon" src="/assets/lms/icons/chevron-right.svg">
             {% endif %}
             <div class="w-100 chapter-title-main" {% if course.edit_mode %} contenteditable="true" {% endif %} >{{ chapter.title }}</div>
         </div>
 
-        <div class="chapter-content collapse navbar-collapse" id="{{ get_slugified_chapter_title(chapter.title) }}">
+        <div class="chapter-content {% if not course.edit_mode %} collapse navbar-collapse {% endif %} "
+        id="{{ get_slugified_chapter_title(chapter.title) }}">
 
             {% if chapter.description or course.edit_mode %}
             <div {% if course.edit_mode %} contenteditable="true" {% endif %} class="chapter-description
@@ -22,7 +32,12 @@
             {% endif %}
 
             {% if course.edit_mode %}
-            <button class="btn btn-sm btn-secondary d-block btn-save-chapter mt-2 mb-8"> {{ _('Save') }} </button>
+            <div class="mt-2 mb-8">
+                <button class="btn btn-sm btn-secondary btn-save-chapter"
+                data-index="{{ loop.index }}" data-chapter="{{ chapter.name }}"> {{ _('Save') }} </button>
+                <button class="btn btn-sm btn-secondary btn-lesson ml-4"> {{ _("New Lesson") }}  </button>
+            </div>
+
             {% endif %}
 
             {% set is_instructor = is_instructor(course.name) %}
@@ -78,95 +93,94 @@
     </div>
     {% endfor %}
 
-    <div>
-        <button class="btn btn-md btn-secondary btn-chapter" data-index=" {{ chapters | length + 1 }} "> {{ _("Add Chapter") }} </button>
-    </div>
+    {% endif %}
+
+</div>
+{{ widgets.NoPreviewModal(course=course) }}
+
+
+<div class="course-home-outline">
+
+
+
+
+
+
 </div>
 
 <!-- No Preview Modal -->
-{{ widgets.NoPreviewModal(course=course) }}
 
-{% elif course.edit_mode and course.name %}
-<div class="course-home-outline">
-    <div class="course-home-headings">
-      {{ _("Course Content") }}
-    </div>
-    <div>
-        <button class="btn btn-md btn-secondary btn-chapter" data-index="1"> {{ _("Add Chapter") }} </button>
-    </div>
-</div>
-{% endif %}
 
 <script>
 
 frappe.ready(() => {
 
-  expand_the_active_chapter();
+    expand_the_active_chapter();
 
-  $(".chapter-title").unbind().click((e) => {
-    rotate_chapter_icon(e);
-  });
+    $(".chapter-title").unbind().click((e) => {
+        rotate_chapter_icon(e);
+    });
 
-  $(".no-preview").click((e) => {
-    show_no_preview_dialog(e);
-  });
+    $(".no-preview").click((e) => {
+        show_no_preview_dialog(e);
+    });
 
 });
 
 const expand_the_first_chapter = () => {
-  let elements = $(".course-home-outline .collapse");
-  elements.each((i, element) => {
-    if (i < 1) {
-      show_section(element);
-      return false;
-    }
-  });
+    let elements = $(".course-home-outline .collapse");
+    elements.each((i, element) => {
+        if (i < 1) {
+            show_section(element);
+            return false;
+        }
+    });
 };
 
 const expand_the_active_chapter = () => {
 
-  /* Find anchor matching the URL for course details page */
-  let selector = $(`a[href="${decodeURIComponent(window.location.pathname)}"]`).parent();
-  if (!selector.length) {
-    selector = $(`a[href^="${decodeURIComponent(window.location.pathname)}"]`).parent();
-  }
-  if (selector.length && $(".course-details-page").length) {
-    $(".lesson-info").removeClass("active-lesson");
-    $(".lesson-info").each((i, elem) => {
-      let href = $(elem).find("use").attr("href");
-      href.endsWith("blue") && $(elem).find("use").attr("href", href.substring(0, href.length - 5));
-    })
+    /* Find anchor matching the URL for course details page */
+    let selector = $(`a[href="${decodeURIComponent(window.location.pathname)}"]`).parent();
+    if (!selector.length) {
+        selector = $(`a[href^="${decodeURIComponent(window.location.pathname)}"]`).parent();
+    }
+    if (selector.length && $(".course-details-page").length) {
+        $(".lesson-info").removeClass("active-lesson");
+        $(".lesson-info").each((i, elem) => {
+            let href = $(elem).find("use").attr("href");
+            href.endsWith("blue") && $(elem).find("use").attr("href", href.substring(0, href.length - 5));
+        })
 
-    selector.addClass("active-lesson");
+        selector.addClass("active-lesson");
 
-    show_section(selector.parent().parent());
-  }
+        show_section(selector.parent().parent());
+    }
 
-  /* For course home page */
-  else if ($(".active-lesson").length) {
-    selector = $(".active-lesson")
-    show_section(selector.parent().parent());
-  }
+    /* For course home page */
+    else if ($(".active-lesson").length) {
+        selector = $(".active-lesson")
+        show_section(selector.parent().parent());
+    }
 
-  /* If no active chapter then exapand the first chapter */
-  else {
-    expand_the_first_chapter();
-  }
+    /* If no active chapter then exapand the first chapter */
+    else {
+        expand_the_first_chapter();
+    }
 };
 
 const show_section = (element) => {
-  $(element).addClass("show");
-  $(element).siblings(".chapter-title").children(".chapter-icon").css("transform", "rotate(90deg)");
-  $(element).siblings(".chapter-title").attr("aria-expanded", true);
+    $(element).addClass("show");
+    $(element).siblings(".chapter-title").children(".chapter-icon").css("transform", "rotate(90deg)");
+    $(element).siblings(".chapter-title").attr("aria-expanded", true);
 };
 
 const rotate_chapter_icon = (e) => {
-  let icon = $(e.currentTarget).children(".chapter-icon");
-  if (icon.css("transform") == "none") {
-    icon.css("transform", "rotate(90deg)");
-  } else {
-    icon.css("transform", "none");
-  }
+    let icon = $(e.currentTarget).children(".chapter-icon");
+    if (icon.css("transform") == "none") {
+        icon.css("transform", "rotate(90deg)");
+    } else {
+        icon.css("transform", "none");
+    }
 };
 
 const show_no_preview_dialog = (e) => {
diff --git a/lms/public/js/common_functions.js b/lms/public/js/common_functions.js
index 11e03dee..c7883e79 100644
--- a/lms/public/js/common_functions.js
+++ b/lms/public/js/common_functions.js
@@ -7,6 +7,14 @@ frappe.ready(() => {
         notify_user(e);
     });
 
+    $(".btn-chapter").click((e) => {
+        add_chapter(e);
+    });
+
+    $(document).on("click", ".btn-save-chapter", (e) => {
+        save_chapter(e);
+    });
+
 });
 
 const join_course = (e) => {
@@ -40,12 +48,13 @@ const join_course = (e) => {
     })
 };
 
+
 const notify_user = (e) => {
     e.preventDefault();
     var course = decodeURIComponent($(e.currentTarget).attr("data-course"));
     if (frappe.session.user == "Guest") {
-      window.location.href = `/login?redirect-to=/courses/${course}`;
-      return;
+        window.location.href = `/login?redirect-to=/courses/${course}`;
+        return;
     }
 
     frappe.call({
@@ -65,3 +74,43 @@ const notify_user = (e) => {
         }
     })
 };
+
+
+const add_chapter = (e) => {
+    let next_index = $("[data-index]").last().data("index");
+
+    $(`<div class="chapter-parent">
+        <div contenteditable="true" data-placeholder="${__('Chapter Name')}" class="chapter-title-main"></div>
+        <div class="small my-2" contenteditable="true" data-placeholder="${__('Short Description')}"
+        id="chapter-description"></div>
+        <button class="btn btn-sm btn-secondary d-block btn-save-chapter mb-8"
+        data-index="${next_index}"> ${__('Save')} </button>
+        </div>`).insertAfter(`.chapter-parent:last`);
+
+    $(".btn-chapter").attr("disabled", true);
+    $([document.documentElement, document.body]).animate({
+        scrollTop: $(".chapter-parent:last").offset().top
+    }, 1000);
+
+    $(".chapter-parent:last").find(".chapter-title-main").focus();
+};
+
+
+const save_chapter = (e) => {
+    let target = $(e.currentTarget);
+    let parent = target.closest(".chapter-parent");
+
+    frappe.call({
+        method: "lms.lms.doctype.lms_course.lms_course.save_chapter",
+        args: {
+            "course": $("#title").data("course"),
+            "title": parent.find(".chapter-title-main").text(),
+            "chapter_description": parent.find("#chapter-description").text(),
+            "idx": target.data("index"),
+            "chapter": target.data("chapter") ? target.data("chapter") : ""
+        },
+        callback: (data) => {
+            window.location.reload();
+        }
+    });
+};
diff --git a/lms/www/courses/course.html b/lms/www/courses/course.html
index 2d545867..a8dd1c53 100644
--- a/lms/www/courses/course.html
+++ b/lms/www/courses/course.html
@@ -1,78 +1,112 @@
 {% extends "templates/base.html" %}
-{% block title %}{{ course.title }}
+{% block title %}
+    {{  course.title if course.title else _("New Course") }}
 {% endblock %}
 
 {% block head_include %}
-{% include "public/icons/symbol-defs.svg" %}
-<link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
+    {% include "public/icons/symbol-defs.svg" %}
+    <link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
 {% endblock %}
 
 {% block content %}
 <div class="common-page-style pt-0 pb-0">
-  <div class="course-home-top-container">
-    {{ CourseHomeHeader(course) }}
-    <div class="course-home-page">
-      <div class="container">
-        <div class="course-body-container">
-          {{ CourseHeaderOverlay(course) }}
-          {{ Description(course) }}
-          {{ widgets.CourseOutline(course=course, membership=membership, is_user_interested=is_user_interested) }}
-          {{ widgets.Reviews(course=course, membership=membership) }}
+    <div class="course-home-top-container">
+        {{ CourseHomeHeader(course) }}
+        <div class="course-home-page">
+            <div class="container">
+                <div class="course-body-container">
+                    {{ CourseHeaderOverlay(course) }}
+                    {{ Description(course) }}
+                    {{ Save(course) }}
+                    {{ widgets.CourseOutline(course=course, membership=membership, is_user_interested=is_user_interested) }}
+                    {% if not course.edit_mode %}
+                    {{ widgets.Reviews(course=course, membership=membership) }}
+                    {% endif %}
+                </div>
+              </div>
         </div>
-      </div>
     </div>
-  </div>
-  {{ RelatedCourses(course) }}
 </div>
 {% endblock %}
 
+
 {% macro CourseHomeHeader(course) %}
 <div class="course-head-container">
-  <div class="container pt-8 pb-10">
-    <div class="course-card-wide">
-      {{ BreadCrumb(course) }}
-      {{ CourseCardWide(course) }}
+    <div class="container pt-8 pb-10">
+        <div class="course-card-wide">
+        {{ BreadCrumb(course) }}
+        {{ CourseCardWide(course) }}
+        </div>
     </div>
-  </div>
 </div>
 {% endmacro %}
-<!-- BreadCrumb -->
 
+
+<!-- BreadCrumb -->
 {% macro BreadCrumb(course) %}
 <div class="breadcrumb">
-  <a class="dark-links" href="/courses">{{ _("All Courses") }}</a>
-  <img class="ml-1 mr-1" src="/assets/lms/icons/chevron-right.svg">
-  <span class="breadcrumb-destination">{{ course.title }}</span>
+    <a class="dark-links" href="/courses">{{ _("All Courses") }}</a>
+    <img class="ml-1 mr-1" src="/assets/lms/icons/chevron-right.svg">
+    <span class="breadcrumb-destination">{{ course.title if course.title else _("New Course") }}</span>
 </div>
 {% endmacro %}
-<!-- Course Card -->
 
+
+<!-- Course Card -->
 {% macro CourseCardWide(course) %}
+
 <div class="d-flex align-items-center mt-8">
     {% for tag in get_tags(course.name) %}
-    <div class="course-card-pills">{{ tag }}</div>
+    <div class="course-card-pills" {% if course.edit_mode %} contenteditable="true" {% endif %}>{{ tag }}
+        {% if course.edit_mode %}
+        <span class="btn-delete-tag">
+            <svg class="icon  icon-sm">
+                <use class="" href="#icon-close"></use>
+            </svg>
+        </span>
+        {% endif %}
+    </div>
     {% endfor %}
-</div>
-<div class="course-card-wide-title">
-    {{ course.title }}
-</div>
-<div class="">
-    {{ course.short_introduction }}
+    {% if course.edit_mode %}
+    <button class="btn btn-default btn-sm btn-tag"> {{ _("Add Tag") }} </button>
+    {% endif %}
 </div>
 
+<div {% if course.edit_mode %} data-placeholder="{{ _('Title') }}" contenteditable="true" {% endif %}
+class="course-card-wide-title" id="title" data-course="{{ course.name | urlencode }}">{% if course.title %} {{ course.title }} {% endif %}</div>
+
+<div {% if course.edit_mode %} contenteditable="true" data-placeholder="{{ _('Short Introduction') }}"
+{% endif %} id="intro" >{% if course.short_introduction %} {{ course.short_introduction }} {% endif %}</div>
+
+{% if course.edit_mode %}
+    <div class="d-block mt-1" contenteditable="true" id="video-link"
+    data-placeholder=" {{ _('Preview Video Link') }} ">{% if course.video_link %}{{ course.video_link }}{% endif %}</div>
+
+    <div class="course-image-attachment {% if not course.image %} hide {% endif %} ">
+        <a href="{{ course.image }}" id="image" target="_blank"> {{ course.image }} </a>
+        <button class="btn btn-sm btn-default btn-clear ml-4"> {{ _("Clear") }} </button>
+    </div>
+
+    {% if not course.image %}
+    <a class="btn btn-default btn-sm btn-attach mt-4 {% if course.image %} hide {% endif %}"> {{ _("Attach Image") }} </a>
+    {% endif %}
+{% endif %}
+
+{% if not course.edit_mode %}
 <div class="mt-8">
     <div class="bold-heading">{{ _("Instructors") }}:</div>
     {% for instructor in get_instructors(course.name) %}
     <div class="mt-1">
-    {{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }}
+        {{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }}
         <a class="button-links" href="{{ get_profile_url(instructor.username) }}">
-        <span class="course-instructor"> {{ instructor.full_name }} </span>
+            <span class="course-instructor"> {{ instructor.full_name }} </span>
         </a>
     </div>
     {% endfor %}
 </div>
+{% endif %}
 
-{% if membership %}
+{% if membership and not course.edit_mode %}
 {% set progress = frappe.utils.cint(membership.progress) %}
 <div class="mt-8">
     <div class="progress-percent m-0">{{ progress }}% {{ _("Completed") }}</div>
@@ -85,186 +119,196 @@
 {% endif %}
 {% endmacro%}
 
+
+<!-- Overlay -->
 {% macro CourseHeaderOverlay(course) %}
+{% if not course.edit_mode %}
 <div class="course-overlay-card">
 
-  {% if course.video_link %}
-  <iframe class="preview-video" src="{{ course.video_link }}"></iframe>
-  {% endif %}
-
-  <div class="course-overlay-content">
-    <div class="course-overlay-title"> {{ course.title }} </div>
-
-    <div id="interest-alert" class="{% if not is_user_interested %} hide {% endif %}">
-        {{ _("You have opted to be notified for this course. You will receive an email when the course becomes available.") }}
-    </div>
-
-    {% if certificate_request and not certificate %}
-    <p class="mb-2"> <b>{{ _("Evaluation On: ") }}</b>
-        {{ _("{0} at {1}").format(frappe.utils.format_date(certificate_request.date, "medium"),
-        frappe.utils.format_time(certificate_request.start_time, "short")) }} </p>
+    {% if course.video_link %}
+    <iframe class="preview-video" src="{{ course.video_link }}"></iframe>
     {% endif %}
 
-    {% if course.status == "Under Review" %}
-    <div class="mb-4">
-        {{ _("Your course is currently under review. Once the review is complete, the System Admins will publish it on the website.") }}
-    </div>
-    {% endif %}
-    {% if no_of_attempts and no_of_attempts >= course.max_attempts %}
-    <p> {{ _("You have exceeded the maximum number of attempts allowed to appear for evaluations of this course.") }} </p>
-    {% endif %}
+    <div class="course-overlay-content">
+        <div class="course-overlay-title"> {{ course.title }} </div>
 
-    {% if is_instructor(course.name) %}
-    <div class="vertically-center mb-4">
-        <a class="button is-default button-links mr-2" href="/course?name={{ course.name }}"> {{ _("Edit") }} </a>
-        <a class="button is-default button-links mr-2" href="/chapter">
-            <svg class="icon icon-sm mr-1"><use href="#icon-add"></use></svg>
-            {{ _("Add Chapter") }}
+        <div id="interest-alert" class="{% if not is_user_interested %} hide {% endif %}">
+            {{ _("You have opted to be notified for this course. You will receive an email when the course becomes available.") }}
+        </div>
+
+        {% if certificate_request and not certificate %}
+        <p class="mb-2"> <b>{{ _("Evaluation On: ") }}</b>
+            {{ _("{0} at {1}").format(frappe.utils.format_date(certificate_request.date, "medium"),
+            frappe.utils.format_time(certificate_request.start_time, "short")) }} </p>
+        {% endif %}
+
+        {% if course.status == "Under Review" %}
+        <div class="mb-4">
+            {{ _("Your course is currently under review. Once the review is complete, the System Admins will publish it on the website.") }}
+        </div>
+        {% endif %}
+
+        {% if no_of_attempts and no_of_attempts >= course.max_attempts %}
+        <p> {{ _("You have exceeded the maximum number of attempts allowed to appear for evaluations of this course.") }} </p>
+        {% endif %}
+
+        <div class="vertically-center mb-3">
+            <svg class="icon icon-md mr-1">
+                <use class="" href="#icon-users">
+            </svg>
+            {{ get_students(course.name) | length }} {{ _("Enrolled") }}
+        </div>
+
+        {% if get_lessons(course.name) | length %}
+        <div class="vertically-center mb-3">
+            <svg class="icon icon-md mr-1">
+                <use href="#icon-education"></use>
+            </svg>
+            {{ get_lessons(course.name) | length }} {{ _("Lessons") }}
+        </div>
+        {% endif %}
+
+        {% if course.paid_certificate %}
+        <div class="vertically-center mb-3">
+            <svg class="icon icon-md mr-1">
+                <use href="#icon-badge"></use>
+            </svg>
+            <span class="certificate-price" data-price="{{ course.price_certificate }}">
+                {{ format_amount(course.price_certificate, course.currency) }}
+            </span>
+            <span class="indicator-pill green ml-3"> {{ _("Get Certified") }} </span>
+        </div>
+        {% endif %}
+
+        {% set lesson_index = get_lesson_index(membership.current_lesson) if membership and
+        membership.current_lesson else "1.1" if first_lesson_exists(course.name) else None %}
+
+        {% if show_start_learing_cta %}
+        <div class="button wide-button is-primary join-batch" data-course="{{ course.name | urlencode }}">
+            {{ _("Start Learning") }}
+            <img class="ml-2" src="/assets/lms/icons/white-arrow.svg" />
+        </div>
+
+        {% elif is_instructor(course.name) and not course.published and course.status == "Under Review" %}
+        <div class="button wide-button is-primary" id="submit-for-review" data-course="{{ course.name | urlencode }}">
+            {{ _("Submit for Review") }}
+            <img class="ml-2" src="/assets/lms/icons/white-arrow.svg" />
+        </div>
+
+        {% elif is_instructor(course.name) and lesson_index %}
+        <a class="button wide-button is-primary" id="continue-learning"
+        href="{{ get_lesson_url(course.name, lesson_index) }}{{ course.query_parameter }}">
+        {{ _("Checkout Course") }} <img class="ml-2" src="/assets/lms/icons/white-arrow.svg" />
         </a>
-        <a class="button is-default button-links mr-2" href="/lesson">
-            <svg class="icon icon-sm mr-1"><use href="#icon-add"></use></svg>
-            {{ _("Add Lesson") }}
+
+        {% elif course.upcoming and not is_user_interested %}
+        <div class="button wide-button is-default notify-me" data-course="{{course.name | urlencode}}">
+        {{ _("Notify me when available") }}
+        </div>
+
+        {% elif is_cohort_staff(course.name, frappe.session.user) %}
+        <a class="button wide-button is-secondary"
+            href="/courses/{{course.name}}/manage"
+            style="color: inherit;">
+            {{ _("Manage the course") }}
         </a>
+
+        {% elif membership %}
+        <a class="button wide-button is-primary" id="continue-learning"
+        href="{{ get_lesson_url(course.name, lesson_index) }}{{ course.query_parameter }}">
+        {{ _("Continue Learning") }} <img class="ml-2" src="/assets/lms/icons/white-arrow.svg" />
+        </a>
+        {% endif %}
+
+        {% set progress = frappe.utils.cint(membership.progress) %}
+
+        {% if membership and course.enable_certification %}
+        {% if certificate %}
+        <a class="button wide-button is-secondary mt-3" href="/courses/{{ course.name }}/{{ certificate }}">
+        {{ _("Get Certificate") }}
+        </a>
+
+        {% elif eligible_for_evaluation %}
+        <a class="button wide-button is-secondary mt-3" id="apply-certificate" data-course="{{ course.name }}">
+            {{ _("Apply for Certificate") }}
+        </a>
+
+        {% elif course.grant_certificate_after == "Completion" and progress == 100 %}
+        <div class="button wide-button is-secondary mt-3" id="certification" data-course="{{ course.name }}">
+        {{ _("Get Certificate") }}
+        </div>
+        {% endif %}
+        {% endif %}
+
+        {% if is_instructor(course.name) %}
+        <a class="btn btn-secondary btn-block" href="/courses/{{ course.name }}?edit=1"> {{ _("Edit Course") }} </a>
+        {% endif %}
+
     </div>
-    {% endif %}
-
-    <div class="vertically-center mb-3">
-        <svg class="icon icon-md mr-1">
-          <use class="" href="#icon-users">
-        </svg>
-        {{ get_students(course.name) | length }} {{ _("Enrolled") }}
-    </div>
-
-    {% if get_lessons(course.name) | length %}
-    <div class="vertically-center mb-3">
-        <svg class="icon icon-md mr-1">
-            <use href="#icon-education"></use>
-        </svg>
-        {{ get_lessons(course.name) | length }} {{ _("Lessons") }}
-    </div>
-    {% endif %}
-
-    {% if course.paid_certificate %}
-    <div class="vertically-center mb-3">
-        <svg class="icon icon-md mr-1">
-            <use href="#icon-badge"></use>
-        </svg>
-        <span class="certificate-price" data-price="{{ course.price_certificate }}">
-            {{ format_amount(course.price_certificate, course.currency) }}
-        </span>
-        <span class="indicator-pill green ml-3"> {{ _("Get Certified") }} </span>
-    </div>
-    {% endif %}
-
-    {% set lesson_index = get_lesson_index(membership.current_lesson) if membership and
-      membership.current_lesson
-      else '1.1' %}
-
-    {% if show_start_learing_cta %}
-    <div class="button wide-button is-primary join-batch" data-course="{{ course.name | urlencode }}">
-      {{ _("Start Learning") }}
-      <img class="ml-2" src="/assets/lms/icons/white-arrow.svg" />
-    </div>
-
-    {% elif is_instructor(course.name) and not course.published and course.status == "Under Review" %}
-    <div class="button wide-button is-primary" id="submit-for-review" data-course="{{ course.name | urlencode }}">
-      {{ _("Submit for Review") }}
-      <img class="ml-2" src="/assets/lms/icons/white-arrow.svg" />
-    </div>
-
-    {% elif is_instructor(course.name) %}
-    <a class="button wide-button is-primary" id="continue-learning"
-      href="{{ get_lesson_url(course.name, lesson_index) }}{{ course.query_parameter }}">
-      {{ _("Checkout Course") }} <img class="ml-2" src="/assets/lms/icons/white-arrow.svg" />
-    </a>
-
-    {% elif course.upcoming and not is_user_interested %}
-      <div class="button wide-button is-default notify-me" data-course="{{course.name | urlencode}}">
-       {{ _("Notify me when available") }}
-      </div>
-
-    {% elif is_cohort_staff(course.name, frappe.session.user) %}
-      <a class="button wide-button is-secondary"
-          href="/courses/{{course.name}}/manage"
-          style="color: inherit;">
-        {{ _("Manage the course") }}
-      </a>
-
-    {% elif membership %}
-    <a class="button wide-button is-primary" id="continue-learning"
-    href="{{ get_lesson_url(course.name, lesson_index) }}{{ course.query_parameter }}">
-    {{ _("Continue Learning") }} <img class="ml-2" src="/assets/lms/icons/white-arrow.svg" />
-    </a>
-    {% endif %}
-    {% set progress = frappe.utils.cint(membership.progress) %}
-    {% if membership and course.enable_certification %}
-    {% if certificate %}
-    <a class="button wide-button is-secondary mt-3" href="/courses/{{ course.name }}/{{ certificate }}">
-      {{ _("Get Certificate") }}
-    </a>
-    {% elif eligible_for_evaluation %}
-    <a class="button wide-button is-secondary mt-3" id="apply-certificate" data-course="{{ course.name }}">
-        {{ _("Apply for Certificate") }}
-      </a>
-    {% elif course.grant_certificate_after == "Completion" and progress == 100 %}
-    <div class="button wide-button is-secondary mt-3" id="certification" data-course="{{ course.name }}">
-      {{ _("Get Certificate") }}
-    </div>
-    {% endif %}
-    {% endif %}
-
-  </div>
 </div>
 
 <div class="modal fade" id="slot-modal" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <div class="font-weight-bold">{{ _("Pick a Slot") }}</div>
-        <button type="button" class="close close-slot-modal" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <form id="slot-form">
-            <p class="">{{ _("This course requires you to complete an evaluation to get certified. Please pick a slot based on your convenience for the evaluations. ") }}</p>
-            <div class="form-group">
-                <div class="clearfix">
-                    <label class="control-label reqd" style="padding-right: 0px;">{{ _("Date") }}</label>
-                </div>
-                <div class="control-input-wrapper">
-                    <div class="control-input">
-                        <input type="date" class="input-with-feedback form-control bold" data-fieldtype="Date" data-course="{{ course.name | urlencode }}"
-                            id="slot-date" min="{{ frappe.utils.format_date(frappe.utils.add_days(frappe.utils.getdate(), 1), 'yyyy-mm-dd') }}">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+        <div class="modal-header">
+            <div class="font-weight-bold">{{ _("Pick a Slot") }}</div>
+            <button type="button" class="close close-slot-modal" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+            </button>
+        </div>
+        <div class="modal-body">
+            <form id="slot-form">
+                <p class="">{{ _("This course requires you to complete an evaluation to get certified. Please pick a slot based on your convenience for the evaluations. ") }}</p>
+                <div class="form-group">
+                    <div class="clearfix">
+                        <label class="control-label reqd" style="padding-right: 0px;">{{ _("Date") }}</label>
+                    </div>
+                    <div class="control-input-wrapper">
+                        <div class="control-input">
+                            <input type="date" class="input-with-feedback form-control bold" data-fieldtype="Date" data-course="{{ course.name | urlencode }}"
+                                id="slot-date" min="{{ frappe.utils.format_date(frappe.utils.add_days(frappe.utils.getdate(), 1), 'yyyy-mm-dd') }}">
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div class="form-group">
-                <div class="clearfix">
-                <label class="control-label reqd slot-label hide" style="padding-right: 0px;">{{ _("Slots") }}</label>
+                <div class="form-group">
+                    <div class="clearfix">
+                    <label class="control-label reqd slot-label hide" style="padding-right: 0px;">{{ _("Slots") }}</label>
+                    </div>
+                    <div class="control-input-wrapper">
+                    <div class="control-input">
+                        <div class="slots"></div>
+                    </div>
+                    </div>
                 </div>
-                <div class="control-input-wrapper">
-                <div class="control-input">
-                    <div class="slots"></div>
-                </div>
-                </div>
-            </div>
-            <p id="no-slots-message" class="small text-danger hide"> {{ _("There are no slots available on this day.") }} </p>
-        </form>
-      </div>
-      <div class="modal-footer">
-        <div class="button is-primary" data-course="{{ course.name | urlencode}}" id="submit-slot">
-          {{ _("Submit") }}</div>
-      </div>
+                <p id="no-slots-message" class="small text-danger hide"> {{ _("There are no slots available on this day.") }} </p>
+            </form>
+        </div>
+        <div class="modal-footer">
+            <div class="button is-primary" data-course="{{ course.name | urlencode}}" id="submit-slot">
+            {{ _("Submit") }}</div>
+        </div>
+        </div>
     </div>
-  </div>
 </div>
+{% endif %}
 {% endmacro %}
 
+
+<!-- Description -->
 {% macro Description(course) %}
-<div class="course-description-section">
-  {{ frappe.utils.md_to_html(course.description) }}
+<div class="course-description-section" {% if course.edit_mode %} style="min-height: 100px" {% endif %}
+{% if course.edit_mode %} contenteditable="true" {% endif %} id="description"
+data-placeholder="Description">{% if course.description %}{{ frappe.utils.md_to_html(course.description) }}{% endif %}</div>
+{% endmacro %}
+
+
+<!-- Save -->
+{% macro Save(course) %}
+{% if course.edit_mode %}
+<div>
+    <button class="btn btn-primary btn-md btn-save-course my-4"> {{ _("Save") }} </button>
 </div>
+{% endif %}
 {% endmacro %}
 
 {% macro CourseCreator(course) %}
diff --git a/lms/www/courses/course.py b/lms/www/courses/course.py
index 81f468be..c97cfa2a 100644
--- a/lms/www/courses/course.py
+++ b/lms/www/courses/course.py
@@ -6,11 +6,9 @@ def get_context(context):
     context.no_cache = 1
 
     try:
-        print(frappe.form_dict)
         course_name = frappe.form_dict["course"]
     except KeyError:
-        frappe.local.flags.redirect_location = "/courses"
-        raise frappe.Redirect
+        redirect_to_courses_list()
 
     if course_name == "new-course":
         context.course = frappe._dict()
@@ -26,6 +24,11 @@ def set_course_context(context, course_name):
         "price_certificate", "currency", "max_attempts", "duration"],
         as_dict=True)
 
+    if frappe.form_dict.get("edit"):
+        if not is_instructor(course.name):
+            redirect_to_courses_list()
+        course.edit_mode = True
+
     if course is None:
         frappe.local.flags.redirect_location = "/courses"
         raise frappe.Redirect
@@ -51,9 +54,6 @@ def set_course_context(context, course_name):
     if context.course.upcoming:
         context.is_user_interested = get_user_interest(context.course.name)
 
-    if frappe.form_dict.get("edit"):
-        context.course.edit_mode = True
-
     context.metatags = {
         "title": course.title,
         "image": course.image,
@@ -69,3 +69,7 @@ def get_user_interest(course):
 
 def show_start_learing_cta(course, membership, restriction):
     return not course.disable_self_learning and not membership and not course.upcoming and not restriction.get("restrict") and not is_instructor(course.name)
+
+def redirect_to_courses_list():
+    frappe.local.flags.redirect_location = "/courses"
+    raise frappe.Redirect