Merge pull request #452 from pateljannat/search

lms/lms/doctype/lms_course/lms_course.py

@@ -167,7 +167,6 @@ def reindex_exercises(doc):
 
 @frappe.whitelist(allow_guest=True)
 def search_course(text):
-	search_courses = []
 	courses = frappe.get_all(
 		"LMS Course",
 		filters={"published": True},
@@ -177,17 +176,8 @@ def search_course(text):
 			"short_introduction": ["like", f"%{text}%"],
 			"description": ["like", f"%{text}%"],
 		},
+		fields=["name", "title"],
 	)
-
-	""" for course in courses:
-        search_courses.append(frappe.get_doc("LMS Course", course)) """
-
-	""" template = frappe.render_template("lms/templates/course_list.html", {
-        "title": _("Search Results"),
-        "courses": search_courses,
-        "widgets": Widgets()
-    }) """
-
 	return courses
 
 

lms/public/css/style.css

@@ -929,17 +929,29 @@ pre {
 }
 
 .search {
-  background-image: url(/assets/frappe/icons/timeless/search.svg);
-  border: none;
-  border-radius: var(--border-radius-md);
-  font-size: var(--text-sm);
-  padding: 0.625rem 0.75rem;
-  height: 36px;
-  background-repeat: no-repeat;
-  text-indent: 1.5rem;
-  background-position: 1rem 0.7rem;
-  width: 30%;
-  box-shadow: var(--shadow-sm);
+	background-image: url(/assets/frappe/icons/timeless/search.svg);
+	border: none;
+	border-radius: var(--border-radius-md);
+	font-size: var(--text-sm);
+	padding: 0.625rem 0.75rem;
+	height: 36px;
+	background-repeat: no-repeat;
+	text-indent: 1.5rem;
+	background-position: 1rem 0.7rem;
+	width: 30%;
+	box-shadow: var(--shadow-sm);
+}
+
+.search-course {
+	background-position: 1rem;
+	text-indent: 1rem;
+    font-size: var(--text-base);
+    padding: 1.5rem;
+    width: 100%;
+}
+
+.search:focus {
+	outline: none;
 }
 
 .course-search-header {
@@ -1918,3 +1930,28 @@ select {
 	cursor: pointer;
 	margin-right: 1rem;
 }
+
+.result-row {
+	display: block;
+	padding: 1rem;
+    border-top: 1px solid var(--gray-300);
+    font-weight: 500;
+    color: var(--gray-900);
+    font-size: var(--text-base);
+    cursor: pointer;
+}
+
+.result-row:hover {
+	color: inherit;
+	text-decoration: none;
+}
+
+.search-modal .modal-dialog {
+	max-width: 70%;
+	margin: 15% auto !important;
+}
+
+.search-modal .modal-body {
+	padding: 0 !important;
+	margin: 0 !important;
+}

lms/templates/search_course/search_course.html

@@ -1,16 +1,14 @@
 {% set search_placeholder = frappe.db.get_single_value("LMS Settings", "search_placeholder") %}
 {% set portal_course_creation = frappe.db.get_single_value("LMS Settings", "portal_course_creation") %}
 
-<input class="search" id="search-course" placeholder="{{ _(search_placeholder) or 'Search' }}">
-<div class="empty-state alert alert-dismissible search-empty-state hide">
-    <a href="#" class="close-search-empty-state" aria-label="close">&times;</a>
-    <div>
-        <img class="icon icon-xl" src="/assets/frappe/images/ui-states/search-empty-state.svg">
-    </div>
-    <div class="empty-state-text">
-        <div class="empty-state-heading">{{ _("No results found") }}</div>
-        <div class="course-meta">{{ _("Try some other keyword or explore our list of courses.") }}</div>
+
+<div class="modal fade search-modal" id="search-modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-body">
+                <input class="search search-course" id="search-course" placeholder="{{ _(search_placeholder) or 'Search for courses' }}">
+            </div>
+        </div>
     </div>
 </div>
-
 <script> {% include "lms/templates/search_course/search_course.js" %} </script>

lms/templates/search_course/search_course.js

@@ -3,22 +3,22 @@ frappe.ready(() => {
 		search_course(e);
 	});
 
-	$(".close-search-empty-state").click((e) => {
-		close_search_empty_state(e);
+	$("#open-search").click((e) => {
+		show_search_bar(e);
+	});
+
+	$("#search-modal").on("hidden.bs.modal", () => {
+		hide_search_bar();
 	});
 });
 
 const search_course = (e) => {
 	let input = $(e.currentTarget).val();
-
 	if (input == window.input) return;
-
 	window.input = input;
 
 	if (input.length < 3 || input.trim() == "") {
-		$(".course-card").removeClass("hide");
-		$(".search-empty-state").addClass("hide");
-		fix_heading_styles();
+		$(".result-row").remove();
 		return;
 	}
 
@@ -28,47 +28,39 @@ const search_course = (e) => {
 			text: input,
 		},
 		callback: (data) => {
-			render_course_list(data.message);
+			render_course_list(data);
 		},
 	});
 };
 
-const render_course_list = (courses) => {
-	fix_heading_styles();
-	$(".search-empty-state").addClass("hide");
+const render_course_list = (data) => {
+	let courses = data.message;
+	$(".result-row").remove();
 
 	if (!courses.length) {
-		$(".course-card").removeClass("hide");
-		$(".search-empty-state").removeClass("hide");
+		let element = `<a class="result-row">
+			${__("No result found")}
+		</a>`;
+		$(element).insertAfter("#search-course");
 		return;
 	}
 
-	$(".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 .course-home-headings").addClass("hide");
-		$(".upcoming-courses").removeClass("mt-10");
-	}
-
-	if (!visible_upcoming_courses.length) {
-		$(".upcoming-courses .course-home-headings").addClass("hide");
+	for (let i in courses) {
+		let element = `<a class="result-row" href="/courses/${courses[i].name}">
+			${courses[i].title}
+		</a>`;
+		$(element).insertAfter("#search-course");
 	}
 };
 
-const fix_heading_styles = () => {
-	$(".course-home-headings").removeClass("hide");
-	$(".upcoming-courses").addClass("mt-10");
+const show_search_bar = (e) => {
+	$("#search-modal").modal("show");
+	setTimeout(() => {
+		$("#search-course").focus();
+	}, 1000);
 };
 
-const close_search_empty_state = (e) => {
-	$(".search-empty-state").addClass("hide");
+const hide_search_bar = (e) => {
 	$("#search-course").val("");
+	$(".result-row").remove();
 };

lms/www/courses/index.html

@@ -22,7 +22,7 @@
 
         {% else %}
 
-            <!-- {% include "lms/templates/search_course/search_course.html" %} -->
+            {% include "lms/templates/search_course/search_course.html" %}
 
 			<div class="course-list-cta">
                 {% if frappe.session.user != "Guest" %}
@@ -36,6 +36,10 @@
                     {{ _("Create a Course") }}
                 </a>
                 {% endif %}
+
+				<a class="btn btn-default btn-sm ml-2" id="open-search">
+					{{ _("Search") }}
+				</a>
             </div>
 
             <div class="course-home-headings">