Merge pull request #5274 from betagouv/radiobuttons-for-small-selects

Boutons radio et checkboxes pour les petits select

app/models/champs/drop_down_list_champ.rb

@@ -1,2 +1,7 @@
 class Champs::DropDownListChamp < Champ
+  THRESHOLD_NB_OPTIONS_AS_RADIO = 5
+
+  def render_as_radios?
+    drop_down_list.enabled_non_empty_options.size <= THRESHOLD_NB_OPTIONS_AS_RADIO
+  end
 end

app/models/champs/multiple_drop_down_list_champ.rb

@@ -1,6 +1,8 @@
 class Champs::MultipleDropDownListChamp < Champ
   before_save :format_before_save
 
+  THRESHOLD_NB_OPTIONS_AS_CHECKBOX = 5
+
   def search_terms
     selected_options
   end
@@ -21,6 +23,10 @@ class Champs::MultipleDropDownListChamp < Champ
     value.present? ? selected_options.join(', ') : nil
   end
 
+  def render_as_checkboxes?
+    drop_down_list.enabled_non_empty_options.size <= THRESHOLD_NB_OPTIONS_AS_CHECKBOX
+  end
+
   private
 
   def format_before_save

app/models/drop_down_list.rb

@@ -8,6 +8,10 @@ class DropDownList < ApplicationRecord
     result.blank? ? [] : [''] + result
   end
 
+  def enabled_non_empty_options
+    (options - disabled_options).reject(&:empty?)
+  end
+
   def disabled_options
     options.filter { |v| (v =~ /^--.*--$/).present? }
   end

app/views/shared/dossiers/editable_champs/_drop_down_list.html.haml

@@ -1,5 +1,14 @@
 - if champ.drop_down_list && champ.drop_down_list.options.any?
-  = form.select :value,
+  - if champ.render_as_radios?
-    champ.drop_down_list.options,
+    %fieldset.radios
-    disabled: champ.drop_down_list.disabled_options,
+      %legend.mandatory-explanation
-    required: champ.mandatory?
+        Sélectionnez une des valeurs
+      - champ.drop_down_list.enabled_non_empty_options.each do |option|
+        %label
+          = form.radio_button :value, option
+          = option
+  - else
+    = form.select :value,
+      champ.drop_down_list.options,
+      disabled: champ.drop_down_list.disabled_options,
+      required: champ.mandatory?

app/views/shared/dossiers/editable_champs/_multiple_drop_down_list.html.haml

@@ -1,7 +1,15 @@
 - if champ.drop_down_list && champ.drop_down_list.options.any?
-  = form.select :value,
+  - if champ.render_as_checkboxes?
-      champ.drop_down_list.options,
+    - champ.drop_down_list.enabled_non_empty_options.each do |option|
-      { selected: champ.selected_options,
+      .editable-champ.editable-champ-checkbox
-        disabled: champ.drop_down_list.disabled_options },
+        %label
-      multiple: true,
+          = form.check_box :value, { multiple: true, checked: champ&.value&.include?(option) }, option, nil
-      class: 'select2'
+          = option
+  - else
+    = form.select :value,
+        champ.drop_down_list.options,
+        { selected: champ.selected_options,
+          disabled: champ.drop_down_list.disabled_options },
+        multiple: true,
+        class: 'select2'
+

spec/factories/drop_down_list.rb

@@ -1,5 +1,9 @@
 FactoryBot.define do
   factory :drop_down_list do
     value { "val1\r\nval2\r\n--separateur--\r\nval3" }
+
+    trait :long do
+      value { "alpha\r\nbravo\r\n--separateur--\r\ncharly\r\ndelta\r\necho\r\nfox-trot\r\ngolf" }
+    end
   end
 end

spec/factories/procedure.rb

@@ -233,6 +233,8 @@ FactoryBot.define do
           end
           build(:"type_de_champ_#{type_champ}", mandatory: true, libelle: libelle, order_place: index)
         end
+        procedure.types_de_champ << build(:type_de_champ_drop_down_list, :long, mandatory: true, libelle: 'simple_choice_drop_down_list_long')
+        procedure.types_de_champ << build(:type_de_champ_multiple_drop_down_list, :long, mandatory: true, libelle: 'multiple_choice_drop_down_list_long')
       end
     end
 

spec/factories/type_de_champ.rb

@@ -53,10 +53,16 @@ FactoryBot.define do
       libelle { 'Menu déroulant' }
       type_champ { TypeDeChamp.type_champs.fetch(:drop_down_list) }
       drop_down_list { create(:drop_down_list) }
+      trait :long do
+        drop_down_list { create(:drop_down_list, :long) }
+      end
     end
     factory :type_de_champ_multiple_drop_down_list do
       type_champ { TypeDeChamp.type_champs.fetch(:multiple_drop_down_list) }
       drop_down_list { create(:drop_down_list) }
+      trait :long do
+        drop_down_list { create(:drop_down_list, :long) }
+      end
     end
     factory :type_de_champ_linked_drop_down_list do
       type_champ { TypeDeChamp.type_champs.fetch(:linked_drop_down_list) }

spec/features/users/brouillon_spec.rb

@@ -21,9 +21,12 @@ feature 'The user' do
     fill_in('email', with: 'loulou@yopmail.com')
     fill_in('phone', with: '1234567890')
     choose('Non')
-    select('val2', from: form_id_for('simple_drop_down_list'))
+    choose('val2')
-    select('val1', from: form_id_for('multiple_drop_down_list'))
+    check('val1')
-    select('val3', from: form_id_for('multiple_drop_down_list'))
+    check('val3')
+    select('bravo', from: form_id_for('simple_choice_drop_down_list_long'))
+    select('alpha', from: form_id_for('multiple_choice_drop_down_list_long'))
+    select('charly', from: form_id_for('multiple_choice_drop_down_list_long'))
     select('AUSTRALIE', from: 'pays')
 
     select_champ_geo('regions', 'Ma', 'Martinique')
@@ -55,6 +58,8 @@ feature 'The user' do
     expect(champ_value_for('phone')).to eq('1234567890')
     expect(champ_value_for('yes_no')).to eq('false')
     expect(champ_value_for('simple_drop_down_list')).to eq('val2')
+    expect(champ_value_for('simple_choice_drop_down_list_long')).to eq('bravo')
+    expect(JSON.parse(champ_value_for('multiple_choice_drop_down_list_long'))).to match(['alpha', 'charly'])
     expect(JSON.parse(champ_value_for('multiple_drop_down_list'))).to match(['val1', 'val3'])
     expect(champ_value_for('pays')).to eq('AUSTRALIE')
     expect(champ_value_for('regions')).to eq('Martinique')
@@ -76,8 +81,11 @@ feature 'The user' do
     expect(page).to have_field('email', with: 'loulou@yopmail.com')
     expect(page).to have_field('phone', with: '1234567890')
     expect(page).to have_checked_field('Non')
-    expect(page).to have_selected_value('simple_drop_down_list', selected: 'val2')
+    expect(page).to have_checked_field('val2')
-    expect(page).to have_selected_value('multiple_drop_down_list', selected: ['val1', 'val3'])
+    expect(page).to have_checked_field('val1')
+    expect(page).to have_checked_field('val3')
+    expect(page).to have_selected_value('simple_choice_drop_down_list_long', selected: 'bravo')
+    expect(page).to have_selected_value('multiple_choice_drop_down_list_long', selected: ['alpha', 'charly'])
     expect(page).to have_selected_value('pays', selected: 'AUSTRALIE')
     expect(page).to have_selected_value('regions', selected: 'Martinique')
     expect(page).to have_selected_value('departements', selected: '02 - Aisne')