a11y(bloc-repetable.repetition): ajoute une repetition via un bouton et non un lien

This commit is contained in:
Martin 2023-03-31 08:12:57 +02:00 committed by mfo
parent 92d3f9c192
commit 8b6a7689fa
7 changed files with 23 additions and 3 deletions

View file

@ -0,0 +1,11 @@
# Display a form for adding a repetition row via a button, but since it might already nested within a form
# put this component before the actual form containing the editable champs
class EditableChamp::AddFormRepetitionRowComponent < ApplicationComponent
def self.form_id
ActionView::RecordIdentifier.dom_id(Champs::RepetitionChamp.new, :create)
end
def call
form_tag('/champs/repetition/:id', method: :post, data: { 'turbo-method': :post, turbo: true }, id: self.class.form_id) {}
end
end

View file

@ -0,0 +1,4 @@
---
en:
add: "Add an element to « %{libelle} »"
add_title: "Add an element to « %{libelle} »"

View file

@ -0,0 +1,4 @@
---
fr:
add: "Ajouter un élément pour « %{libelle} »"
add_title: Ajouter un élément pour « %{libelle} »

View file

@ -3,5 +3,5 @@
= render EditableChamp::RepetitionRowComponent.new(form: @form, champ: @champ, row: champs, seen_at: @seen_at) = render EditableChamp::RepetitionRowComponent.new(form: @form, champ: @champ, row: champs, seen_at: @seen_at)
.actions{ 'data-turbo': 'true' } .actions{ 'data-turbo': 'true' }
= link_to champs_repetition_path(@champ.id), data: { turbo_method: :post }, class: 'fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-add-circle-line fr-mb-3w' do = button_tag(name: "action", formaction: champs_repetition_path(@champ.id), class: "fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-add-circle-line fr-mb-3w", title: t(".add_title", libelle: @champ.libelle), form: EditableChamp::AddFormRepetitionRowComponent.form_id) do
Ajouter un élément pour « #{@champ.libelle} » = t(".add", libelle: @champ.libelle)

View file

@ -5,6 +5,5 @@
= render EditableChamp::EditableChampComponent.new form: form, champ: champ, seen_at: @seen_at = render EditableChamp::EditableChampComponent.new form: form, champ: champ, seen_at: @seen_at
.flex.row-reverse{ 'data-turbo': 'true' } .flex.row-reverse{ 'data-turbo': 'true' }
= button_tag(name: "action", formaction: champs_repetition_path(@champ.id, row_id: @row.first.row_id), class: "fr-btn fr-btn--sm fr-btn--tertiary fr-text-action-high--red-marianne", title: t(".delete_title", row_number: @champ.rows.find_index(@row)), form: EditableChamp::DeleteFormRepetitionRowComponent.form_id) do = button_tag(name: "action", formaction: champs_repetition_path(@champ.id, row_id: @row.first.row_id), class: "fr-btn fr-btn--sm fr-btn--tertiary fr-text-action-high--red-marianne", title: t(".delete_title", row_number: @champ.rows.find_index(@row)), form: EditableChamp::DeleteFormRepetitionRowComponent.form_id) do
= t(".delete") = t(".delete")

View file

@ -10,6 +10,7 @@
- else - else
- form_options = { url: modifier_dossier_url(dossier), method: :patch } - form_options = { url: modifier_dossier_url(dossier), method: :patch }
= render EditableChamp::DeleteFormRepetitionRowComponent.new = render EditableChamp::DeleteFormRepetitionRowComponent.new
= render EditableChamp::AddFormRepetitionRowComponent.new
= render Attachment::DeleteFormComponent.new = render Attachment::DeleteFormComponent.new
= form_for dossier, form_options.merge({ html: { id: 'dossier-edit-form', class: 'form', multipart: true, novalidate: 'novalidate' } }) do |f| = form_for dossier, form_options.merge({ html: { id: 'dossier-edit-form', class: 'form', multipart: true, novalidate: 'novalidate' } }) do |f|

View file

@ -1,6 +1,7 @@
.container.dossier-edit .container.dossier-edit
- if dossier.champs_private.present? - if dossier.champs_private.present?
%section.counter-start-header-section %section.counter-start-header-section
= render EditableChamp::AddFormRepetitionRowComponent.new
= render EditableChamp::DeleteFormRepetitionRowComponent.new = render EditableChamp::DeleteFormRepetitionRowComponent.new
= render Attachment::DeleteFormComponent.new = render Attachment::DeleteFormComponent.new
= form_for dossier, url: annotations_instructeur_dossier_path(dossier.procedure, dossier), html: { class: 'form', multipart: true } do |f| = form_for dossier, url: annotations_instructeur_dossier_path(dossier.procedure, dossier), html: { class: 'form', multipart: true } do |f|