Styling for search fields
diff --git a/erpnext/public/css/pos.css b/erpnext/public/css/pos.css
index 4ba00ba..81b1098 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 e627dbc..1ae0dfd 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 fb3f666..1fb8c1e 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 @@
}
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 @@
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);
}