From f6e64c2cacf097db4174e4a3e0d3728af8082b94 Mon Sep 17 00:00:00 2001 From: marination Date: Mon, 21 Mar 2022 17:53:18 +0530 Subject: [PATCH 01/20] fix: Product Filters Lookup - bind the right classes to the filter lookup field - make class names more descriptive - make filter lookup field more visible with white bg and border - bind lookup input field js in `views.js` - make filter lookup field functioning for atribute filters too - added placeholder to lookup field --- erpnext/e_commerce/product_ui/views.js | 16 ++++++++++++++++ erpnext/public/scss/shopping_cart.scss | 9 +++++++++ erpnext/templates/generators/item_group.html | 18 ------------------ erpnext/templates/includes/macros.html | 12 ++++++------ erpnext/www/all-products/index.html | 18 ------------------ 5 files changed, 31 insertions(+), 42 deletions(-) diff --git a/erpnext/e_commerce/product_ui/views.js b/erpnext/e_commerce/product_ui/views.js index 6dce79dd72..fb63b21a08 100644 --- a/erpnext/e_commerce/product_ui/views.js +++ b/erpnext/e_commerce/product_ui/views.js @@ -418,6 +418,22 @@ erpnext.ProductView = class { me.change_route_with_filters(); }); + + // bind filter lookup input box + $('.filter-lookup-input').on('keydown', frappe.utils.debounce((e) => { + const $input = $(e.target); + const keyword = ($input.val() || '').toLowerCase(); + const $filter_options = $input.next('.filter-options'); + + $filter_options.find('.filter-lookup-wrapper').show(); + $filter_options.find('.filter-lookup-wrapper').each((i, el) => { + const $el = $(el); + const value = $el.data('value').toLowerCase(); + if (!value.includes(keyword)) { + $el.hide(); + } + }); + }, 300)); } change_route_with_filters() { diff --git a/erpnext/public/scss/shopping_cart.scss b/erpnext/public/scss/shopping_cart.scss index 019496d295..6ae464d2c2 100644 --- a/erpnext/public/scss/shopping_cart.scss +++ b/erpnext/public/scss/shopping_cart.scss @@ -264,6 +264,15 @@ body.product-page { font-size: 13px; } + .filter-lookup-input { + background-color: white; + border: 1px solid var(--gray-300); + + &:focus { + border: 1px solid var(--primary); + } + } + .filter-label { font-size: 11px; font-weight: 600; diff --git a/erpnext/templates/generators/item_group.html b/erpnext/templates/generators/item_group.html index e099cdde6a..956c3c51e6 100644 --- a/erpnext/templates/generators/item_group.html +++ b/erpnext/templates/generators/item_group.html @@ -52,24 +52,6 @@ - diff --git a/erpnext/templates/includes/macros.html b/erpnext/templates/includes/macros.html index 4741307737..fb4cecf826 100644 --- a/erpnext/templates/includes/macros.html +++ b/erpnext/templates/includes/macros.html @@ -300,13 +300,13 @@ {% if values | len > 20 %} - + {% endif %} {% if values %}
{% for value in values %} -
+