Add user assignments dropdown for experiment table [SCI-7440]

app/assets/javascripts/experiments/table.js

@@ -124,6 +124,30 @@ var ExperimnetTable = {
       return true;
     });
   },
+  initManageUsersDropdown: function() {
+    $(this.table).on('show.bs.dropdown', '.assign-users-dropdown', (e) => {
+      let usersList = $(e.target).find('.users-list');
+      usersList.find('.user-container').remove();
+      $.get(usersList.data('list-url'), (result) => {
+        $.each(result, (_i, user) => {
+          $(`
+            <div class="user-container">
+              <div class="sci-checkbox-container">
+                <input type="checkbox" class="sci-checkbox user-selector" value="${user.value}">
+                <span class="sci-checkbox-label"></span>
+              </div>
+              <div class="user-avatar">
+                <img src="${user.params.avatar_url}"></img>
+              </div>
+              <div class="user-name">
+                ${user.label}
+              </div>
+            </div>
+          `).appendTo(usersList);
+        });
+      });
+    });
+  },
   checkActionPermission: function(permission) {
     let allMyModules;
 
@@ -299,6 +323,7 @@ var ExperimnetTable = {
     this.initNewTaskModal(this);
     this.initMyModuleActions();
     this.updateExperimentToolbar();
+    this.initManageUsersDropdown();
   }
 };
 
@@ -334,34 +359,48 @@ ExperimnetTable.render.status = function(data) {
 
 ExperimnetTable.render.assigned = function(data) {
   let users = '';
-  $.each(data.users, (_i, user) => {
+
+  $.each(data.users, (i, user) => {
     users += `
-      <span class="global-avatar-container">
+      <span class="avatar-container" style="z-index: ${5 - i}">
         <img src=${user.image_url} title=${user.title}>
       </span>
     `;
   });
 
-  if (data.length > 3) {
+  if (data.count > 4) {
     users += `
-    <span class="more-users" title="${data.more_users_title}">
-        +${data.length - 3}
+    <span class="more-users avatar-container" title="${data.more_users_title}">
+        +${data.count - 4}
     </span>
     `;
   }
 
-  if (data.manage_url) {
-    users = `
-      <a href="${data.manage_url}" class= 'my-module-users-link', data-action='remote-modal'>
-        ${users}
-        <span class="new-user global-avatar-container">
-          <i class="fas fa-plus"></i>
-        </span>
-      </a>
+  if (data.create_url) {
+    users += `
+      <span class="new-user avatar-container">
+        <i class="fas fa-plus"></i>
+      </span>
     `;
   }
 
-  return users;
+  return `
+    <div ref="dropdown"
+         class="assign-users-dropdown dropdown"
+    >
+      <div class="assigned-users-container" data-toggle="dropdown" >
+        ${users}
+      </div>
+      <div class="dropdown-menu dropdown-menu-right">
+        <div class="sci-input-container left-icon">
+          <input type="text" class="sci-input-field" placeholder="${I18n.t('experiments.table.search')}"></input>
+          <i class="fas fa-search"></i>
+        </div>
+        <div class="users-list" data-list-url="${data.list_url}">
+        </div>
+      </div>
+    </div>
+  `;
 };
 
 ExperimnetTable.render.tags = function(data) {

app/assets/stylesheets/experiment/table.scss

@@ -130,6 +130,59 @@
       }
     }
 
+    .assign-users-dropdown {
+      .dropdown-menu {
+        padding: .5em;
+        width: 280px;
+      }
+
+      .users-list {
+        max-height: 400px;
+        overflow: auto;
+      }
+
+      .user-container {
+        align-items: center;
+        display: flex;
+        padding: .5em;
+
+        .user-avatar {
+          padding: 0 .75em;
+        }
+      }
+
+      .assigned-users-container {
+        cursor: pointer;
+        display: flex;
+      }
+
+      .avatar-container {
+        border: 1px solid $color-white;
+        border-radius: 50%;
+        display: inline-block;
+        height: 26px;
+        margin-right: -5px;
+        width: 26px;
+
+        img {
+          border-radius: 50%;
+          max-height: 100%;
+          max-width: 100%;
+        }
+      }
+
+      .more-users {
+        font-size: 10px;
+        line-height: 24px;
+      }
+
+      .new-user {
+        color: $color-silver-chalice;
+        line-height: 24px;
+        margin-left: 5px;
+      }
+    }
+
     .my-module-status {
       color: $color-white;
       display: inline-block;

app/assets/stylesheets/global_activities.scss

@@ -456,6 +456,7 @@
 
   .calendar-input {
     background-color: transparent !important;
+    border-color: $color-silver-chalice;
     box-shadow: none;
     color: inherit;
     cursor: pointer;

app/helpers/projects_helper.rb

@@ -14,7 +14,7 @@ module ProjectsHelper
   end
 
   def user_names_with_roles(user_assignments)
-    user_assignments.map { |up| user_name_with_role(up) }.join('
').html_safe
+    user_assignments.map { |up| user_name_with_role(up) }.join('
')
   end
 
   def user_name_with_role(user_assignment)

app/services/experiments/table_view_service.rb

@@ -144,10 +144,10 @@ module Experiments
                             })
       end
 
-      result[:more_users_title] = user_names_with_roles(users[4..].to_a) if users.length > 3
-
+      result[:more_users_title] = users[4..].map(&:full_name).join('
') if users.length > 4
+      result[:list_url] = search_my_module_user_my_module_path(my_module, my_module_id: my_module.id)
       if can_manage_my_module_users?(@user, my_module)
-        result[:manage_url] = index_old_my_module_user_my_modules_url(my_module_id: my_module.id, format: :json)
+        result[:create_url] = my_module_user_my_modules_path(my_module_id: my_module.id)
       end
 
       result

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

@@ -6,7 +6,7 @@
 
 <% more_users = project.user_assignments[4..-1].to_a %>
 <% if more_users.any? %>
-  <span class="more-users" title="<%= user_names_with_roles(more_users) %>">
+  <span class="more-users" title='<%= sanitize_input(user_names_with_roles(more_users)) %>'>
      +<%= more_users.size %>
   </span>
 <% end %>

config/locales/en.yml

@@ -1346,6 +1346,7 @@ en:
         archived_tasks: 'Go to Archived tasks'
         active_tasks: 'Go to Active tasks'
       add_tag: '+ Add tag'
+      search: 'Search...'
       archive_group:
         success_flash: "<strong>%{number}</strong> task(s) successfully archived."
         error_flash: "Failed to archive task(s)."