feat: search bar on course list

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

@@ -210,14 +210,6 @@ input[type=checkbox] {
   }
 }
 
-.courses-header {
-  margin-bottom: 1.5rem;
-  color: var(--text-color);
-  font-weight: 600;
-  font-size: var(--text-3xl);
-  letter-spacing: -0.0175em
-}
-
 @media (min-width: 576px) and (max-width: 992px) {
   .container {
     padding-left: 1rem;

school/templates/course_list.html

@@ -0,0 +1,14 @@
+<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,33 @@
+frappe.ready(() => {
+  $(".search-course").keyup((e) => {
+    search_course(e);
+  });
+});
+
+const search_course = (e) => {
+  let input = $(e.currentTarget).val();
+  console.log(input)
+  if (input.length < 3 || input.trim() == "") {
+    $(".course-card").removeClass("hide");
+    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) {
+    console.log(courses[course])
+    
+  }
+}
+

school/www/courses/index.html

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