poc(erreur): sur les champs

app/components/editable_champ/champ_label_component.rb

@@ -1,5 +1,8 @@
 class EditableChamp::ChampLabelComponent < ApplicationComponent
+  include Dsfr::InputErrorable
+
   def initialize(form:, champ:, seen_at: nil)
     @form, @champ, @seen_at = form, champ, seen_at
+    @attribute = :value
   end
 end

app/components/editable_champ/champ_label_component/champ_label_component.html.haml

@@ -1,10 +1,9 @@
 = # we do this trick because some html elements should use 'label' and some should be plain paragraphs
 - if @champ.html_label?
-  = @form.label @champ.main_value_name, id: @champ.labelledby_id, for: @champ.input_id do
-    - render EditableChamp::ChampLabelContentComponent.new champ: @champ, seen_at: @seen_at
+  = @form.label @champ.main_value_name, id: @champ.labelledby_id, for: @champ.input_id, class: 'fr-label' do
+    - render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at
 - else
-  .form-label.mb-4{ id: @champ.labelledby_id }
-    = render EditableChamp::ChampLabelContentComponent.new champ: @champ, seen_at: @seen_at
+  .fr-label.mb-4{ id: @champ.labelledby_id }
+    = render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at
+
 
-- if @champ.description.present?
-  .notice{ id: @champ.describedby_id }= render SimpleFormatComponent.new(@champ.description, allow_a: true)

app/components/editable_champ/champ_label_content_component.rb

@@ -1,8 +1,10 @@
 class EditableChamp::ChampLabelContentComponent < ApplicationComponent
   include ApplicationHelper
+  include Dsfr::InputErrorable
 
-  def initialize(champ:, seen_at: nil)
-    @champ, @seen_at = champ, seen_at
+  def initialize(form:, champ:, seen_at: nil)
+    @form, @champ, @seen_at = form, champ, seen_at
+    @attribute = :value
   end
 
   def highlight_if_unseen_class

app/components/editable_champ/champ_label_content_component/champ_label_content_component.en.yml

@@ -4,3 +4,5 @@ en:
   modified_at: "modified on %{datetime}"
   check_content_rebased: The type of this field or its description has been modified by the administration. Check its content.
   optional_champ: (optional)
+  recommended_size: The recommended maximum size is %{size} characters.
+  titre_identite_notice: National identity card (front side only), passport, residency permit or other proof of identity.

app/components/editable_champ/champ_label_content_component/champ_label_content_component.fr.yml

@@ -4,3 +4,5 @@ fr:
   modified_at: "modifié le %{datetime}"
   check_content_rebased: Le type de ce champ ou sa description ont été modifiés par l'administration. Vérifier son contenu.
   optional_champ: (facultatif)
+  recommended_size: La taille maximale conseillée est de %{size} caractères.
+  titre_identite_notice: Carte nationale d’identité (uniquement le recto), passeport, titre de séjour ou autre justificatif d’identité.

app/components/editable_champ/champ_label_content_component/champ_label_content_component.html.haml

@@ -18,3 +18,15 @@
 - if @champ.rebased_at.present? && @champ.rebased_at > (@seen_at || @champ.updated_at) && current_user.owns_or_invite?(@champ.dossier)
   %span.updated-at.highlighted
     = t('.check_content_rebased')
+
+- if @champ.titre_identite?
+  %span.fr-hint-text= t('.titre_identite_notice')
+
+- if hint?
+  %span.fr-hint-text= hint
+
+- if @champ.description.present?
+  %span.fr-hint-text{ id: @champ.describedby_id }= render SimpleFormatComponent.new(@champ.description, allow_a: true)
+
+- if @champ.textarea?
+  %span.sr-only= t('.recommended_size', size: @champ.character_limit_base)

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

@@ -1,7 +1,6 @@
 = @form.date_field :value,
-  id: @champ.input_id,
+  input_opts(id: @champ.input_id,
   aria: { describedby: @champ.describedby_id },
   value: @champ.value,
   required: @champ.required?,
-  placeholder: 'aaaa-mm-jj',
-  class: "width-33-desktop"
+  placeholder: 'aaaa-mm-jj', class: "width-33-desktop")

app/components/editable_champ/datetime_component/datetime_component.html.haml

@@ -1,2 +1 @@
-.datetime
-  = @form.datetime_field(:value, value: formatted_value_for_datetime_locale, id: @champ.input_id, aria: { describedby: @champ.describedby_id }, data: { controller: 'datetime' })
+= @form.datetime_field(:value, input_opts(value: formatted_value_for_datetime_locale, id: @champ.input_id, aria: { describedby: @champ.describedby_id }, data: { controller: 'datetime' }))

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

@@ -1,6 +1 @@
-= @form.number_field :value,
-  id: @champ.input_id,
-  aria: { describedby: @champ.describedby_id },
-  step: :any,
-  placeholder: "3.14",
-  required: @champ.required?
+= @form.number_field(:value, input_opts(id: @champ.input_id, aria: { describedby: @champ.describedby_id }, step: :any, placeholder: "3.14", required: @champ.required?))

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

@@ -1,18 +1,8 @@
-.dossier-link
-  = @form.text_field :value,
-    id: @champ.input_id,
-    aria: { describedby: @champ.describedby_id },
-    inputmode: :numeric,
-    min: 1,
-    pattern: "[0-9]{1,12}",
-    placeholder: "Numéro de dossier",
-    autocomplete: 'off',
-    required: @champ.required?,
-    class: "width-33-desktop #{@champ.blank? ? '' : 'small-margin'}"
+= @form.text_field(:value, input_opts(id: @champ.input_id, aria: { describedby: @champ.describedby_id }, inputmode: :numeric, min: 1, pattern: "[0-9]{1,12}", placeholder: "Numéro de dossier", autocomplete: 'off', required: @champ.required?, class: "width-33-desktop #{@champ.blank? ? '' : 'small-margin'}"))
 
-  - if !@champ.blank?
-    - if dossier.blank?
-      .fr-error-text.fr-mb-4w
-        = t('.not_found')
-    - else
-      .fr-info-text.fr-mb-4w= sanitize(dossier.text_summary)
+- if !@champ.blank?
+  - if dossier.blank?
+    .fr-error-text.fr-mb-4w
+      = t('.not_found')
+  - else
+    .fr-info-text.fr-mb-4w= sanitize(dossier.text_summary)

app/components/editable_champ/editable_champ_base_component.rb

@@ -1,5 +1,8 @@
 class EditableChamp::EditableChampBaseComponent < ApplicationComponent
-  def initialize(form:, champ:, seen_at: nil)
-    @form, @champ, @seen_at = form, champ, seen_at
+  include Dsfr::InputErrorable
+
+  def initialize(form:, champ:, seen_at: nil, opts: {})
+    @form, @champ, @seen_at, @opts = form, champ, seen_at, opts
+    @attribute = :value
   end
 end

app/components/editable_champ/editable_champ_component.rb

@@ -1,6 +1,9 @@
 class EditableChamp::EditableChampComponent < ApplicationComponent
+  include Dsfr::InputErrorable
+
   def initialize(form:, champ:, seen_at: nil)
     @form, @champ, @seen_at = form, champ, seen_at
+    @attribute = :value
   end
 
   private
@@ -21,8 +24,12 @@ class EditableChamp::EditableChampComponent < ApplicationComponent
   def html_options
     {
       class: class_names(
-        "editable-champ-#{@champ.type_champ}": true,
-        "hidden": !@champ.visible?
+        {
+          'editable-champ': true,
+          "editable-champ-#{@champ.type_champ}": true,
+          "hidden": !@champ.visible?,
+          "fr-input-group": true,
+        }.merge(input_group_error_class_names)
       ),
       id: @champ.input_group_id,
       data: { controller: stimulus_controller, **data_dependent_conditions, **stimulus_values }

app/components/editable_champ/editable_champ_component/editable_champ_component.en.yml

@@ -1,4 +1,4 @@
 ---
 en:
   titre_identite_notice: National identity card (front side only), passport, residency permit or other proof of identity.
-  datetime_notice: "Expected format : dd/mm/yyyy hh:mm"
+

app/components/editable_champ/editable_champ_component/editable_champ_component.fr.yml

@@ -1,4 +1,3 @@
 ---
 fr:
   titre_identite_notice: Carte nationale d’identité (uniquement le recto), passeport, titre de séjour ou autre justificatif d’identité.
-  datetime_notice: "Format attendu : jj/mm/aaaa hh:mm"

app/components/editable_champ/editable_champ_component/editable_champ_component.html.haml

@@ -1,10 +1,15 @@
-.editable-champ{ html_options }
+= content_tag(:div, html_options) do
   - if has_label?(@champ)
     = render EditableChamp::ChampLabelComponent.new form: @form, champ: @champ, seen_at: @seen_at
-  - if @champ.titre_identite?
-    %p.notice= t('.titre_identite_notice')
-  - elsif @champ.datetime?
-    %p.notice= t('.datetime_notice')
+  = render component_class.new(form: @form, champ: @champ, seen_at: @seen_at)
+
+  - if errors_on_attribute?
+    - if error_messages.size == 1
+      %p.fr-error-text{ id: describedby_id }= error_messages.first
+    - else
+      .fr-error-text{ id: describedby_id }
+        %ul.list-style-type-none.fr-pl-0
+          - error_messages.map do |error_message|
+            %li= error_message
 
   = @form.hidden_field :id, value: @champ.id
-  = render component_class.new(form: @form, champ: @champ, seen_at: @seen_at)

app/components/editable_champ/email_component.rb

@@ -1,2 +1,5 @@
 class EditableChamp::EmailComponent < EditableChamp::EditableChampBaseComponent
+  def email?
+    true
+  end
 end

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

@@ -1,5 +1 @@
-= @form.email_field :value,
-  id: @champ.input_id,
-  aria: { describedby: @champ.describedby_id },
-  placeholder: t(".placeholder"),
-  required: @champ.required?
+= @form.email_field(:value, input_opts(id: @champ.input_id, aria: { describedby: @champ.describedby_id }, placeholder: t(".placeholder"), required: @champ.required?))

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

@@ -1,8 +1 @@
-= @form.text_field :value,
-  id: @champ.input_id,
-  placeholder: t(".placeholder"),
-  required: @champ.required?,
-  aria: { describedby: @champ.describedby_id },
-  data: { controller: 'format', format: 'iban' },
-  class: "width-66-desktop",
-  maxlength: 34 + 9 # count space separator of 4 digits-groups
+= @form.text_field(:value, input_opts(id: @champ.input_id, placeholder: t(".placeholder"), required: @champ.required?, aria: { describedby: @champ.describedby_id }, data: { controller: 'format', format: 'iban' }, class: "width-66-desktop", maxlength: 34 + 9)) # count space separator of 4 digits-groups

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

@@ -1,5 +1 @@
-= @form.number_field :value,
-  id: @champ.input_id,
-  aria: { describedby: @champ.describedby_id },
-  placeholder: 5,
-  required: @champ.required?
+= @form.number_field(:value, input_opts(id: @champ.input_id, aria: { describedby: @champ.describedby_id }, placeholder: 5, required: @champ.required?))

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

@@ -1,5 +1 @@
-= @form.number_field :value,
-  id: @champ.input_id,
-  aria: { describedby: @champ.describedby_id },
-  placeholder: @champ.libelle,
-  required: @champ.required?
+= @form.number_field(:value, input_opts(id: @champ.input_id, aria: { describedby: @champ.describedby_id }, placeholder: @champ.libelle, required: @champ.required?))

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

@@ -1,9 +1,4 @@
 -# Allowed @formats:
 -# very light validation is made client-side
 -# stronger validation is made server-side
-= @form.phone_field :value,
-  id: @champ.input_id,
-  aria: { describedby: @champ.describedby_id },
-  placeholder: t(".placeholder"),
-  required: @champ.required?,
-  pattern: "[^a-z^A-Z]+"
+= @form.phone_field(:value, input_opts(id: @champ.input_id, aria: { describedby: @champ.describedby_id }, placeholder: t(".placeholder"), required: @champ.required?, pattern: "[^a-z^A-Z]+"))

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

@@ -1,12 +1,3 @@
-= @form.text_field :value,
-  id: @champ.input_id,
-  aria: { describedby: @champ.describedby_id },
-  placeholder: t(".placeholder"),
-  data: { controller: 'turbo-input', turbo_input_load_on_connect_value: @champ.prefilled? && @champ.value.present? && @champ.data.blank?, turbo_input_url_value: champs_rna_path(@champ.id) },
-  required: @champ.required?,
-  pattern: "W[0-9]{9}",
-  title: t(".title"),
-  class: "width-33-desktop",
-  maxlength: 10
+= @form.text_field(:value, input_opts( id: @champ.input_id, aria: { describedby: @champ.describedby_id }, placeholder: t(".placeholder"), data: { controller: 'turbo-input', turbo_input_load_on_connect_value: @champ.prefilled? && @champ.value.present? && @champ.data.blank?, turbo_input_url_value: champs_rna_path(@champ.id) }, required: @champ.required?, pattern: "W[0-9]{9}", title: t(".title"), class: "width-33-desktop", maxlength: 10))
 .rna-info{ id: dom_id(@champ, :rna_info) }
   = render 'shared/champs/rna/association', champ: @champ, error: nil

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

@@ -1,13 +1,4 @@
-= @form.text_field :value,
-  id: @champ.input_id,
-  aria: { describedby: @champ.describedby_id },
-  placeholder: t(".placeholder"),
-  data: { controller: 'turbo-input', turbo_input_load_on_connect_value: @champ.prefilled? && @champ.value.present? && @champ.etablissement.blank?, turbo_input_url_value: champs_siret_path(@champ.id) },
-  required: @champ.required?,
-  pattern: "[0-9]{14}",
-  title: t(".title"),
-  class: "width-33-desktop",
-  maxlength: 14
+= @form.text_field(:value, input_opts(id: @champ.input_id, aria: { describedby: @champ.describedby_id }, placeholder: t(".placeholder"), data: { controller: 'turbo-input', turbo_input_load_on_connect_value: @champ.prefilled? && @champ.value.present? && @champ.etablissement.blank?, turbo_input_url_value: champs_siret_path(@champ.id) }, required: @champ.required?, pattern: "[0-9]{14}", title: t(".title"), class: "width-33-desktop", maxlength: 14))
 .spinner.right.hidden
 .siret-info{ id: dom_id(@champ, :siret_info) }
   - if @champ.etablissement.present?

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

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

app/components/editable_champ/textarea_component/textarea_component.en.yml

@@ -1,4 +1,3 @@
 en:
   remaining_characters: You have %{remaining_words} characters remaining.
   excess_characters: You have %{excess_words} characters too many.
-  recommended_size: The recommended maximum size is %{size} characters.

app/components/editable_champ/textarea_component/textarea_component.fr.yml

@@ -1,4 +1,3 @@
 fr:
   remaining_characters: Il vous reste %{remaining_words} caractères.
   excess_characters: Vous avez dépassé la taille conseillée de %{excess_words} caractères. Réduire le nombre de caractères.
-  recommended_size: La taille maximale conseillée est de %{size} caractères.

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

@@ -1,16 +1,9 @@
-%span.sr-only= t('.recommended_size', size: @champ.character_limit_base)
-
-~ @form.text_area :value,
-  id: @champ.input_id,
-  aria: { describedby: @champ.describedby_id },
-  rows: 6,
-  required: @champ.required?,
-  value: html_to_string(@champ.value)
+~ @form.text_area(:value, input_opts(id: @champ.input_id, aria: { describedby: @champ.describedby_id }, rows: 6, required: @champ.required?, value: html_to_string(@champ.value)))
 
 - if @champ.character_limit_info?
   %span.fr-icon-information-fill.fr-text-default--info.characters-count
     = t('.remaining_characters', remaining_words: @champ.remaining_characters)
 
 - if @champ.character_limit_warning?
-  %span.fr-icon-warning-fill.fr-text-default--warning.characters-count
+  %p.fr-icon-warning-fill.fr-text-default--warning.characters-count
     = t('.excess_characters', excess_words: @champ.excess_characters)