Merge pull request #7584 from artoscinote/ma_SCI_10687

Make canvas tags modal the same element for all tasks [SCI-10687]

app/assets/javascripts/my_modules/tags.js

@@ -147,10 +147,10 @@
     // initialize my_module tab remote loading
     $('#experimentTable, .my-modules-protocols-index, #experiment-canvas')
       .on('click', '.edit-tags-link', function() {
-        if($('#tagsModalComponent').length) {
-          $('#tagsModalComponent').data('tagsModal').open()
+        if (window.tagsModal) {
+          window.tagsModal.open($(this).closest('.module-large').data('module-url'));
         }
-      })
+      });
   }
 
   bindEditTagsAjax();

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

@@ -976,7 +976,7 @@ function bindEditTagsAjax(elements) {
   $(elements).find("a.edit-tags-link")
   .on('click', function(){
     $(this).addClass('updated-module-tags');
-    var modal = $(this).closest(".panel-default").find('.tags-modal-component').data('tagsModal').open();
+    var modal = $('#tagsModalComponent');
   });
 }
 

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

@@ -4,63 +4,69 @@ 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);
+const app = createApp({
+  data() {
+    return {
+      myModuleParams: null,
+      tagsModalOpen: false,
+      tagsUrl: null
+    };
+  },
+  mounted() {
+    window.tagsModal = this;
+  },
+  beforeUnmount() {
+    delete window.tagsModal;
+  },
+  methods: {
+    open(myModuleUrl) {
+      $.ajax({
+        url: myModuleUrl,
+        type: 'GET',
+        dataType: 'json',
+        success: (data) => {
+          this.myModuleParams = { ...data.data.attributes, id: data.data.id };
+          this.tagsModalOpen = true;
         }
+      });
+    },
+    close() {
+      this.myModuleParams = null;
+      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);
-              });
-            }
-          });
-        }
+      // Canvas
+      if ($('#canvas-container').length) {
+        $.ajax({
+          url: this.tagsUrl,
+          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);
-};
-
-const tagsModalContainers = document.querySelectorAll('.vue-tags-modal:not(.initialized)');
-tagsModalContainers.forEach((container) => {
-  $(container).addClass('initialized');
-  window.initTagsModalComponent(`#${container.id}`);
+  }
 });
+app.component('tags-modal', TagsModal);
+app.config.globalProperties.i18n = window.I18n;
+mountWithTurbolinks(app, '#tagsModalContainer');

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

@@ -10,7 +10,8 @@
   data-module-y="<%= my_module.y %>"
   data-module-conns="<%= construct_module_connections(my_module) %>"
   data-module-users-tab-url="<%=  designated_users_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) %>">
+  data-module-tags-url="<%= my_module_tags_experiment_path(my_module.experiment, format: :json) %>"
+  data-module-url="<%= my_module_path(my_module, format: :json) %>">
 
   <div data-view-mode="active">
     <a class="edit-tags-link pull-right" data-remote="true" href="<%= my_module_tags_edit_url(my_module, format: :json) %>">
@@ -114,7 +115,4 @@
       <div role="tabpanel" class="tab-pane" id="<%= my_module.id %>_comments" data-contents="comments"></div>
     </div>
   </div>
-
-  <%= render partial: 'canvas/full_zoom/tags_modal', locals: { my_module: my_module }%>
 </div>
-

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

@@ -1,25 +1,14 @@
-<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 id="tagsModalContainer" class="vue-tags-modal">
+  <div ref="tagsModal" class="tags-modal-component" id="tagsModalComponent"></div>
+  <teleport to="body">
+    <tags-modal v-if="tagsModalOpen"
+      :tags-colors="<%= Constants::TAG_COLORS.to_json %>"
+      :params="myModuleParams"
+      project-name="<%= @project.name  %>"
+      project-tags-url="<%= project_tags_path(@project) %>"
+      @close="close"
+      @tags-loaded="syncTags"
+    />
+  </teleport>
+</div>
+<%= javascript_include_tag 'vue_legacy_tags_modal' %>

app/views/experiments/canvas.html.erb

@@ -75,6 +75,7 @@
 </div>
 
 <!-- Manage tags modal -->
+<%= render partial: 'canvas/full_zoom/tags_modal' %>
 <%= render partial: "my_modules/modals/manage_module_tags_modal", locals: { my_module: nil } %>
 <%= javascript_include_tag("my_modules/tags") %>