migrate emails text editor to new interface

app/views/admin/mail_templates/edit.html.haml

@@ -1,40 +0,0 @@
-- if params[:id] == 'closed_mail'
-  = render partial: 'admin/closed_mail_template_attestation_inconsistency_alert'
-.white-back
-  %h3
-    = @mail_template.class.const_get(:DISPLAYED_NAME)
-
-  = form_for @mail_template,
-    as: 'mail_template',
-    url: admin_procedure_mail_template_path(@procedure, @mail_template.class.const_get(:SLUG)),
-    method: :put do |f|
-    .row
-      .col-md-6
-        .form-group.string.optional.mail_template_subject
-          = f.label :subject, "Objet de l'email", class: 'control-label string optional'
-          = f.text_field :subject, class: 'form-control string optional'
-
-    .form-group.text.optional.mail_template_body
-      = f.label :body, "Corps de l'email", class: 'control-label string optional'
-      = f.text_area :body, class: 'wysihtml5 form-control text optional'
-
-    .text-right
-      = link_to "Annuler", admin_procedure_mail_templates_path(@procedure), class: "btn btn-default"
-      = f.submit 'Mettre à jour', class: "btn btn-default btn-success"
-      = link_to "Prévisualiser", preview_admin_procedure_mail_template_path(@procedure, @mail_template.class.const_get(:SLUG)), class: "btn btn-primary", target: "_blank"
-
-  .row
-    .col-md-12
-      %table.table
-        %tr
-          %th.col-md-3
-            Balise
-          %th
-            Description
-        - @mail_template.tags.each do |tag|
-          %tr
-            %td
-              %code{ style: "white-space: pre-wrap;" }
-                = "--#{tag[:libelle]}--"
-            %td
-              = tag[:description]

app/views/admin/mail_templates/index.html.haml

@@ -1,14 +0,0 @@
-= render partial: 'admin/closed_mail_template_attestation_inconsistency_alert'
-#custom-mails
-  .wrapper
-    %h1 E-mails personnalisables
-    %table.table
-      %tr
-        %th{ colspan: 2 }
-          Type d'email
-      - @mail_templates.each do |mail_template|
-        %tr
-          %td
-            = mail_template.class.const_get(:DISPLAYED_NAME)
-          %td.text-right
-            = link_to "Personnaliser l'e-mail", edit_admin_procedure_mail_template_path(@procedure, mail_template.class.const_get(:SLUG))

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

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

app/views/new_administrateur/mail_templates/_form.html.haml

@@ -0,0 +1,47 @@
+
+= f.label :subject do
+  Objet de l'email
+  %span.mandatory *
+= f.text_field :subject, required: true
+
+= f.label :body do
+  Corps de l'email
+  %span.mandatory *
+= f.rich_text_area :rich_body, required: true, class: "mb-4"
+
+#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
+    - @mail_template.tags.each do |tag|
+      .item
+        %code.tag
+          = "--#{tag[:libelle]}--"
+        .description
+          = tag[:description]
+
+
+-# Disable accepting dropped images and traduce toolbar tooltips
+:javascript
+  addEventListener('trix-file-accept', function(e) { e.preventDefault(); });
+  addEventListener("trix-initialize", function(e) {
+    document.querySelector('button[data-trix-attribute="bold"]').setAttribute('title', 'Gras');
+    document.querySelector('button[data-trix-attribute="italic"]').setAttribute('title', 'Italique');
+    document.querySelector('button[data-trix-attribute="strike"]').setAttribute('title', 'Barrer');
+    document.querySelector('button[data-trix-attribute="href"]').setAttribute('title', 'Créer lien');
+    document.querySelector('button[data-trix-attribute="heading1"]').setAttribute('title', 'Titre');
+    document.querySelector('button[data-trix-attribute="quote"]').setAttribute('title', 'Citation');
+    document.querySelector('button[data-trix-attribute="bullet"]').setAttribute('title', 'Liste à puce');
+    document.querySelector('button[data-trix-attribute="number"]').setAttribute('title', 'Liste numérotée');
+    document.querySelector('button[data-trix-action="increaseNestingLevel"]').setAttribute('title', 'Indenter');
+    document.querySelector('button[data-trix-action="decreaseNestingLevel"]').setAttribute('title', 'Désindenter');
+    document.querySelector('button[data-trix-action="undo"]').setAttribute('title', 'Annuler la modification');
+    document.querySelector('button[data-trix-action="redo"]').setAttribute('title', 'Appliquer à nouveau la modification');
+    document.querySelector('.trix-button.trix-button--dialog[data-trix-method="setAttribute"]').value = "Créer lien";
+    document.querySelector('.trix-button.trix-button--dialog[data-trix-method="removeAttribute"]').value = "Effacer lien";
+  })

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

@@ -0,0 +1,33 @@
+- if params[:id] == 'closed_mail'
+  = render partial: 'admin/closed_mail_template_attestation_inconsistency_alert'
+
+= render partial: 'new_administrateur/breadcrumbs',
+  locals: { steps: [link_to('Démarches', admin_procedures_path),
+                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    link_to("Emails", admin_procedure_mail_templates_path(@procedure)),
+                    @mail_template.class.const_get(:DISPLAYED_NAME)] }
+
+.procedure-form
+  .procedure-form__columns.container
+
+    = form_for @mail_template,
+      url: admin_procedure_mail_template_path(@procedure, @mail_template.class.const_get(:SLUG)),
+      method: :put,
+      html: { class: 'form procedure-form__column--form' } do |f|
+
+      %h1.page-title= @mail_template.class.const_get(:DISPLAYED_NAME)
+      = render partial: 'form', locals: { f: f }
+      .procedure-form__actions.sticky--bottom
+        .actions-right
+          = f.submit '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: 'apercu', locals: { procedure: @procedure }
+

app/views/new_administrateur/mail_templates/index.html.haml

@@ -8,6 +8,10 @@
       .flex.justify-between
         %div
           .card-title= mail_template.class.const_get(:DISPLAYED_NAME)
-          %p.notice= mail_template.class.const_get(:DISPLAYED_NAME) === 'Accusé de réception' ? 'Personnalisé' : 'Modèle standard'
+          - if mail_template.updated_at.blank?
+            %p.notice= mail_template.class.const_get(:DISPLAYED_NAME) === 'Accusé de réception' ? 'Personnalisé' : 'Modèle standard'
+          - else
+            %span.badge.baseline modifié le #{mail_template.updated_at.strftime('%d-%m-%Y')}
+
         %div
           = link_to 'Modifier', edit_admin_procedure_mail_template_path(@procedure, mail_template.class.const_get(:SLUG)), class: 'button'