fix: ui for course creation

lms/lms/utils.py

@@ -387,3 +387,7 @@ def first_lesson_exists(course):
         return False
 
     return True
+
+def redirect_to_courses_list():
+    frappe.local.flags.redirect_location = "/courses"
+    raise frappe.Redirect

lms/lms/widgets/CourseOutline.html

@@ -13,7 +13,7 @@
     {% if get_chapters(course.name) | length %}
 
     {% for chapter in get_chapters(course.name) %}
-    <div class="chapter-parent">
+    <div class="chapter-parent {% if course.edit_mode %} chapter-edit {% endif %} ">
         <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 %}
@@ -34,7 +34,7 @@
             {% endif %}
 
             {% if course.edit_mode %}
-            <div class="mt-2 mb-8">
+            <div class="mt-2">
                 <button class="btn btn-sm btn-secondary btn-save-chapter"
                 data-index="{{ loop.index }}" data-chapter="{{ chapter.name }}"> {{ _('Save') }} </button>
                 <a class="btn btn-sm btn-secondary btn-lesson ml-4"
@@ -43,8 +43,14 @@
             {% endif %}
 
             {% set is_instructor = is_instructor(course.name) %}
+
+            {% if lessons | length %}
             <div class="lessons">
 
+                {% if course.edit_mode %}
+                <b class="course-meta"> {{ _("Lessons") }}: </b>
+                {% endif %}
+
                 {% for lesson in lessons %}
                 {% set active = membership.current_lesson == lesson.name %}
                 <div class="lesson-info {% if active and not course.edit_mode %} active-lesson {% endif %}">
@@ -93,6 +99,8 @@
                 {% endfor %}
 
             </div>
+            {% endif %}
+
         </div>
     </div>
     {% endfor %}

lms/public/css/style.css

@@ -60,6 +60,7 @@ input[type=checkbox] {
   font-weight: 600;
   color: var(--gray-900);
   width: fit-content;
+  box-shadow: var(--shadow-sm);
 }
 
 .dark-pills {
@@ -378,7 +379,6 @@ input[type=checkbox] {
 .chapter-title {
     cursor: pointer;
     border-radius: var(--border-radius-lg);
-    padding: 0.5rem 0;
     color: var(--gray-900);
     display: flex;
     align-items: center;
@@ -413,7 +413,6 @@ input[type=checkbox] {
     align-items: center;
     padding: 0.5rem;
     color: var(--gray-900);
-  font-size: var(--text-base);
 }
 
 .lesson-links:hover {
@@ -424,7 +423,7 @@ input[type=checkbox] {
 }
 
 .lessons {
-  margin-left: 2rem;
+    margin-left: 1.5rem;
 }
 
 .member-card {
@@ -441,7 +440,7 @@ input[type=checkbox] {
 .break {
     flex-basis: 100%;
     flex-grow: 1;
-  margin: .5rem 0;
+    margin: 0.5rem 0;
 }
 
 .course-home-headings {
@@ -594,7 +593,8 @@ input[type=checkbox] {
 }
 
 .course-content-parent .course-home-headings {
-  margin: 0px 0px 1rem;
+    margin: 0 0 1rem;
+    width: 100%;
 }
 
 .lesson-pagination {
@@ -1150,7 +1150,7 @@ pre {
 
 .course-head-container {
     color: var(--gray-900);
-  background-color: var(--gray-200);
+    background-color: var(--gray-50);
 }
 
 .seperator {
@@ -1419,9 +1419,7 @@ pre {
 }
 
 .attachments-parent {
-    float: right;
+    color: var(--text-color);
-    font-size: var(--text-sm);
-    margin-bottom: 1rem;
 }
 
 li {
@@ -1504,11 +1502,11 @@ li {
 }
 
 [contenteditable] {
-    border: 1px solid var(--gray-400);
-    padding: 0.5rem;
-    border-radius: var(--border-radius);
     outline: none;
-    white-space: pre-wrap;
+    background-color: var(--bg-light-gray);
+    border-radius: var(--border-radius);
+    border: 1px dashed var(--gray-400);
+    padding: 0.5rem 0.75rem;
 }
 
 [contenteditable]:empty:before {
@@ -1518,12 +1516,44 @@ li {
 
 .course-image-attachment {
     margin-top: 1rem;
-    border: 1px solid var(--gray-400);
+    background-color: var(--bg-light-gray);
     border-radius: var(--border-radius);
-    padding: 0.25rem 0.5rem;
+    border: 1px dashed var(--gray-400);
+    padding: 0.5rem 0.75rem;
     width: fit-content;
 }
 
 .btn-delete-tag {
     cursor: pointer;
 }
+
+.chapter-edit {
+    border: 1px solid var(--dark-border-color);
+    border-radius: var(--border-radius);
+    padding: 1rem;
+    margin-bottom: 1rem;
+}
+
+.chapter-edit .lessons {
+    margin-left: 0;
+    margin-top: 2rem;
+}
+
+.chapter-parent {
+    margin-bottom: 1rem;
+}
+
+.chapter-edit .chapter-title {
+    padding: 0.5rem 0;
+}
+
+.course-card-pills[contenteditable] {
+    box-shadow: none;
+}
+
+.preview {
+    display: flex;
+    align-items: center;
+    font-size: var(--text-md);
+    margin-top: 1rem;
+}

lms/public/js/common_functions.js

@@ -1,5 +1,7 @@
 frappe.ready(() => {
 
+    frappe.provide("frappe.ui.form");
+
     setup_vue_and_file_size();
 
     $(".join-batch").click((e) => {
@@ -18,6 +20,10 @@ frappe.ready(() => {
         save_chapter(e);
     });
 
+    if ($("#body").length) {
+        make_editor();
+    }
+
 });
 
 
@@ -104,11 +110,11 @@ const notify_user = (e) => {
 const add_chapter = (e) => {
     let next_index = $("[data-index]").last().data("index");
 
-    $(`<div class="chapter-parent">
+    $(`<div class="chapter-parent chapter-edit">
         <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>
+        class="chapter-description"></div>
-        <button class="btn btn-sm btn-secondary d-block btn-save-chapter mb-8"
+        <button class="btn btn-sm btn-secondary d-block btn-save-chapter"
         data-index="${next_index}"> ${__('Save')} </button>
         </div>`).insertAfter(`.chapter-parent:last`);
 
@@ -130,7 +136,7 @@ const save_chapter = (e) => {
         args: {
             "course": $("#title").data("course"),
             "title": parent.find(".chapter-title-main").text(),
-            "chapter_description": parent.find("#chapter-description").text(),
+            "chapter_description": parent.find(".chapter-description").text(),
             "idx": target.data("index"),
             "chapter": target.data("chapter") ? target.data("chapter") : ""
         },
@@ -139,3 +145,24 @@ const save_chapter = (e) => {
         }
     });
 };
+
+
+const make_editor = () => {
+    this.code_field_group = new frappe.ui.FieldGroup({
+        fields: [
+            {
+                fieldname: "code_md",
+                fieldtype: "Code",
+                options: "Markdown",
+                wrap: true,
+                max_lines: Infinity,
+                min_lines: 20,
+                default: "Jannat Patel",
+                depends_on: 'eval:doc.type=="Markdown"',
+            }
+        ],
+        body: $("#body").get(0),
+    });
+    this.code_field_group.make();
+    $("#body .form-section:last").removeClass("empty-section");
+}

lms/www/batch/learn.html

@@ -113,36 +113,7 @@
             {% endif %}
 
             {% if lesson.edit_mode %}
-
+            {{ EditLesson(lesson) }}
-            <div class="attachments-parent">
-                <div class="attachment-controls">
-                    <div class="show-attachments" data-toggle="collapse" data-target="#collapse-attachments" aria-expanded="false">
-                        <svg class="icon icon-sm">
-                            <use class="" href="#icon-attachment">
-                        </svg>
-                        <span class="attachment-count" data-count="0">0 {{ _("attachments") }}</span>
-                    </div>
-                    <div class="add-attachment">
-                        <span class="button is-secondary">
-                            <svg class="icon icon-sm">
-                                <use class="" href="#icon-upload">
-                            </svg>
-                            {{ _("Upload Attachments") }}
-                        </span>
-                    </div>
-                </div>
-                <table class="attachments common-card-style collapse hide" id="collapse-attachments"></table>
-            </div>
-
-            <label class="d-flex align-items-center mb-4 small">
-                <input {% if lesson.include_in_preview %} checked {% endif %}
-                type="checkbox" id="preview"> {{ _("Show preview of this lesson") }}
-            </label>
-
-            <div contenteditable="true" data-placeholder="{{ _('Enter the lesson content.') }}"
-            id="body"> {% if lesson.body %} {{ lesson.body }} {% endif %} </div>
-            <button class="btn btn-primary btn-md mt-8 btn-lesson pull-right"> {{ _("Save") }} </button>
-
             {% else %}
             {{ render_html(lesson.body) }}
             {% endif %}
@@ -203,6 +174,42 @@
 </div>
 {% endmacro %}
 
+{% macro EditLesson(lesson) %}
+<div contenteditable="true" data-placeholder="{{ _('Enter the lesson content.') }}"
+> {% if lesson.body %} {{ lesson.body }} {% endif %} </div>
+
+<div id="body"></div>
+
+<label class="preview">
+    <input {% if lesson.include_in_preview %} checked {% endif %}
+    type="checkbox" id="preview"> {{ _("Show preview of this lesson") }}
+</label>
+
+<div class="mt-8">
+    <button class="btn btn-primary btn-md btn-lesson pull-right"> {{ _("Save") }} </button>
+
+    <div class="attachments-parent">
+        <div class="attachment-controls">
+            <div class="show-attachments" data-toggle="collapse" data-target="#collapse-attachments" aria-expanded="false">
+                <svg class="icon icon-sm">
+                    <use class="" href="#icon-attachment">
+                </svg>
+                <span class="attachment-count" data-count="0">0 {{ _("attachments") }}</span>
+            </div>
+            <div class="add-attachment">
+                <span class="btn btn-md btn-secondary">
+                    <svg class="icon icon-sm">
+                        <use class="" href="#icon-upload">
+                    </svg>
+                    {{ _("Upload Attachments") }}
+                </span>
+            </div>
+        </div>
+        <table class="attachments common-card-style collapse hide" id="collapse-attachments"></table>
+    </div>
+</div>
+{% endmacro %}
+
 {% macro Discussions() %}
 {% set topics_count = frappe.db.count("Discussion Topic",
     {"reference_doctype": "Course Lesson", "reference_docname": lesson.name}) %}

lms/www/batch/learn.js

@@ -1,6 +1,7 @@
 frappe.ready(() => {
 
     localStorage.removeItem($("#quiz-title").text());
+
     fetch_assignments();
 
     save_current_lesson();
@@ -478,7 +479,7 @@ const save_lesson = (e) => {
         method: "lms.lms.doctype.lms_course.lms_course.save_lesson",
         args: {
             "title": $("#title").text(),
-            "body": $("#body").text(),
+            "body": $("#body").find("br").replaceWith("\n\n").end().text(),
             "chapter": $("#title").data("chapter"),
             "preview": $("#preview").prop("checked") ? 1 : 0,
             "idx": $("#title").data("index"),

lms/www/batch/learn.py

@@ -1,7 +1,6 @@
-from re import I
 import frappe
 from lms.www.utils import get_common_context, redirect_to_lesson
-from lms.lms.utils import get_lesson_url
+from lms.lms.utils import get_lesson_url, is_instructor, redirect_to_courses_list
 from frappe.utils import cstr, flt
 
 def get_context(context):
@@ -28,6 +27,8 @@ def get_context(context):
         context.lessom = frappe._dict()
 
     if frappe.form_dict.get("edit"):
+        if not is_instructor(context.course.name):
+            redirect_to_courses_list()
         context.lesson.edit_mode = True
 
     neighbours = get_neighbours(lesson_number, context.lessons)

lms/www/courses/course.html

@@ -307,7 +307,8 @@ data-placeholder="Description">{% if course.description %}{{ frappe.utils.md_to_
 {% macro Save(course) %}
 {% if course.edit_mode %}
 <div>
-    <button class="btn btn-primary btn-md btn-save-course my-4"> {{ _("Save") }} </button>
+    <button class="btn btn-primary btn-md btn-save-course my-4">
+        {{ _("Save Course Details") }} </button>
 </div>
 {% endif %}
 {% endmacro %}

lms/www/courses/course.js

@@ -322,7 +322,7 @@ const clear_image = () => {
 
 const add_tag = (e) => {
     $(`<div class="course-card-pills" contenteditable="true"
-        data-placeholder="${__('Tags')}"></div>`).insertBefore(`.btn-tag`);
+        data-placeholder="${__('Tag')}"></div>`).insertBefore(`.btn-tag`);
 };
 
 

lms/www/courses/course.py

@@ -1,6 +1,6 @@
 import frappe
 from lms.lms.doctype.lms_settings.lms_settings import check_profile_restriction
-from lms.lms.utils import get_membership, is_instructor, is_certified, get_evaluation_details
+from lms.lms.utils import get_membership, is_instructor, is_certified, get_evaluation_details, redirect_to_courses_list
 
 def get_context(context):
     context.no_cache = 1
@@ -72,8 +72,3 @@ 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