DGNum/demarches-normaliennes
13
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Merge pull request #9603 from demarches-simplifiees/design-admin-form-move-button-to-sticky-footer

Browse source 
[admin] Rendre les boutons d'actions de la page "création du formulaire" et "annotations" plus visibles
This commit is contained in:
Lisa Durand 2023-10-23 09:13:47 +00:00 • committed by GitHub
commit a6842e8484
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 116 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/assets/stylesheets/forms.scss
View file

@ -628,14 +628,13 @@ textarea::placeholder {
color: $dark-grey;
}
.sticky-action-footer {
.fixed-footer {
border-top: 2px solid $blue-france-500;
position: sticky;
// scss-lint:disable VendorPrefix
position: -webkit-sticky; // This is needed on Safari (tested on 12.1)
// scss-lint:enable VendorPrefix
position: fixed;
bottom: 0;
padding: $default-padding 0;
left: 0;
right: 0;
padding-top: $default-padding;
background-color: $white;
z-index: 2;
}

12
app/assets/stylesheets/procedure_champs_editor.scss
View file

@ -4,7 +4,6 @@
.types-de-champ-editor {
> .types-de-champ-block {
padding-bottom: 50px;
padding-left: 0;
.types-de-champ-errors {
@ -76,10 +75,6 @@
display: none;
}
&.last .type-de-champ-add-button.root {
display: none;
}
.head {
select {
margin-bottom: 0px;
@ -125,13 +120,6 @@
}
}
.bottom-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.buttons {
display: flex;
justify-content: space-between;

14
app/components/types_de_champ_editor/editor_component/editor_component.html.haml
View file

@ -1,8 +1,6 @@
.types-de-champ-editor.editor-root{ 'data-turbo': 'true', id: dom_id(@revision, :types_de_champ_editor) }
= render TypesDeChampEditor::ErrorsSummary.new(revision: @revision)
= render TypesDeChampEditor::BlockComponent.new(block: @revision, coordinates: coordinates)
.bottom-container
.fr-container
.buttons
= render TypesDeChampEditor::AddChampButtonComponent.new(revision: @revision, is_annotation: annotations?)
= render TypesDeChampEditor::EstimatedFillDurationComponent.new(revision: @revision, is_annotation: annotations?)
.fr-container.fr-pb-12w{ 'data-turbo': 'true', id: dom_id(@revision, :types_de_champ_editor) }
.types-de-champ-editor.editor-root
= render TypesDeChampEditor::ErrorsSummary.new(revision: @revision)
= render TypesDeChampEditor::BlockComponent.new(block: @revision, coordinates: coordinates)
#empty-coordinates{ hidden: coordinates.present? }
= render TypesDeChampEditor::AddChampButtonComponent.new(revision: @revision, is_annotation: annotations?)

5
app/views/administrateurs/_breadcrumbs.html.haml
View file

@ -14,11 +14,6 @@
- else
%li= link_to step[0], step[1], class: 'fr-breadcrumb__link'
- if defined?(preview) && preview
.mb-2
= link_to t('preview', scope: [:layouts, :breadcrumb]), apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'fr-btn fr-btn--secondary'
= link_to t('continue', scope: [:layouts, :breadcrumb]), admin_procedure_path(@procedure), title: t('continue_title', scope: [:layouts, :breadcrumb]), class: 'fr-btn fr-ml-2w fr-btn--icon-right fr-icon-arrow-right-fill'
- if defined?(metadatas)
.metadatas.pb-3
%h1.fr-h6.fr-mb-1w

13
app/views/administrateurs/procedures/annotations.html.haml
View file

@ -3,8 +3,17 @@
[@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)],
['Configuration des annotations privées']], preview: true }
.container
.fr-container
%h1 Configuration des annotations privées
%br
= render NestedForms::FormOwnerComponent.new
= render TypesDeChampEditor::EditorComponent.new(revision: @procedure.draft_revision, is_annotation: true)
= render TypesDeChampEditor::EditorComponent.new(revision: @procedure.draft_revision, is_annotation: true)
.fixed-footer
.fr-container
%ul.fr-btns-group.fr-btns-group--inline-md
%li
= link_to t('continue_annotations', scope: [:layouts, :breadcrumb]), admin_procedure_path(@procedure), title: t('continue_annotations', scope: [:layouts, :breadcrumb]), class: 'fr-btn'
- if @procedure.draft_revision.revision_types_de_champ_private.count > 0
%li
= link_to t('preview_annotations', scope: [:layouts, :breadcrumb]), apercu_admin_procedure_path(@procedure, params: {tab: 'annotations-privees'}), target: "_blank", rel: "noopener", class: 'fr-btn fr-btn--secondary'

14
app/views/administrateurs/procedures/champs.html.haml
View file

@ -6,4 +6,16 @@
.fr-container
%h1 Configuration des champs
= render NestedForms::FormOwnerComponent.new
= render TypesDeChampEditor::EditorComponent.new(revision: @procedure.draft_revision)
= render TypesDeChampEditor::EditorComponent.new(revision: @procedure.draft_revision)
.fixed-footer
.fr-container
.flex
%ul.fr-btns-group.fr-btns-group--inline-md
%li
= link_to t('continue', scope: [:layouts, :breadcrumb]), admin_procedure_path(@procedure), title: t('continue_title', scope: [:layouts, :breadcrumb]), class: 'fr-btn'
- if @procedure.draft_revision.revision_types_de_champ_public.count > 0
%li
= link_to t('preview', scope: [:layouts, :breadcrumb]), apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'fr-btn fr-btn--secondary'
.fr-ml-auto
= render TypesDeChampEditor::EstimatedFillDurationComponent.new(revision: @procedure.draft_revision, is_annotation: false)

9
app/views/administrateurs/procedures/edit.html.haml
View file

@ -16,9 +16,12 @@
= render partial: 'administrateurs/procedures/informations', locals: { f: f }
.sticky-action-footer
.fixed-footer
.fr-container
.fr-grid-row
.fr-col-12.fr-col-offset-md-2.fr-col-md-8
= f.button 'Enregistrer', class: 'fr-btn fr-mr-2w'
= link_to 'Annuler', admin_procedure_path(id: @procedure), class: 'fr-btn fr-btn--secondary', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'}
%ul.fr-btns-group.fr-btns-group--inline-md
%li
= f.button 'Enregistrer', class: 'fr-btn'
%li
= link_to 'Annuler', admin_procedure_path(id: @procedure), class: 'fr-btn fr-btn--secondary', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'}

9
app/views/administrateurs/procedures/new.html.haml
View file

@ -15,9 +15,12 @@
= render partial: 'administrateurs/procedures/informations', locals: { f: f }
.sticky-action-footer
.fixed-footer
.fr-container
.fr-grid-row
.fr-col-12.fr-col-offset-md-2.fr-col-md-8
= f.button 'Créer la démarche', class: 'fr-btn fr-mr-2w'
= link_to 'Annuler', admin_procedures_path, class: 'fr-btn fr-btn--secondary', data: { confirm: 'Êtes-vous sûr de vouloir annuler la création de cette démarche ?'}
%ul.fr-btns-group.fr-btns-group--inline-md
%li
= f.button 'Créer la démarche', class: 'fr-btn'
%li
= link_to 'Annuler', admin_procedures_path, class: 'fr-btn fr-btn--secondary', data: { confirm: 'Êtes-vous sûr de vouloir annuler la création de cette démarche ?'}

10
app/views/administrateurs/services/_form.html.haml
View file

@ -34,6 +34,10 @@
- if procedure_id.present?
= hidden_field_tag :procedure_id, procedure_id
.sticky-action-footer
= f.submit "Enregistrer", class: "fr-btn fr-mr-2w"
= link_to "Annuler et revenir à la page de suivi", admin_procedure_path(id: @procedure.id), class: "fr-btn fr-btn--secondary"
.fixed-footer
.fr-container
%ul.fr-btns-group.fr-btns-group--inline-md
%li
= f.submit "Enregistrer", class: "fr-btn"
%li
= link_to "Annuler et revenir à la page de suivi", admin_procedure_path(id: @procedure.id), class: "fr-btn fr-btn--secondary"

5
app/views/administrateurs/types_de_champ/_insert.turbo_stream.haml
View file

@ -9,6 +9,9 @@
- if @destroyed.present?
= turbo_stream.remove dom_id(@destroyed, :type_de_champ_editor)
- if @destroyed.siblings.empty?
= turbo_stream.show('empty-coordinates')
- if @created.present?
- if @created.coordinate.previous_sibling.present?
= turbo_stream.after dom_id(@created.coordinate.previous_sibling, :type_de_champ_editor) do
@ -17,6 +20,8 @@
= turbo_stream.prepend dom_id(@created.coordinate.block, :types_de_champ_editor_block) do
- render @created
= turbo_stream.hide('empty-coordinates')
- @morphed&.each do |champ_component|
= turbo_stream.replace dom_id(champ_component.coordinate, :type_de_champ_editor) do
- render champ_component

24
app/views/instructeurs/contact_informations/_form.html.haml
View file

@ -28,12 +28,18 @@
- if procedure_id.present?
= hidden_field_tag :procedure_id, procedure_id
.sticky-action-footer
= f.submit "Enregistrer", class: "fr-btn fr-mr-2w"
= link_to "Annuler", instructeur_groupe_path(@groupe_instructeur, procedure_id: procedure_id), class: "fr-btn fr-btn--secondary"
- if [ "edit", "update"].include? params[:action]
= link_to 'Supprimer',
instructeur_groupe_contact_information_path(procedure_id: @procedure.id, groupe_id: @groupe_instructeur.id),
method: :delete,
data: { confirm: "Confirmez vous la suppression de ces informations de contact ?" },
class: 'fr-btn fr-btn--secondary'
.fixed-footer
.fr-container
%ul.fr-btns-group.fr-btns-group--inline-md
%li
= f.submit "Enregistrer", class: "fr-btn"
%li
= link_to "Annuler", instructeur_groupe_path(@groupe_instructeur, procedure_id: procedure_id), class: "fr-btn fr-btn--secondary"
- if [ "edit", "update"].include? params[:action]
%li
= link_to 'Supprimer',
instructeur_groupe_contact_information_path(procedure_id: @procedure.id, groupe_id: @groupe_instructeur.id),
method: :delete,
data: { confirm: "Confirmez vous la suppression de ces informations de contact ?" },
class: 'fr-btn fr-btn--secondary'

4
config/locales/views/layouts/_breadcrumb.en.yml
View file

@ -5,7 +5,9 @@ en:
you_are_here: "You are here"
show: Show breadcrumb
preview: "Preview the form"
continue: "Continue"
preview_annotations: "Preview annotations"
continue: "Validate form"
continue_annotations: "Validate annotations"
continue_title: "You can comeback using this link"
since: "since %{date}"
closed: "Closed"

4
config/locales/views/layouts/_breadcrumb.fr.yml
View file

@ -5,7 +5,9 @@ fr:
you_are_here: "Vous êtes ici"
show: "Voir le fil d’Ariane"
preview: "Prévisualiser le formulaire"
continue: "Continuer"
preview_annotations: "Prévisualiser les annotations"
continue: "Valider le formulaire"
continue_annotations: "Valider les annotations"
continue_title: "Vous pourrez revenir ici par la suite"
since: "depuis le %{date}"
closed: "Close"

19
spec/support/system_helpers.rb
View file

@ -70,21 +70,14 @@ module SystemHelpers
end
# Add a new type de champ in the procedure editor
def add_champ(options = {})
add_champs(**options)
def add_champ
click_on 'Ajouter un champ'
end
# Add several new type de champ in the procedure editor
def add_champs(count: 1, remove_flash_message: false)
within '.buttons' do
count.times { click_on 'Ajouter un champ' }
end
if remove_flash_message
expect(page).to have_button('Ajouter un champ', disabled: false)
expect(page).to have_content('Formulaire enregistré')
execute_script("document.querySelector('#flash_message').remove();")
end
def remove_flash_message
expect(page).to have_button('Ajouter un champ', disabled: false)
expect(page).to have_content('Formulaire enregistré')
execute_script("document.querySelector('#flash_message').remove();")
end
def blur

10
spec/system/administrateurs/procedure_creation_spec.rb
View file

@ -33,13 +33,16 @@ describe 'Creating a new procedure', js: true, retry: 3 do
scenario 'an admin can add types de champs' do
visit champs_admin_procedure_path(procedure)
add_champ(remove_flash_message: true)
add_champ
remove_flash_message
fill_in 'Libellé du champ', with: 'libelle de champ'
blur
expect(page).to have_content('Formulaire enregistré')
expect(page).to have_selector('select > optgroup', count: 8)
add_champ
within(find('.type-de-champ-add-button', match: :first)) {
add_champ
}
expect(page).to have_selector('.type-de-champ', count: 1)
end
@ -47,7 +50,8 @@ describe 'Creating a new procedure', js: true, retry: 3 do
visit champs_admin_procedure_path(procedure)
# Add an empty repetition type de champ
add_champ(remove_flash_message: true)
add_champ
remove_flash_message
select('Bloc répétable', from: 'Type de champ')
fill_in 'Libellé du champ', with: 'libellé de champ'
blur

33
spec/system/administrateurs/types_de_champ_spec.rb
View file

@ -29,7 +29,13 @@ describe 'As an administrateur I can edit types de champ', js: true, retry: 3 do
scenario "adding multiple champs" do
# Champs are created when clicking the 'Add field' button
add_champs(count: 3)
add_champ
within(find('.type-de-champ-add-button', match: :first)) {
add_champ
}
within(find('.type-de-champ-add-button', match: :first)) {
add_champ
}
# Champs are automatically saved
expect(page).to have_button('Ajouter un champ', disabled: false)
@ -64,7 +70,8 @@ describe 'As an administrateur I can edit types de champ', js: true, retry: 3 do
end
scenario "removing champs" do
add_champ(remove_flash_message: true)
add_champ
remove_flash_message
fill_in 'Libellé du champ', with: 'libellé de champ'
expect(page).to have_content('Formulaire enregistré')
@ -82,7 +89,8 @@ describe 'As an administrateur I can edit types de champ', js: true, retry: 3 do
end
scenario "adding an invalid champ" do
add_champ(remove_flash_message: true)
add_champ
remove_flash_message
fill_in 'Libellé du champ', with: ''
fill_in 'Description du champ (optionnel)', with: 'description du champ'
@ -93,7 +101,8 @@ describe 'As an administrateur I can edit types de champ', js: true, retry: 3 do
end
scenario "adding a repetition champ" do
add_champ(remove_flash_message: true)
add_champ
remove_flash_message
select('Bloc répétable', from: 'Type de champ')
fill_in 'Libellé du champ', with: 'libellé de champ'
@ -110,9 +119,7 @@ describe 'As an administrateur I can edit types de champ', js: true, retry: 3 do
expect(page).to have_content('Formulaire enregistré')
expect(page).to have_content('Supprimer', count: 2)
within '.buttons' do
click_on 'Ajouter un champ'
end
page.all('.fr-icon-add-line')[2].click
within '.type-de-champ:nth-child(2)' do
select('Bloc répétable', from: 'Type de champ')
@ -123,7 +130,8 @@ describe 'As an administrateur I can edit types de champ', js: true, retry: 3 do
end
scenario "adding a carte champ" do
add_champ(remove_flash_message: true)
add_champ
remove_flash_message
select('Carte', from: 'Type de champ')
fill_in 'Libellé du champ', with: 'Libellé de champ carte', fill_options: { clear: :backspace }
@ -133,6 +141,7 @@ describe 'As an administrateur I can edit types de champ', js: true, retry: 3 do
wait_until { procedure.active_revision.types_de_champ_public.first.libelle == 'Libellé de champ carte' }
expect(page).to have_content('Formulaire enregistré')
page.refresh
preview_window = window_opened_by { click_on 'Prévisualiser le formulaire' }
within_window(preview_window) do
expect(page).to have_content('Libellé de champ carte')
@ -143,7 +152,8 @@ describe 'As an administrateur I can edit types de champ', js: true, retry: 3 do
end
scenario "adding a dropdown champ" do
add_champ(remove_flash_message: true)
add_champ
remove_flash_message
select('Choix simple', from: 'Type de champ')
fill_in 'Libellé du champ', with: 'Libellé de champ menu déroulant', fill_options: { clear: :backspace }
@ -203,7 +213,10 @@ describe 'As an administrateur I can edit types de champ', js: true, retry: 3 do
first_header = procedure.active_revision.types_de_champ_public.first
select('Titre de niveau 1', from: dom_id(first_header, :header_section_level))
add_champ
within(find('.type-de-champ-add-button', match: :first)) {
add_champ
}
wait_until { procedure.reload.active_revision.types_de_champ_public.count == 2 }
second_header = procedure.active_revision.types_de_champ_public.last
select('Titre de section', from: dom_id(second_header, :type_champ))