Styling for search fields

This commit is contained in:
Faris Ansari 2017-08-10 18:28:05 +05:30
parent 03e7ec29e7
commit a0f8687945
3 changed files with 41 additions and 19 deletions

View File

@ -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;

View File

@ -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 {

View File

@ -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);
}