Add comments to step [SCI-6837]

app/assets/javascripts/sitewide/assets.js

@@ -56,12 +56,12 @@ $(document).on('click', '.asset .delete-asset', function(e) {
 $(document).on('turbolinks:before-visit', (e) => {
   if ($('.uploading-attachment-container:not(.error)').length) {
     if (confirm(I18n.t('protocols.steps.attachments.new.leaving_warning'))) {
-      return false;
+      return true;
     }
     e.preventDefault();
     return false;
   }
-  return false;
+  return true;
 });
 
 var InlineAttachments = (function() {

app/assets/javascripts/sitewide/comments_sidebar.js

@@ -3,6 +3,7 @@
 var CommentsSidebar = (function() {
   const SIDEBAR = '.comments-sidebar';
   var commentsCounter;
+  var closeCallback;
 
   function loadCommentsList() {
     var commentsUrl = $(SIDEBAR).data('comments-url');
@@ -12,7 +13,9 @@ var CommentsSidebar = (function() {
     }, function(result) {
       $(SIDEBAR).removeClass('loading');
       $(SIDEBAR).find('.comments-subject-title').text(result.object_name);
+      $(SIDEBAR).find('.comments-subject-url').html(result.object_url);
       $(SIDEBAR).find('.comments-list').html(result.comments);
+
       if (result.comment_addable) {
         $(SIDEBAR).find('.comment-input-container').removeClass('hidden');
       } else {
@@ -30,15 +33,25 @@ var CommentsSidebar = (function() {
   }
 
   function initOpenButton() {
-    $(document).on('click', '.open-comments-sidebar', function() {
+    $(document).on('click', '.open-comments-sidebar', function(e) {
       commentsCounter = $(`#comment-count-${$(this).data('objectId')}`);
+      closeCallback = $(this).data('closeCallback');
       CommentsSidebar.open($(this).data('objectType'), $(this).data('objectId'));
+      e.preventDefault();
     });
   }
 
   function initCloseButton() {
     $(document).on('click', `${SIDEBAR} .close-btn`, function() {
       CommentsSidebar.close();
+      if (closeCallback) closeCallback();
+    });
+  }
+
+  function initScrollButton() {
+    $(document).on('click', `${SIDEBAR} .scroll-page-with-anchor`, function(e) {
+      e.preventDefault();
+      $($(this).attr('href'))[0].scrollIntoView();
     });
   }
 
@@ -133,6 +146,7 @@ var CommentsSidebar = (function() {
       initDeleteButton();
       initEditButton();
       initCancelButton();
+      initScrollButton();
     },
     open: function(objectType, objectId) {
       $(SIDEBAR).find('.comments-subject-title').empty();

app/assets/stylesheets/shared/comments_sidebar.scss

@@ -30,6 +30,7 @@
       display: flex;
       flex-basis: 5em;
       flex-shrink: 0;
+      flex-wrap: wrap;
       padding: 1em;
 
       .comments-subject-title {
@@ -42,6 +43,10 @@
         white-space: nowrap;
       }
 
+      .comments-subject-url {
+        flex-basis: 100%;
+      }
+
       .close-btn {
         flex-shrink: 0;
       }
@@ -130,12 +135,13 @@
   }
 
   .comment-container {
-    margin: 0 1em 2em 0;
+    margin: 0 1em .25em 0;
 
     .comment-header {
       align-items: center;
       display: flex;
       margin-bottom: .5em;
+      margin-top: 2em;
       min-height: 1.75em;
 
       .user-name {
@@ -195,7 +201,7 @@
     }
 
     &.current-user {
-      margin: 0 0 2em 1em;
+      margin: 0 0 .25em 1em;
 
       .comment-body {
         background: $color-alto;

app/assets/stylesheets/steps/step.scss

@@ -4,6 +4,7 @@
 @import "components/*";
 
 .step-container {
+  border: $border-transparent;
   margin: 20px 0;
   padding: 8px 24px;
 
@@ -86,6 +87,30 @@
       }
     }
   }
+
+  .comments-counter {
+    @include font-small;
+    align-items: center;
+    background-color: $color-concrete;
+    border: 2px solid $color-white;
+    border-radius: 8px;
+    display: flex;
+    height: 16px;
+    justify-content: center;
+    margin: 2px;
+    min-width: 16px;
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    &.unseen {
+      background-color: $brand-complementary;
+    }
+  }
+
+  &.showing-comments {
+    border: 1px dotted $brand-primary;
+  }
 }
 
 .step-element-header {

app/controllers/comments_controller.rb

@@ -14,9 +14,18 @@ class CommentsController < ApplicationController
 
   def index
     comments = @commentable.comments.order(created_at: :asc)
+    object_url = nil
+    case @commentable
+    when Step
+      object_name = "#{@commentable.position + 1} #{@commentable.name}"
+      object_url = link_to(t('comments.step_url'), "#stepContainer#{@commentable.id}", class: 'scroll-page-with-anchor')
+    else
+      object_name = @commentable.name
+    end
 
     render json: {
-      object_name: @commentable.name,
+      object_name: object_name,
+      object_url: object_url,
       comment_addable: comment_addable?(@commentable),
       comments: render_to_string(partial: 'shared/comments/comments_list.html.erb',
                                  locals: { comments: comments })

app/helpers/comment_helper.rb

@@ -47,7 +47,8 @@ module CommentHelper
         html: render_to_string(
           partial: "/shared/comments/#{partial}.html.erb",
           locals: {
-            comment: comment
+            comment: comment,
+            skip_header: false
           }
         )
       }
@@ -108,7 +109,8 @@ module CommentHelper
           html: render_to_string(
             partial: "/shared/comments/#{partial}.html.erb",
             locals: {
-              comment: comment
+              comment: comment,
+              skip_header: false
             }
           )
         }

app/javascript/vue/protocol/step.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="step-container">
+  <div class="step-container"
+       :id="`stepContainer${step.id}`"
+       :class="{'showing-comments': showCommentsSidebar}"
+  >
     <div class="step-header">
       <a class="step-collapse-link"
            :href="'#stepBody' + step.id"
@@ -50,6 +53,21 @@
             </li>
           </ul>
         </div>
+        <a href="#"
+           ref="comments"
+           class="open-comments-sidebar btn icon-btn btn-light"
+           data-turbolinks="false"
+           data-object-type="Step"
+           @click="showCommentsSidebar = true"
+           :data-object-id="step.id">
+          <i class="fas fa-comment"></i>
+          <span class="comments-counter"
+                :id="`comment-count-${step.id}`"
+                :class="{'unseen': step.attributes.unseen_comments}"
+          >
+            {{ step.attributes.comments_count }}
+          </span>
+        </a>
         <button class="btn icon-btn btn-light" @click="showDeleteModal">
           <i class="fas fa-trash"></i>
         </button>
@@ -104,7 +122,8 @@
         elements: [],
         attachments: [],
         confirmingDelete: false,
-        showFileModal: false
+        showFileModal: false,
+        showCommentsSidebar: false
       }
     },
     mixins: [AttachmentsMixin],
@@ -121,6 +140,9 @@
       this.loadAttachments();
       this.loadElements();
     },
+    mounted() {
+      $(this.$refs.comments).data('closeCallback', this.closeCommentsSidebar)
+    },
     methods: {
       loadAttachments() {
         $.get(this.step.attributes.urls.attachments_url, (result) => {
@@ -212,6 +234,9 @@
       },
       addAttachment(attachment) {
         this.attachments.push(attachment);
+      },
+      closeCommentsSidebar() {
+        this.showCommentsSidebar = false
       }
     }
   }

app/serializers/step_serializer.rb

@@ -3,9 +3,10 @@
 class StepSerializer < ActiveModel::Serializer
   include Rails.application.routes.url_helpers
   include ApplicationHelper
+  include CommentHelper
 
   attributes :name, :position, :completed, :urls, :assets_view_mode, :assets_order,
-             :marvinjs_enabled, :marvinjs_context, :wopi_enabled, :wopi_context
+             :marvinjs_enabled, :marvinjs_context, :wopi_enabled, :wopi_context, :comments_count, :unseen_comments
 
   def marvinjs_enabled
     MarvinJsService.enabled?
@@ -20,6 +21,14 @@ class StepSerializer < ActiveModel::Serializer
     end
   end
 
+  def comments_count
+    object.comments.count
+  end
+
+  def unseen_comments
+    has_unseen_comments?(object)
+  end
+
   def wopi_enabled
     wopi_enabled?
   end

app/views/shared/comments/_comment.html.erb

@@ -1,11 +1,13 @@
 <% user = comment.user %>
 <div class="comment-container <%= 'current-user' if user == current_user %>" data-comment-id="<%= comment.id %>">
-  <div class="comment-header">
-    <%= image_tag avatar_path(comment.user, :icon_small), class: 'user-avatar' %>
-    <div class="user-name">
-      <%= user == current_user ? 'You' : comment.user.full_name %>
+  <% unless skip_header%>
+    <div class="comment-header">
+      <%= image_tag avatar_path(comment.user, :icon_small), class: 'user-avatar' %>
+      <div class="user-name">
+        <%= user == current_user ? 'You' : comment.user.full_name %>
+      </div>
     </div>
-  </div>
+  <% end %>
   <div class="comment-body">
     <div class="comment-message">
       <%= custom_auto_link(comment.message, team: current_team, simple_format: false) %>

app/views/shared/comments/_comments_list.html.erb

@@ -1,5 +1,7 @@
+<% user= nil %>
 <% comments.each do |comment| %>
   <%= render partial: 'shared/comments/comment.html.erb',
-             locals: { comment: comment } %>
+             locals: { comment: comment, skip_header: user == comment.user } %>
+  <% user = comment.user %>
 <% end %>
 <% comments.mark_as_seen_by(current_user) && @commentable.touch %>

app/views/shared/comments/_comments_sidebar.html.erb

@@ -5,6 +5,8 @@
       <div class="btn btn-light icon-btn close-btn">
         <i class="fas fa-times"></i>
       </div>
+      <div class="comments-subject-url">
+      </div>
     </div>
     <div class="sidebar-body">
       <div class="comments-list">

config/locales/en.yml

@@ -348,6 +348,7 @@ en:
       delete: "Delete"
     delete_confirm: "Are you sure you wish to delete this comment?"
     delete_error: "Error occurred while deleting comment."
+    step_url: "Go to step"
 
   projects:
     index: