From ba25460edfaeb64e1bbcff214ab448c0f817c7c3 Mon Sep 17 00:00:00 2001
From: Hussain Nagaria <hussainbhaitech@gmail.com>
Date: Thu, 29 Apr 2021 20:01:31 +0530
Subject: [PATCH] chore: Make it a little beautiful

---
 erpnext/e_commerce/website_item_indexing.py |  1 -
 erpnext/templates/pages/product_search.py   |  2 +-
 erpnext/www/all-products/search.html        | 37 +++++++++++++--------
 erpnext/www/all-products/search.js          | 15 +++++++--
 4 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/erpnext/e_commerce/website_item_indexing.py b/erpnext/e_commerce/website_item_indexing.py
index faf5760a6a..a4c45cc3b8 100644
--- a/erpnext/e_commerce/website_item_indexing.py
+++ b/erpnext/e_commerce/website_item_indexing.py
@@ -153,7 +153,6 @@ def reindex_all_web_items():
 	for item in items:
 		web_item = create_web_item_map(item)
 		key = get_cache_key(item.name)
-		print(key, web_item)
 		r.hset(key, mapping=web_item)
 
 def get_cache_key(name):
diff --git a/erpnext/templates/pages/product_search.py b/erpnext/templates/pages/product_search.py
index 755dfecd71..1f7a2c64cb 100644
--- a/erpnext/templates/pages/product_search.py
+++ b/erpnext/templates/pages/product_search.py
@@ -72,7 +72,7 @@ def search(query):
 	query_string = query
 
 	for s in suggestions:
-		query_string += f"|({s.string})"
+		query_string += f"|('{s.string}')"
 
 	q = Query(query_string)
 
diff --git a/erpnext/www/all-products/search.html b/erpnext/www/all-products/search.html
index 1c58e65cc7..c6c87089e8 100644
--- a/erpnext/www/all-products/search.html
+++ b/erpnext/www/all-products/search.html
@@ -11,20 +11,29 @@
 {% endblock header %}
 
 {% block page_content %}
-<input type="text" name="query" id="search-box">
-
-<!-- Search Results -->
-<h2>Products</h2>
-<ul id="results">Start typing...</ul>
-
-{% set show_categories = frappe.db.get_single_value('E Commerce Settings', 'show_categories_in_search_autocomplete') %}
-
-{% if show_categories %}
-<div id="categories">
-	<h2>Categories</h2>
-	<ul id="category-suggestions">
-	</ul>
+<div class="input-group mb-3">
+	<input type="text" name="query" id="search-box" class="form-control" placeholder="Search for products..." aria-label="Product" aria-describedby="button-addon2">
+	<div class="input-group-append">
+		<button class="btn btn-outline-secondary" type="button" id="button-addon2">Search</button>
+	</div>
+</div>
+
+<div class="row mt-2">
+	<!-- Search Results -->
+	<div class="col-sm">
+		<h2>Products</h2>
+		<ul id="results" class="list-group"></ul>
+	</div>
+	
+	{% set show_categories = frappe.db.get_single_value('E Commerce Settings', 'show_categories_in_search_autocomplete') %}
+	
+	{% if show_categories %}
+	<div id="categories" class="col-sm">
+		<h2>Categories</h2>
+		<ul id="category-suggestions">
+		</ul>
+	</div>
+	{% endif %}
 </div>
-{% endif %}
 
 {% endblock %}
\ No newline at end of file
diff --git a/erpnext/www/all-products/search.js b/erpnext/www/all-products/search.js
index aa47a4d7e2..f17f7a034c 100644
--- a/erpnext/www/all-products/search.js
+++ b/erpnext/www/all-products/search.js
@@ -1,4 +1,4 @@
-console.log("search.js loaded");
+let loading = false;
 
 const searchBox = document.getElementById("search-box");
 const results = document.getElementById("results");
@@ -7,7 +7,7 @@ const categoryList = document.getElementById("category-suggestions");
 function populateResults(data) {
     html = ""
     for (let res of data.message) {
-        html += `<li>
+        html += `<li class="list-group-item list-group-item-action">
         <img class="item-thumb" src="${res.thumbnail || ''}" />
         <a href="/${res.route}">${res.web_item_name}</a>
         </li>`
@@ -17,7 +17,7 @@ function populateResults(data) {
 
 function populateCategoriesList(data) {
     if (data.length === 0) {
-        categoryList.innerText = "No matches";
+        categoryList.innerHTML = 'Type something...';
         return;
     }
 
@@ -29,7 +29,15 @@ function populateCategoriesList(data) {
     categoryList.innerHTML = html;
 }
 
+function updateLoadingState() {
+    if (loading) {
+        results.innerHTML = `<div class="spinner-border"><span class="sr-only">loading...<span></div>`;
+    }
+}
+
 searchBox.addEventListener("input", (e) => {
+    loading = true;
+    updateLoadingState();
     frappe.call({
         method: "erpnext.templates.pages.product_search.search", 
         args: {
@@ -37,6 +45,7 @@ searchBox.addEventListener("input", (e) => {
         },
         callback: (data) => {
             populateResults(data);
+            loading = false;
         }
     });