Merge pull request #913 from betagouv/make-options-required

Demander à sélectionner au moins une option à l’envoi d’une sollicitation

app/assets/javascripts/application.js

@@ -26,3 +26,4 @@
 // = require semantic-ui/dimmer
 
 // = require_tree ./application
+// = require_tree ./shared

app/assets/javascripts/pages.js

@@ -7,3 +7,4 @@
 // = require rails-ujs
 
 // = require_tree ./pages
+// = require_tree ./shared

app/assets/javascripts/shared/checkboxes_require_one.js

@@ -0,0 +1,14 @@
+function checkboxes_require_one(selector, message) {
+  let boxes_parent = document.querySelector(selector);
+
+  function updateBoxesValidity() {
+    let at_least_one_checked = !!boxes_parent.querySelector("input[type=checkbox]:checked");
+    let validity = at_least_one_checked ? "" : message;
+    let boxes = boxes_parent.querySelectorAll("input[type=checkbox]");
+    boxes.forEach(function(box) { box.setCustomValidity(validity); });
+  }
+
+  boxes_parent.addEventListener("click", function(event) { if (event.target.matches("input[type=checkbox]")) { updateBoxesValidity(); } });
+
+  updateBoxesValidity();
+}

app/assets/stylesheets/pages.sass

@@ -179,6 +179,11 @@ section.section#section-details
     margin-top: 1em
     margin-top: var(--space-s)
 
+section.section#section-formulaire
+  #solicitation-options .panel
+    padding: 1em
+    padding: var(--space-s)
+
 .section#stats
   padding: 2em
 

app/views/diagnoses/steps/selection.haml

@@ -48,25 +48,5 @@
           = t('.notify_matches')
 
     .clear
-
-:javascript
-  (function() {
-    var checkboxes = $("#selection-form input:checkbox");
-    function setBoxesValidity() {
-      if (checkboxes.is(":checked")) {
-        checkboxes.each(function() {
-          this.setCustomValidity("");
-        });
-      } else {
-        checkboxes.each(function() {
-          this.setCustomValidity("#{ t('.select_at_least_one_expert') }");
-        });
-      }
-    }
-    checkboxes.on("click", function() {
-      setBoxesValidity();
-    });
-    $(document).ready(function(){
-      setBoxesValidity();
-    });
-  }) ()
+    :javascript
+        checkboxes_require_one("#selection-form", "#{ t(".select_at_least_one_expert") }");

app/views/landings/_form.haml

@@ -6,15 +6,17 @@
     - @solicitation.form_info.each do |k,v|
       = f.hidden_field "form_info[#{k}]", value: v
     - if landing_options.present?
-      .form__group
-        = f.label :options
+      .form__group#solicitation-options
+        = f.label :options, t('.select_options')
         .panel
           = f.fields_for :options do |fields|
             - landing_options.each do |option|
               .p
                 = fields.check_box option.slug
                 = fields.label option.slug, class: 'label-inline' do
                   = option.description.html_safe
+        :javascript
+          checkboxes_require_one("#solicitation-options", "#{ t(".select_at_least_one_option") }");
     .form__group
       = f.label 'description', t('.description.label')
       - example = landing.description_example.presence || t('.description.default_example')

config/locales/views.fr.yml

@@ -220,6 +220,8 @@ fr:
       phone_number:
         label: Téléphone
         placeholder: 06 12 34 56 78
+      select_at_least_one_option: Sélectionnez au moins une case
+      select_options: 'Sélectionnez les cases qui correspondent à votre situation :'
       siret:
         label: SIRET
         placeholder: 123 456 789 00010