Replace legacy tags modal [SCI-10125]

app/assets/javascripts/my_modules/tags.js

@@ -146,13 +146,11 @@
     });
     // initialize my_module tab remote loading
     $('#experimentTable, .my-modules-protocols-index, #experiment-canvas')
-      .on('ajax:before', '.edit-tags-link', function() {
-        manageTagsModal.modal('show');
+      .on('click', '.edit-tags-link', function() {
+        if($('#tagsModalComponent').length) {
+          $('#tagsModalComponent').data('tagsModal').open()
+        }
       })
-      .on('ajax:success', '.edit-tags-link', function(e, data) {
-        $('#manage-module-tags-modal-module').text(data.my_module.name);
-        initTagsModalBody(data);
-      });
   }
 
   bindEditTagsAjax();

app/assets/javascripts/projects/canvas.js.erb

@@ -933,17 +933,9 @@ function bindEditTagsAjax(elements) {
 
   // initialize my_module tab remote loading
   $(elements).find("a.edit-tags-link")
-  .on("ajax:before", function () {
-    var moduleId = $(this).closest(".panel-default").attr("data-module-id");
-    manageTagsModal.attr("data-module-id", moduleId);
-    manageTagsModal.modal('show');
-  })
-  .on("ajax:success", function (e, data) {
-    $("#manage-module-tags-modal-module").text(data.my_module.name);
-    initTagsModalBody(data);
-  })
   .on('click', function(){
     $(this).addClass('updated-module-tags');
+    var modal = $(this).closest(".panel-default").find('.tags-modal-component').data('tagsModal').open();
   });
 }
 

app/javascript/packs/vue/legacy/tags_modal.js

@@ -0,0 +1,68 @@
+/* global I18n dropdownSelector */
+
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
+import TagsModal from '../../../vue/my_modules/modals/tags.vue';
+import { mountWithTurbolinks } from '../helpers/turbolinks.js';
+
+window.initTagsModalComponent = (id) => {
+  const app = createApp({
+    data() {
+      return {
+        tagsModalOpen: false
+      };
+    },
+    mounted() {
+      $(this.$refs.tagsModal).data('tagsModal', this);
+    },
+    methods: {
+      open() {
+        this.tagsModalOpen = true;
+      },
+      close() {
+        this.tagsModalOpen = false;
+      },
+      syncTags(tags) {
+        // My module page
+        if ($('#module-tags-selector').length) {
+          const assignedTags = tags.filter((i) => i.assigned).map((i) => (
+            {
+              value: i.id,
+              label: i.attributes.name,
+              params: {
+                color: i.attributes.color
+              }
+            }
+          ));
+          dropdownSelector.setData('#module-tags-selector', assignedTags);
+        }
+
+        // Canvas
+        if ($('#canvas-container').length) {
+          $.ajax({
+            url: $('#canvas-container').attr('data-module-tags-url'),
+            type: 'GET',
+            dataType: 'json',
+            success(data) {
+              $.each(data.my_modules, (index, myModule) => {
+                $(`div.panel[data-module-id='${myModule.id}']`)
+                  .find('.edit-tags-link')
+                  .html(myModule.tags_html);
+              });
+            }
+          });
+        }
+      }
+    }
+  });
+  app.component('tags-modal', TagsModal);
+  app.config.globalProperties.i18n = window.I18n;
+  mountWithTurbolinks(app, id);
+};
+
+document.addEventListener('turbolinks:load', () => {
+  const tagsModalContainers = document.querySelectorAll('.vue-tags-modal:not(.initialized)');
+  tagsModalContainers.forEach((container) => {
+    $(container).addClass('initialized')
+    window.initTagsModalComponent(`#${container.id}`);
+  });
+});

app/javascript/vue/my_modules/modals/tags.vue

@@ -141,7 +141,7 @@ import ConfirmationModal from '../../shared/confirmation_modal.vue';
 
 export default {
   name: 'TagsModal',
-  emits: ['close'],
+  emits: ['close', 'tagsLoaded'],
   props: {
     params: {
       required: true
@@ -231,6 +231,7 @@ export default {
             tag.assigned = false;
           }
         });
+        this.$emit('tagsLoaded', this.allTags);
         this.loadingTags = false;
       });
     },

app/views/canvas/full_zoom/_my_module.html.erb

@@ -114,5 +114,31 @@
       <div role="tabpanel" class="tab-pane" id="<%= my_module.id %>_comments" data-contents="comments"></div>
     </div>
   </div>
+
+  <div id="tagsModalContainer-<%= my_module.id %>" class="vue-tags-modal">
+    <div ref="tagsModal" class="tags-modal-component" id="tagsModalComponent-<%= my_module.id %>"></div>
+    <teleport to="body">
+      <tags-modal v-if="tagsModalOpen"
+        :params="<%=
+          {
+            id: my_module.id,
+            permissions: {
+              manage_tags: can_manage_my_module_tags?(my_module)
+            },
+            urls: {
+              assigned_tags: assigned_tags_my_module_my_module_tags_path(my_module),
+              assign_tags: my_module_my_module_tags_path(my_module)
+            }
+          }.to_json
+        %>"
+        :tags-colors="<%= Constants::TAG_COLORS.to_json %>"
+        project-name="<%= my_module.experiment.project.name  %>"
+        project-tags-url="<%= project_tags_path(my_module.experiment.project) %>"
+        @close="close"
+        @tags-loaded="syncTags"
+      />
+    </teleport>
+  </div>
+  <%= javascript_include_tag 'vue_legacy_tags_modal' %>
 </div>
 

app/views/my_modules/protocols.html.erb

@@ -155,6 +155,32 @@
 <!-- Consume Stock Modal -->
 <%= render partial: 'my_modules/repositories/consume_stock_modal'%>
 
+<!-- Tags modal -->
+<div id="tagsModalContainer" class="vue-tags-modal">
+  <div ref="tagsModal" id="tagsModalComponent"></div>
+  <teleport to="body">
+    <tags-modal v-if="tagsModalOpen"
+      :params="<%=
+        {
+          id: @my_module.id,
+          permissions: {
+            manage_tags: can_manage_my_module_tags?(@my_module)
+          },
+          urls: {
+            assigned_tags: assigned_tags_my_module_my_module_tags_path(@my_module),
+            assign_tags: my_module_my_module_tags_path(@my_module)
+          }
+        }.to_json
+      %>"
+      :tags-colors="<%= Constants::TAG_COLORS.to_json %>"
+      project-name="<%= @experiment.project.name  %>"
+      project-tags-url="<%= project_tags_path(@experiment.project) %>"
+      @close="close"
+      @tags-loaded="syncTags"
+    />
+  </teleport>
+</div>
+
 <%= javascript_include_tag 'inputmask' %>
 <%= stylesheet_link_tag 'datatables' %>
 <%= javascript_include_tag "handsontable.full" %>
@@ -169,4 +195,4 @@
 <%= javascript_include_tag "protocols/new_protocol" %>
 
 <%= javascript_include_tag 'vue_protocol' %>
-
+<%= javascript_include_tag 'vue_legacy_tags_modal' %>

config/webpack/webpack.config.js

@@ -58,7 +58,8 @@ const entryList = {
   vue_reports_table: './app/javascript/packs/vue/reports_table.js',
   vue_open_locally_menu: './app/javascript/packs/vue/open_locally_menu.js',
   vue_scinote_edit_download: './app/javascript/packs/vue/scinote_edit_download.js',
-  vue_design_system_modals: './app/javascript/packs/vue/design_system/modals.js'
+  vue_design_system_modals: './app/javascript/packs/vue/design_system/modals.js',
+  vue_legacy_tags_modal: './app/javascript/packs/vue/legacy/tags_modal.js'
 };
 
 // Engine pack loading based on https://github.com/rails/webpacker/issues/348#issuecomment-635480949