Add counters for users and comments on canvas [SCI-152]

app/assets/javascripts/comments.js.erb

@@ -124,6 +124,9 @@ var Comments = (function() {
                     </li>');
         }
 
+        CounterBadge.updateCounterBadge(data.counter,
+                                        data.linked_id, 'comments');
+
         list.parent().find('.content-comments')
           .append('<li class="comment">' + data.html + '</li>')
           .scrollTop(0);
@@ -245,7 +248,7 @@ var Comments = (function() {
           url: $this.attr('data-url'),
           type: 'DELETE',
           dataType: 'json',
-          success: function() {
+          success: function(data) {
             // There are 3 possible actions:
             // - (A) comment is the last comment in project
             // - (B) comment is the last comment inside specific date
@@ -268,6 +271,9 @@ var Comments = (function() {
             }
             commentEl.remove();
 
+            CounterBadge.updateCounterBadge(data.counter,
+                                            data.linked_id,
+                                            'comments');
             scrollCommentOptions($(parent).find('.dropdown-comment'));
           },
           error: function(data) {

app/assets/javascripts/projects/canvas.js.erb

@@ -690,8 +690,8 @@ function bindFullZoomAjaxTabs() {
 
   // Reload users tab HTML element when modal is closed
   manageUsersModal.on("hide.bs.modal", function () {
-    var moduleEl = $("#" + $(this).attr("data-module-id"));
-
+    var moduleEl = $("div[data-module-id='" +
+                     $(this).attr("data-module-id") + "']");
     // Load HTML to refresh users list
     $.ajax({
       url: moduleEl.attr("data-module-users-tab-url"),
@@ -699,6 +699,8 @@ function bindFullZoomAjaxTabs() {
       dataType: "json",
       success: function (data) {
         moduleEl.find("#" + moduleEl.attr("data-module-id") + "_users").html(data.html);
+        CounterBadge.updateCounterBadge(data.counter,
+                                        data.my_module_id, 'users');
         initUsersEditLink(moduleEl);
       },
       error: function (data) {

app/assets/javascripts/projects/index.js.erb

@@ -238,6 +238,9 @@
         dataType: "json",
         success: function (data) {
           projectEl.find("#users-" + projectEl.attr("id")).html(data.html);
+          CounterBadge.updateCounterBadge(data.counter,
+                                          data.project_id,
+                                          'users');
           initUsersEditLink(projectEl);
         },
         error: function (data) {

app/assets/javascripts/sitewide/counter_badge.js

@@ -0,0 +1,22 @@
+var CounterBadge = (function() {
+  'use strict';
+
+  function updateCounterBadge(count, linkedId, type) {
+    var badge =
+      $('.' + type +
+        '-badge-indicator[data-linked-id="' +
+        linkedId + '"]').first();
+    if (badge.length) {
+      badge.html(count);
+      if (count > 0) {
+        badge.removeClass('hidden');
+      } else {
+        badge.addClass('hidden');
+      }
+    }
+  }
+
+  return {
+    updateCounterBadge: updateCounterBadge
+  };
+})();

app/assets/stylesheets/projects.scss

@@ -197,10 +197,10 @@ path, ._jsPlumb_endpoint {
 
 /* FULL-ZOOM MODULE */
 .module-large {
-  width: 290px;
   cursor: pointer;
-  position: absolute;
   display: block;
+  position: absolute;
+  width: 294px;
   z-index: 5;
 
   .panel-body .due-date-link {

app/controllers/my_module_comments_controller.rb

@@ -76,7 +76,9 @@ class MyModuleCommentsController < ApplicationController
                 comment: @comment
               }
             ),
-            date: @comment.created_at.strftime('%d.%m.%Y')
+            date: @comment.created_at.strftime('%d.%m.%Y'),
+            linked_id: @my_module.id,
+            counter: @my_module.task_comments.count
           },
           status: :created
         end
@@ -153,7 +155,9 @@ class MyModuleCommentsController < ApplicationController
               module: @my_module.name
             )
           )
-          render json: {}, status: :ok
+          render json: { linked_id: @my_module.id,
+                         counter: @my_module.task_comments.count },
+                 status: :ok
         else
           render json: { message: I18n.t('comments.delete_error') },
                  status: :unprocessable_entity

app/controllers/project_comments_controller.rb

@@ -72,7 +72,9 @@ class ProjectCommentsController < ApplicationController
                 comment: @comment
               }
             ),
-            date: @comment.created_at.strftime('%d.%m.%Y')
+            date: @comment.created_at.strftime('%d.%m.%Y'),
+            linked_id: @project.id,
+            counter: @project.project_comments.count
           }, status: :created
         }
       else
@@ -144,7 +146,9 @@ class ProjectCommentsController < ApplicationController
               project: @project.name
             )
           )
-          render json: {}, status: :ok
+          render json: { linked_id: @project.id,
+                         counter: @project.project_comments.count },
+                 status: :ok
         else
           render json: { message: I18n.t('comments.delete_error') },
                  status: :unprocessable_entity

app/controllers/user_my_modules_controller.rb

@@ -13,7 +13,9 @@ class UserMyModulesController < ApplicationController
         render json: {
           html: render_to_string(
             partial: 'index.html.erb'
-          )
+          ),
+          my_module_id: @my_module.id,
+          counter: @my_module.users.count
         }
       end
     end
@@ -25,14 +27,14 @@ class UserMyModulesController < ApplicationController
     @new_um = UserMyModule.new(my_module: @my_module)
 
     respond_to do |format|
-      format.json {
-        render :json => {
-          :my_module => @my_module,
-          :html => render_to_string({
-            :partial => "index_edit.html.erb"
-          })
+      format.json do
+        render json: {
+          my_module: @my_module,
+          html: render_to_string(
+            partial: 'index_edit.html.erb'
+          )
         }
-      }
+      end
     end
   end
 

app/controllers/user_projects_controller.rb

@@ -13,14 +13,15 @@ class UserProjectsController < ApplicationController
     @users = @project.user_projects
 
     respond_to do |format|
-      #format.html
-      format.json {
-        render :json => {
-          :html => render_to_string({
-            :partial => "index.html.erb"
-          })
+      format.json do
+        render json: {
+          html: render_to_string(
+            partial: 'index.html.erb'
+          ),
+          project_id: @project.id,
+          counter: @project.users.count
         }
-      }
+      end
     end
   end
 
@@ -30,17 +31,17 @@ class UserProjectsController < ApplicationController
     @up = UserProject.new(project: @project)
 
     respond_to do |format|
-      format.json {
-        render :json => {
-          :project => @project,
-          :html_body => render_to_string({
-            :partial => "index_edit.html.erb"
-          }),
-          :html_footer => render_to_string({
-            :partial => "index_edit_footer.html.erb"
-          })
+      format.json do
+        render json: {
+          project: @project,
+          html_body: render_to_string(
+            partial: 'index_edit.html.erb'
+          ),
+          html_footer: render_to_string(
+            partial: 'index_edit_footer.html.erb'
+          )
         }
-      }
+      end
     end
   end
 

app/views/canvas/full_zoom/_my_module.html.erb

@@ -53,6 +53,10 @@
         <li role="presentation">
           <a class="btn btn-link" href="<%= my_module_user_my_modules_url(my_module_id: my_module.id, format: :json) %>" aria-controls="<%= my_module.id %>_users" role="tab" data-remote="true">
             <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
+            <span class="badge badge-indicator users-badge-indicator <%= 'hidden' unless my_module.users.count.positive? %>"
+                  data-linked-id="<%= my_module.id %>">
+              <%= my_module.users.count %>
+            </span>
           </a>
         </li>
       <% end %>
@@ -60,7 +64,6 @@
         <li role="presentation">
           <a class="btn btn-link" href="<%= activities_tab_my_module_url(id: my_module.id, format: :json) %>" aria-controls="<%= my_module.id %>_activities" role="tab" data-remote="true">
             <span class="glyphicon glyphicon-equalizer" aria-hidden="true"></span>
-            <!--<span class="badge badge-indicator">3</span>-->
           </a>
         </li>
       <% end %>
@@ -68,7 +71,10 @@
         <li role="presentation">
           <a class="btn btn-link" href="<%= my_module_my_module_comments_url(my_module_id: my_module.id, format: :json) %>" aria-controls="<%= my_module.id %>_comments" role="tab" data-remote="true">
             <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
-            <!--<span class="badge badge-indicator">3</span>-->
+            <span class="badge badge-indicator comments-badge-indicator <%= 'hidden' unless my_module.task_comments.count.positive? %>"
+                  data-linked-id="<%= my_module.id %>">
+              <%= my_module.task_comments.count %>
+            </span>
           </a>
         </li>
       <% end %>
@@ -76,7 +82,9 @@
         <li role="presentation">
           <a class="btn btn-link" href="<%= my_module_sample_my_modules_url(my_module_id: my_module.id, format: :json) %>" aria-controls="<%= my_module.id %>_samples" role="tab" data-remote="true">
             <span class="glyphicon glyphicon-tint" aria-hidden="true"></span>
-            <span class="badge badge-indicator"><%= my_module.samples.count %></span>
+            <% if my_module.samples.count.positive? %>
+              <span class="badge badge-indicator"><%= my_module.samples.count %></span>
+            <% end %>
           </a>
         </li>
       <% end %>

app/views/projects/index/_project.html.erb

@@ -64,6 +64,10 @@ data-project-users-tab-url="<%= url_for project_user_projects_path(project_id: p
         <li role="presentation">
           <a class="btn btn-link" href="<%= url_for project_user_projects_path(project_id: project.id, format: :json) %>" aria-controls="users-<%= project.id %>" role="tab" data-remote="true">
             <span class="glyphicon glyphicon-user"></span>
+            <span class="badge badge-indicator users-badge-indicator <%= 'hidden' unless project.users.count.positive? %>"
+                  data-linked-id="<%= project.id %>">
+              <%= project.users.count %>
+            </span>
           </a>
         </li>
       <% end %>
@@ -71,9 +75,6 @@ data-project-users-tab-url="<%= url_for project_user_projects_path(project_id: p
         <li role="presentation">
           <a class="btn btn-link" href="<%= url_for notifications_project_path(id: project.id, format: :json) %>" aria-controls="notifications-<%= project.id %>" role="tab" data-remote="true">
             <span class="glyphicon glyphicon-bell"></span>
-            <!--
-            <span class="badge badge-indicator">4</span>
-            -->
           </a>
         </li>
       <% end %>
@@ -81,9 +82,10 @@ data-project-users-tab-url="<%= url_for project_user_projects_path(project_id: p
         <li role="presentation">
           <a class="btn btn-link" href="<%= url_for project_project_comments_path(project_id: project.id, format: :json) %>" aria-controls="comments-<%= project.id %>" role="tab" data-remote="true">
             <span class="glyphicon glyphicon-comment"></span>
-            <!--
-            <span class="badge badge-indicator">4</span>
-            -->
+            <span class="badge badge-indicator comments-badge-indicator <%= 'hidden' unless project.project_comments.count.positive? %>"
+                  data-linked-id="<%= project.id %>">
+              <%= project.project_comments.count %>
+            </span>
           </a>
         </li>
       <% end %>