add tag to display and remove active filters

app/components/dossiers/user_filter_component/user_filter_component.en.yml

@@ -7,4 +7,10 @@ en:
     apply_filters: Apply filters
     reset_filters: Reset filters
     select_filters: Select a filter
-    filter_title: Filter
+  tag:
+    active_filters:
+      one: "1 active filter"
+      other: "%{count} active filters"
+    active_filters_link_title:
+      one: Remove the active filter
+      other: "Remove the %{count} active filters"

app/components/dossiers/user_filter_component/user_filter_component.fr.yml

@@ -7,4 +7,10 @@ fr:
     apply_filters: Appliquer les filtres
     reset_filters: Réinitialiser les filtres
     select_filters: Sélectionner un filtre
-    filter_title: Filtrer
+  tag:
+    active_filters:
+      one: "1 filtre actif"
+      other: "%{count} filtres actifs"
+    active_filters_link_title:
+      one: Retirer le filtre actif
+      other: "Retirer les %{count} filtres actifs"

app/components/dossiers/user_filter_component/user_filter_component.html.haml

@@ -1,9 +1,9 @@
 .fr-grid-row
-  .fr-col
+  .fr-col-12
     %nav.fr-translate.fr-nav{ role: "combobox" }
       .fr-nav__item.custom-fr-translate-flex-end
         %button.fr-translate__btn.translate-no-icon.fr-btn.fr-btn--tertiary.custom-fr-translate-no-icon{ "aria-controls" => "filters", "aria-expanded" => "false", title: t('.button.select_filters') }
-          = t('.button.filter_title')
+          = t('.button.select_filters')
         #filters.fr-collapse.fr-translate__menu.fr-menu
           %ul.fr-menu__list.fr-p-3w
             = form_with(url: dossiers_path(), method: :get ) do |f|
@@ -31,3 +31,7 @@
               .fr-my-2w
                 = f.submit t('.button.apply_filters'), class: 'fr-btn fr-btn--sm'
                 = link_to t('.button.reset_filters'), dossiers_path(statut: @statut), class: 'fr-btn fr-btn--sm fr-btn--tertiary-no-outline'
+
+  - if @filter.filter_params.present?
+    .fr-col-12.text-right
+      = link_to t('.tag.active_filters', count: @filter.filter_params_count), dossiers_path(statut: @statut), title: t('.tag.active_filters_link_title', count: @filter.filter_params_count), class: 'fr-tag fr-tag--sm fr-tag--dismiss'

app/models/dossiers_filter.rb

@@ -12,6 +12,14 @@ class DossiersFilter
     params[:from_created_at_date].presence || params[:from_depose_at_date].presence || params[:states].presence
   end
 
+  def filter_params_count
+    count = 0
+    count += 1 if params[:from_created_at_date].presence
+    count += 1 if params[:from_depose_at_date].presence
+    count += params[:states].count if params[:states].presence
+    count
+  end
+
   def states
     params[:states].compact_blank if params[:states].present?
   end

spec/system/users/list_dossiers_spec.rb

@@ -61,7 +61,7 @@ describe 'user access to the list of their dossiers', js: true do
       expect(page).to have_text('4 en cours')
       expect(page).to have_text('2 traités')
       expect(page).to have_text('4 sur 4 dossiers')
-      click_on('Filtrer')
+      click_on('Sélectionner un filtre')
       expect(page).to have_text('Brouillon')
       expect(page).to have_text('En construction')
       expect(page).to have_text('En instruction')
@@ -77,7 +77,7 @@ describe 'user access to the list of their dossiers', js: true do
       expect(page).to have_text('2 traités')
       expect(page).to have_text('2 sur 2 dossiers')
 
-      click_on('Filtrer')
+      click_on('Sélectionner un filtre')
       expect(page).to have_text('Accepté')
       expect(page).to have_text('Refusé')
       expect(page).to have_text('Classé sans suite')
@@ -86,7 +86,7 @@ describe 'user access to the list of their dossiers', js: true do
       expect(page).to have_text('1 dossier')
       expect(page).to have_checked_field('Refusé')
 
-      click_on('Filtrer')
+      click_on('Sélectionner un filtre')
       click_on('Réinitialiser les filtres')
       expect(page).to have_text('2 sur 2 dossiers')
       expect(page).to have_unchecked_field('Refusé')
@@ -96,7 +96,7 @@ describe 'user access to the list of their dossiers', js: true do
       dossier_en_construction.update!(created_at: Date.yesterday)
 
       expect(page).to have_text('4 sur 4 dossiers')
-      click_on('Filtrer')
+      click_on('Sélectionner un filtre')
       fill_in 'from_created_at_date', with: Date.today
       click_on('Appliquer les filtres')
       expect(page).to have_text('3 sur 3 dossiers')
@@ -107,21 +107,27 @@ describe 'user access to the list of their dossiers', js: true do
       dossier_en_instruction.update!(depose_at: Date.yesterday)
 
       expect(page).to have_text('4 sur 4 dossiers')
-      click_on('Filtrer')
+      click_on('Sélectionner un filtre')
       fill_in 'from_created_at_date', with: Date.today
       click_on('Appliquer les filtres')
       expect(page).to have_text('3 sur 3 dossiers')
+      expect(page).to have_text('1 filtre actif')
 
-      click_on('Filtrer')
+      click_on('Sélectionner un filtre')
       find("label", text: "En construction").click
       find("label", text: "En instruction").click
       click_on('Appliquer les filtres')
       expect(page).to have_text('2 sur 2 dossiers')
+      expect(page).to have_text('3 filtres actifs')
 
-      click_on('Filtrer')
+      click_on('Sélectionner un filtre')
       fill_in 'from_depose_at_date', with: Date.today
       click_on('Appliquer les filtres')
       expect(page).to have_text('1 dossier')
+      expect(page).to have_text('4 filtres actifs')
+      click_on('4 filtres actifs')
+      expect(page).to have_text('4 sur 4 dossiers')
+      expect(page).not_to have_text('4 filtres actifs')
     end
   end