Add the user management secion of to the Details section of task layout

app/assets/javascripts/my_modules.js

@@ -290,8 +290,76 @@ function initTagsSelector() {
   }).getContainer(myModuleTagsSelector).addClass('my-module-tags-container');
 }
 
+function initAssignedUsersSelector() {
+  var manageUsersModal = null;
+  var manageUsersModalBody = null;
+
+  // Initialize users editing modal remote loading
+  function initUsersEditLink() {
+    $('.task-details .manage-users-link').on('ajax:success', function(e, data) {
+      manageUsersModal.modal('show');
+      manageUsersModal.find('#manage-module-users-modal-module').text(data.my_module.name);
+      initUsersModalBody(data);
+    });
+  }
+
+  // Initialize reloading manage user modal content after posting new user
+  function initAddUserForm() {
+    manageUsersModalBody.find('.add-user-form')
+      .on('ajax:success', function(e, data) {
+        initUsersModalBody(data);
+      });
+  }
+
+  // Initialize remove user from my_module links
+  function initRemoveUserLinks() {
+    manageUsersModalBody.find('.remove-user-link')
+      .on('ajax:success', function(e, data) {
+        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();
+    initAddUserForm();
+    initRemoveUserLinks();
+  }
+
+  manageUsersModal = $('#manage-module-users-modal');
+  manageUsersModalBody = manageUsersModal.find('.modal-body');
+
+  // 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);
+        initUsersEditLink();
+      },
+      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

@@ -19,6 +19,18 @@ class UserMyModulesController < ApplicationController
     end
   end
 
+  def index_compact
+    respond_to do |format|
+      format.json do
+        render json: {
+          html: render_to_string(
+            partial: 'index_compact.html.erb'
+          )
+        }
+      end
+    end
+  end
+
   def index_edit
     @user_my_modules = @my_module.user_my_modules
     @unassigned_users = @my_module.unassigned_users

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_compact" %>
+</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_compact.html.erb

@@ -0,0 +1,27 @@
+<% user_my_modules = @my_module.user_my_modules %>
+<% if can_manage_users_in_module?(@my_module) %>
+  <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="<%= index_compact_my_module_user_my_modules_url(@my_module, format: :json) %>">
+    <% user_my_modules.each_with_index do |user_my_module, i| %>
+      <%  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_with_index do |user_my_module, i| %>
+      <%  user = user_my_module.user %>
+      <span class='global-avatar-container'>
+        <%= image_tag avatar_path(user, :icon_small) %>
+      </span>
+    <% end %>
+  </div>
+<% 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',
+      resources :user_my_modules, path: '/users', only: %i(index create destroy) do
-                only: [:index, :create, :destroy]
+        collection do
+          get :index_compact
+        end
+      end
       resources :my_module_comments,
                 path: '/comments',
                 only: [:index, :create, :edit, :update, :destroy]