Add tags manager to experiment table view [SCI-7368]

app/assets/javascripts/experiments/table.js

@@ -88,13 +88,13 @@ ExperimnetTable.render.assigned = function(data) {
 };
 
 ExperimnetTable.render.tags = function(data) {
-  const value = parseInt(data, 10) === 0 ? I18n.t('experiments.table.add_tag') : data;
-  return `<a href="">${value}</a>`;
+  const value = parseInt(data.tags, 10) === 0 ? I18n.t('experiments.table.add_tag') : data.tags;
+  return `<a href="${data.edit_url}" id="myModuleTags${data.my_module_id}" data-remote="true" class="edit-tags-link">${value}</a>`;
 };
 
 ExperimnetTable.render.comments = function(data) {
-  return `<a href="#" 
-    class="open-comments-sidebar" id="comment-count-${data.id}" 
+  return `<a href="#"
+    class="open-comments-sidebar" id="comment-count-${data.id}"
     data-object-type="MyModule" data-object-id="${data.id}">
       ${data.count > 0 ? data.count : '+'}
       ${data.count_unseen > 0 ? `<span class="unseen-comments"> ${data.count_unseen} </span>` : ''}

app/assets/javascripts/my_modules.js

@@ -89,155 +89,6 @@
     });
   }
 
-
-  // Bind ajax for editing tags
-  function bindEditTagsAjax() {
-    var manageTagsModal = null;
-    var manageTagsModalBody = null;
-
-    // Initialize reloading of manage tags modal content after posting new
-    // tag.
-    function initAddTagForm() {
-      manageTagsModalBody.find('.add-tag-form')
-        .submit(function() {
-          var selectOptions = manageTagsModalBody.find('#new_my_module_tag .dropdown-menu li').length;
-          if (selectOptions === 0 && this.id === 'new_my_module_tag') return false;
-          return true;
-        })
-        .on('ajax:success', function(e, data) {
-          var newTag;
-          initTagsModalBody(data);
-          newTag = $('#manage-module-tags-modal .list-group-item').last();
-          dropdownSelector.addValue('#module-tags-selector', {
-            value: newTag.data('tag-id'),
-            label: newTag.data('name'),
-            params: {
-              color: newTag.data('color')
-            }
-          }, true);
-        });
-    }
-
-    // Initialize edit tag & remove tag functionality from my_module links.
-    function initTagRowLinks() {
-      manageTagsModalBody.find('.edit-tag-link')
-        .on('click', function() {
-          var $this = $(this);
-          var li = $this.parents('li.list-group-item');
-          var editDiv = $(li.find('div.tag-edit'));
-
-          // Revert all rows to their original states
-          manageTagsModalBody.find('li.list-group-item').each(function() {
-            var li2 = $(this);
-            li2.css('background-color', li2.data('color'));
-            li2.find('.edit-tag-form').clearFormErrors();
-            li2.find('input[type=text]').val(li2.data('name'));
-          });
-
-          // Hide all other edit divs, show all show divs
-          manageTagsModalBody.find('div.tag-edit').hide();
-          manageTagsModalBody.find('div.tag-show').show();
-
-          editDiv.find('input[type=text]').val(li.data('name'));
-          editDiv.find('.edit-tag-color').colorselector('setColor', li.data('color'));
-
-          li.find('div.tag-show').hide();
-          editDiv.show();
-        });
-      manageTagsModalBody.find('div.tag-edit .dropdown-colorselector > .dropdown-menu li a')
-        .on('click', function() {
-          // Change background of the <li>
-          var $this = $(this);
-          var li = $this.parents('li.list-group-item');
-          li.css('background-color', $this.data('value'));
-        });
-      manageTagsModalBody.find('.remove-tag-link')
-        .on('ajax:success', function(e, data) {
-          dropdownSelector.removeValue('#module-tags-selector', this.dataset.tagId, '', true);
-          initTagsModalBody(data);
-        });
-      manageTagsModalBody.find('.delete-tag-form')
-        .on('ajax:success', function(e, data) {
-          dropdownSelector.removeValue('#module-tags-selector', this.dataset.tagId, '', true);
-          initTagsModalBody(data);
-        });
-      manageTagsModalBody.find('.edit-tag-form')
-        .on('ajax:success', function(e, data) {
-          var newTag;
-          initTagsModalBody(data);
-          dropdownSelector.removeValue('#module-tags-selector', this.dataset.tagId, '', true);
-          newTag = $('#manage-module-tags-modal .list-group-item[data-tag-id=' + this.dataset.tagId + ']');
-          dropdownSelector.addValue('#module-tags-selector', {
-            value: newTag.data('tag-id'),
-            label: newTag.data('name'),
-            params: {
-              color: newTag.data('color')
-            }
-          }, true);
-        })
-        .on('ajax:error', function(e, data) {
-          $(this).renderFormErrors('tag', data.responseJSON);
-        });
-      manageTagsModalBody.find('.cancel-tag-link')
-        .on('click', function() {
-          var $this = $(this);
-          var li = $this.parents('li.list-group-item');
-
-          li.css('background-color', li.data('color'));
-          li.find('.edit-tag-form').clearFormErrors();
-
-          li.find('div.tag-edit').hide();
-          li.find('div.tag-show').show();
-        });
-    }
-
-    // Initialize ajax listeners and elements style on modal body. This
-    // function must be called when modal body is changed.
-    function initTagsModalBody(data) {
-      manageTagsModalBody.html(data.html);
-      manageTagsModalBody.find('.selectpicker').selectpicker();
-      initAddTagForm();
-      initTagRowLinks();
-    }
-
-    manageTagsModal = $('#manage-module-tags-modal');
-    manageTagsModalBody = manageTagsModal.find('.modal-body');
-
-    // Reload tags HTML element when modal is closed
-    manageTagsModal.on('hide.bs.modal', function() {
-      var tagsEl = $('#module-tags');
-
-      // Load HTML
-      $.ajax({
-        url: tagsEl.attr('data-module-tags-url'),
-        type: 'GET',
-        dataType: 'json',
-        success: function(data) {
-          var newOptions = $(data.html_module_header).find('option');
-          $('#module-tags-selector').find('option').remove();
-          $(newOptions).appendTo('#module-tags-selector').change();
-        },
-        error: function() {
-          // TODO
-        }
-      });
-    });
-
-    // Remove modal content when modal window is closed.
-    manageTagsModal.on('hidden.bs.modal', function() {
-      manageTagsModalBody.html('');
-    });
-    // initialize my_module tab remote loading
-    $('.edit-tags-link')
-      .on('ajax:before', function() {
-        manageTagsModal.modal('show');
-      })
-      .on('ajax:success', function(e, data) {
-        $('#manage-module-tags-modal-module').text(data.my_module.name);
-        initTagsModalBody(data);
-      });
-  }
-
   function checkStatusState() {
     $.getJSON($('.status-flow-dropdown').data('status-check-url'), (statusData) => {
       if (statusData.status_changing) {
@@ -440,7 +291,6 @@
   initTaskCollapseState();
   applyTaskStatusChangeCallBack();
   initTagsSelector();
-  bindEditTagsAjax();
   initStartDatePicker();
   initDueDatePicker();
   initAssignedUsersSelector();

app/assets/javascripts/my_modules/tags.js

@@ -0,0 +1,158 @@
+/* global dropdownSelector I18n */
+/* eslint-disable no-use-before-define */
+(function() {
+  // Bind ajax for editing tags
+  function bindEditTagsAjax() {
+    var manageTagsModal = null;
+    var manageTagsModalBody = null;
+
+    // Initialize reloading of manage tags modal content after posting new
+    // tag.
+    function initAddTagForm() {
+      manageTagsModalBody.find('.add-tag-form')
+        .submit(function() {
+          var selectOptions = manageTagsModalBody.find('#new_my_module_tag .dropdown-menu li').length;
+          if (selectOptions === 0 && this.id === 'new_my_module_tag') return false;
+          return true;
+        })
+        .on('ajax:success', function(e, data) {
+          var newTag;
+          initTagsModalBody(data);
+          newTag = $('#manage-module-tags-modal .list-group-item').last();
+          dropdownSelector.addValue('#module-tags-selector', {
+            value: newTag.data('tag-id'),
+            label: newTag.data('name'),
+            params: {
+              color: newTag.data('color')
+            }
+          }, true);
+        });
+    }
+    // Initialize edit tag & remove tag functionality from my_module links.
+    function initTagRowLinks() {
+      manageTagsModalBody.find('.edit-tag-link')
+        .on('click', function() {
+          var $this = $(this);
+          var li = $this.parents('li.list-group-item');
+          var editDiv = $(li.find('div.tag-edit'));
+
+          // Revert all rows to their original states
+          manageTagsModalBody.find('li.list-group-item').each(function() {
+            var li2 = $(this);
+            li2.css('background-color', li2.data('color'));
+            li2.find('.edit-tag-form').clearFormErrors();
+            li2.find('input[type=text]').val(li2.data('name'));
+          });
+
+          // Hide all other edit divs, show all show divs
+          manageTagsModalBody.find('div.tag-edit').hide();
+          manageTagsModalBody.find('div.tag-show').show();
+
+          editDiv.find('input[type=text]').val(li.data('name'));
+          editDiv.find('.edit-tag-color').colorselector('setColor', li.data('color'));
+
+          li.find('div.tag-show').hide();
+          editDiv.show();
+        });
+      manageTagsModalBody.find('div.tag-edit .dropdown-colorselector > .dropdown-menu li a')
+        .on('click', function() {
+          // Change background of the <li>
+          var $this = $(this);
+          var li = $this.parents('li.list-group-item');
+          li.css('background-color', $this.data('value'));
+        });
+      manageTagsModalBody.find('.remove-tag-link')
+        .on('ajax:success', function(e, data) {
+          dropdownSelector.removeValue('#module-tags-selector', this.dataset.tagId, '', true);
+          initTagsModalBody(data);
+        });
+      manageTagsModalBody.find('.delete-tag-form')
+        .on('ajax:success', function(e, data) {
+          dropdownSelector.removeValue('#module-tags-selector', this.dataset.tagId, '', true);
+          initTagsModalBody(data);
+        });
+      manageTagsModalBody.find('.edit-tag-form')
+        .on('ajax:success', function(e, data) {
+          var newTag;
+          initTagsModalBody(data);
+          dropdownSelector.removeValue('#module-tags-selector', this.dataset.tagId, '', true);
+          newTag = $('#manage-module-tags-modal .list-group-item[data-tag-id=' + this.dataset.tagId + ']');
+          dropdownSelector.addValue('#module-tags-selector', {
+            value: newTag.data('tag-id'),
+            label: newTag.data('name'),
+            params: {
+              color: newTag.data('color')
+            }
+          }, true);
+        })
+        .on('ajax:error', function(e, data) {
+          $(this).renderFormErrors('tag', data.responseJSON);
+        });
+      manageTagsModalBody.find('.cancel-tag-link')
+        .on('click', function() {
+          var $this = $(this);
+          var li = $this.parents('li.list-group-item');
+
+          li.css('background-color', li.data('color'));
+          li.find('.edit-tag-form').clearFormErrors();
+
+          li.find('div.tag-edit').hide();
+          li.find('div.tag-show').show();
+        });
+    }
+
+    // Initialize ajax listeners and elements style on modal body. This
+    // function must be called when modal body is changed.
+    function initTagsModalBody(data) {
+      manageTagsModalBody.html(data.html);
+      manageTagsModalBody.find('.selectpicker').selectpicker();
+      initAddTagForm();
+      initTagRowLinks();
+    }
+
+    manageTagsModal = $('#manage-module-tags-modal');
+    manageTagsModalBody = manageTagsModal.find('.modal-body');
+
+    // Reload tags HTML element when modal is closed
+    manageTagsModal.on('hide.bs.modal', function() {
+      var tagsEl = $('#module-tags');
+
+      if ($('#experimentTable').length) {
+        let tags = $('.tag-show').length;
+        $(`#myModuleTags${$('#tags_modal_my_module_id').val()}`).html(
+          tags === 0 ? I18n.t('experiments.table.add_tag') : tags
+        );
+      }
+
+      // Load HTML
+      $.ajax({
+        url: tagsEl.attr('data-module-tags-url'),
+        type: 'GET',
+        dataType: 'json',
+        success: function(data) {
+          var newOptions = $(data.html_module_header).find('option');
+          $('#module-tags-selector').find('option').remove();
+          $(newOptions).appendTo('#module-tags-selector').change();
+        },
+        error: function() {
+          // TODO
+        }
+      });
+    });
+    // Remove modal content when modal window is closed.
+    manageTagsModal.on('hidden.bs.modal', function() {
+      manageTagsModalBody.html('');
+    });
+    // initialize my_module tab remote loading
+    $('#experimentTable, .my-modules-protocols-index')
+      .on('ajax:before', '.edit-tags-link', function() {
+        manageTagsModal.modal('show');
+      })
+      .on('ajax:success', '.edit-tags-link', function(e, data) {
+        $('#manage-module-tags-modal-module').text(data.my_module.name);
+        initTagsModalBody(data);
+      });
+  }
+
+  bindEditTagsAjax();
+}());

app/services/experiments/table_view_service.rb

@@ -114,7 +114,11 @@ module Experiments
     end
 
     def tags_presenter(my_module)
-      my_module.tags.length
+      {
+        my_module_id: my_module.id,
+        tags: my_module.tags.length,
+        edit_url: my_module_tags_edit_path(my_module, format: :json)
+      }
     end
 
     def comments_presenter(my_module)

app/services/model_exporters/model_exporter.rb

@@ -3,7 +3,7 @@
 require 'fileutils'
 
 module ModelExporters
-  class ModelExporter
+  class
     attr_accessor :assets_to_copy
     attr_accessor :tiny_mce_assets_to_copy
 

app/views/experiments/table.html.erb

@@ -34,5 +34,7 @@
   </div>
 </div>
 
+<%= render partial: "my_modules/modals/manage_module_tags_modal", locals: { my_module: nil } %>
 
+<%= javascript_include_tag("my_modules/tags") %>
 <%= javascript_include_tag("experiments/table") %>

app/views/my_module_tags/_index_edit.html.erb

@@ -1,3 +1,4 @@
+<%= hidden_field_tag :tags_modal_my_module_id, @my_module.id %>
 <h5><%=t "experiments.canvas.modal_manage_tags.subtitle", module: @my_module.name %></h5>
 <% if @my_module_tags.size == 0 then %>
   <div class="row"><div class="col-xs-4"><em><%= t 'experiments.canvas.modal_manage_tags.no_tags' %></em></div></div>

app/views/my_modules/protocols.html.erb

@@ -171,6 +171,7 @@
 <%= render partial: "shared/formulas_libraries.html.erb" %>
 <%= javascript_include_tag("my_modules/protocols") %>
 <%= javascript_include_tag("my_modules/status_flow") %>
+<%= javascript_include_tag("my_modules/tags") %>
 <%= javascript_pack_tag 'emoji_button' %>
 <%= javascript_include_tag("my_modules/repositories") %>
 <%= javascript_include_tag("my_modules/pwa_mobile_app") %>

config/initializers/assets.rb

@@ -34,6 +34,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/tags.js)
 Rails.application.config.assets.precompile += %w(my_modules/archived.js)
 Rails.application.config.assets.precompile += %w(my_modules/pwa_mobile_app.js)
 Rails.application.config.assets.precompile += %w(assets/wopi/create_wopi_file.js)