Add new task modal field for Assign users for experiment views [SCI-7450] (#4670)

* Add new task modal field for Assign users for experiment views [SCI-7450]

* Fix loading users assigned to the experiment [SCI-7450]

* Fix task creation on experiment if none exists [SCI-7450]

app/assets/javascripts/experiments/show.js

@@ -1,7 +1,10 @@
+/* global dropdownSelector */
+
 (function() {
   function initNewMyModuleModal() {
     let experimentWrapper = '.experiment-new-my_module';
     let newMyModuleModal = '#new-my-module-modal';
+    let myModuleUserSelector = '#my_module_user_ids';
 
     // Modal's submit handler function
     $(experimentWrapper)
@@ -10,12 +13,19 @@
       })
       .on('ajax:error', newMyModuleModal, function(ev, data) {
         $(this).renderFormErrors('my_module', data.responseJSON);
-      });
-
-    $(experimentWrapper)
-      .on('ajax:success', '.new-my-module-button', function(ev, data) {
+      })
+      .on('submit', newMyModuleModal, function() {
+        // To submit correct assigned user ids to new modal
+        // Clear default selected user in dropdown
+        $(`${myModuleUserSelector} option[value=${$('#new-my-module-modal').data('user-id')}]`)
+          .prop('selected', false);
+        $.map(dropdownSelector.getValues(myModuleUserSelector), function(val) {
+          $(`${myModuleUserSelector} option[value=${val}]`).prop('selected', true);
+        });
+      })
+      .on('ajax:success', '.new-my-module-button', function(ev, result) {
         // Add and show modal
-        $(experimentWrapper).append($.parseHTML(data.html));
+        $(experimentWrapper).append($.parseHTML(result.html));
         $(newMyModuleModal).modal('show');
         $(newMyModuleModal).find("input[type='text']").focus();
 
@@ -23,6 +33,28 @@
         $(newMyModuleModal).on('hidden.bs.modal', function() {
           $(newMyModuleModal).remove();
         });
+
+        // initiaize user assing dropdown menu
+        dropdownSelector.init(myModuleUserSelector, {
+          closeOnSelect: true,
+          labelHTML: true,
+          tagClass: 'my-module-user-tags',
+          tagLabel: (data) => {
+            return `<img class="img-responsive block-inline" src="${data.params.avatar_url}" alt="${data.label}"/>
+                    <span style="user-full-name block-inline">${data.label}</span>`;
+          },
+          optionLabel: (data) => {
+            if (data.params.avatar_url) {
+              return `<span class="global-avatar-container" style="margin-top: 10px">
+                      <img src="${data.params.avatar_url}" alt="${data.label}"/></span>
+                      <span style="margin-left: 10px">${data.label}</span>`;
+            }
+
+            return data.label;
+          }
+        });
+
+        dropdownSelector.selectValues(myModuleUserSelector, $('#new-my-module-modal').data('user-id'));
       });
   }
 

app/assets/stylesheets/experiment/show.scss

@@ -21,3 +21,28 @@
     }
   }
 }
+
+#new-my-module-modal {
+  .form-control {
+    border-color: $color-silver-chalice;
+  }
+
+  .my-module-user-tags {
+    img {
+      border-radius: 50%;
+      display: inline;
+      margin-right: .5em;
+      max-height: 20px;
+      max-width: 20px;
+    }
+  }
+
+  .datetime-picker-container {
+    width: 45%;
+
+    .fa-calendar-alt {
+      color: $color-volcano !important;
+      font-size: 14px !important;
+    }
+  }
+}

app/assets/stylesheets/experiment/table.scss

@@ -472,15 +472,6 @@
   }
 }
 
-.datetime-picker-container {
-  width: 45%;
-
-  .fa-calendar-alt {
-    color: $color-volcano !important;
-    font-size: 14px !important;
-  }
-}
-
 .task_name-column span {
   color: $color-silver-chalice;
 }

app/controllers/my_modules_controller.rb

@@ -7,13 +7,15 @@ class MyModulesController < ApplicationController
   include ApplicationHelper
   include MyModulesHelper
 
-  before_action :load_vars, except: %i(restore_group)
+  before_action :load_vars, except: %i(restore_group create new)
+  before_action :load_experiment, only: %i(create new)
   before_action :check_create_permissions, only: %i(new create)
   before_action :check_archive_permissions, only: %i(update)
   before_action :check_manage_permissions, only: %i(
-    create description due_date update_description update_protocol_description update_protocol
+    description due_date update_description update_protocol_description update_protocol
   )
-  before_action :check_read_permissions, except: %i(update update_description update_protocol_description restore_group)
+  before_action :check_read_permissions, except: %i(create new update update_description
+                                                    update_protocol_description restore_group)
   before_action :check_update_state_permissions, only: :update_state
   before_action :set_inline_name_editing, only: %i(protocols results activities archive)
   before_action :load_experiment_my_modules, only: %i(protocols results activities archive)
@@ -22,17 +24,20 @@ class MyModulesController < ApplicationController
 
   def new
     @my_module = @experiment.my_modules.new
+    assigned_users = User.where(id: @experiment.user_assignments.select(:user_id))
+
     render json: {
       html: render_to_string(
-        partial: 'my_modules/modals/new_modal.html.erb', locals: { view_mode: params[:view_mode] }
+        partial: 'my_modules/modals/new_modal.html.erb', locals: { view_mode: params[:view_mode],
+                                                                   users: assigned_users }
       )
     }
   end
 
   def create
     max_xy = @experiment.my_modules.select('MAX("my_modules"."x") AS x, MAX("my_modules"."y") AS y').take
-    x = max_xy ? (max_xy.x + 10) : 1
-    y = max_xy ? (max_xy.y + 10) : 1
+    x = max_xy.x ? (max_xy.x + 10) : 1
+    y = max_xy.y ? (max_xy.y + 10) : 1
     @my_module = @experiment.my_modules.new(my_module_params)
     @my_module.assign_attributes(created_by: current_user, last_modified_by: current_user, x: x, y: y)
     @my_module.transaction do
@@ -434,6 +439,11 @@ class MyModulesController < ApplicationController
     end
   end
 
+  def load_experiment
+    @experiment = Experiment.preload(user_assignments: %i(user user_role)).find_by(id: params[:id])
+    render_404 unless @experiment
+  end
+
   def load_experiment_my_modules
     @experiment_my_modules = if @my_module.experiment.archived_branch?
                                @my_module.experiment.my_modules.order(:name)

app/views/my_modules/modals/_new_modal.html.erb

@@ -1,4 +1,5 @@
-<div class="modal" id="new-my-module-modal" tabindex="-1" role="dialog" data-create-url="<%= modules_experiment_path(@experiment) %>">
+<div class="modal" id="new-my-module-modal" tabindex="-1" role="dialog" 
+     data-create-url="<%= modules_experiment_path(@experiment) %>" data-user-id="<%= current_user.id %>">
   <%= bootstrap_form_for @my_module, url: modules_experiment_path(@experiment), remote: true do |f| %>
     <div class="modal-dialog" role="document">
       <div class="modal-content">
@@ -35,6 +36,26 @@
               </div>
             </div>
           </div>
+          
+          <div class="row">
+            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+              <%= f.select 'user_ids',
+                            options_for_select(users.map{ |user|
+                              [
+                                user.full_name,
+                                user.id,
+                                {'data-params' => {avatar_url: avatar_path(user, :icon_small) }.to_json}
+                              ]
+                            }),
+                            {
+                              id: 'new-modal-assigned-users-selector',
+                              label:  t('experiments.canvas.new_my_module_modal.assigned_users') 
+                            }, {
+                              :multiple => true
+                            } %>
+            </div>
+          </div>
+
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-dismiss="modal">

config/locales/en.yml

@@ -1377,6 +1377,7 @@ en:
         name_placeholder: "e.g. My task"
         due_date: "Due date (optional)"
         due_date_placeholder: "+ Add due date"
+        assigned_users: "Assign task to (optional)"
         tags: "Add tags (optional)"
         create: "Create"
         enter_placeholder: 'Enter...'