From f22f076e6cfbf96e071a961719e3fc9bd2911fea Mon Sep 17 00:00:00 2001 From: Mojca Lorber Date: Wed, 8 Apr 2020 16:24:59 +0200 Subject: [PATCH 1/2] Add the user management secion of to the Details section of task layout --- app/assets/javascripts/my_modules.js | 68 +++++++++++++++++++ .../my_modules/protocols/index.scss | 16 ++++- app/controllers/user_my_modules_controller.rb | 12 ++++ .../my_modules/_my_module_details.html.erb | 11 +++ .../user_my_modules/_index_compact.html.erb | 27 ++++++++ config/locales/en.yml | 1 + config/routes.rb | 7 +- 7 files changed, 139 insertions(+), 3 deletions(-) create mode 100644 app/views/user_my_modules/_index_compact.html.erb diff --git a/app/assets/javascripts/my_modules.js b/app/assets/javascripts/my_modules.js index 99f3c8859..f33e26897 100644 --- a/app/assets/javascripts/my_modules.js +++ b/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(); diff --git a/app/assets/stylesheets/my_modules/protocols/index.scss b/app/assets/stylesheets/my_modules/protocols/index.scss index 3d541443e..4a7080031 100644 --- a/app/assets/stylesheets/my_modules/protocols/index.scss +++ b/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 { diff --git a/app/controllers/user_my_modules_controller.rb b/app/controllers/user_my_modules_controller.rb index 61338902c..b72bdfe5a 100644 --- a/app/controllers/user_my_modules_controller.rb +++ b/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 diff --git a/app/views/my_modules/_my_module_details.html.erb b/app/views/my_modules/_my_module_details.html.erb index 1639aac5d..47dfb22d1 100644 --- a/app/views/my_modules/_my_module_details.html.erb +++ b/app/views/my_modules/_my_module_details.html.erb @@ -27,6 +27,14 @@ +
+
+ + <%= t('my_modules.details.assigned_users') %> +
+ <%= render partial: "user_my_modules/index_compact" %> +
+
@@ -35,5 +43,8 @@
+ +<%= render partial: "my_modules/modals/manage_users_modal" %> + <%= render partial: "my_modules/modals/manage_module_tags_modal", locals: { my_module: @my_module } %> diff --git a/app/views/user_my_modules/_index_compact.html.erb b/app/views/user_my_modules/_index_compact.html.erb new file mode 100644 index 000000000..c5a6ea4e1 --- /dev/null +++ b/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) %> + + <% user_my_modules.each_with_index do |user_my_module, i| %> + <% user = user_my_module.user %> + + <%= image_tag avatar_path(user, :icon_small) %> + + <% end %> + + + + +<% else %> +
+ <% user_my_modules.each_with_index do |user_my_module, i| %> + <% user = user_my_module.user %> + + <%= image_tag avatar_path(user, :icon_small) %> + + <% end %> +
+<% end %> diff --git a/config/locales/en.yml b/config/locales/en.yml index bf7d28223..e4bf6053f 100644 --- a/config/locales/en.yml +++ b/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" diff --git a/config/routes.rb b/config/routes.rb index 9a8895415..c8e07e4fb 100644 --- a/config/routes.rb +++ b/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_compact + end + end resources :my_module_comments, path: '/comments', only: [:index, :create, :edit, :update, :destroy] From e9959747d670727868e18e9785c11aa2c7f985f9 Mon Sep 17 00:00:00 2001 From: Mojca Lorber Date: Tue, 14 Apr 2020 17:25:36 +0200 Subject: [PATCH 2/2] small refactor --- app/assets/javascripts/my_modules.js | 36 ++++-------- app/controllers/user_my_modules_controller.rb | 10 ++-- .../canvas/full_zoom/_my_module.html.erb | 4 +- .../my_modules/_my_module_details.html.erb | 2 +- app/views/user_my_modules/_index.html.erb | 57 ++++++++----------- .../user_my_modules/_index_compact.html.erb | 27 --------- app/views/user_my_modules/_index_old.html.erb | 34 +++++++++++ config/routes.rb | 2 +- 8 files changed, 80 insertions(+), 92 deletions(-) delete mode 100644 app/views/user_my_modules/_index_compact.html.erb create mode 100644 app/views/user_my_modules/_index_old.html.erb diff --git a/app/assets/javascripts/my_modules.js b/app/assets/javascripts/my_modules.js index f33e26897..a275d1420 100644 --- a/app/assets/javascripts/my_modules.js +++ b/app/assets/javascripts/my_modules.js @@ -291,45 +291,34 @@ function initTagsSelector() { } function initAssignedUsersSelector() { - var manageUsersModal = null; - var manageUsersModalBody = null; + var manageUsersModal = $('#manage-module-users-modal'); + var manageUsersModalBody = manageUsersModal.find('.modal-body'); // Initialize users editing modal remote loading function initUsersEditLink() { - $('.task-details .manage-users-link').on('ajax:success', function(e, data) { + $('.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 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'); + // 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() { @@ -341,7 +330,6 @@ function initAssignedUsersSelector() { dataType: 'json', success: function(data) { $('.task-assigned-users').replaceWith(data.html); - initUsersEditLink(); }, error: function() { // TODO diff --git a/app/controllers/user_my_modules_controller.rb b/app/controllers/user_my_modules_controller.rb index b72bdfe5a..2eb5b1ef1 100644 --- a/app/controllers/user_my_modules_controller.rb +++ b/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,12 +19,12 @@ class UserMyModulesController < ApplicationController end end - def index_compact + def index respond_to do |format| format.json do render json: { html: render_to_string( - partial: 'index_compact.html.erb' + partial: 'index.html.erb' ) } end diff --git a/app/views/canvas/full_zoom/_my_module.html.erb b/app/views/canvas/full_zoom/_my_module.html.erb index 1ff3cfe9f..bdb4a4381 100644 --- a/app/views/canvas/full_zoom/_my_module.html.erb +++ b/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 @@