From 5a8a187f546a4cb6cfc0a28206ef80212d47b3f2 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Wed, 5 Jul 2023 11:03:50 +0200 Subject: [PATCH] Add clear search button and action --- app/reflexes/products_reflex.rb | 9 ++++++++ .../admin/products_v3/_content.html.haml | 2 +- app/views/admin/products_v3/_sort.html.haml | 3 +++ .../css/admin_v3/components/buttons.scss | 23 +++++++++++++++++++ .../css/admin_v3/globals/palette.scss | 4 ++++ config/locales/en.yml | 1 + .../system/admin/products_v3/products_spec.rb | 14 +++++++++++ 7 files changed, 55 insertions(+), 1 deletion(-) diff --git a/app/reflexes/products_reflex.rb b/app/reflexes/products_reflex.rb index 94159bbf8c..537a7b9d3b 100644 --- a/app/reflexes/products_reflex.rb +++ b/app/reflexes/products_reflex.rb @@ -22,6 +22,15 @@ class ProductsReflex < ApplicationReflex fetch_and_render_products end + def clear_search + @search_term = nil + @producer_id = nil + @category_id = nil + @page = 1 + + fetch_and_render_products + end + private def init_params diff --git a/app/views/admin/products_v3/_content.html.haml b/app/views/admin/products_v3/_content.html.haml index e9fcd26975..beb3942621 100644 --- a/app/views/admin/products_v3/_content.html.haml +++ b/app/views/admin/products_v3/_content.html.haml @@ -9,7 +9,7 @@ - if products.any? .container .sixteen.columns - = render partial: 'sort', locals: { pagy: pagy } + = render partial: 'sort', locals: { pagy: pagy, search_term: search_term, producer_id: producer_id, category_id: category_id } = render partial: 'table', locals: { products: products } = render partial: 'admin/shared/v3/pagy', locals: { pagy: pagy, reflex: "click->Products#fetch" } - else diff --git a/app/views/admin/products_v3/_sort.html.haml b/app/views/admin/products_v3/_sort.html.haml index 04ca72236e..20c67e083b 100644 --- a/app/views/admin/products_v3/_sort.html.haml +++ b/app/views/admin/products_v3/_sort.html.haml @@ -1,6 +1,9 @@ #sort %div = t(".pagination.total_html", total: pagy.count, from: pagy.from, to: pagy.to) + - if search_term.present? || producer_id.present? || category_id.present? + %a{ href: "#", class: "button disruptive", data: { reflex: "click->products#clear_search" } } + = t(".pagination.clear_search") %div.with-dropdown = t(".pagination.per_page.show") = select_tag :per_page, options_for_select([15, 25, 50, 100].collect{|i| [t('.pagination.per_page.per_page', num: i), i]}, pagy.items), data: { reflex: "change->products#change_per_page" } diff --git a/app/webpacker/css/admin_v3/components/buttons.scss b/app/webpacker/css/admin_v3/components/buttons.scss index 270fcb8f0a..5ad38c345a 100644 --- a/app/webpacker/css/admin_v3/components/buttons.scss +++ b/app/webpacker/css/admin_v3/components/buttons.scss @@ -25,6 +25,10 @@ button:not(.plain):not(.trix-button), border: 1px solid $color-btn-hover-border; } + &:active:focus { + box-shadow: none; + } + &:hover { background-color: $color-btn-hover-bg; border: 1px solid $color-btn-hover-bg; @@ -55,6 +59,25 @@ button:not(.plain):not(.trix-button), } } + &.disruptive { + background-color: transparent; + border: 1px solid $color-5; + color: $color-5; + + &:hover { + background-color: $fair-pink; + border: 1px solid $color-5; + color: $color-5; + } + + &:active, + &:focus { + background-color: $fair-pink; + border: 1px solid $roof-terracotta; + color: $roof-terracotta; + } + } + .badge { position: absolute; top: 0; diff --git a/app/webpacker/css/admin_v3/globals/palette.scss b/app/webpacker/css/admin_v3/globals/palette.scss index 8dc52e1d86..560e1074ac 100644 --- a/app/webpacker/css/admin_v3/globals/palette.scss +++ b/app/webpacker/css/admin_v3/globals/palette.scss @@ -11,6 +11,8 @@ $lighter-grey: #f8f9fa !default; // Lighter grey $light-grey: #eff1f2 !default; // Light grey $near-black: #191c1d !default; // Near-black $dark-grey: #2e3132 !default; // Dark Grey +$fair-pink: #ffefeb !default; // Fair Pink +$roof-terracotta: #b83b1f !default; // Roof Terracotta // Old colour variables for backwards compatibility $color-1: $white; @@ -24,3 +26,5 @@ $color-8: $near-black; $color-9: $dark-grey; $color-10: $orient; $color-11: $mystic; +$color-12: $fair-pink; +$color-13: $roof-terracotta; diff --git a/config/locales/en.yml b/config/locales/en.yml index 0c8131dc36..7c27aea2c6 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -773,6 +773,7 @@ en: per_page: show: Show per_page: "%{num} per page" + clear_search: Clear search filters: search_products: Search for products all_producers: All producers diff --git a/spec/system/admin/products_v3/products_spec.rb b/spec/system/admin/products_v3/products_spec.rb index a0f6242bfb..6b8dbfb592 100644 --- a/spec/system/admin/products_v3/products_spec.rb +++ b/spec/system/admin/products_v3/products_spec.rb @@ -117,6 +117,20 @@ describe 'As an admin, I can see the new product page' do expect_products_count_to_be 1 end end + + context "clear filters" do + it "can clear filters" do + search_for "searchable product" + expect(page).to have_field "search_term", with: "searchable product" + expect_page_to_be 1 + expect_products_count_to_be 1 + + click_link "Clear search" + expect(page).to have_field "search_term", with: "" + expect_page_to_be 1 + expect_products_count_to_be 15 + end + end end def expect_page_to_be(page)