feat: search for courses

school/public/css/style.css

@@ -1368,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

@@ -10,5 +10,3 @@
   </div>
 {% endif %}
 </div>
-
- 

school/templates/search_course/search_course.html

@@ -1,3 +1,3 @@
-<input class="search-course w-25 float-right" placeholder="{{ _("Try 'Manufacturing' or 'Accounting'") }}">
+<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

@@ -6,10 +6,12 @@ frappe.ready(() => {
 
 const search_course = (e) => {
   let input = $(e.currentTarget).val();
-  console.log(input)
+
   if (input.length < 3 || input.trim() == "") {
     $(".course-card").removeClass("hide");
-    return
+    $(".course-home-headings").parent().removeClass("hide");
+    $(".upcoming-courses").addClass("mt-10");
+    return;
   }
 
   frappe.call({
@@ -26,8 +28,19 @@ const search_course = (e) => {
 const render_course_list = (courses) => {
   $(".course-card").addClass("hide");
   for (course in courses) {
-    console.log(courses[course])
-    
+    $("[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

@@ -15,15 +15,14 @@
     <div class="course-list">
       {% set title = _("Live Courses") %}
       {% set courses = live_courses %}
-      {% set classes = "original-list" %}
+      {% set classes = "live-courses" %}
       {% include "school/templates/course_list.html" %}
 
       {% set title = _("Upcoming Courses") %}
       {% set courses = upcoming_courses %}
-      {% set classes = "original-list mt-10" %}
+      {% set classes = "upcoming-courses mt-10" %}
       {% include "school/templates/course_list.html" %}
     </div>
-
   </div>
 </div>
 {% endblock %}