diff --git a/app/assets/javascripts/experiments/show.js b/app/assets/javascripts/experiments/show.js index c4832498c..9de3cd6a1 100644 --- a/app/assets/javascripts/experiments/show.js +++ b/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 `${data.label} + ${data.label}`; + }, + optionLabel: (data) => { + if (data.params.avatar_url) { + return ` + ${data.label} + ${data.label}`; + } + + return data.label; + } + }); + + dropdownSelector.selectValues(myModuleUserSelector, $('#new-my-module-modal').data('user-id')); }); } diff --git a/app/assets/stylesheets/experiment/show.scss b/app/assets/stylesheets/experiment/show.scss index 71991edc2..5da5c4285 100644 --- a/app/assets/stylesheets/experiment/show.scss +++ b/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; + } + } +} diff --git a/app/assets/stylesheets/experiment/table.scss b/app/assets/stylesheets/experiment/table.scss index 555049c90..997944650 100644 --- a/app/assets/stylesheets/experiment/table.scss +++ b/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; } diff --git a/app/controllers/my_modules_controller.rb b/app/controllers/my_modules_controller.rb index d7d3973e8..1e7bfcfb7 100644 --- a/app/controllers/my_modules_controller.rb +++ b/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) diff --git a/app/views/my_modules/modals/_new_modal.html.erb b/app/views/my_modules/modals/_new_modal.html.erb index 9ff71149c..d17753e89 100644 --- a/app/views/my_modules/modals/_new_modal.html.erb +++ b/app/views/my_modules/modals/_new_modal.html.erb @@ -1,4 +1,5 @@ -