From 8ba78d1cfe483bf6d64bee8b89de8e7fb98fea13 Mon Sep 17 00:00:00 2001 From: Colin Darie Date: Fri, 22 Dec 2023 14:24:39 +0100 Subject: [PATCH] feat(attestation): conditional official layout & logo (start) --- app/assets/stylesheets/attestation.scss | 24 +++++++--- .../controllers/attestation_controller.ts | 44 +++++++++++++++++++ app/models/attestation_template.rb | 6 +-- .../attestation_template_v2s/edit.html.haml | 36 ++++++++++++--- .../attestation_template_v2s/show.html.haml | 13 ++++-- .../models/attestation_template/fr.yml | 2 + 6 files changed, 105 insertions(+), 20 deletions(-) create mode 100644 app/javascript/controllers/attestation_controller.ts diff --git a/app/assets/stylesheets/attestation.scss b/app/assets/stylesheets/attestation.scss index a181d8a4d..c951ae5d8 100644 --- a/app/assets/stylesheets/attestation.scss +++ b/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; diff --git a/app/javascript/controllers/attestation_controller.ts b/app/javascript/controllers/attestation_controller.ts new file mode 100644 index 000000000..68b811c8d --- /dev/null +++ b/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; + } + } +} diff --git a/app/models/attestation_template.rb b/app/models/attestation_template.rb index 61318dda7..d9d9d4840 100644 --- a/app/models/attestation_template.rb +++ b/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) diff --git a/app/views/administrateurs/attestation_template_v2s/edit.html.haml b/app/views/administrateurs/attestation_template_v2s/edit.html.haml index 58c0336db..dc5de4e26 100644 --- a/app/views/administrateurs/attestation_template_v2s/edit.html.haml +++ b/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 diff --git a/app/views/administrateurs/attestation_template_v2s/show.html.haml b/app/views/administrateurs/attestation_template_v2s/show.html.haml index 115f37fbf..505dd1ff6 100644 --- a/app/views/administrateurs/attestation_template_v2s/show.html.haml +++ b/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" diff --git a/config/locales/models/attestation_template/fr.yml b/config/locales/models/attestation_template/fr.yml index d2ae9dd96..2c9f6913e 100644 --- a/config/locales/models/attestation_template/fr.yml +++ b/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