From dc35d9521f700d2a303e0ad091c12c2f62e49b0d Mon Sep 17 00:00:00 2001 From: kara Diaby Date: Tue, 12 Oct 2021 18:07:10 +0200 Subject: [PATCH 1/7] add other option to liste deroulante champ --- .../types_de_champ_controller.rb | 3 ++ .../components/TypeDeChamp.jsx | 7 +++++ .../components/TypeDeChampDropDownOther.jsx | 30 +++++++++++++++++++ app/models/champ.rb | 1 + app/models/champs/drop_down_list_champ.rb | 8 +++++ app/models/type_de_champ.rb | 3 +- 6 files changed, 51 insertions(+), 1 deletion(-) create mode 100644 app/javascript/components/TypesDeChampEditor/components/TypeDeChampDropDownOther.jsx diff --git a/app/controllers/new_administrateur/types_de_champ_controller.rb b/app/controllers/new_administrateur/types_de_champ_controller.rb index f81298751..49cc93507 100644 --- a/app/controllers/new_administrateur/types_de_champ_controller.rb +++ b/app/controllers/new_administrateur/types_de_champ_controller.rb @@ -57,6 +57,7 @@ module NewAdministrateur ], methods: [ :drop_down_list_value, + :drop_down_other, :drop_down_secondary_libelle, :drop_down_secondary_description, :piece_justificative_template_filename, @@ -75,6 +76,7 @@ module NewAdministrateur :parent_id, :private, :drop_down_list_value, + :drop_down_other, :drop_down_secondary_libelle, :drop_down_secondary_description, :piece_justificative_template, @@ -98,6 +100,7 @@ module NewAdministrateur :description, :mandatory, :drop_down_list_value, + :drop_down_other, :drop_down_secondary_libelle, :drop_down_secondary_description, :piece_justificative_template, diff --git a/app/javascript/components/TypesDeChampEditor/components/TypeDeChamp.jsx b/app/javascript/components/TypesDeChampEditor/components/TypeDeChamp.jsx index 5679ebedf..bce4e7103 100644 --- a/app/javascript/components/TypesDeChampEditor/components/TypeDeChamp.jsx +++ b/app/javascript/components/TypesDeChampEditor/components/TypeDeChamp.jsx @@ -11,6 +11,7 @@ import MoveButton from './MoveButton'; import TypeDeChampCarteOption from './TypeDeChampCarteOption'; import TypeDeChampCarteOptions from './TypeDeChampCarteOptions'; import TypeDeChampDropDownOptions from './TypeDeChampDropDownOptions'; +import TypeDeChampDropDownOther from './TypeDeChampDropDownOther'; import TypeDeChampPieceJustificative from './TypeDeChampPieceJustificative'; import TypeDeChampRepetitionOptions from './TypeDeChampRepetitionOptions'; import TypeDeChampTypesSelect from './TypeDeChampTypesSelect'; @@ -24,6 +25,7 @@ const TypeDeChamp = sortableElement( 'linked_drop_down_list' ].includes(typeDeChamp.type_champ); const isLinkedDropDown = typeDeChamp.type_champ === 'linked_drop_down_list'; + const isSimpleDropDown = typeDeChamp.type_champ === 'drop_down_list'; const isFile = typeDeChamp.type_champ === 'piece_justificative'; const isCarte = typeDeChamp.type_champ === 'carte'; const isExplication = typeDeChamp.type_champ === 'explication'; @@ -137,6 +139,10 @@ const TypeDeChamp = sortableElement( libelleHandler={updateHandlers.drop_down_secondary_libelle} descriptionHandler={updateHandlers.drop_down_secondary_description} /> + + + + ); + } + return null; +} + +TypeDeChampDropDownOther.propTypes = { + isVisible: PropTypes.bool, + handler: PropTypes.object +}; + +export default TypeDeChampDropDownOther; diff --git a/app/models/champ.rb b/app/models/champ.rb index 131cbe976..552d0676d 100644 --- a/app/models/champ.rb +++ b/app/models/champ.rb @@ -38,6 +38,7 @@ class Champ < ApplicationRecord :mandatory?, :description, :drop_down_list_options, + :drop_down_other, :drop_down_list_options?, :drop_down_list_disabled_options, :drop_down_list_enabled_non_empty_options, diff --git a/app/models/champs/drop_down_list_champ.rb b/app/models/champs/drop_down_list_champ.rb index bf9e1b70d..223ae6cae 100644 --- a/app/models/champs/drop_down_list_champ.rb +++ b/app/models/champs/drop_down_list_champ.rb @@ -41,4 +41,12 @@ class Champs::DropDownListChamp < Champ def enabled_non_empty_options drop_down_list_enabled_non_empty_options end + + def other_value_present? + self.value.present? && self.options.exclude?(self.value) + end + + def drop_down_other? + drop_down_other + end end diff --git a/app/models/type_de_champ.rb b/app/models/type_de_champ.rb index 97b329b7b..a415595ec 100644 --- a/app/models/type_de_champ.rb +++ b/app/models/type_de_champ.rb @@ -58,7 +58,7 @@ class TypeDeChamp < ApplicationRecord belongs_to :parent, class_name: 'TypeDeChamp', optional: true has_many :types_de_champ, -> { ordered }, foreign_key: :parent_id, class_name: 'TypeDeChamp', inverse_of: :parent, dependent: :destroy - store_accessor :options, :cadastres, :old_pj, :drop_down_options, :skip_pj_validation, :skip_content_type_pj_validation, :drop_down_secondary_libelle, :drop_down_secondary_description + store_accessor :options, :cadastres, :old_pj, :drop_down_options, :skip_pj_validation, :skip_content_type_pj_validation, :drop_down_secondary_libelle, :drop_down_secondary_description, :drop_down_other has_many :revision_types_de_champ, class_name: 'ProcedureRevisionTypeDeChamp', dependent: :destroy, inverse_of: :type_de_champ has_many :revisions, through: :revision_types_de_champ @@ -331,6 +331,7 @@ class TypeDeChamp < ApplicationRecord ], methods: [ :drop_down_list_value, + :drop_down_other, :piece_justificative_template_filename, :piece_justificative_template_url, :editable_options, From 0e65916e448244369b225bb3bfe21f7e36a4ae76 Mon Sep 17 00:00:00 2001 From: kara Diaby Date: Thu, 21 Oct 2021 11:55:23 +0200 Subject: [PATCH 2/7] add other option for dropdown radio --- app/javascript/new_design/dropdown.js | 64 +++++++++++++++++++ .../dossiers/_drop_down_other_input.html.haml | 5 ++ .../editable_champs/_drop_down_list.html.haml | 11 ++++ 3 files changed, 80 insertions(+) create mode 100644 app/views/shared/dossiers/_drop_down_other_input.html.haml diff --git a/app/javascript/new_design/dropdown.js b/app/javascript/new_design/dropdown.js index dc948c983..7b7c67478 100644 --- a/app/javascript/new_design/dropdown.js +++ b/app/javascript/new_design/dropdown.js @@ -20,3 +20,67 @@ delegate('click', '.dropdown-button', (event) => { button.setAttribute('aria-expanded', !buttonExpanded); } }); + +const radios = document.querySelectorAll('input[type="radio"]'); +const selects = Array.from( + document.querySelectorAll('.select_drop_down_other') +); +const radioInputs = Array.from( + document.querySelectorAll('.text_field_drop_down_other_radio') +); + +const radioNotices = Array.from( + document.querySelectorAll('.drop_down_other_radio_notice') +); +const selectInputs = Array.from( + document.querySelectorAll('.text_field_drop_down_other_select') +); + +const radioButtons = Array.from( + document.querySelectorAll('.radio_button_drop_down_other') +); + +const radioButtonsObject = radioButtons.map((radioButton, index) => { + return { + radioButton: radioButton, + input: radioInputs[index], + notice: radioNotices[index], + key: radioButton.getAttribute('name') + }; +}); + +const selectObject = selects.map((select, index) => { + return { + select: select, + input: selectInputs[index], + key: select.getAttribute('name') + }; +}); + +for (const el of selectObject) { + selects.forEach((select) => { + select.addEventListener('change', () => { + if (el.select.value === 'Autre') { + el.input.style.display = 'block'; + el.input.setAttribute('name', el.key); + } else { + el.input.style.display = 'none'; + el.input.setAttribute('name', ''); + } + }); + }); +} + +for (const el of radioButtonsObject) { + radios.forEach((radio) => { + radio.addEventListener('click', () => { + if (el.radioButton.checked) { + el.notice.style.display = 'block'; + el.input.setAttribute('name', el.key); + } else { + el.notice.style.display = 'none'; + el.input.setAttribute('name', ''); + } + }); + }); +} diff --git a/app/views/shared/dossiers/_drop_down_other_input.html.haml b/app/views/shared/dossiers/_drop_down_other_input.html.haml new file mode 100644 index 000000000..661eac550 --- /dev/null +++ b/app/views/shared/dossiers/_drop_down_other_input.html.haml @@ -0,0 +1,5 @@ +%input{ type: "text", + value: champ.other_value_present? ? champ.value : "", + class: class_name, + maxlength: "200", + placeholder: "Saisissez ici" } diff --git a/app/views/shared/dossiers/editable_champs/_drop_down_list.html.haml b/app/views/shared/dossiers/editable_champs/_drop_down_list.html.haml index 153217cff..56589b964 100644 --- a/app/views/shared/dossiers/editable_champs/_drop_down_list.html.haml +++ b/app/views/shared/dossiers/editable_champs/_drop_down_list.html.haml @@ -5,13 +5,24 @@ %label = form.radio_button :value, option = option + - if !champ.mandatory? %label.blank-radio = form.radio_button :value, '' Non renseigné + - if champ.drop_down_other? + %label + = form.radio_button :value, '', class: "radio_button_drop_down_other", id: "radio_button_drop_down_other_#{champ.id}", checked: champ.other_value_present? + Autre + + - if champ.drop_down_other? + .notice.drop_down_other_radio_notice{ style: "#{champ.other_value_present? ? "display:block" : "display:none"}" } + %p Veuillez saisir votre autre choix + = render partial: "shared/dossiers/drop_down_other_input", locals: { champ: champ, class_name: "text_field_drop_down_other_radio" } - else = form.select :value, champ.options, disabled: champ.disabled_options, required: champ.mandatory? + From c2fcd3992d95f35b43704d54925d4dc4e37370fe Mon Sep 17 00:00:00 2001 From: kara Diaby Date: Thu, 21 Oct 2021 16:03:13 +0200 Subject: [PATCH 3/7] add other option for dropdown select --- app/javascript/new_design/dropdown.js | 10 ++++++++-- .../dossiers/editable_champs/_drop_down_list.html.haml | 10 +++++++--- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/app/javascript/new_design/dropdown.js b/app/javascript/new_design/dropdown.js index 7b7c67478..4b451a981 100644 --- a/app/javascript/new_design/dropdown.js +++ b/app/javascript/new_design/dropdown.js @@ -32,6 +32,11 @@ const radioInputs = Array.from( const radioNotices = Array.from( document.querySelectorAll('.drop_down_other_radio_notice') ); + +const selectNotices = Array.from( + document.querySelectorAll('.drop_down_other_select_notice') +); + const selectInputs = Array.from( document.querySelectorAll('.text_field_drop_down_other_select') ); @@ -53,6 +58,7 @@ const selectObject = selects.map((select, index) => { return { select: select, input: selectInputs[index], + notice: selectNotices[index], key: select.getAttribute('name') }; }); @@ -61,10 +67,10 @@ for (const el of selectObject) { selects.forEach((select) => { select.addEventListener('change', () => { if (el.select.value === 'Autre') { - el.input.style.display = 'block'; + el.notice.style.display = 'block'; el.input.setAttribute('name', el.key); } else { - el.input.style.display = 'none'; + el.notice.style.display = 'none'; el.input.setAttribute('name', ''); } }); diff --git a/app/views/shared/dossiers/editable_champs/_drop_down_list.html.haml b/app/views/shared/dossiers/editable_champs/_drop_down_list.html.haml index 56589b964..ad8d6a015 100644 --- a/app/views/shared/dossiers/editable_champs/_drop_down_list.html.haml +++ b/app/views/shared/dossiers/editable_champs/_drop_down_list.html.haml @@ -22,7 +22,11 @@ - else = form.select :value, - champ.options, - disabled: champ.disabled_options, - required: champ.mandatory? + champ.drop_down_other? ? champ.options.concat(["Autre"]) : champ.options, + { selected: champ.other_value_present? ? "Autre" : champ.value, + required: champ.mandatory? }, + { class: champ.drop_down_other? ? "select_drop_down_other" : ""} + - if champ.drop_down_other? + .notice.drop_down_other_select_notice{ style: "#{champ.other_value_present? ? "display:block" : "display:none"}" } + = render partial: "shared/dossiers/drop_down_other_input", locals: { champ: champ, class_name: "text_field_drop_down_other_select" } From 71aa13f4687a5fd5199ea72e3e48f8d6fcfd9b51 Mon Sep 17 00:00:00 2001 From: kara Diaby Date: Fri, 22 Oct 2021 14:46:53 +0200 Subject: [PATCH 4/7] tests --- spec/system/users/dropdown_spec.rb | 43 ++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 spec/system/users/dropdown_spec.rb diff --git a/spec/system/users/dropdown_spec.rb b/spec/system/users/dropdown_spec.rb new file mode 100644 index 000000000..67e6d3494 --- /dev/null +++ b/spec/system/users/dropdown_spec.rb @@ -0,0 +1,43 @@ +describe 'dropdown list with other option activated' do + let(:password) { 'my-s3cure-p4ssword' } + let!(:user) { create(:user, password: password) } + + let(:list_items) do + <<~END_OF_LIST + --Primary 1-- + Secondary 1.1 + Secondary 1.2 + END_OF_LIST + end + + let(:type_de_champ) { build(:type_de_champ_drop_down_list, libelle: 'simple dropdown other', drop_down_list_value: list_items, drop_down_other: true) } + + let(:procedure) do + create(:procedure, :published, :for_individual, types_de_champ: [type_de_champ]) + end + + let(:user_dossier) { user.dossiers.first } + + before do + login_as(user, scope: :user) + visit "/commencer/#{procedure.path}" + click_on 'Commencer la démarche' + end + + scenario 'Select other option and the other input hidden must appear', js: true do + fill_individual + + find('.radios').find('label:last-child').find('input').select_option + expect(page).to have_selector('.drop_down_other', visible: true) + end + + private + + def fill_individual + choose 'Monsieur' + fill_in('individual_prenom', with: 'prenom') + fill_in('individual_nom', with: 'nom') + click_on 'Continuer' + expect(page).to have_current_path(brouillon_dossier_path(user_dossier)) + end +end From f1f2b76a3daecb32cf98fa0af4506f36f5475297 Mon Sep 17 00:00:00 2001 From: kara Diaby Date: Fri, 22 Oct 2021 20:44:46 +0200 Subject: [PATCH 5/7] revisions --- app/models/procedure_revision.rb | 11 +++++++++++ .../procedures/_revision_changes.html.haml | 5 +++++ .../views/new_administrateur/revision_changes/fr.yml | 3 +++ 3 files changed, 19 insertions(+) diff --git a/app/models/procedure_revision.rb b/app/models/procedure_revision.rb index e3856f4f6..25865fc96 100644 --- a/app/models/procedure_revision.rb +++ b/app/models/procedure_revision.rb @@ -243,6 +243,17 @@ class ProcedureRevision < ApplicationRecord } end end + if from_type_de_champ.drop_down_other != to_type_de_champ.drop_down_other + changes << { + op: :update, + attribute: :drop_down_other, + label: from_type_de_champ.libelle, + private: from_type_de_champ.private?, + from: from_type_de_champ.drop_down_other, + to: to_type_de_champ.drop_down_other, + stable_id: from_type_de_champ.stable_id + } + end elsif to_type_de_champ.carte? if from_type_de_champ.carte_optional_layers != to_type_de_champ.carte_optional_layers changes << { diff --git a/app/views/new_administrateur/procedures/_revision_changes.html.haml b/app/views/new_administrateur/procedures/_revision_changes.html.haml index cf0ead74f..1c7e936c5 100644 --- a/app/views/new_administrateur/procedures/_revision_changes.html.haml +++ b/app/views/new_administrateur/procedures/_revision_changes.html.haml @@ -41,6 +41,11 @@ %li= t(:add_option, scope: [:new_administrateur, :revision_changes], items: added.map{ |term| "« #{term.strip} »" }.join(", ")) - if removed.present? %li= t(:remove_option, scope: [:new_administrateur, :revision_changes], items: removed.map{ |term| "« #{term.strip} »" }.join(", ")) + - when :drop_down_other + - if change[:from] == false + %li.mb-1= t("new_administrateur.revision_changes.update_drop_down_other#{postfix}.enabled", label: change[:label]) + - else + %li.mb-1= t("new_administrateur.revision_changes.update_drop_down_other#{postfix}.disabled", label: change[:label]) - when :carte_layers - added = change[:to].sort - change[:from].sort - removed = change[:from].sort - change[:to].sort diff --git a/config/locales/views/new_administrateur/revision_changes/fr.yml b/config/locales/views/new_administrateur/revision_changes/fr.yml index b86ff6619..495f1728f 100644 --- a/config/locales/views/new_administrateur/revision_changes/fr.yml +++ b/config/locales/views/new_administrateur/revision_changes/fr.yml @@ -17,6 +17,9 @@ fr: disabled: Le champ « %{label} » n’est plus obligatoire update_piece_justificative_template: Le modèle de pièce justificative du champ « %{label} » a été modifié update_drop_down_options: Les options de sélection du champ « %{label} » ont été modifiées + update_drop_down_other: + enabled: Le champ « %{label} » comporte maintenant un choix « Autre » + disabled: Le champ « %{label} » ne comporte plus de choix « Autre » update_carte_layers: Les référentiels cartographiques du champ « %{label} » ont été modifiés add_private: L’annotation privée « %{label} » a été ajoutée remove_private: L’annotation privée « %{label} » a été supprimée From 8154daf847203140b1d042caa138711dc909eb5f Mon Sep 17 00:00:00 2001 From: Paul Chavard Date: Tue, 26 Oct 2021 20:42:17 +0200 Subject: [PATCH 6/7] refactor(drop_down_list_champ): other option --- app/controllers/users/dossiers_controller.rb | 4 +- app/javascript/new_design/dropdown.js | 91 +++++-------------- app/models/champs/drop_down_list_champ.rb | 27 +++++- .../dossiers/_drop_down_other_input.html.haml | 9 +- .../editable_champs/_drop_down_list.html.haml | 20 +--- 5 files changed, 60 insertions(+), 91 deletions(-) diff --git a/app/controllers/users/dossiers_controller.rb b/app/controllers/users/dossiers_controller.rb index 721ddf54b..6ba476c78 100644 --- a/app/controllers/users/dossiers_controller.rb +++ b/app/controllers/users/dossiers_controller.rb @@ -337,8 +337,8 @@ module Users def champs_params params.permit(dossier: { champs_attributes: [ - :id, :value, :external_id, :primary_value, :secondary_value, :numero_allocataire, :code_postal, :piece_justificative_file, value: [], - champs_attributes: [:id, :_destroy, :value, :external_id, :primary_value, :secondary_value, :numero_allocataire, :code_postal, :piece_justificative_file, value: []] + :id, :value, :value_other, :external_id, :primary_value, :secondary_value, :numero_allocataire, :code_postal, :piece_justificative_file, value: [], + champs_attributes: [:id, :_destroy, :value, :value_other, :external_id, :primary_value, :secondary_value, :numero_allocataire, :code_postal, :piece_justificative_file, value: []] ] }) end diff --git a/app/javascript/new_design/dropdown.js b/app/javascript/new_design/dropdown.js index 4b451a981..c7fe5a872 100644 --- a/app/javascript/new_design/dropdown.js +++ b/app/javascript/new_design/dropdown.js @@ -21,72 +21,29 @@ delegate('click', '.dropdown-button', (event) => { } }); -const radios = document.querySelectorAll('input[type="radio"]'); -const selects = Array.from( - document.querySelectorAll('.select_drop_down_other') -); -const radioInputs = Array.from( - document.querySelectorAll('.text_field_drop_down_other_radio') -); - -const radioNotices = Array.from( - document.querySelectorAll('.drop_down_other_radio_notice') -); - -const selectNotices = Array.from( - document.querySelectorAll('.drop_down_other_select_notice') -); - -const selectInputs = Array.from( - document.querySelectorAll('.text_field_drop_down_other_select') -); - -const radioButtons = Array.from( - document.querySelectorAll('.radio_button_drop_down_other') -); - -const radioButtonsObject = radioButtons.map((radioButton, index) => { - return { - radioButton: radioButton, - input: radioInputs[index], - notice: radioNotices[index], - key: radioButton.getAttribute('name') - }; -}); - -const selectObject = selects.map((select, index) => { - return { - select: select, - input: selectInputs[index], - notice: selectNotices[index], - key: select.getAttribute('name') - }; -}); - -for (const el of selectObject) { - selects.forEach((select) => { - select.addEventListener('change', () => { - if (el.select.value === 'Autre') { - el.notice.style.display = 'block'; - el.input.setAttribute('name', el.key); - } else { - el.notice.style.display = 'none'; - el.input.setAttribute('name', ''); - } - }); - }); +function onChangeSelectWithOther(target) { + const parent = target.closest('.editable-champ-drop_down_list'); + const inputGroup = parent?.querySelector('.drop_down_other'); + if (inputGroup) { + const input = inputGroup.querySelector('input'); + if (target.value === '__other__') { + show(inputGroup); + input.disabled = false; + } else { + hide(inputGroup); + input.disabled = true; + } + } } -for (const el of radioButtonsObject) { - radios.forEach((radio) => { - radio.addEventListener('click', () => { - if (el.radioButton.checked) { - el.notice.style.display = 'block'; - el.input.setAttribute('name', el.key); - } else { - el.notice.style.display = 'none'; - el.input.setAttribute('name', ''); - } - }); - }); -} +delegate('change', '.editable-champ-drop_down_list select', (event) => { + onChangeSelectWithOther(event.target); +}); + +delegate( + 'click', + '.editable-champ-drop_down_list input[type="radio"]', + (event) => { + onChangeSelectWithOther(event.target); + } +); diff --git a/app/models/champs/drop_down_list_champ.rb b/app/models/champs/drop_down_list_champ.rb index 223ae6cae..649947693 100644 --- a/app/models/champs/drop_down_list_champ.rb +++ b/app/models/champs/drop_down_list_champ.rb @@ -21,6 +21,7 @@ # class Champs::DropDownListChamp < Champ THRESHOLD_NB_OPTIONS_AS_RADIO = 5 + OTHER = '__other__' def render_as_radios? enabled_non_empty_options.size <= THRESHOLD_NB_OPTIONS_AS_RADIO @@ -31,7 +32,15 @@ class Champs::DropDownListChamp < Champ end def options - drop_down_list_options + if drop_down_other? + drop_down_list_options + [["Autre", OTHER]] + else + drop_down_list_options + end + end + + def selected + other_value_present? ? OTHER : value end def disabled_options @@ -43,10 +52,24 @@ class Champs::DropDownListChamp < Champ end def other_value_present? - self.value.present? && self.options.exclude?(self.value) + value.present? && drop_down_list_options.exclude?(value) end def drop_down_other? drop_down_other end + + def value=(value) + if value != OTHER + write_attribute(:value, value) + end + end + + def value_other=(value) + write_attribute(:value, value) + end + + def value_other + other_value_present? ? value : "" + end end diff --git a/app/views/shared/dossiers/_drop_down_other_input.html.haml b/app/views/shared/dossiers/_drop_down_other_input.html.haml index 661eac550..4bd74b97f 100644 --- a/app/views/shared/dossiers/_drop_down_other_input.html.haml +++ b/app/views/shared/dossiers/_drop_down_other_input.html.haml @@ -1,5 +1,4 @@ -%input{ type: "text", - value: champ.other_value_present? ? champ.value : "", - class: class_name, - maxlength: "200", - placeholder: "Saisissez ici" } +.drop_down_other{ class: champ.other_value_present? ? '' : 'hidden' } + .notice + %p Veuillez saisir votre autre choix + = form.text_field :value_other, { maxlength: "200", placeholder: "Saisissez ici", disabled: !champ.other_value_present? } diff --git a/app/views/shared/dossiers/editable_champs/_drop_down_list.html.haml b/app/views/shared/dossiers/editable_champs/_drop_down_list.html.haml index ad8d6a015..8a5552174 100644 --- a/app/views/shared/dossiers/editable_champs/_drop_down_list.html.haml +++ b/app/views/shared/dossiers/editable_champs/_drop_down_list.html.haml @@ -10,23 +10,13 @@ %label.blank-radio = form.radio_button :value, '' Non renseigné + - if champ.drop_down_other? %label - = form.radio_button :value, '', class: "radio_button_drop_down_other", id: "radio_button_drop_down_other_#{champ.id}", checked: champ.other_value_present? + = form.radio_button :value, Champs::DropDownListChamp::OTHER, checked: champ.other_value_present? Autre - - - if champ.drop_down_other? - .notice.drop_down_other_radio_notice{ style: "#{champ.other_value_present? ? "display:block" : "display:none"}" } - %p Veuillez saisir votre autre choix - = render partial: "shared/dossiers/drop_down_other_input", locals: { champ: champ, class_name: "text_field_drop_down_other_radio" } - - else - = form.select :value, - champ.drop_down_other? ? champ.options.concat(["Autre"]) : champ.options, - { selected: champ.other_value_present? ? "Autre" : champ.value, - required: champ.mandatory? }, - { class: champ.drop_down_other? ? "select_drop_down_other" : ""} + = form.select :value, champ.options, { selected: champ.selected, required: champ.mandatory? } - - if champ.drop_down_other? - .notice.drop_down_other_select_notice{ style: "#{champ.other_value_present? ? "display:block" : "display:none"}" } - = render partial: "shared/dossiers/drop_down_other_input", locals: { champ: champ, class_name: "text_field_drop_down_other_select" } + - if champ.drop_down_other? + = render partial: "shared/dossiers/drop_down_other_input", locals: { form: form, champ: champ } From 7ebc4396303c594c0ebad8e3d20c272c612196a9 Mon Sep 17 00:00:00 2001 From: Paul Chavard Date: Tue, 26 Oct 2021 20:42:17 +0200 Subject: [PATCH 7/7] refactor(drop_down_list_champ): other option --- .../new_design/champs/drop-down-list.js | 20 ++++++++++++++ app/javascript/new_design/dropdown.js | 27 ------------------- app/javascript/packs/application.js | 1 + app/models/champs/drop_down_list_champ.rb | 2 +- .../dossiers/_drop_down_other_input.html.haml | 2 +- .../editable_champs/_drop_down_list.html.haml | 2 +- 6 files changed, 24 insertions(+), 30 deletions(-) create mode 100644 app/javascript/new_design/champs/drop-down-list.js diff --git a/app/javascript/new_design/champs/drop-down-list.js b/app/javascript/new_design/champs/drop-down-list.js new file mode 100644 index 000000000..874946ae2 --- /dev/null +++ b/app/javascript/new_design/champs/drop-down-list.js @@ -0,0 +1,20 @@ +import { delegate, show, hide } from '@utils'; + +delegate( + 'change', + '.editable-champ-drop_down_list select, .editable-champ-drop_down_list input[type="radio"]', + (event) => { + const parent = event.target.closest('.editable-champ-drop_down_list'); + const inputGroup = parent?.querySelector('.drop_down_other'); + if (inputGroup) { + const input = inputGroup.querySelector('input'); + if (event.target.value === '__other__') { + show(inputGroup); + input.disabled = false; + } else { + hide(inputGroup); + input.disabled = true; + } + } + } +); diff --git a/app/javascript/new_design/dropdown.js b/app/javascript/new_design/dropdown.js index c7fe5a872..dc948c983 100644 --- a/app/javascript/new_design/dropdown.js +++ b/app/javascript/new_design/dropdown.js @@ -20,30 +20,3 @@ delegate('click', '.dropdown-button', (event) => { button.setAttribute('aria-expanded', !buttonExpanded); } }); - -function onChangeSelectWithOther(target) { - const parent = target.closest('.editable-champ-drop_down_list'); - const inputGroup = parent?.querySelector('.drop_down_other'); - if (inputGroup) { - const input = inputGroup.querySelector('input'); - if (target.value === '__other__') { - show(inputGroup); - input.disabled = false; - } else { - hide(inputGroup); - input.disabled = true; - } - } -} - -delegate('change', '.editable-champ-drop_down_list select', (event) => { - onChangeSelectWithOther(event.target); -}); - -delegate( - 'click', - '.editable-champ-drop_down_list input[type="radio"]', - (event) => { - onChangeSelectWithOther(event.target); - } -); diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index bfaa7cda4..f6a7fb267 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -27,6 +27,7 @@ import '../new_design/dossiers/auto-upload'; import '../new_design/champs/carte'; import '../new_design/champs/linked-drop-down-list'; import '../new_design/champs/repetition'; +import '../new_design/champs/drop-down-list'; import { toggleCondidentielExplanation, diff --git a/app/models/champs/drop_down_list_champ.rb b/app/models/champs/drop_down_list_champ.rb index 649947693..248eb443f 100644 --- a/app/models/champs/drop_down_list_champ.rb +++ b/app/models/champs/drop_down_list_champ.rb @@ -52,7 +52,7 @@ class Champs::DropDownListChamp < Champ end def other_value_present? - value.present? && drop_down_list_options.exclude?(value) + drop_down_other? && value.present? && drop_down_list_options.exclude?(value) end def drop_down_other? diff --git a/app/views/shared/dossiers/_drop_down_other_input.html.haml b/app/views/shared/dossiers/_drop_down_other_input.html.haml index 4bd74b97f..349e8c458 100644 --- a/app/views/shared/dossiers/_drop_down_other_input.html.haml +++ b/app/views/shared/dossiers/_drop_down_other_input.html.haml @@ -1,4 +1,4 @@ .drop_down_other{ class: champ.other_value_present? ? '' : 'hidden' } .notice %p Veuillez saisir votre autre choix - = form.text_field :value_other, { maxlength: "200", placeholder: "Saisissez ici", disabled: !champ.other_value_present? } + = form.text_field :value_other, maxlength: "200", placeholder: "Saisissez ici", disabled: !champ.other_value_present? diff --git a/app/views/shared/dossiers/editable_champs/_drop_down_list.html.haml b/app/views/shared/dossiers/editable_champs/_drop_down_list.html.haml index 8a5552174..ec7f81ee7 100644 --- a/app/views/shared/dossiers/editable_champs/_drop_down_list.html.haml +++ b/app/views/shared/dossiers/editable_champs/_drop_down_list.html.haml @@ -16,7 +16,7 @@ = form.radio_button :value, Champs::DropDownListChamp::OTHER, checked: champ.other_value_present? Autre - else - = form.select :value, champ.options, { selected: champ.selected, required: champ.mandatory? } + = form.select :value, champ.options, selected: champ.selected, required: champ.mandatory? - if champ.drop_down_other? = render partial: "shared/dossiers/drop_down_other_input", locals: { form: form, champ: champ }