refactor(dossier): instructeur filter

app/components/dossiers/instructeur_filter_component.rb

@@ -8,10 +8,6 @@ class Dossiers::InstructeurFilterComponent < ApplicationComponent
 
   attr_reader :procedure, :procedure_presentation, :statut, :field_id
 
-  def filterable_fields_for_select
-    procedure_presentation.filterable_fields_options
-  end
-
   def field_type
     return :text if field_id.nil?
     procedure_presentation.field_type(field_id)
@@ -20,4 +16,16 @@ class Dossiers::InstructeurFilterComponent < ApplicationComponent
   def options_for_select_of_field
     procedure_presentation.field_enum(field_id)
   end
+
+  def filter_react_props
+    {
+      selected_key: @field_id || '',
+      items: procedure_presentation.filterable_fields_options,
+      name: :field,
+      id: 'search-filter',
+      'aria-describedby': 'instructeur-filter-combo-label',
+      form: 'filter-component',
+      data: { no_autosubmit: 'input blur', no_autosubmit_on_empty: 'true', autosubmit_target: 'input' }
+    }
+  end
 end

app/components/dossiers/instructeur_filter_component/instructeur_filter_component.html.haml

@@ -1,11 +1,8 @@
 = form_tag add_filter_instructeur_procedure_path(procedure), method: :post, class: 'dropdown-form large', id: 'filter-component', data: { turbo: true, controller: 'autosubmit' } do
   .fr-select-group
     = label_tag :field,  t('.column'), class: 'fr-label fr-m-0', id: 'instructeur-filter-combo-label', for: 'search-filter'
-    = render Dsfr::ComboboxComponent.new form: nil,
+    %react-fragment
-      options: filterable_fields_for_select,
+      = render ReactComponent.new "ComboBox/SingleComboBox", **filter_react_props
-      selected: field_id,
-      input_html_options: { name: :field, id: 'search-filter', class: 'fr-select', describedby: 'instructeur-filter-combo-label', allows_custom_value: false, form_id: 'filter-component' },
-      hidden_html_options: { data: { no_autosubmit: ['input', 'blur'].join(' '), no_autosubmit_on_empty: "true", autosubmit_target: 'input' } }
 
     %input.hidden{ type: 'submit', formaction: update_filter_instructeur_procedure_path(procedure), data: { autosubmit_target: 'submitter' } }
 

app/controllers/instructeurs/procedures_controller.rb

@@ -73,7 +73,6 @@ module Instructeurs
 
       @current_filters = current_filters
       @displayable_fields_for_select, @displayable_fields_selected = procedure_presentation.displayable_fields_for_select
-      @filterable_fields_for_select = procedure_presentation.filterable_fields_options
       @counts = current_instructeur
         .dossiers_count_summary(groupe_instructeur_ids)
         .symbolize_keys
@@ -135,8 +134,8 @@ module Instructeurs
     end
 
     def update_displayed_fields
-      values = params['values'].presence || [].to_json
+      values = params['values'].presence || []
-      procedure_presentation.update_displayed_fields(JSON.parse(values))
+      procedure_presentation.update_displayed_fields(values)
 
       redirect_back(fallback_location: instructeur_procedure_url(procedure))
     end

app/views/instructeurs/procedures/show.html.haml

@@ -110,14 +110,8 @@
                       = t('views.instructeurs.dossiers.personalize')
                     - menu.with_form do
                       = form_tag update_displayed_fields_instructeur_procedure_path(@procedure), method: :patch, class: 'dropdown-form large columns-form' do
-                        = hidden_field_tag :values, nil
+                        %react-fragment
-                        = react_component("ComboMultiple",
+                          = render ReactComponent.new "ComboBox/MultiComboBox", items: @displayable_fields_for_select, selected_keys: @displayable_fields_selected, name: 'values[]', 'aria-label': 'Colonne à afficher'
-                          options: @displayable_fields_for_select,
-                          selected: @displayable_fields_selected,
-                          disabled: [],
-                          label: 'Colonne à afficher',
-                          group: '.columns-form',
-                          name: 'values')
 
                         = submit_tag t('views.instructeurs.dossiers.save'), class: 'fr-btn fr-btn--secondary'