Merge pull request #2507 from mlorb/ml-sci-4505

Add the user management section of to the Details section of task layout [SCI-4505]

app/assets/javascripts/my_modules.js

@@ -290,8 +290,64 @@ function initTagsSelector() {
   }).getContainer(myModuleTagsSelector).addClass('my-module-tags-container');
 }
 
+function initAssignedUsersSelector() {
+  var manageUsersModal = $('#manage-module-users-modal');
+  var manageUsersModalBody = manageUsersModal.find('.modal-body');
+
+  // Initialize users editing modal remote loading
+  function initUsersEditLink() {
+    $('.task-details').on('ajax:success', '.manage-users-link', function(e, data) {
+      manageUsersModal.modal('show');
+      manageUsersModal.find('#manage-module-users-modal-module').text(data.my_module.name);
+      initUsersModalBody(data);
+    });
+  }
+
+  // Initialize ajax listeners and elements style on modal body.
+  // This function must be called when modal body is changed.
+  function initUsersModalBody(data) {
+    manageUsersModalBody.html(data.html);
+    manageUsersModalBody.find('.selectpicker').selectpicker();
+  }
+
+  // Initialize reloading manage user modal content after posting new user
+  manageUsersModalBody.on('ajax:success', '.add-user-form', function(e, data) {
+    initUsersModalBody(data);
+  });
+
+  // Initialize remove user from my_module links
+  manageUsersModalBody.on('ajax:success', '.remove-user-link', function(e, data) {
+    initUsersModalBody(data);
+  });
+
+  // Reload users HTML element when modal is closed
+  manageUsersModal.on('hide.bs.modal', function() {
+    var usersEl = $('.task-assigned-users');
+    // Load HTML to refresh users
+    $.ajax({
+      url: usersEl.attr('data-module-users-url'),
+      type: 'GET',
+      dataType: 'json',
+      success: function(data) {
+        $('.task-assigned-users').replaceWith(data.html);
+      },
+      error: function() {
+        // TODO
+      }
+    });
+  });
+
+  // Remove users modal content when modal window is closed.
+  manageUsersModal.on('hidden.bs.modal', function() {
+    manageUsersModalBody.html('');
+  });
+
+  initUsersEditLink();
+}
+
 applyTaskCompletedCallBack();
 initTagsSelector();
 bindEditTagsAjax();
 initStartDatePicker();
 initDueDatePicker();
+initAssignedUsersSelector();

app/assets/stylesheets/my_modules/protocols/index.scss

@@ -57,7 +57,7 @@
   .flex-block {
     align-items: center;
     display: flex;
-    line-height: 32px;
+    line-height: 34px;
 
     .flex-block-label {
       align-items: center;
@@ -248,6 +248,20 @@
       box-shadow: none;
     }
   }
+
+  .task-assigned-users {
+    height: 34px;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .assign-new-user {
+    background-color: $color-concrete;
+    color: $color-silver-chalice;
+    text-align: center;
+  }
 }
 
 .task-notes {

app/controllers/user_my_modules_controller.rb

@@ -1,16 +1,16 @@
 class UserMyModulesController < ApplicationController
   before_action :load_vars
-  before_action :check_view_permissions, only: :index
+  before_action :check_view_permissions, only: %i(index index_old)
   before_action :check_manage_permissions, only: %i(create index_edit destroy)
 
-  def index
+  def index_old
     @user_my_modules = @my_module.user_my_modules
 
     respond_to do |format|
       format.json do
         render json: {
           html: render_to_string(
-            partial: 'index.html.erb'
+            partial: 'index_old.html.erb'
           ),
           my_module_id: @my_module.id,
           counter: @my_module.users.count # Used for counter badge
@@ -19,6 +19,18 @@ class UserMyModulesController < ApplicationController
     end
   end
 
+  def index
+    respond_to do |format|
+      format.json do
+        render json: {
+          html: render_to_string(
+            partial: 'index.html.erb'
+          )
+        }
+      end
+    end
+  end
+
   def index_edit
     @user_my_modules = @my_module.user_my_modules
     @unassigned_users = @my_module.unassigned_users

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

@@ -9,7 +9,7 @@
   data-module-x="<%= my_module.x %>"
   data-module-y="<%= my_module.y %>"
   data-module-conns="<%= construct_module_connections(my_module) %>"
-  data-module-users-tab-url="<%= my_module_user_my_modules_url(my_module_id: my_module.id, format: :json) %>"
+  data-module-users-tab-url="<%=  index_old_my_module_user_my_modules_url(my_module_id: my_module.id, format: :json) %>"
   data-module-tags-url="<%= my_module_tags_experiment_path(my_module.experiment, format: :json) %>">
 
   <% if can_manage_module?(my_module) %>
@@ -47,7 +47,7 @@
     <ul class="nav nav-tabs nav-tabs-less" role="tablist">
       <% if can_read_experiment?(my_module.experiment) %>
         <li role="presentation">
-          <a class="btn btn-link task-card-view-users" 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">
+          <a class="btn btn-link task-card-view-users" href="<%= index_old_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="fas fa-users" 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 %>">

app/views/my_modules/_my_module_details.html.erb

@@ -27,6 +27,14 @@
   </span>
 </div>
 
+<div class="flex-block">
+  <div class="flex-block-label">
+    <span class="fas block-icon fa-users"></span>
+    <%= t('my_modules.details.assigned_users') %>
+  </div>
+  <%= render partial: "user_my_modules/index" %>
+</div>
+
 <div class="module-tags">
   <div id="module-tags" data-module-tags-url="<%= my_module_my_module_tags_url(@my_module, format: :json) %>">
     <span class="fas block-icon fa-tags"></span>
@@ -35,5 +43,8 @@
   </div>
 </div>
 
+<!-- Manage users modal -->
+<%= render partial: "my_modules/modals/manage_users_modal" %>
+
 <!-- Manage tags modal -->
 <%= render partial: "my_modules/modals/manage_module_tags_modal", locals: { my_module: @my_module } %>

app/views/user_my_modules/_index.html.erb

@@ -1,34 +1,27 @@
-<h5 class="text-center"><%=t "experiments.canvas.popups.users_tab" %></h5>
-<hr>
-<ul class="no-style content-users">
-  <% if @user_my_modules.size == 0 then %>
-    <li><em><%= t "experiments.canvas.popups.no_users" %></em></li>
-  <% else %>
-    <% @user_my_modules.each_with_index do |user_my_module, i| %>
-      <%  user = user_my_module.user %>
-      <li>
-        <% if i > 0 %><hr><% end %>
-        <div class="row">
-          <div class="col-xs-2">
-            <span class='global-avatar-container'>
-              <%= image_tag avatar_path(user, :icon_small), class: "img-circle pull-left" %>
-          </div>
-          <div class="col-xs-10" style="line-height: 15px">
-            <span><%= user.full_name %></span><br>
-            <span class="text-muted" title="<%=t "experiments.canvas.popups.module_user_join_full", user: user.full_name, date: l(user_my_module.created_at, format: :full_date), time: l(user_my_module.created_at, format: :time) %>">
-              <em>
-              <%=t "experiments.canvas.popups.module_user_join", date: l(user_my_module.created_at, format: :full_date) %>
-              </em>
-            </span>
-          </div>
-        </div>
-      </li>
-    <% end %>
-  <% end %>
-</ul>
+<% user_my_modules = @my_module.user_my_modules %>
 <% if can_manage_users_in_module?(@my_module) %>
-    <p>
-      <hr>
-      <%= link_to t('experiments.canvas.popups.manage_users'), my_module_users_edit_path(@my_module, format: :json), remote: true, class: "manage-users-link" %>
-    </p>
+  <a class="task-assigned-users manage-users-link"
+     data-remote="true"
+     href="<%= my_module_users_edit_path(@my_module, format: :json) %>"
+     data-module-id="<%= @my_module.id %>"
+     data-module-users-url="<%= my_module_user_my_modules_url(@my_module, format: :json) %>">
+    <% user_my_modules.each do |user_my_module| %>
+      <%  user = user_my_module.user %>
+      <span class='global-avatar-container'>
+        <%= image_tag avatar_path(user, :icon_small) %>
+      </span>
+    <% end %>
+    <span class='global-avatar-container assign-new-user'>
+      <i class="fas fa-plus"></i>
+    </span>
+  </a>
+<% else %>
+  <div class="task-assigned-users">
+    <% user_my_modules.each do |user_my_module| %>
+      <%  user = user_my_module.user %>
+      <span class='global-avatar-container'>
+        <%= image_tag avatar_path(user, :icon_small) %>
+      </span>
+    <% end %>
+  </div>
 <% end %>

app/views/user_my_modules/_index_old.html.erb

@@ -0,0 +1,34 @@
+<h5 class="text-center"><%=t "experiments.canvas.popups.users_tab" %></h5>
+<hr>
+<ul class="no-style content-users">
+  <% if @user_my_modules.size == 0 then %>
+    <li><em><%= t "experiments.canvas.popups.no_users" %></em></li>
+  <% else %>
+    <% @user_my_modules.each_with_index do |user_my_module, i| %>
+      <%  user = user_my_module.user %>
+      <li>
+        <% if i > 0 %><hr><% end %>
+        <div class="row">
+          <div class="col-xs-2">
+            <span class='global-avatar-container'>
+              <%= image_tag avatar_path(user, :icon_small), class: "img-circle pull-left" %>
+          </div>
+          <div class="col-xs-10" style="line-height: 15px">
+            <span><%= user.full_name %></span><br>
+            <span class="text-muted" title="<%=t "experiments.canvas.popups.module_user_join_full", user: user.full_name, date: l(user_my_module.created_at, format: :full_date), time: l(user_my_module.created_at, format: :time) %>">
+              <em>
+              <%=t "experiments.canvas.popups.module_user_join", date: l(user_my_module.created_at, format: :full_date) %>
+              </em>
+            </span>
+          </div>
+        </div>
+      </li>
+    <% end %>
+  <% end %>
+</ul>
+<% if can_manage_users_in_module?(@my_module) %>
+    <p>
+      <hr>
+      <%= link_to t('experiments.canvas.popups.manage_users'), my_module_users_edit_path(@my_module, format: :json), remote: true, class: "manage-users-link" %>
+    </p>
+<% end %>

config/locales/en.yml

@@ -597,6 +597,7 @@ en:
   my_modules:
     details:
       title: "Details"
+      assigned_users: "Assigned users:"
     notes:
       title: "Notes"
       no_description: "No task description"

config/routes.rb

@@ -375,8 +375,11 @@ Rails.application.routes.draw do
           post :destroy_by_tag_id
         end
       end
-      resources :user_my_modules, path: '/users',
-                only: [:index, :create, :destroy]
+      resources :user_my_modules, path: '/users', only: %i(index create destroy) do
+        collection do
+          get :index_old
+        end
+      end
       resources :my_module_comments,
                 path: '/comments',
                 only: [:index, :create, :edit, :update, :destroy]