From a0f8687945806119c8ca9a318f4097abad00c899 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Thu, 10 Aug 2017 18:28:05 +0530
Subject: [PATCH] Styling for search fields

---
 erpnext/public/css/pos.css                    | 11 +++++++-
 erpnext/public/less/pos.less                  | 22 ++++++++-------
 .../page/point_of_sale/point_of_sale.js       | 27 +++++++++++++------
 3 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/erpnext/public/css/pos.css b/erpnext/public/css/pos.css
index 4ba00ba227..81b109838f 100644
--- a/erpnext/public/css/pos.css
+++ b/erpnext/public/css/pos.css
@@ -13,7 +13,14 @@
   width: 60%;
   vertical-align: top;
 }
+.search-field {
+  width: 60%;
+}
+.search-field input::placeholder {
+  font-size: 12px;
+}
 .item-group-field {
+  width: 40%;
   margin-left: 15px;
 }
 .cart-wrapper .list-item__content:not(:first-child) {
@@ -31,7 +38,9 @@
   overflow: auto;
 }
 .pos-item-wrapper {
-  height: 250px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 .image-view-container {
   display: block;
diff --git a/erpnext/public/less/pos.less b/erpnext/public/less/pos.less
index e627dbc080..1ae0dfd993 100644
--- a/erpnext/public/less/pos.less
+++ b/erpnext/public/less/pos.less
@@ -21,7 +21,16 @@
 	vertical-align: top;
 }
 
+.search-field {
+	width: 60%;
+
+	input::placeholder {
+		font-size: @text-medium;
+	}
+}
+
 .item-group-field {
+	width: 40%;
 	margin-left: 15px;
 }
 
@@ -34,15 +43,6 @@
 .cart-items {
 	height: 200px;
 	overflow: auto;
-
-	// .list-item {
-	// 	background-color: @light-yellow;
-	// 	transition: background-color 1s linear;
-	// }
-
-	// .list-item.added {
-	// 	background-color: white;
-	// }
 }
 
 .fields {
@@ -55,7 +55,9 @@
 }
 
 .pos-item-wrapper {
-	height: 250px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 }
 
 .image-view-container {
diff --git a/erpnext/selling/page/point_of_sale/point_of_sale.js b/erpnext/selling/page/point_of_sale/point_of_sale.js
index fb3f666e8a..1fb8c1ec0b 100644
--- a/erpnext/selling/page/point_of_sale/point_of_sale.js
+++ b/erpnext/selling/page/point_of_sale/point_of_sale.js
@@ -306,19 +306,28 @@ erpnext.POSItems = class POSItems {
 	}
 
 	make_fields() {
+		// Search field
 		this.search_field = frappe.ui.form.make_control({
 			df: {
 				fieldtype: 'Data',
-				label: 'Search Item',
-				onchange: (e) => {
-					const search_term = e.target.value;
-					this.filter_items(search_term);
-				}
+				label: 'Search Item (Ctrl + I)',
+				placeholder: 'Search by item code, serial number, batch no or barcode'
 			},
 			parent: this.wrapper.find('.search-field'),
 			render_input: true,
 		});
 
+		frappe.ui.keys.on('ctrl+i', () => {
+			this.search_field.set_focus();
+		});
+
+		this.search_field.$input.on('input', (e) => {
+			const search_term = e.target.value;
+			this.filter_items(search_term);
+		});
+
+
+		// Item group field
 		this.item_group_field = frappe.ui.form.make_control({
 			df: {
 				fieldtype: 'Select',
@@ -370,9 +379,11 @@ erpnext.POSItems = class POSItems {
 
 		const filtered_items =
 			Object.values(this.items)
-				.filter(
-					item => item.item_name.toLowerCase().includes(search_term)
-				);
+				.filter(item => {
+					return item.item_code.toLowerCase().includes(search_term) ||
+						item.item_name.toLowerCase().includes(search_term)
+				});
+
 		this.render_items(filtered_items);
 	}