Merge pull request #9107 from demarches-simplifiees/remove-previsualisation-from-admin-procedure-creation

[Refonte page accueil demarche] Formulaire de création admin full page - plus de prévisualisation
This commit is contained in:
Lisa Durand 2023-06-05 12:10:31 +00:00 committed by GitHub
commit 968f05f648
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 73 additions and 148 deletions

View file

@ -3,15 +3,6 @@
@import "placeholders";
.form {
h1 {
text-align: center;
margin-bottom: 20px;
@media (max-width: $two-columns-breakpoint) {
font-size: 26px;
}
}
hr {
width: 100%;
height: 0;
@ -649,6 +640,14 @@ textarea::placeholder {
color: $dark-grey;
}
.send-wrapper--with-border-top {
border-top: 2px solid rgba(0, 0, 145, 1);
.sticky-action-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
bottom: 0;
padding: $default-padding 0;
background-color: $white;
z-index: 2;
}

View file

@ -69,8 +69,6 @@
.procedure-form__actions {
display: flex;
margin-left: -$default-padding;
margin-right: -$default-padding;
padding: $default-spacer $default-padding;
background: $light-grey;
border-top: 1px solid $border-grey;

View file

@ -12,7 +12,6 @@ import '../shared/toggle-target';
import { registerControllers } from '../shared/stimulus-loader';
import '../new_design/form-validation';
import '../new_design/procedure-form';
import { toggleCondidentielExplanation } from '../new_design/avis';
import {

View file

@ -1,26 +0,0 @@
import { delegate } from '@utils';
function syncInputToElement(fromSelector, toSelector) {
const fromElement = document.querySelector(fromSelector);
const toElement = document.querySelector(toSelector);
if (toElement && fromElement) {
toElement.innerText = fromElement.value;
}
}
function syncFormToPreview() {
syncInputToElement('#procedure_libelle', '.procedure-title');
syncInputToElement('#procedure_description', '.js_description p');
syncInputToElement(
'#procedure_description_target_audience',
'.js_description_target_audience p'
);
}
delegate('input', '.procedure-form #procedure_libelle', syncFormToPreview);
delegate('input', '.procedure-form #procedure_description', syncFormToPreview);
delegate(
'input',
'.procedure-form #procedure_description_target_audience',
syncFormToPreview
);

View file

@ -1,5 +1,5 @@
#breadcrumbs.sub-header
.container.flex.justify-between.align-baseline.column
.fr-container.flex.justify-between.align-baseline.column
%nav.fr-breadcrumb.mt-0{ role: "navigation", aria: { label: t('you_are_here', scope: [:layouts, :breadcrumb]) } }
%button.fr-breadcrumb__button{ aria: { expanded: "false", controls: "breadcrumb-1" } }
= t('show', scope: [:layouts, :breadcrumb])

View file

@ -21,7 +21,9 @@
= t(:notice, scope: [:administrateurs, :duree_conservation_dossiers_dans_ds])
- if f.object.duree_conservation_dossiers_dans_ds.to_i < Procedure::NEW_MAX_DUREE_CONSERVATION
= t(:new_duration_constraint, scope: [:administrateurs, :duree_conservation_dossiers_dans_ds], new_duration_in_month: f.object.max_duree_conservation_dossiers_dans_ds)
= f.number_field :duree_conservation_dossiers_dans_ds, { class: 'fr-input', placeholder: '6', required: true, max: f.object.max_duree_conservation_dossiers_dans_ds }
.fr-input-group
= f.number_field :duree_conservation_dossiers_dans_ds, { class: 'fr-input', placeholder: '6', required: true, max: f.object.max_duree_conservation_dossiers_dans_ds }
- if @procedure.created_at.present?
= render Dsfr::InputComponent.new(form: f, attribute: :lien_site_web, input_type: :text_field, opts: {}, required: false)
@ -89,11 +91,11 @@
%p.notice
En choisissant cette option, lusager devra renseigner son n° SIRET.<br>Grâce à lAPI Entreprise, les informations sur la personne morale (raison sociale, adresse du siège, etc.) seront automatiquement renseignées.
%p.explication
%p
Si votre démarche sadresse indifféremment à une personne morale ou un particulier, choisissez l'option « Particuliers ». Vous pourrez ajouter un champ SIRET directement dans le formulaire.
%h3.header-subsection Ajouter des tags
%p.explication Les tags sont des mots ou des expressions que vous attribuez aux démarches pour décrire leur contenu et pour les retrouver. Les tags sont partagés avec la communauté, ce qui vous permet de voir les tags attribués aux démarches créées par les autres administrateurs.
%p Les tags sont des mots ou des expressions que vous attribuez aux démarches pour décrire leur contenu et pour les retrouver. Les tags sont partagés avec la communauté, ce qui vous permet de voir les tags attribués aux démarches créées par les autres administrateurs.
= hidden_field_tag 'procedure[tags]', JSON.generate(@procedure.tags)
= react_component("ComboMultiple",
id: "procedure_tags_combo",
@ -101,7 +103,7 @@
selected: @procedure.tags,
disabled: [],
label: 'Tags',
group: '.procedure-form__column--form',
group: '.procedure_tags_combo',
name: 'tags',
describedby: 'procedure-tags',
acceptNewValues: true)

View file

@ -4,25 +4,21 @@
locals: { steps: [['Démarches', admin_procedures_back_path(@procedure)],
[@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)],
['Description']] }
.procedure-form
.procedure-form__columns.container
= render NestedForms::FormOwnerComponent.new
= form_for @procedure,
url: url_for({ controller: 'administrateurs/procedures', action: :update, id: @procedure.id }),
html: { class: 'form procedure-form__column--form',
multipart: true } do |f|
%h1.page-title Description
= render NestedForms::FormOwnerComponent.new
= form_for @procedure,
url: url_for({ controller: 'administrateurs/procedures', action: :update, id: @procedure.id }),
html: { class: 'form procedure_tags_combo', multipart: true } do |f|
.fr-container
.fr-grid-row
.fr-col-12.fr-col-offset-sm-2.fr-col-sm-8
%h1.fr-h2 Description
= render partial: 'administrateurs/procedures/informations', locals: { f: f }
= render partial: 'administrateurs/procedures/informations', locals: { f: f }
.procedure-form__actions.sticky--bottom
.actions-right
= link_to 'Annuler', admin_procedure_path(id: @procedure), class: 'fr-btn fr-btn--secondary fr-mr-2w', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'}
= f.button 'Enregistrer', class: 'fr-btn'
.procedure-form__column--preview
.procedure-form__preview.sticky--top
%h3.procedure-form__preview-title Aperçu
.procedure-preview
= render partial: 'shared/procedure_description', locals: { procedure: @procedure }
.sticky-action-footer
.fr-container
.fr-grid-row
.fr-col-12.fr-col-offset-sm-2.fr-col-sm-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 ?'}

View file

@ -4,25 +4,20 @@
locals: { steps: [['Démarches', admin_procedures_back_path(@procedure)],
['Nouvelle']] }
.procedure-form
.procedure-form__columns.container
= render NestedForms::FormOwnerComponent.new
= form_for @procedure,
url: url_for({ controller: 'administrateurs/procedures', action: :create, id: @procedure.id }),
html: { class: 'form procedure-form__column--form', multipart: true } do |f|
= render NestedForms::FormOwnerComponent.new
= form_for @procedure,
url: url_for({ controller: 'administrateurs/procedures', action: :create, id: @procedure.id }),
html: { class: 'form procedure_tags_combo', multipart: true } do |f|
.fr-container
.fr-grid-row
.fr-col-12.fr-col-offset-sm-2.fr-col-sm-8
%h1.fr-h2 Nouvelle démarche
%h1.page-title Nouvelle démarche
= render partial: 'administrateurs/procedures/informations', locals: { f: f }
= render partial: 'administrateurs/procedures/informations', locals: { f: f }
.procedure-form__actions.sticky--bottom
.actions-right
= link_to 'Annuler', admin_procedures_path, class: 'fr-btn fr-btn--secondary fr-mr-2w', data: { confirm: 'Êtes-vous sûr de vouloir annuler la création de cette démarche ?'}
= f.button 'Créer la démarche', class: 'fr-btn'
.procedure-form__column--preview
.procedure-form__preview.sticky--top
%h3.procedure-form__preview-title Aperçu
.procedure-preview
= render partial: 'shared/procedure_description', locals: { procedure: @procedure }
.sticky-action-footer
.fr-container
.fr-grid-row
.fr-col-12.fr-col-offset-sm-2.fr-col-sm-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 ?'}

View file

@ -1,49 +1,37 @@
= render partial: 'administrateurs/breadcrumbs',
locals: { steps: [['Démarches', admin_procedures_back_path(@procedure)],
["#{@procedure.libelle.truncate_words(10)}"]],
metadatas: true }
locals: { steps: [['Démarches', admin_procedures_back_path(@procedure)],
["#{@procedure.libelle.truncate_words(10)}"]],
metadatas: true }
.container.procedure-admin-container
- if @procedure.draft_revision.valid?
- if !@procedure.brouillon?
= link_to admin_procedure_archives_path(@procedure), class: 'button', id: "archive-procedure" do
%span.icon.download
Télécharger
.fr-container.procedure-admin-container
%ul.fr-btns-group.fr-btns-group--inline-sm.fr-btns-group--icon-left
- if @procedure.draft_revision.valid?
- if !@procedure.brouillon?
= link_to 'Télécharger', admin_procedure_archives_path(@procedure), class: 'fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-download-line', id: "archive-procedure"
= link_to commencer_dossier_vide_for_revision_path(@procedure.active_revision), target: "_blank", rel: "noopener", class: 'button', id: "pdf-procedure" do
%span.icon.printer
PDF
= link_to 'PDF', commencer_dossier_vide_for_revision_path(@procedure.active_revision), target: "_blank", rel: "noopener", class: 'fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-printer-line', id: "pdf-procedure"
= link_to apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'button', id: "preview-procedure" do
%span.icon.preview
Prévisualiser
- if @procedure.brouillon? || @procedure.draft_changed?
= link_to 'Tester la démarche', sanitize_url(@procedure_lien_test), target: :blank, rel: :noopener, class: 'fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-edit-line'
- if @procedure.brouillon? || @procedure.draft_changed?
= link_to sanitize_url(@procedure_lien_test), target: :blank, rel: :noopener, class: 'button' do
%span.icon.in-progress
Tester
- if @procedure.publiee? || @procedure.brouillon?
= link_to 'Envoyer une copie', admin_procedure_transfert_path(@procedure), class: 'fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-arrow-right-up-line'
- if @procedure.publiee? || @procedure.brouillon?
= link_to admin_procedure_transfert_path(@procedure), class: 'button' do
%span.icon.reply
Envoyer une copie
- if !@procedure.publiee? && !@procedure.close? && !@procedure.depubliee?
= link_to 'Publier', admin_procedure_publication_path(@procedure), class: 'fr-btn fr-btn--primary fr-btn--icon-left fr-icon-success-line', id: 'publish-procedure-link', data: { disable_with: "Publication..." }
- if !@procedure.publiee? && !@procedure.close? && !@procedure.depubliee?
= link_to 'Publier', admin_procedure_publication_path(@procedure), class: 'button primary', id: 'publish-procedure-link', data: { disable_with: "Publication..." }
- if (@procedure.close? || @procedure.depubliee?) && !@procedure.draft_changed?
= link_to 'Réactiver', admin_procedure_publication_path(@procedure), class: 'fr-btn fr-btn--primary fr-btn--icon-left fr-icon-success-line', id: 'publish-procedure-link', data: { disable_with: "Publication..." }
- if (@procedure.close? || @procedure.depubliee?) && !@procedure.draft_changed?
= link_to 'Réactiver', admin_procedure_publication_path(@procedure), class: 'button primary', id: 'publish-procedure-link', data: { disable_with: "Publication..." }
- if @procedure.locked? && !@procedure.close?
= link_to 'Clore', admin_procedure_archive_path(procedure_id: @procedure.id), method: :put, class: 'fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-archive-line', id: "close-procedure-link", data: { confirm: "Voulez-vous vraiment clore la démarche ? \nLes dossiers en cours pourront être instruits, mais aucun nouveau dossier ne pourra plus être déposé.", disable_with: "Archivage..."}
- if @procedure.locked? && !@procedure.close?
= link_to admin_procedure_archive_path(procedure_id: @procedure.id), method: :put, class: 'button', id: "close-procedure-link", data: { confirm: "Voulez-vous vraiment clore la démarche ? \nLes dossiers en cours pourront être instruits, mais aucun nouveau dossier ne pourra plus être déposé.", disable_with: "Archivage..."} do
%span.icon.archive
Clore
.container
.fr-container
= render TypesDeChampEditor::ErrorsSummary.new(revision: @procedure.draft_revision)
- if @procedure.draft_changed?
.container
.fr-container
.card.featured
.card-title
= t(:has_changes, scope: [:administrateurs, :revision_changes])
@ -54,7 +42,7 @@
- if !@procedure.procedure_expires_when_termine_enabled?
= render partial: 'administrateurs/procedures/suggest_expires_when_termine', locals: { procedure: @procedure }
.container
.fr-container
%h2.fr-mt-5w.fr-mb-3w.fr-h1 Indispensable avant publication
.fr-grid-row.fr-grid-row--gutters
= render Procedure::Card::PresentationComponent.new(procedure: @procedure)

View file

@ -71,7 +71,6 @@
- if procedure_id.present?
= hidden_field_tag :procedure_id, procedure_id
.send-wrapper.justify-content--space-between.send-wrapper--with-border-top.my-0.py-3
.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"
= f.submit "Enregistrer", class: "fr-btn"

View file

@ -5,7 +5,7 @@
= image_tag procedure.logo_url, alt: procedure_logo_alt
- if procedure.euro_flag
= image_tag("flag_of_europe.svg", id: 'euro_flag', class: (!procedure.euro_flag ? "hidden" : ""))
%h1.procedure-title.fr-h2
%h1.fr-h2
= procedure.libelle
- if procedure.persisted? && procedure.estimated_duration_visible?

View file

@ -41,14 +41,6 @@ describe 'Creating a new procedure', js: true do
add_champ
expect(page).to have_selector('.type-de-champ', count: 1)
click_on Procedure.last.libelle
preview_window = window_opened_by { find('#preview-procedure').click }
within_window(preview_window) do
expect(page).to have_current_path(apercu_admin_procedure_path(Procedure.last))
expect(page).to have_field('libelle de champ')
end
end
scenario 'a warning is displayed when creating an invalid procedure' do

View file

@ -44,7 +44,6 @@ describe 'Publishing a procedure', js: true do
click_on 'Publier'
expect(page).to have_text('Démarche publiée')
expect(page).to have_selector('#preview-procedure')
end
context 'when the procedure has invalid champs' do
@ -93,7 +92,6 @@ describe 'Publishing a procedure', js: true do
click_on 'publish'
expect(page).to have_text('Démarche publiée')
expect(page).to have_selector('#preview-procedure')
end
end
@ -125,7 +123,6 @@ describe 'Publishing a procedure', js: true do
find('#publish').click
expect(page).to have_text('Démarche publiée')
expect(page).to have_selector('#preview-procedure')
end
end

View file

@ -32,10 +32,6 @@ describe 'Administrateurs can edit procedures', js: true do
expect(page).to have_field('procedure_libelle', with: procedure.libelle)
fill_in('procedure_libelle', with: 'Ma petite démarche')
within('.procedure-form__preview') do
expect(page).to have_content('Ma petite démarche')
end
click_on 'Enregistrer'
expect(page).to have_selector('.fr-breadcrumb li', text: 'Ma petite démarche')

View file

@ -1,15 +1,5 @@
RSpec.describe 'administrateurs/procedures/edit', type: :view do
let(:logo) { fixture_file_upload('spec/fixtures/files/logo_test_procedure.png', 'image/png') }
let(:procedure) { create(:procedure, logo: logo, lien_site_web: 'http://some.website') }
context 'when procedure logo is present' do
it 'display on the page' do
assign(:procedure, procedure)
render
expect(rendered).to have_selector('.procedure-logos')
end
end
let(:procedure) { create(:procedure, lien_site_web: 'http://some.website') }
context 'when opendata is enabled' do
it 'asks for opendata' do