add other option for dropdown radio

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', '');
+      }
+    });
+  });
+}

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" }

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?
+