fix: mark as complete behaviour

school/public/css/style.css

@@ -1487,3 +1487,32 @@ pre {
 .live-courses .course-home-headings {
   margin-bottom: 1.5rem;
 }
+
+@media (min-width: 768px) {
+  .lesson-pagination .custom-checkbox .empty-checkbox {
+    width: 1rem;
+    height: 1rem;
+    border-radius: 4px;
+  }
+}
+
+@media (max-width: 767px) {
+  .lesson-pagination .custom-checkbox .empty-checkbox {
+    margin-bottom: 1rem;
+    border-radius: 4px;
+  }
+
+  .lesson-pagination .custom-checkbox span {
+    display: inline-block;
+    width: 70%;
+    font-size: 10px;
+  }
+}
+
+.lesson-pagination .custom-checkbox input:checked+.empty-checkbox {
+  background-size: 1rem;
+}
+
+.no-discussion {
+  width: 80%;
+}

school/www/batch/learn.html

@@ -79,27 +79,30 @@
 
 
   {% if not course.is_mentor(frappe.session.user) and membership %}
-
+  {% set progress = course.get_progress(lesson.name) %}
-  {% if course.get_progress(lesson.name) != "Complete" %}
+  <div class="custom-checkbox {% if progress == 'Complete' %} hide {% endif %}">
-  <div class="button is-secondary" id="progress" data-progress="Complete">
+    <label class="quiz-label">
-    Mark as Complete
+      <input class="option mark-progress" type="checkbox" checked>
+      <img class="empty-checkbox" />
+      <span class="small">{{ _("Mark the lesson as complete on moving to next lesson") }}</span>
+    </label>
   </div>
-  {% else %}
+
-  <div class="button is-secondary" id="progress" data-progress="Incomplete">
+  <div class="button is-secondary mark-progress {{ progress }} {% if progress == 'Incomplete' or progress == None %} hide {% endif %}"
+    data-progress="Incomplete">
     Mark as Incomplete
   </div>
-  {% endif %}
 
   {% endif %}
 
   <div>
-    {% if next_url %}
+    <a class="button is-primary next {% if membership.progress|int == 100 and not next_url %} hide {% endif %}"
-    <a class="button is-primary next" href="{{ next_url }}">
+      {% if next_url %} data-href="{{ next_url }}" {% endif %} href="">
-      Next
+      {% if next_url %} Next {% else %} Mark as Complete {% endif %}
       <img class="ml-2" src="/assets/school/icons/side-arrow-white.svg">
     </a>
-    {% elif course.enable_certification %}
+    {% if course.enable_certification %}
-    <div class="button is-primary {% if membership.progress != 100 %} hide {% endif %}" id="certification">
+    <div class="button is-primary {% if membership.progress|int != 100 or next_url %} hide {% endif %}" id="certification">
       Get Certificate
     </div>
     {% endif %}

school/www/batch/learn.js

@@ -8,7 +8,11 @@ frappe.ready(() => {
     enable_check(e);
   })
 
-  $("#progress").click((e) => {
+  $(".mark-progress").click((e) => {
+    mark_progress(e);
+  });
+
+  $(".next").click((e) => {
     mark_progress(e);
   });
 
@@ -66,21 +70,37 @@ var mark_active_question = (e = undefined) => {
 }
 
 var mark_progress = (e) => {
-  var status = $(e.currentTarget).attr("data-progress");
+  /* Prevent default only for Next button anchor tag and not for progress checkbox */
-  frappe.call({
+  if ($(e.currentTarget).prop("nodeName") != "INPUT")
-    method: "school.lms.doctype.course_lesson.course_lesson.save_progress",
+    e.preventDefault();
-    args: {
+  else
-      lesson: $(".title").attr("data-lesson"),
+    return
-      course: $(".title").attr("data-course"),
+
-      status: status
+  const target = $(e.currentTarget).attr("data-progress") ? $(e.currentTarget) : $("input.mark-progress");
-    },
+  const current_status = $(".lesson-progress").hasClass("hide") ? "Incomplete": "Complete";
-    callback: (data) => {
+
-      change_progress_indicators(status, e);
+  let status = "Incomplete";
-      if (data.message == 100 && !$(".next").length && $("#certification").hasClass("hide")) {
+  if (target.prop("nodeName") == "INPUT" && target.prop("checked")) {
-        $("#certification").removeClass("hide");
+    status = "Complete";
+  }
+
+  if (status != current_status) {
+    frappe.call({
+      method: "school.lms.doctype.course_lesson.course_lesson.save_progress",
+      args: {
+        lesson: $(".title").attr("data-lesson"),
+        course: $(".title").attr("data-course"),
+        status: status
+      },
+      callback: (data) => {
+        change_progress_indicators(status, e);
+        show_certificate_if_course_completed(data);
+        move_to_next_lesson(e);
       }
-    }
+    });
-  })
+  }
+  else
+    move_to_next_lesson(e);
 }
 
 var change_progress_indicators = (status, e) => {
@@ -92,9 +112,23 @@ var change_progress_indicators = (status, e) => {
     $(".lesson-progress").addClass("hide");
     $(".active-lesson .lesson-progress-tick").addClass("hide");
   }
-  var label = status != "Complete" ? "Mark as Complete" : "Mark as Incomplete";
+  if (status == "Incomplete" && !$(e.currentTarget).hasClass("next")) {
-  var data_progress = status != "Complete" ? "Complete" : "Incomplete";
+    $(e.currentTarget).addClass("hide");
-  $(e.currentTarget).text(label).attr("data-progress", data_progress);
+    $("input.mark-progress").prop("checked", false).closest(".custom-checkbox").removeClass("hide");
+  }
+}
+
+const show_certificate_if_course_completed = (data) => {
+  if (data.message == 100 && !$(".next").attr("data-next") && $("#certification").hasClass("hide")) {
+    $("#certification").removeClass("hide");
+    $(".next").addClass("hide");
+  }
+}
+
+const move_to_next_lesson = (e) => {
+  if ($(e.currentTarget).hasClass("next") && $(e.currentTarget).attr("data-href")) {
+    window.location.href = $(e.currentTarget).attr("data-href");
+  }
 }
 
 var quiz_summary = (e) => {