remove previsualisation from procedure creation form

This commit is contained in:
Lisa Durand 2023-05-31 11:33:59 +02:00
parent 8de63dfdd0
commit c6f13f63b5
9 changed files with 47 additions and 86 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,13 @@ 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;
}

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

@ -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",

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', 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', 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

@ -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?