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