views: add a "None" option to optional radio lists

After clicking on a radio button option, it is impossible to revert to
the "None of the values selected" state.

However on non-mandatory fields, reverting to the no-selection value
should be possible.

To fix this, add an explicit "N/A" option.
This commit is contained in:
Pierre de La Morinerie 2020-08-19 15:27:57 +00:00
parent 50f61ee37b
commit 4bba1f0660
3 changed files with 110 additions and 0 deletions

View file

@ -147,6 +147,11 @@
margin-left: 0; margin-left: 0;
} }
&.blank-radio {
color: $dark-grey;
font-style: italic;
}
input[type=radio] { input[type=radio] {
margin-bottom: 0; margin-bottom: 0;
} }

View file

@ -5,6 +5,11 @@
%label %label
= form.radio_button :value, option = form.radio_button :value, option
= option = option
- if !champ.mandatory?
%label.blank-radio
= form.radio_button :value, ''
Non renseigné
- else - else
= form.select :value, = form.select :value,
champ.options, champ.options,

View file

@ -0,0 +1,100 @@
describe 'shared/dossiers/edit.html.haml', type: :view do
before do
allow(controller).to receive(:current_user).and_return(dossier.user)
end
subject { render 'shared/dossiers/edit.html.haml', dossier: dossier, apercu: false }
context 'when there are some champs' do
let(:dossier) { create(:dossier) }
let(:champ_checkbox) { create(:champ_checkbox, dossier: dossier, value: 'on') }
let(:champ_header_section) { create(:champ_header_section, dossier: dossier, value: 'Section') }
let(:champ_explication) { create(:champ_explication, dossier: dossier, value: 'mazette') }
let(:champ_dossier_link) { create(:champ_dossier_link, dossier: dossier, value: dossier.id) }
let(:champ_textarea) { create(:champ_textarea, dossier: dossier, value: 'Some long text in a textarea.') }
let(:champs) { [champ_checkbox, champ_header_section, champ_explication, champ_dossier_link, champ_textarea] }
before { dossier.champs << champs }
it 'renders labels and editable values of champs' do
expect(subject).to have_field(champ_checkbox.libelle, checked: true)
expect(subject).to have_css(".header-section", text: champ_header_section.libelle)
expect(subject).to have_text(champ_explication.libelle)
expect(subject).to have_field(champ_dossier_link.libelle, with: champ_dossier_link.value)
expect(subject).to have_field(champ_textarea.libelle, with: champ_textarea.value)
end
end
context 'with a single-value list' do
let(:dossier) { create(:dossier) }
let(:type_de_champ) { create(:type_de_champ_drop_down_list, mandatory: mandatory, procedure: dossier.procedure) }
let(:champ) { create(:champ_drop_down_list, dossier: dossier, type_de_champ: type_de_champ) }
let(:options) { type_de_champ.drop_down_list_options }
let(:enabled_options) { type_de_champ.drop_down_list_enabled_non_empty_options }
let(:mandatory) { true }
before { dossier.champs << champ }
context 'when the list is short' do
it 'renders the list as radio buttons' do
expect(subject).to have_selector('input[type=radio]', count: enabled_options.count)
end
context 'when the champ is optional' do
let(:mandatory) { false }
it 'allows unselecting a previously selected value' do
expect(subject).to have_selector('input[type=radio]', count: enabled_options.count + 1)
expect(subject).to have_unchecked_field('Non renseigné', count: 1)
end
end
end
context 'when the list is long' do
let(:type_de_champ) { create(:type_de_champ_drop_down_list, :long, procedure: dossier.procedure) }
it 'renders the list as a dropdown' do
expect(subject).to have_select(type_de_champ.libelle, options: options)
end
end
end
context 'with a multiple-values list' do
let(:dossier) { create(:dossier) }
let(:type_de_champ) { create(:type_de_champ_multiple_drop_down_list, procedure: dossier.procedure) }
let(:champ) { create(:champ_multiple_drop_down_list, dossier: dossier, type_de_champ: type_de_champ) }
let(:options) { type_de_champ.drop_down_list_options }
let(:enabled_options) { type_de_champ.drop_down_list_enabled_non_empty_options }
before { dossier.champs << champ }
context 'when the list is short' do
it 'renders the list as checkboxes' do
expect(subject).to have_selector('input[type=checkbox]', count: enabled_options.count)
end
end
context 'when the list is long' do
let(:type_de_champ) { create(:type_de_champ_multiple_drop_down_list, :long, procedure: dossier.procedure) }
it 'renders the list as a multiple-selection dropdown' do
expect(subject).to have_selector('select.select2')
end
end
end
context 'with a routed procedure' do
let(:procedure) do
create(:procedure,
:routee,
routing_criteria_name: 'departement')
end
let(:dossier) { create(:dossier, procedure: procedure) }
let(:champs) { [] }
it 'renders the routing criteria name and its value' do
expect(subject).to have_field(procedure.routing_criteria_name)
expect(subject).to include(dossier.groupe_instructeur.label)
end
end
end