refactor(champ): add required?

used for the `required` html attribute. It check visibility to avoid hidden required input which prevent the form from being sent.

app/components/editable_champ/address_component/address_component.html.haml

@@ -1,6 +1,6 @@
 = @form.hidden_field :value
 = @form.hidden_field :external_id
 = react_component("ComboAdresseSearch",
-  required: @champ.mandatory?,
+  required: @champ.required?,
   id: @champ.input_id,
   describedby: @champ.describedby_id)

app/components/editable_champ/annuaire_education_component/annuaire_education_component.html.haml

@@ -1,6 +1,6 @@
 = @form.hidden_field :value
 = @form.hidden_field :external_id
 = react_component("ComboAnnuaireEducationSearch",
-  required: @champ.mandatory?,
+  required: @champ.required?,
   id: @champ.input_id,
   describedby: @champ.describedby_id)

app/components/editable_champ/checkbox_component/checkbox_component.html.haml

@@ -1,4 +1,4 @@
 = @form.check_box :value,
-  { required: @champ.mandatory?, id: @champ.input_id, aria: { describedby: @champ.describedby_id } },
+  { required: @champ.required?, id: @champ.input_id, aria: { describedby: @champ.describedby_id } },
   'on',
   'off'

app/components/editable_champ/cnaf_component/cnaf_component.html.haml

@@ -3,7 +3,7 @@
     = @form.label :numero_allocataire, t('.numero_allocataire_label')
     %p.notice= t('.numero_allocataire_notice')
     = @form.text_field :numero_allocataire,
-      required: @champ.mandatory?,
+      required: @champ.required?,
       aria: { describedby: @champ.describedby_id },
       class: "width-33-desktop"
 
@@ -11,6 +11,6 @@
     = @form.label :code_postal, t('.code_postal_label')
     %p.notice= t('.code_postal_notice')
     = @form.text_field :code_postal,
-      required: @champ.mandatory?,
+      required: @champ.required?,
       aria: { describedby: @champ.describedby_id },
       class: "width-33-desktop"

app/components/editable_champ/communes_component/communes_component.html.haml

@@ -3,7 +3,7 @@
 = @form.hidden_field :departement
 = @form.hidden_field :code_departement
 = react_component("ComboCommunesSearch",
-  required: @champ.mandatory?,
+  required: @champ.required?,
   id: @champ.input_id,
   classNameDepartement: "width-33-desktop width-100-mobile",
   className: "width-66-desktop width-100-mobile",

app/components/editable_champ/date_component/date_component.html.haml

@@ -2,6 +2,6 @@
   id: @champ.input_id,
   aria: { describedby: @champ.describedby_id },
   value: @champ.value,
-  required: @champ.mandatory?,
+  required: @champ.required?,
   placeholder: 'aaaa-mm-jj',
   class: "width-33-desktop"

app/components/editable_champ/decimal_number_component/decimal_number_component.html.haml

@@ -3,4 +3,4 @@
   aria: { describedby: @champ.describedby_id },
   step: :any,
   placeholder: "3.14",
-  required: @champ.mandatory?
+  required: @champ.required?

app/components/editable_champ/departements_component/departements_component.html.haml

@@ -1,7 +1,7 @@
 = @form.hidden_field :value
 = @form.hidden_field :external_id
 = react_component("ComboDepartementsSearch",
-  required: @champ.mandatory?,
+  required: @champ.required?,
   id: @champ.input_id,
   className: "width-33-desktop width-100-mobile",
   describedby: @champ.describedby_id)

app/components/editable_champ/dgfip_component/dgfip_component.html.haml

@@ -3,7 +3,7 @@
     = @form.label :numero_fiscal, t('.numero_fiscal_label')
     %p.notice= t('.numero_fiscal_notice')
     = @form.text_field :numero_fiscal,
-      required: @champ.mandatory?,
+      required: @champ.required?,
       aria: { describedby: @champ.describedby_id },
       class: "width-33-desktop"
 
@@ -11,6 +11,6 @@
     = @form.label :reference_avis, t('.reference_avis_label')
     %p.notice= t('.reference_avis_notice')
     = @form.text_field :reference_avis,
-      required: @champ.mandatory?,
+      required: @champ.required?,
       aria: { describedby: @champ.describedby_id },
       class: "width-33-desktop"

app/components/editable_champ/dossier_link_component/dossier_link_component.html.haml

@@ -4,7 +4,7 @@
     aria: { describedby: @champ.describedby_id },
     placeholder: "Numéro de dossier",
     autocomplete: 'off',
-    required: @champ.mandatory?,
+    required: @champ.required?,
     data: { controller: 'turbo-input', turbo_input_url_value: champs_dossier_link_path(@champ.id) },
     class: "width-33-desktop"
 

app/components/editable_champ/email_component/email_component.html.haml

@@ -2,4 +2,4 @@
   id: @champ.input_id,
   aria: { describedby: @champ.describedby_id },
   placeholder: t(".placeholder"),
-  required: @champ.mandatory?
+  required: @champ.required?

app/components/editable_champ/engagement_component/engagement_component.html.haml

@@ -1,4 +1,4 @@
 = @form.check_box :value,
-  { required: @champ.mandatory?, id: @champ.input_id, aria: { describedby: @champ.describedby_id } },
+  { required: @champ.required?, id: @champ.input_id, aria: { describedby: @champ.describedby_id } },
   'on',
   'off'

app/components/editable_champ/iban_component/iban_component.html.haml

@@ -1,7 +1,7 @@
 = @form.text_field :value,
   id: @champ.input_id,
   placeholder: t(".placeholder"),
-  required: @champ.mandatory?,
+  required: @champ.required?,
   aria: { describedby: @champ.describedby_id },
   data: { controller: 'iban-input'},
   class: "width-66-desktop",

app/components/editable_champ/integer_number_component/integer_number_component.html.haml

@@ -2,4 +2,4 @@
   id: @champ.input_id,
   aria: { describedby: @champ.describedby_id },
   placeholder: 5,
-  required: @champ.mandatory?
+  required: @champ.required?

app/components/editable_champ/linked_drop_down_list_component/linked_drop_down_list_component.html.haml

@@ -2,7 +2,7 @@
   = @form.select :primary_value,
     @champ.primary_options,
     {},
-    { data: { secondary_options: @champ.secondary_options }, required: @champ.mandatory?, id: @champ.input_id, aria: { describedby: @champ.describedby_id } }
+    { data: { secondary_options: @champ.secondary_options }, required: @champ.required?, id: @champ.input_id, aria: { describedby: @champ.describedby_id } }
 
   .secondary{ class: @champ.has_secondary_options_for_primary? ? '' : 'hidden' }
     = @form.label :secondary_value, for: "#{@champ.input_id}-secondary" do
@@ -14,5 +14,5 @@
     = @form.select :secondary_value,
       @champ.secondary_options[@champ.primary_value],
       {},
-      { data: { secondary: true }, disabled: !@champ.has_secondary_options_for_primary?, required: @champ.mandatory?, id: "#{@champ.input_id}-secondary", aria: { describedby: "#{@champ.describedby_id}-secondary" } }
+      { data: { secondary: true }, disabled: !@champ.has_secondary_options_for_primary?, required: @champ.required?, id: "#{@champ.input_id}-secondary", aria: { describedby: "#{@champ.describedby_id}-secondary" } }
   = @form.hidden_field :secondary_value, value: '', disabled: @champ.has_secondary_options_for_primary?

app/components/editable_champ/mesri_component/mesri_component.html.haml

@@ -3,7 +3,7 @@
     = @form.label :ine, t('.ine_label')
     %p.notice= t('.ine_notice')
     = @form.text_field :ine,
-      required: @champ.mandatory?,
+      required: @champ.required?,
       aria: { describedby: @champ.describedby_id },
       class: "width-33-desktop"
 

app/components/editable_champ/number_component/number_component.html.haml

@@ -2,4 +2,4 @@
   id: @champ.input_id,
   aria: { describedby: @champ.describedby_id },
   placeholder: @champ.libelle,
-  required: @champ.mandatory?
+  required: @champ.required?

app/components/editable_champ/pays_component/pays_component.html.haml

@@ -1,7 +1,7 @@
 = @form.hidden_field :value
 = @form.hidden_field :external_id
 = react_component("ComboPaysSearch",
-  required: @champ.mandatory?,
+  required: @champ.required?,
   id: @champ.input_id,
   className: "width-33-desktop width-100-mobile",
   describedby: @champ.describedby_id)

app/components/editable_champ/phone_component/phone_component.html.haml

@@ -5,5 +5,5 @@
   id: @champ.input_id,
   aria: { describedby: @champ.describedby_id },
   placeholder: t(".placeholder"),
-  required: @champ.mandatory?,
+  required: @champ.required?,
   pattern: "[^a-z^A-Z]+"

app/components/editable_champ/pole_emploi_component/pole_emploi_component.html.haml

@@ -3,6 +3,6 @@
     = @form.label :identifiant, t('.identifiant_label')
     %p.notice= t('.identifiant_notice')
     = @form.text_field :identifiant,
-      required: @champ.mandatory?,
+      required: @champ.required?,
       aria: { describedby: @champ.describedby_id },
       class: "width-33-desktop"

app/components/editable_champ/regions_component/regions_component.html.haml

@@ -1,7 +1,7 @@
 = @form.hidden_field :value
 = @form.hidden_field :external_id
 = react_component("ComboRegionsSearch",
-  required: @champ.mandatory?,
+  required: @champ.required?,
   id: @champ.input_id,
   className: "width-33-desktop width-100-mobile",
   describedby: @champ.describedby_id)

app/components/editable_champ/rna_component/rna_component.html.haml

@@ -3,7 +3,7 @@
   aria: { describedby: @champ.describedby_id },
   placeholder: t(".placeholder"),
   data: { controller: 'turbo-input', turbo_input_url_value: champs_rna_path(@champ.id) },
-  required: @champ.mandatory?,
+  required: @champ.required?,
   pattern: "W[0-9]{9}",
   title: t(".title"),
   class: "width-33-desktop",

app/components/editable_champ/siret_component/siret_component.html.haml

@@ -3,7 +3,7 @@
   aria: { describedby: @champ.describedby_id },
   placeholder: t(".placeholder"),
   data: { controller: 'turbo-input', turbo_input_url_value: champs_siret_path(@champ.id) },
-  required: @champ.mandatory?,
+  required: @champ.required?,
   pattern: "[0-9]{14}",
   title: t(".title"),
   class: "width-33-desktop",

app/components/editable_champ/text_component/text_component.html.haml

@@ -1,4 +1,4 @@
 = @form.text_field :value,
   id: @champ.input_id,
-  required: @champ.mandatory?,
+  required: @champ.required?,
   aria: { describedby: @champ.describedby_id }

app/components/editable_champ/textarea_component/textarea_component.html.haml

@@ -2,5 +2,5 @@
   id: @champ.input_id,
   aria: { describedby: @champ.describedby_id },
   rows: 6,
-  required: @champ.mandatory?,
+  required: @champ.required?,
   value: html_to_string(@champ.value)

app/models/champ.rb

@@ -97,6 +97,13 @@ class Champ < ApplicationRecord
     type_de_champ.mandatory? && visible?
   end
 
+  # used for the `required` html attribute
+  # check visibility to avoid hidden required input
+  # which prevent the form from being sent.
+  def required?
+    type_de_champ.mandatory? && visible?
+  end
+
   def mandatory_blank_and_visible?
     mandatory? && blank?
   end