Update tags selection [SCI-7645]

app/assets/javascripts/experiments/show.js

@@ -1,11 +1,11 @@
-/* global dropdownSelector initBSTooltips */
+/* global dropdownSelector initBSTooltips I18n */
 
 (function() {
   function initNewMyModuleModal() {
     let experimentWrapper = '.experiment-new-my_module';
     let newMyModuleModal = '#new-my-module-modal';
     let myModuleUserSelector = '#my_module_user_ids';
-    var myModuleTagsSelector = '#my_module_tag_ids';
+    var myModuleTagsSelector = '#module-tags-selector';
 
 
     // Modal's submit handler function
@@ -24,14 +24,6 @@
         $.map(dropdownSelector.getValues(myModuleUserSelector), function(val) {
           $(`${myModuleUserSelector} option[value=${val}]`).prop('selected', true);
         });
-        // For submitting correct id values of the chosen tags
-        $.map(dropdownSelector.getValues(myModuleTagsSelector), function(val) {
-          if ($(`${myModuleTagsSelector} option[value=${val}]`).length === 0) {
-            $(myModuleTagsSelector).append($(`<option selected="true" value="${val}">${val}</option>`));
-          } else {
-            $(`${myModuleTagsSelector} option[value=${val}]`).prop('selected', true);
-          }
-        });
       })
       .on('ajax:success', '.new-my-module-button', function(ev, result) {
         // Add and show modal
@@ -84,28 +76,25 @@
                     ${data.label + ' '}
                     <span class="my-module-tags-create-new"> (${I18n.t('my_modules.details.create_new_tag')})</span>`;
           },
-          onOpen: function() {
-            $('.select-container .edit-button-container').removeClass('hidden');
-          },
-          onClose: function() {
-            $('.select-container .edit-button-container').addClass('hidden');
+          ajaxParams: function(params) {
+            let newParams = params;
+            newParams.selected_tags = JSON.stringify(dropdownSelector.getValues(myModuleTagsSelector));
+            return newParams;
           },
           onSelect: function() {
             var selectElement = $(myModuleTagsSelector);
             var lastTag = selectElement.next().find('.ds-tags').last();
             var lastTagId = lastTag.find('.tag-label').data('ds-tag-id');
-            var newTag;
 
             if (lastTagId > 0) {
-              newTag = { my_module_tag: { tag_id: lastTagId } };
+              $('#my_module_tag_ids').val(JSON.stringify(dropdownSelector.getValues(myModuleTagsSelector)));
             } else {
-              newTag = {
+              let newTag = {
                 tag: {
                   name: lastTag.find('.tag-label').html(),
                   project_id: selectElement.data('project-id'),
                   color: null
                 },
-                my_module_id: selectElement.data('module-id'),
                 simple_creation: true
               };
               $.post(selectElement.data('tags-create-url'), newTag, function(res) {
@@ -117,6 +106,7 @@
                     color: res.tag.color
                   }
                 }, true);
+                $('#my_module_tag_ids').val(JSON.stringify(dropdownSelector.getValues(myModuleTagsSelector)));
               }).fail(function() {
                 dropdownSelector.removeValue(myModuleTagsSelector, lastTagId, '', true);
               });

app/controllers/experiments_controller.rb

@@ -272,11 +272,9 @@ class ExperimentsController < ApplicationController
   end
 
   def search_tags
-    assigned_tags = []
-    all_tags = @experiment.project.tags
-    tags = all_tags.where.not(id: assigned_tags)
-                   .where_attributes_like(:name, params[:query])
-                   .select(:id, :name, :color)
+    tags = @experiment.project.tags.where.not(id: JSON.parse(params[:selected_tags]))
+                      .where_attributes_like(:name, params[:query])
+                      .select(:id, :name, :color)
 
     tags = tags.map do |tag|
       { value: tag.id, label: sanitize_input(tag.name), params: { color: sanitize_input(tag.color) } }

app/controllers/my_modules_controller.rb

@@ -42,7 +42,7 @@ class MyModulesController < ApplicationController
     @my_module.assign_attributes(created_by: current_user, last_modified_by: current_user, x: x, y: y)
     @my_module.transaction do
       if my_module_tags_params[:tag_ids].present?
-        @my_module.tags << @experiment.project.tags.where(id: my_module_tags_params[:tag_ids])
+        @my_module.tags << @experiment.project.tags.where(id: JSON.parse(my_module_tags_params[:tag_ids]))
       end
       if my_module_designated_users_params[:user_ids].present?
         @my_module.designated_users << @experiment.users.where(id: my_module_designated_users_params[:user_ids])
@@ -503,7 +503,7 @@ class MyModulesController < ApplicationController
   end
 
   def my_module_tags_params
-    params.require(:my_module).permit(tag_ids: [])
+    params.require(:my_module).permit(:tag_ids)
   end
 
   def my_module_designated_users_params

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

@@ -39,11 +39,9 @@
 
           <div class="row">
             <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
-              <%= f.select 'tag_ids', options_for_select([]),
-                                    {
-                                      id: 'module-tags-selector',
-                                      label: t('experiments.canvas.new_my_module_modal.assigned_tags_label')
-                                    },
+              <%= f.hidden_field :tag_ids%>
+              <label><%= t('experiments.canvas.new_my_module_modal.assigned_tags_label') %></label>
+              <%= select_tag 'module-tags-selector', options_for_select([]),
                                     data: {
                                             'tags-create-url': project_create_tag_path(project_id: @experiment.project_id),
                                             'ajax-url': search_tags_experiment_path,