diff --git a/app/assets/javascripts/my_modules/assigned_users.js b/app/assets/javascripts/my_modules/assigned_users.js
new file mode 100644
index 000000000..4a96775b0
--- /dev/null
+++ b/app/assets/javascripts/my_modules/assigned_users.js
@@ -0,0 +1,81 @@
+/* global I18n dropdownSelector HelperModule animateSpinner */
+/* eslint-disable no-use-before-define */
+(function() {
+ function initAssignedUsersSelector() {
+ var myModuleUserSelector = '#module-assigned-users-selector';
+
+ dropdownSelector.init(myModuleUserSelector, {
+ closeOnSelect: true,
+ labelHTML: true,
+ tagClass: 'my-module-user-tags',
+ tagLabel: (data) => {
+ return `
+ ${data.label}`;
+ },
+ customDropdownIcon: () => {
+ return '';
+ },
+ optionLabel: (data) => {
+ if (data.params.avatar_url) {
+ return `
+
+ ${data.label}`;
+ }
+
+ return data.label;
+ },
+ onSelect: function() {
+ var selectElement = $(myModuleUserSelector);
+ var lastUser = selectElement.next().find('.ds-tags').last();
+ var lastUserId = lastUser.find('.tag-label').data('ds-tag-id');
+ var newUser;
+
+ if (lastUserId > 0) {
+ newUser = {
+ user_my_module: {
+ user_id: lastUserId
+ }
+ };
+ } else {
+ newUser = {
+ user_my_module: {
+ user_id: selectElement.val()
+ }
+ };
+ }
+
+ $.post(selectElement.data('users-create-url'), newUser, function(result) {
+ dropdownSelector.removeValue(myModuleUserSelector, 0, '', true);
+ dropdownSelector.addValue(myModuleUserSelector, {
+ value: result.user.id,
+ label: result.user.full_name,
+ params: {
+ avatar_url: result.user.avatar_url,
+ user_module_id: result.user.user_module_id
+ }
+ }, true);
+ }).fail(function() {
+ dropdownSelector.removeValue(myModuleUserSelector, lastUserId, '', true);
+ });
+ },
+ onUnSelect: (id) => {
+ var umID = $(myModuleUserSelector).find(`option[value="${id}"]`).data('params').user_module_id;
+
+ $.ajax({
+ url: `${$(myModuleUserSelector).data('update-module-users-url')}/${umID}`,
+ type: 'DELETE',
+ success: () => {
+ dropdownSelector.closeDropdown(myModuleUserSelector);
+ },
+ error: (r) => {
+ if (r.status === 403) {
+ HelperModule.flashAlertMsg(I18n.t('general.no_permissions'), 'danger');
+ }
+ }
+ });
+ }
+ }).getContainer(myModuleUserSelector).addClass('my-module-users-container');
+ }
+
+ initAssignedUsersSelector();
+}());
diff --git a/app/views/user_my_modules/_index.html.erb b/app/views/user_my_modules/_index.html.erb
index 60efd7322..7977a7c2a 100644
--- a/app/views/user_my_modules/_index.html.erb
+++ b/app/views/user_my_modules/_index.html.erb
@@ -19,3 +19,5 @@
'data-view-mode': !can_manage_my_module_designated_users?(my_module)
} %>
+
+<%= javascript_include_tag 'my_modules/assigned_users' %>
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index f0c69bfd4..bbbbf2d91 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -31,6 +31,7 @@ Rails.application.config.assets.precompile += %w(my_modules/status_flow.js)
Rails.application.config.assets.precompile += %w(my_modules/protocols/protocol_status_bar.js)
Rails.application.config.assets.precompile += %w(my_modules/results.js)
Rails.application.config.assets.precompile += %w(my_modules/stock.js)
+Rails.application.config.assets.precompile += %w(my_modules/assigned_users.js)
Rails.application.config.assets.precompile += %w(my_modules/tags.js)
Rails.application.config.assets.precompile += %w(my_modules/archived.js)
Rails.application.config.assets.precompile += %w(my_modules/pwa_mobile_app.js)