Merge pull request #261 from pateljannat/search

school/lms/doctype/lms_course/lms_course.py

@@ -362,3 +362,28 @@ def reindex_exercises(doc):
     course = frappe.get_doc("LMS Course", course_data['name'])
     course.reindex_exercises()
     frappe.msgprint("All exercises in this course have been re-indexed.")
+
+@frappe.whitelist()
+def search_course(text):
+    search_courses = []
+    courses = frappe.get_all("LMS Course",
+                filters= {
+                    "is_published": True
+                },
+                or_filters = {
+                    "title": ["like", "%{0}%".format(text)],
+                    "tags": ["like", "%{0}%".format(text)],
+                    "short_introduction": ["like", "%{0}%".format(text)],
+                    "description": ["like", "%{0}%".format(text)],
+                })
+
+    """ for course in courses:
+        search_courses.append(frappe.get_doc("LMS Course", course)) """
+
+    """ template = frappe.render_template("school/templates/course_list.html", {
+        "title": _("Search Results"),
+        "courses": search_courses,
+        "widgets": Widgets()
+    }) """
+
+    return courses

school/lms/widgets/CourseCard.html

@@ -1,6 +1,6 @@
 {% set membership = course.get_membership(frappe.session.user) %}
 {% set progress = frappe.utils.cint(membership.progress) %}
-<div class="common-card-style course-card">
+<div class="common-card-style course-card" data-course="{{ course.name }}">
 
   <div class="course-image {% if not course.image %}default-image{% endif %}" {% if course.image %}
     style="background-image: url( {{ course.image }} );" {% endif %}>

school/public/css/style.css

@@ -190,14 +190,6 @@ input[type=checkbox] {
   }
 }
 
-.courses-header {
-  margin-bottom: 1.5rem;
-  color: var(--text-color-dark);
-  font-weight: 600;
-  font-size: var(--text-3xl);
-  letter-spacing: -0.0175em
-}
-
 @media (min-width: 576px) and (max-width: 992px) {
   .container {
     padding-left: 1rem;
@@ -1376,3 +1368,16 @@ pre {
   background-image: url("/assets/school/icons/blue-arrow.svg");
   margin-left: 1.5rem;
 }
+
+.search-course {
+	background-image: url(/assets/frappe/icons/timeless/search.svg);
+  border: 1px solid #C8CFD5;
+  box-sizing: border-box;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  padding: 0.625rem 0.75rem;
+  height: 36px;
+  background-repeat: no-repeat;
+	text-indent: 1.5rem;
+	background-position: 1rem 0.65rem;
+}

school/templates/course_list.html

@@ -0,0 +1,12 @@
+<div class="{{ classes }}">
+  {% if courses | length %}
+  <div class="course-home-headings">
+    {{ title }}
+  </div>
+  <div class="cards-parent">
+    {% for course in courses %}
+    {{ widgets.CourseCard(course=course, read_only=False) }}
+    {% endfor %}
+  </div>
+{% endif %}
+</div>

school/templates/search_course/search_course.html

@@ -0,0 +1,3 @@
+<input class="search-course w-25 float-right" placeholder="{{ _("Try `Manufacturing` or `Accounting`") }}">
+
+<script> {% include "school/templates/search_course/search_course.js" %} </script>

school/templates/search_course/search_course.js

@@ -0,0 +1,46 @@
+frappe.ready(() => {
+  $(".search-course").keyup((e) => {
+    search_course(e);
+  });
+});
+
+const search_course = (e) => {
+  let input = $(e.currentTarget).val();
+
+  if (input.length < 3 || input.trim() == "") {
+    $(".course-card").removeClass("hide");
+    $(".course-home-headings").parent().removeClass("hide");
+    $(".upcoming-courses").addClass("mt-10");
+    return;
+  }
+
+  frappe.call({
+    method: "school.lms.doctype.lms_course.lms_course.search_course",
+    args: {
+      "text": input
+    },
+    callback: (data) => {
+      render_course_list(data.message);
+    }
+  });
+};
+
+const render_course_list = (courses) => {
+  $(".course-card").addClass("hide");
+  for (course in courses) {
+    $("[data-course=" + courses[course].name + "]").removeClass("hide");
+  }
+
+  const visible_live_courses = $(".live-courses .course-card").not(".hide");
+  const visible_upcoming_courses = $(".upcoming-courses .course-card").not(".hide");
+
+  if (!visible_live_courses.length) {
+    $(".live-courses").addClass("hide");
+    $(".upcoming-courses").removeClass("mt-10");
+  }
+
+  if (!visible_upcoming_courses.length) {
+    $(".upcoming-courses").addClass("hide");
+  }
+}
+

school/www/courses/index.html

@@ -10,28 +10,19 @@
 <div class="common-page-style">
   <div class="container">
 
-    {% if live_courses | length %}
+    {% include "school/templates/search_course/search_course.html" %}
-    <div class="courses-header">
-      {{ _('Live Courses') }}
-    </div>
-    <div class="cards-parent">
-      {% for course in live_courses %}
-      {{ widgets.CourseCard(course=course, read_only=False) }}
-      {% endfor %}
-    </div>
-    {% endif %}
 
-    {% if upcoming_courses | length %}
+    <div class="course-list">
-    <div class="courses-header mt-12">
+      {% set title = _("Live Courses") %}
-      {{ _('Upcoming Courses') }}
+      {% set courses = live_courses %}
-    </div>
+      {% set classes = "live-courses" %}
-    <div class="cards-parent">
+      {% include "school/templates/course_list.html" %}
-      {% for course in upcoming_courses %}
-      {{ widgets.CourseCard(course=course, read_only=False) }}
-      {% endfor %}
-    </div>
-    {% endif %}
 
+      {% set title = _("Upcoming Courses") %}
+      {% set courses = upcoming_courses %}
+      {% set classes = "upcoming-courses mt-10" %}
+      {% include "school/templates/course_list.html" %}
+    </div>
   </div>
 </div>
 {% endblock %}