From 6cba6972bc3276c653a5a8ff2dd1ba7bb5cd2849 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Mon, 15 Nov 2021 19:00:23 +0530
Subject: [PATCH] feat: search for courses

---
 school/public/css/style.css                   | 13 ++++++++++++
 school/templates/course_list.html             |  2 --
 .../search_course/search_course.html          |  2 +-
 .../templates/search_course/search_course.js  | 21 +++++++++++++++----
 school/www/courses/index.html                 |  5 ++---
 5 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/school/public/css/style.css b/school/public/css/style.css
index 2feca386..0f9fa6af 100644
--- a/school/public/css/style.css
+++ b/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;
+}
diff --git a/school/templates/course_list.html b/school/templates/course_list.html
index 9e90639a..0b21160b 100644
--- a/school/templates/course_list.html
+++ b/school/templates/course_list.html
@@ -10,5 +10,3 @@
   </div>
 {% endif %}
 </div>
-
- 
\ No newline at end of file
diff --git a/school/templates/search_course/search_course.html b/school/templates/search_course/search_course.html
index f158e8ec..c4cc9402 100644
--- a/school/templates/search_course/search_course.html
+++ b/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>
diff --git a/school/templates/search_course/search_course.js b/school/templates/search_course/search_course.js
index a506428a..bc958522 100644
--- a/school/templates/search_course/search_course.js
+++ b/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");
   }
 }
 
diff --git a/school/www/courses/index.html b/school/www/courses/index.html
index 71818348..78843b7e 100644
--- a/school/www/courses/index.html
+++ b/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 %}