feat(attestation): v2 edit form and tags style

app/assets/stylesheets/attestation_template_2_edit.scss

@@ -1,7 +1,63 @@
+@import "constants";
+
 #attestation-edit {
   .tiptap {
-    padding: 8px;
+    padding: $default-spacer;
     overflow-y: scroll;
-    min-height: 400px;
+    min-height: 600px;
+  }
+
+  .editor {
+    // Visual zones
+    .header .flex-1,
+    h1,
+    h2,
+    h3 {
+      background-color: var(--background-contrast-grey-hover);
+      padding: $default-spacer / 2;
+    }
+
+    .header,
+    h1,
+    h2,
+    h3 {
+      margin-bottom: $default-spacer;
+    }
+
+    // Styles
+    .header {
+      align-content: center;
+
+      p {
+        margin-bottom: 0rem;
+        font-size: 0.8rem;
+      }
+    }
+
+    h1,
+    h2 {
+      font-size: 1.25rem;
+    }
+
+    h2 {
+      line-height: 2rem;
+    }
+
+    h3 {
+      font-size: 0.8rem;
+      font-weight: normal;
+      line-height: 1rem;
+    }
+
+    li p {
+      margin-bottom: 0;
+    }
+
+    // Tags
+    .fr-tag {
+      // style span rendered by tiptap like a button/link tag
+      color: var(--text-action-high-blue-france);
+      background-color: var(--background-action-low-blue-france);
+    }
   }
 }

app/controllers/administrateurs/attestation_template_v2s_controller.rb

@@ -66,7 +66,7 @@ module Administrateurs
     end
 
     def editor_params
-      params.required(:attestation_template).permit(:tiptap_body)
+      params.required(:attestation_template).permit(:label_logo, :label_direction, :tiptap_body, :footer)
     end
   end
 end

app/javascript/shared/tiptap/editor.ts

@@ -109,7 +109,7 @@ function getEditorOptions(
           return node.attrs.label;
         },
         HTMLAttributes: {
-          class: 'fr-badge fr-badge--sm fr-badge--info fr-badge--no-icon'
+          class: 'fr-tag fr-tag--sm'
         },
         suggestion: createSuggestionMenu(tags, element)
       })

app/javascript/shared/tiptap/nodes.ts

@@ -31,7 +31,7 @@ export const Header = Node.create({
   renderHTML({ HTMLAttributes }) {
     return [
       'header',
-      mergeAttributes(HTMLAttributes, { class: 'header flex' }),
+      mergeAttributes(HTMLAttributes, { class: 'header flex flex-gap-1' }),
       0
     ];
   }
@@ -39,7 +39,7 @@ export const Header = Node.create({
 
 export const HeaderColumn = Node.create({
   name: 'headerColumn',
-  content: 'paragraph',
+  content: 'paragraph{1,2}',
   defining: true,
 
   parseHTML() {

app/javascript/shared/tiptap/tags.ts

@@ -92,9 +92,9 @@ class SuggestionMenu {
 
     const html = this.#props.items
       .map((item, i) => {
-        return `<li class="fr-badge fr-badge--sm fr-badge--no-icon${
+        return `<li><button class="fr-tag fr-tag--sm" aria-pressed="${
-          i == this.#selectedIndex ? ' fr-badge--info' : ''
+          i == this.#selectedIndex ? 'true' : 'false'
-        }">${item.label}</li>`;
+        }">${item.label}</button></li>`;
       })
       .join('');
 
@@ -107,7 +107,7 @@ class SuggestionMenu {
     const menu = document.createElement('div');
     const list = document.createElement('ul');
     menu.classList.add('fr-menu');
-    list.classList.add('fr-menu__list');
+    list.classList.add('fr-menu__list', 'fr-tags-group');
     menu.appendChild(list);
 
     return menu;

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

@@ -1,16 +1,65 @@
-#attestation-edit.fr-container.mt-2{ data: { controller: 'tiptap' } }
+= render partial: 'administrateurs/breadcrumbs',
-  = form_for @attestation_template, url: admin_procedure_attestation_template_v2_path(@procedure), data: { turbo: 'true', controller: 'autosubmit' } do |form|
+  locals: { steps: [['Démarches', admin_procedures_path],
-    .flex.flex-gap-2
+                    [@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)],
-      - @buttons.each do |buttons|
+                    ['Attestation']] }
-        .flex.flex-gap-1
-          - buttons.each do |(label, action, icon)|
-            %button.fr-btn.fr-btn--secondary.fr-btn--sm{ type: 'button', title: label, class: "fr-icon-#{icon}", data: { action: 'click->tiptap#menuButton', tiptap_target: 'button', tiptap_action: action } }
-              = label
 
-    .editor.mt-2{ data: { tiptap_target: 'editor' } }
+#attestation-edit.fr-container.fr-mt-4w{ data: { controller: 'tiptap' } }
-    = form.hidden_field :tiptap_body, data: { tiptap_target: 'input' }
+  .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|
+        %fieldset.fr-fieldset{ aria: { labelledby: 'edit-attestation' } }
+          %legend.fr-fieldset__legend#edit-attestation
+            %h1.fr-h2 Attestation
+            %p.fr-text--regular
+              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.
 
-    %ul.mt-2.flex.wrap.flex-gap-1
+          .fr-fieldset__element.fr-mt-2w
-      - @attestation_template.tags.each do |tag|
+            %h6 En-tête
-        %li.fr-badge.fr-badge--sm{ role: 'button', title: tag[:description], data: { action: 'click->tiptap#insertTag', tiptap_target: 'tag', tag_id: tag[:id], tag_label: tag[:libelle] } }
+
-          = tag[:libelle]
+          .fr-fieldset__element
+            = 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
+            = render Dsfr::InputComponent.new(form: f, attribute: :label_direction, input_type: :text_area, required: false, opts: { rows: 2 }) do |c|
+              - c.with_hint { "Exemple: Direction interministérielle du numérique. 2 lignes maximum" }
+
+          .fr-fieldset__element.fr-mt-2w
+            %label.fr-label.fr-h6
+              = AttestationTemplate.human_attribute_name :body
+              = render EditableChamp::AsteriskMandatoryComponent.new
+
+            .editor.mt-2{ data: { tiptap_target: 'editor' } }
+            = f.hidden_field :tiptap_body, data: { tiptap_target: 'input' }
+
+          .fr-fieldset__element
+            .flex.flex-gap-2
+              - @buttons.each do |buttons|
+                .flex.flex-gap-1
+                  - buttons.each do |(label, action, icon)|
+                    %button.fr-btn.fr-btn--secondary.fr-btn--sm{ type: 'button', title: label, class: "fr-icon-#{icon}", data: { action: 'click->tiptap#menuButton', tiptap_target: 'button', tiptap_action: action } }
+                      = label
+
+          .fr-fieldset__element
+            %ul.fr-tags-group
+              - @attestation_template.tags.each do |tag|
+                %li
+                  %button.fr-tag.fr-tag--sm{ title: tag[:description], data: { action: 'click->tiptap#insertTag', tiptap_target: 'tag', tag_id: tag[:id], tag_label: tag[:libelle] } }
+                    = tag[:libelle]
+
+          .fr-fieldset__element.fr-mt-2w
+            %h6 Pied de page
+
+          .fr-fieldset__element
+            %label.fr-label{ for: field_id(@attestation_template, :signature) } Tampon ou signature
+            %span.fr-hint-text
+              Dimensions conseillées : au minimum 500px de largeur ou de hauteur.
+            = render Attachment::EditComponent.new(attached_file: @attestation_template.signature, direct_upload: false)
+
+          .fr-fieldset__element
+            = 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

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

@@ -1,30 +1,23 @@
 = image_tag('centered_marianne.svg', alt: '', class: 'marianne')
 .header
   .left
-    .bloc-marque
+    - if @attestation_template.label_logo.present?
-      %p.intitule
+      .bloc-marque
-        PRÉFET<br />
+        = simple_format @attestation_template.label_logo, class: "intitule"
-        DU VAL-<br />
+        = image_tag('liberte2.svg', alt: '', class: 'devise')
-        DE-MARNE
-      = image_tag('liberte2.svg', alt: '', class: 'devise')
 
     %p.issuer
       Service Hébergement et Accès au Logement<br />
       Bureau de l'Accès au Logement
 
   .right
-    %p.direction
+    - if @attestation_template.label_direction.present?
-      Direction Régionale et Interdépartementale<br />
+      = simple_format @attestation_template.label_direction, class: "direction"
-      de l'Hébergement et du Logement<br />
-      DRIHL Val-de-Marne
 
     %p.date Créteil, le 20 mars 2023
 
-%h1.title ATTESTATION
-
 .main
   = sanitize(@body)
 
-%p.footer
+- if @attestation_template.footer.present?
-  12/14 rue des Archives 94000 Créteil<br />
+  = simple_format @attestation_template.footer, class: "footer"
-  www.drihl.ile-de-france.developpement-durable.gouv.fr

config/locales/models/attestation_template/fr.yml

@@ -8,7 +8,7 @@ fr:
         label_direction: Intitulé de la direction
         title: Titre de l’attestation
         body: Contenu de l’attestation
-        footer: Pied de page
+        footer: Contenu du pied de page
 
     errors:
       models: