feat(attestation): conditional official layout & logo (start)

app/assets/stylesheets/attestation.scss

@@ -60,18 +60,15 @@
     }
   }
 
-  .right {
-    text-align: right;
-  }
-
-  .french-state-layout & {
-    .right {
+  .official-layout & {
+    .direction {
       margin-top: 5.25mm;
     }
   }
 
   .bloc-marque {
     margin-bottom: 14mm;
+    margin-right: 17mm; // 4x 4.25mm
   }
 
   .marianne {
@@ -91,6 +88,21 @@
     margin: 0;
   }
 
+  // weasyprint flexbox with img is broken
+  // so we're using old inline tricks
+  .logo-co-emetteur,
+  .direction {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .logo-co-emetteur {
+    img {
+      max-height: 28mm;
+      margin-right: 5mm;
+    }
+  }
+
   .direction {
     margin: 5.25mm 0 23.3mm;
     line-height: 14pt;

app/javascript/controllers/attestation_controller.ts

@@ -0,0 +1,44 @@
+import { toggle } from '@utils';
+import { ApplicationController } from './application_controller';
+
+export class AttestationController extends ApplicationController {
+  static targets = [
+    'layoutToggle',
+    'logoMarianneLabelFieldset',
+    'logoAttachmentFieldset'
+  ];
+  static values = {
+    logoAttachmentOfficialLabel: String,
+    logoAttachmentFreeLabel: String
+  };
+
+  declare readonly layoutToggleTarget: HTMLInputElement;
+  declare readonly logoMarianneLabelFieldsetTarget: HTMLElement;
+  declare readonly logoAttachmentFieldsetTarget: HTMLElement;
+
+  declare readonly logoAttachmentOfficialLabelValue: string;
+  declare readonly logoAttachmentFreeLabelValue: string;
+
+  connect() {
+    this.layoutToggleTarget.addEventListener('change', () => {
+      this.update();
+    });
+  }
+
+  private get isStateLayout() {
+    return this.layoutToggleTarget.checked;
+  }
+
+  private update() {
+    toggle(this.logoMarianneLabelFieldsetTarget, this.isStateLayout);
+
+    const logoAttachmentLabel =
+      this.logoAttachmentFieldsetTarget.querySelector('label');
+
+    if (logoAttachmentLabel) {
+      logoAttachmentLabel.innerText = this.isStateLayout
+        ? this.logoAttachmentOfficialLabelValue
+        : this.logoAttachmentFreeLabelValue;
+    }
+  }
+}

app/models/attestation_template.rb

@@ -17,6 +17,8 @@ class AttestationTemplate < ApplicationRecord
 
   DOSSIER_STATE = Dossier.states.fetch(:accepte)
 
+  attribute :official_layout, :boolean, default: true
+
   def attestation_for(dossier)
     attestation = Attestation.new(title: replace_tags(title, dossier, escape: false))
     attestation.pdf.attach(
@@ -107,10 +109,6 @@ class AttestationTemplate < ApplicationRecord
     self.json_body = JSON.parse(json)
   end
 
-  def french_state_layout?
-    label_logo.present?
-  end
-
   private
 
   def signature_to_render(groupe_instructeur)

app/views/administrateurs/attestation_template_v2s/edit.html.haml

@@ -3,11 +3,16 @@
                     [@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)],
                     ['Attestation']] }
 
-#attestation-edit.fr-container.fr-mt-4w{ data: { controller: 'tiptap' } }
-  .fr-grid-row.fr-grid-row--gutters
-    .fr-col-12.fr-col-md-8
-      = form_for @attestation_template, url: admin_procedure_attestation_template_v2_path(@procedure), data: { turbo: 'true', controller: 'autosubmit' } do |f|
 = render NestedForms::FormOwnerComponent.new
+= form_for @attestation_template, url: admin_procedure_attestation_template_v2_path(@procedure), html: { multipart: true },
+  data: { turbo: 'true',
+    controller: 'autosubmit attestation',
+    attestation_logo_attachment_official_label_value: AttestationTemplate.human_attribute_name(:logo_additional),
+    attestation_logo_attachment_free_label_value: AttestationTemplate.human_attribute_name(:logo) } do |f|
+
+  #attestation-edit.fr-container.fr-mt-4w{ data: { controller: 'tiptap' } }
+    .fr-grid-row.fr-grid-row--gutters
+      .fr-col-12.fr-col-md-8
         %fieldset.fr-fieldset{ aria: { labelledby: 'edit-attestation' } }
           %legend.fr-fieldset__legend#edit-attestation
             %h1.fr-h2 Attestation
@@ -15,13 +20,29 @@
               L’attestation est émise au moment où un dossier est accepté, elle est jointe à l’email d’accusé d’acceptation.
               Elle est également disponible au téléchargement depuis l’espace personnel de l’usager.
 
+          .fr-fieldset__element
+            .fr-toggle
+              = f.check_box :official_layout, class: "fr-toggle-input", id: dom_id(@attestation_template, :official_layout), data: { "attestation-target": "layoutToggle"}
+              %label.fr-toggle__label{ for: dom_id(@attestation_template, :official_layout), data: { fr_checked_label: "Activé", fr_unchecked_label: "Désactivé" } }
+                Je souhaite générer une attestation à la charte de l’état (logo avec Marianne)
+
           .fr-fieldset__element.fr-mt-2w
             %h6 En-tête
 
-          .fr-fieldset__element
+          .fr-fieldset__element{ class: class_names("hidden" => !@attestation_template.official_layout?), data: { "attestation-target": 'logoMarianneLabelFieldset'} }
             = render Dsfr::InputComponent.new(form: f, attribute: :label_logo, input_type: :text_area, required: false, opts: { rows: 3 }) do |c|
               - c.with_hint { "Exemple: Ministère de la Mer. 3 lignes maximum" }
 
+          .fr-fieldset__element{ data: { attestation_target: 'logoAttachmentFieldset' } }
+            %label.fr-label{ for: field_id(@attestation_template, :logo) }
+              - if @attestation_template.official_layout?
+                = AttestationTemplate.human_attribute_name(:logo_additional)
+              - else
+                = AttestationTemplate.human_attribute_name(:logo)
+
+            %span.fr-hint-text
+              Dimensions conseillées : au minimum 500px de largeur ou de hauteur.
+
             %div{ id: dom_id(@attestation_template, :logo_attachment) }
               = render Attachment::EditComponent.new(attached_file: @attestation_template.logo, direct_upload: false)
 
@@ -67,8 +88,9 @@
             = render Dsfr::InputComponent.new(form: f, attribute: :footer, input_type: :text_area, required: false, opts: { rows: 3 }) do |c|
               - c.with_hint { "Exemple: 20 avenue de Ségur, 75007 Paris" }
 
-    .fr-col-12.fr-col-md-4.fr-background-alt--blue-france
-      Image d'exemple ici
+      .fr-col-12.fr-col-md-4.fr-background-alt--blue-france
+        Image d'exemple ici
+
 
   .padded-fixed-footer
     .fixed-footer

app/views/administrateurs/attestation_template_v2s/show.html.haml

@@ -1,14 +1,21 @@
-.a4-container{ class: class_names("french-state-layout": @attestation_template.french_state_layout?) }
+.a4-container{ class: class_names("official-layout": @attestation_template.official_layout?) }
   .content
     %header.first-header
       .left
-        - if @attestation_template.label_logo.present?
+        - if @attestation_template.official_layout?
           = image_tag('centered_marianne.svg', alt: '', class: 'marianne')
           .bloc-marque
-            = simple_format @attestation_template.label_logo, class: "intitule"
+            = simple_format @attestation_template.label_logo.presence || "VOTRE INTITULE\ndu LOGO MARIANNE", class: "intitule"
             = image_tag('liberte2.svg', alt: '', class: 'devise')
+        - elsif @attestation_template.logo.present?
+          .bloc-marque
+            = image_tag(@attestation_template.logo_url)
 
       .right
+        - if @attestation_template.official_layout? && @attestation_template.logo.present?
+          .logo-co-emetteur
+            = image_tag(@attestation_template.logo_url)
+
         - if @attestation_template.label_direction.present?
           = simple_format @attestation_template.label_direction, class: "direction"
 

config/locales/models/attestation_template/fr.yml

@@ -6,6 +6,8 @@ fr:
       attestation_template:
         label_logo: Intitulé du logo Marianne
         label_direction: Intitulé de la direction
+        logo: Logo
+        logo_additional: Logo additionnel
         title: Titre de l’attestation
         body: Contenu de l’attestation
         footer: Contenu du pied de page