Affiche un bouton "Répondre" dans la Messagerie (#4105)

Usager : affiche un bouton "Répondre" dans la Messagerie

app/assets/images/icons/reply.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M74.524 65.23l-3.498-5.592c-6.497-10.413-18.79-17.191-33.783-17.673l-.12 17.602c.1 1.265-1.002 1.856-1.744 1.346L3.101 32.538c-2.57-2.624 0-4.317 0-4.317L34.454 2.483c1.544-1.174 2.802-.77 2.801 1.16l-.112 17.33c20.69.868 37.013 18.232 37.281 37.996l.06 4.424zM4.76 30.905l28.786 23.912v-16.42h1.899c14.593 0 26.986 5.524 34.982 14.299-2.698-15.91-17.291-28.059-34.982-28.059h-1.9V8.535z" stroke-width="3.182" stroke-linejoin="round" transform="matrix(.31704 0 0 .3003 -.132 1.934)" fill="#0069cc" stroke="#0069cc"/></svg>

app/assets/stylesheets/new_design/forms.scss

@@ -145,12 +145,27 @@
     border: solid 1px $border-grey;
     padding: $default-padding;
 
+    &.small {
+      padding: $default-padding / 2;
+    }
+
     &:disabled {
       background-color: $border-grey;
     }
 
-    &.small {
-      padding: $default-padding / 2;
+    &:focus {
+      border: 1px solid $blue;
+      box-shadow: 0px 0px 2px 1px $blue;
+    }
+
+    // Hide the browser default invalidity indicator until the field is touched
+    &:invalid:not(:focus) {
+      box-shadow: none;
+    }
+
+    &.touched:invalid {
+      border: 1px solid $dark-red;
+      box-shadow: 0px 0px 2px 1px $dark-red;
     }
   }
 
@@ -188,17 +203,6 @@
     max-width: 180px;
   }
 
-  input:invalid,
-  textarea:invalid {
-    box-shadow: none;
-  }
-
-  input.touched:invalid,
-  textarea.touched:invalid {
-    border: 1px solid $dark-red;
-    box-shadow: 0px 0px 5px $dark-red;
-  }
-
   select,
   .select2-selection {
     // hack found here: https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript

app/assets/stylesheets/new_design/icons.scss

@@ -91,6 +91,10 @@
     background-image: image-url("icons/mail.svg");
   }
 
+  &.reply {
+    background-image: image-url("icons/reply.svg");
+  }
+
   &.search {
     background-image: image-url("icons/search-blue.svg");
   }

app/assets/stylesheets/new_design/message.scss

@@ -38,4 +38,8 @@
   .attachment-link {
     margin-top: $default-spacer;
   }
+
+  .message-answer-button {
+    margin-left: auto;
+  }
 }

app/helpers/messagerie_helper.rb

@@ -0,0 +1,9 @@
+module MessagerieHelper
+  def show_reply_button(commentaire, connected_user)
+    commentaire.dossier.present? &&
+      commentaire.dossier.messagerie_available? &&
+      commentaire.dossier.user == connected_user &&
+      !commentaire.sent_by?(connected_user) &&
+      commentaire.dossier.commentaires.last == commentaire
+  end
+end

app/views/gestionnaires/dossiers/print.html.haml

@@ -63,7 +63,7 @@
   %ul.messages-list
     - @dossier.commentaires.with_attached_piece_jointe.each do |commentaire|
       %li
-        = render partial: "shared/dossiers/messages/message", locals: { commentaire: commentaire, connected_user: current_gestionnaire, messagerie_seen_at: nil }
+        = render partial: "shared/dossiers/messages/message", locals: { commentaire: commentaire, connected_user: current_gestionnaire, messagerie_seen_at: nil, show_reply_button: false }
 
 %script{ type: "text/javascript" }
   window.print();

app/views/root/patron.html.haml

@@ -21,6 +21,7 @@
     %span.icon.person
     %span.icon.super-admin
     %span.icon.mail
+    %span.icon.reply
     %span.icon.search
     %span.icon.sign-out
     %span.icon.info

app/views/shared/dossiers/_messagerie.html.haml

@@ -2,7 +2,7 @@
   %ul.messages-list
     - dossier.commentaires.with_attached_piece_jointe.each do |commentaire|
       %li.message{ class: commentaire_is_from_me_class(commentaire, connected_user) }
-        = render partial: "shared/dossiers/messages/message", locals: { commentaire: commentaire, connected_user: connected_user, messagerie_seen_at: messagerie_seen_at }
+        = render partial: "shared/dossiers/messages/message", locals: { commentaire: commentaire, connected_user: connected_user, messagerie_seen_at: messagerie_seen_at, show_reply_button: show_reply_button(commentaire, connected_user) }
 
   - if dossier.messagerie_available?
     = render partial: "shared/dossiers/messages/form", locals: { commentaire: new_commentaire, form_url: form_url }

app/views/shared/dossiers/messages/_form.html.haml

@@ -1,5 +1,5 @@
 = form_for(commentaire, url: form_url, html: { class: 'form' }) do |f|
-  = f.text_area :body, rows: 5, placeholder: 'Répondre ici', required: true, class: 'message-textarea'
+  = f.text_area :body, rows: 5, placeholder: 'Écrivez votre message à l’administration ici', required: true, class: 'message-textarea'
   .flex.justify-between.wrap
     %div
       = f.file_field :piece_jointe, id: 'piece_jointe', direct_upload: true

app/views/shared/dossiers/messages/_message.html.haml

@@ -10,11 +10,17 @@
       = commentaire_date(commentaire)
   .rich-text= sanitize(simple_format(commentaire.body))
 
-  - if commentaire.piece_jointe.attached?
-    .attachment-link
-      = render partial: "shared/attachment/show", locals: { attachment: commentaire.piece_jointe.attachment }
-  - elsif commentaire.file.present?
-    .attachment-link
-      = link_to commentaire.file_url, class: "button", target: "_blank", rel: "noopener", title: "Télécharger" do
-        %span.icon.attachment
-        = commentaire.file_identifier
+  .message-extras.flex.justify-start
+    - if commentaire.piece_jointe.attached?
+      .attachment-link
+        = render partial: "shared/attachment/show", locals: { attachment: commentaire.piece_jointe.attachment }
+    - elsif commentaire.file.present?
+      .attachment-link
+        = link_to commentaire.file_url, class: "button", target: "_blank", rel: "noopener", title: "Télécharger" do
+          %span.icon.attachment
+          = commentaire.file_identifier
+
+    - if show_reply_button
+      = button_tag type: 'button', class: 'button small message-answer-button', onclick: 'document.querySelector("#commentaire_body").focus()' do
+        %span.icon.reply
+        Répondre

app/views/users/dossiers/show/_latest_message.html.haml

@@ -4,6 +4,8 @@
     %h3.tab-title Dernier message
 
     .message.inverted-background
-      = render partial: "shared/dossiers/messages/message", locals: { commentaire: latest_message, connected_user: current_user, messagerie_seen_at: nil }
+      = render partial: "shared/dossiers/messages/message", locals: { commentaire: latest_message, connected_user: current_user, messagerie_seen_at: nil, show_reply_button: false }
 
-    = link_to commentaire_answer_action(latest_message, current_user), messagerie_dossier_url(dossier, anchor: 'new_commentaire'), class: 'button send'
+    = link_to messagerie_dossier_url(dossier, anchor: 'new_commentaire'), class: 'button send' do
+      %span.icon.reply
+      = commentaire_answer_action(latest_message, current_user)

spec/views/shared/dossiers/messages/message.html.haml_spec.rb

@@ -1,12 +1,14 @@
 describe 'shared/dossiers/messages/message.html.haml', type: :view do
   before { view.extend DossierHelper }
 
-  subject { render 'shared/dossiers/messages/message.html.haml', commentaire: commentaire, messagerie_seen_at: seen_at, connected_user: dossier.user }
+  subject { render 'shared/dossiers/messages/message.html.haml', commentaire: commentaire, messagerie_seen_at: seen_at, connected_user: dossier.user, show_reply_button: true }
 
   let(:dossier) { create(:dossier, :en_construction) }
   let(:commentaire) { create(:commentaire, dossier: dossier) }
   let(:seen_at) { commentaire.created_at + 1.hour }
 
+  it { is_expected.to have_button("Répondre") }
+
   context "with a seen_at after commentaire created_at" do
     let(:seen_at) { commentaire.created_at + 1.hour  }