new-administateur/attestation_templates views

app/assets/stylesheets/attestation_template_edit.scss

@@ -1,3 +1,4 @@
+
 #attestation-template-edit {
   .notice {
     margin-bottom: 30px;

app/assets/stylesheets/new_design/attestation_template_edit.scss

@@ -0,0 +1,56 @@
+@import "colors";
+@import "constants";
+
+#attestation-template-edit {
+  .text-active {
+    color: $green;
+  }
+
+  .text-inactive {
+    color: $grey;
+  }
+}
+
+#tags-table {
+  margin-top: -20px;
+  margin-bottom: 40px;
+
+  .add-tag-title {
+    font-size: 18px;
+    margin-bottom: 16px;
+  }
+
+  .head {
+    padding: 10px 0px;
+    font-weight: bold;
+    display: flex;
+  }
+
+  .items {
+    max-height: 210px;
+    overflow-y: auto;
+    border-bottom: 1px solid $border-grey;
+  }
+
+  .item {
+    display: flex;
+    padding: 10px 0;
+    border-bottom: solid 1px $border-grey;
+
+    .tag {
+      font-weight: bold;
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .tag {
+    width: 35%;
+  }
+
+  .description {
+    width: 65%;
+  }
+}

app/assets/stylesheets/new_design/buttons.scss

@@ -317,4 +317,3 @@
 .link {
   color: $blue;
 }
-

app/assets/stylesheets/new_design/layouts.scss

@@ -3,7 +3,7 @@
 @import "constants";
 
 .two-columns {
-  background-color: #FFFFFF;
+  background-color: $white;
 
   @media (min-width: $two-columns-breakpoint) {
     background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 50%, $light-grey 50%, $light-grey 100%);
@@ -68,4 +68,3 @@
   // scss-lint:enable VendorPrefix
   bottom: 0;
 }
-

app/assets/stylesheets/new_design/procedure_form.scss

@@ -51,6 +51,12 @@
   opacity: 0.5;
   margin-top: $default-spacer * 4;
   margin-bottom: $default-spacer * 8;
+
+  .notice {
+    color: $dark-grey;
+    font-size: 16px;
+    font-weight: normal;
+  }
 }
 
 .procedure-form__actions {
@@ -60,10 +66,20 @@
   padding: $default-spacer $default-padding;
   background: $light-grey;
   border-top: 1px solid $border-grey;
+  justify-content: space-between;
+  align-items: center;
 
   .button.send {
     margin-left: auto;
   }
+
+  .actions-left {
+    margin-right: auto;
+  }
+
+  .actions-right {
+    margin-left: auto;
+  }
 }
 
 .procedure-form__options-details {

app/views/new_administrateur/attestation_templates/_apercu.html.haml

@@ -0,0 +1 @@
+%iframe{ src: admin_procedure_attestation_template_preview_path, width: '100%', height: '650px' }

app/views/new_administrateur/attestation_templates/_informations.html.haml

@@ -0,0 +1,45 @@
+= f.label :title do
+  Titre de l'attestation
+  %span.mandatory *
+= f.text_field :title, class: 'form-control', placeholder: 'Titre de l‘attestation'
+
+= f.label :body do
+  Corps du document
+  %span.mandatory *
+= f.text_area :body, rows: '6', placeholder: 'Description de la démarche, destinataires, etc. ', class: 'form-control'
+
+#tags-table
+  %h2.add-tag-title
+    Insérer une balise
+  %p.notice
+    Copiez-collez les balises ci-dessous pour afficher automatiquement l’information souhaitée.
+  .head
+    .tag Balise
+    .description Description
+  .items
+    - @attestation_template.tags.each do |tag|
+      .item
+        %code.tag{ style: "white-space: pre-wrap;" }
+          = "--#{tag[:libelle]}--"
+        .description
+          = tag[:description]
+
+%h3.header-subsection Logo de l'attestation
+= image_upload_and_render f, @attestation_template.logo, false
+
+%p.notice
+  Formats acceptés : JPG / JPEG / PNG.
+  %br
+  Dimensions conseillées : au minimum 500 px de largeur ou de hauteur, poids maximum : 0,5 Mo.
+
+%h3.header-subsection Tampon de l'attestation
+= image_upload_and_render f, @attestation_template.signature, false
+
+%p.notice
+  Formats acceptés : JPG / JPEG / PNG.
+  %br
+  Dimensions conseillées : au minimum 500 px de largeur ou de hauteur, poids maximum : 0,5 Mo.
+
+= f.label :footer do
+  Pied de page
+= f.text_field :footer, class: 'form-control', maxlength: 190

app/views/new_administrateur/attestation_templates/edit.html.haml

@@ -0,0 +1,54 @@
+= render partial: 'new_administrateur/breadcrumbs',
+  locals: { steps: [link_to('Démarches', admin_procedures_path),
+                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    'Attestation'] }
+
+.procedure-form#attestation-template-edit
+  .procedure-form__columns.container
+    = form_for @attestation_template,
+      url: url_for({ controller: 'new_administrateur/attestation_templates', action: :update, id: @procedure.id }),
+      multipart: true,
+      html: { class: 'form procedure-form__column--form' } do |f|
+
+      %h1.page-title
+        Délivrance d‘attestation
+        - if @attestation_template.activated?
+          %span.text-active activée
+        - else
+          %span.text-inactive désactivée
+
+      - if @attestation_template.activated && @procedure.locked?
+        .card.warning
+          %p L’attestation ne peut plus être désactivée car la démarche est publiée.
+
+      %p.notice
+        L’attestation, si elle est activée, est émise au moment où un dossier est accepté.
+        %br
+        L’email d’accusé d’acceptation envoyé à l’usager comporte alors un lien vers l’attestation ;
+        celle-ci est également disponible au téléchargement depuis l’espace personnel de l’usager.
+
+      = render partial: 'new_administrateur/attestation_templates/informations', locals: { f: f }
+
+      .procedure-form__actions.sticky--bottom
+        .actions-left
+          -# Admins cannot disactivate the Attestation if it is activated and the procedure is published
+          - if !(@attestation_template.activated && @procedure.locked?)
+            %label.toggle-switch
+              = f.check_box :activated, class: 'toggle-switch-checkbox'
+              %span.toggle-switch-control.round
+              %span.toggle-switch-label.on Attestation activée
+              %span.toggle-switch-label.off Attestation désactivée
+
+        .actions-right
+          = link_to 'Annuler', edit_admin_procedure_attestation_template_path(id: @procedure), class: 'button', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'}
+          = f.button 'Enregistrer', class: 'button primary send'
+
+    .procedure-form__column--preview
+      .procedure-form__preview.sticky--top
+        %h3
+          .procedure-form__preview-title
+            Aperçu
+            .notice
+              Cet aperçu est mis à jour après chaque sauvegarde.
+        .procedure-preview
+          = render partial: 'new_administrateur/attestation_templates/apercu', locals: { procedure: @procedure }

app/views/new_administrateur/procedures/edit.html.haml

@@ -14,8 +14,9 @@
       = render partial: 'new_administrateur/procedures/informations', locals: { f: f }
 
       .procedure-form__actions.sticky--bottom
-        = link_to 'Annuler', admin_procedure_path(id: @procedure), class: 'button', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'}
+        .actions-right
-        = f.button 'Enregistrer', class: 'button primary send'
+          = link_to 'Annuler', admin_procedure_path(id: @procedure), class: 'button', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'}
+          = f.button 'Enregistrer', class: 'button primary send'
 
     .procedure-form__column--preview
       .procedure-form__preview.sticky--top

app/views/new_administrateur/procedures/new.html.haml

@@ -14,8 +14,9 @@
       = render partial: 'new_administrateur/procedures/informations', locals: { f: f }
 
       .procedure-form__actions.sticky--bottom
-        = link_to 'Annuler', admin_procedures_path, class: 'button', data: { confirm: 'Êtes-vous sûr de vouloir annuler la création de cette démarche ?'}
+        .actions-right
-        = f.button 'Créer la démarche', class: 'button primary send'
+          = link_to 'Annuler', admin_procedures_path, class: 'button', data: { confirm: 'Êtes-vous sûr de vouloir annuler la création de cette démarche ?'}
+          = f.button 'Créer la démarche', class: 'button primary send'
 
     .procedure-form__column--preview
       .procedure-form__preview.sticky--top