Broken modal for sharing inventories [SCI-8548] (#5506)

* Fix share_modal js loading [SCI-8548]

Co-authored-by: Sboursen <dev.sboursen@gmail.com>

* Fix hound [SCI-8548]

Co-authored-by: Sboursen <dev.sboursen@gmail.com>

* Fix hound [SCI-8548]

Co-authored-by: Sboursen <dev.sboursen@gmail.com>

---------

Co-authored-by: Sboursen <dev.sboursen@gmail.com>

app/assets/javascripts/repositories/share_modal.js

@@ -0,0 +1,68 @@
+/* global HelperModule PerfectScrollbar */
+
+// eslint-disable-next-line no-unused-vars
+var ShareModal = (function() {
+  function init() {
+    var form = $('.share-repo-modal').find('form');
+    var sharedCBs = form.find("input[name='share_team_ids[]']");
+    var permissionCBs = form.find("input[name='write_permissions[]']");
+    var permissionChanges = form.find("input[name='permission_changes']");
+    var submitBtn = form.find('input[type="submit"]');
+    var selectAllCheckbox = form.find('.all-teams .sci-checkbox');
+
+    form.find('.teams-list').find('input.sci-checkbox, .permission-selector')
+      .toggleClass('hidden', selectAllCheckbox.is(':checked'));
+    form.find('.all-teams .sci-toggle-checkbox')
+      .toggleClass('hidden', !selectAllCheckbox.is(':checked'))
+      .attr('disabled', !selectAllCheckbox.is(':checked'));
+
+    selectAllCheckbox.change(function() {
+      form.find('.teams-list').find('input.sci-checkbox, .permission-selector')
+        .toggleClass('hidden', this.checked);
+      form.find('.all-teams .sci-toggle-checkbox').toggleClass('hidden', !this.checked)
+        .attr('disabled', !this.checked);
+    });
+
+    sharedCBs.change(function() {
+      var selectedTeams = form.find('.teams-list .sci-checkbox:checked').length;
+      form.find('#select_all_teams').prop('indeterminate', selectedTeams > 0);
+      $('#editable_' + this.value).toggleClass('hidden', !this.checked)
+        .attr('disabled', !this.checked);
+    });
+
+    if (form.find('.teams-list').length) new PerfectScrollbar(form.find('.teams-list')[0]);
+
+    permissionCBs.change(function() {
+      var changes = JSON.parse(permissionChanges.val());
+      changes[this.value] = 'true';
+      permissionChanges.val(JSON.stringify(changes));
+    });
+
+    submitBtn.on('click', function(event) {
+      event.preventDefault();
+      $.ajax({
+        type: 'POST',
+        url: form.attr('action'),
+        data: form.serialize(),
+        success: function(data) {
+          if (data.warnings) {
+            alert(data.warnings);
+          }
+          $(`#slide-panel li.active .repository-share-status,
+             #repository-toolbar .repository-share-status
+          `).toggleClass('hidden', !data.status);
+          HelperModule.flashAlertMsg(form.data('success-message'), 'success');
+          $('.share-repo-modal').modal('hide');
+        },
+        error: function(data) {
+          alert(data.responseJSON.errors);
+          $('.share-repo-modal').modal('hide');
+        }
+      });
+    });
+  }
+
+  return {
+    init: init
+  };
+}());

app/assets/javascripts/repositories/show.js

@@ -94,66 +94,6 @@
     closeBtn.on('click', pageReload);
   }
 
-  function initShareModal() {
-    var form = $('.share-repo-modal').find('form');
-    var sharedCBs = form.find("input[name='share_team_ids[]']");
-    var permissionCBs = form.find("input[name='write_permissions[]']");
-    var permissionChanges = form.find("input[name='permission_changes']");
-    var submitBtn = form.find('input[type="submit"]');
-    var selectAllCheckbox = form.find('.all-teams .sci-checkbox');
-
-    form.find('.teams-list').find('input.sci-checkbox, .permission-selector')
-      .toggleClass('hidden', selectAllCheckbox.is(':checked'));
-    form.find('.all-teams .sci-toggle-checkbox')
-      .toggleClass('hidden', !selectAllCheckbox.is(':checked'))
-      .attr('disabled', !selectAllCheckbox.is(':checked'));
-
-    selectAllCheckbox.change(function() {
-      form.find('.teams-list').find('input.sci-checkbox, .permission-selector')
-        .toggleClass('hidden', this.checked);
-      form.find('.all-teams .sci-toggle-checkbox').toggleClass('hidden', !this.checked)
-        .attr('disabled', !this.checked);
-    });
-
-    sharedCBs.change(function() {
-      var selectedTeams = form.find('.teams-list .sci-checkbox:checked').length;
-      form.find('#select_all_teams').prop('indeterminate', selectedTeams > 0);
-      $('#editable_' + this.value).toggleClass('hidden', !this.checked)
-        .attr('disabled', !this.checked);
-    });
-
-    if (form.find('.teams-list').length) new PerfectScrollbar(form.find('.teams-list')[0]);
-
-    permissionCBs.change(function() {
-      var changes = JSON.parse(permissionChanges.val());
-      changes[this.value] = 'true';
-      permissionChanges.val(JSON.stringify(changes));
-    });
-
-    submitBtn.on('click', function(event) {
-      event.preventDefault();
-      $.ajax({
-        type: 'POST',
-        url: form.attr('action'),
-        data: form.serialize(),
-        success: function(data) {
-          if (data.warnings) {
-            alert(data.warnings);
-          }
-          $(`#slide-panel li.active .repository-share-status,
-             #repository-toolbar .repository-share-status
-          `).toggleClass('hidden', !data.status);
-          HelperModule.flashAlertMsg(form.data('success-message'), 'success');
-          $('.share-repo-modal').modal('hide');
-        },
-        error: function(data) {
-          alert(data.responseJSON.errors);
-          $('.share-repo-modal').modal('hide');
-        }
-      });
-    });
-  }
-
   $('.repository-title-name .inline-editing-container').on('inlineEditing::updated', function(e, value, viewValue) {
     $('.repository-archived-title-name')
       .text(I18n.t('repositories.show.archived_inventory_items', { repository_name: viewValue }));
@@ -161,10 +101,6 @@
       .text(I18n.t('repositories.show.archived_view_label.active', { repository_name: viewValue }));
   });
 
-  $('#shareRepoBtn').on('ajax:success', function() {
-    initShareModal();
-  });
-
   $('.create-new-repository').initSubmitModal('#create-repo-modal', 'repository');
 
   function initArchivingActionsInDropdown() {

app/assets/javascripts/shared/remote_modal.js

@@ -1,4 +1,4 @@
-/* global animateSpinner ProtocolsIndex ProjectsIndex */
+/* global animateSpinner ProtocolsIndex ProjectsIndex ShareModal */
 (function() {
   'use strict';
 
@@ -22,6 +22,10 @@
                 ProtocolsIndex.reloadTable();
               });
             }
+            if ($(this).hasClass('share-repo-modal')) {
+              animateSpinner(null, false);
+              ShareModal.init();
+            }
             $(this).find('.selectpicker').selectpicker();
           })
           .on('hidden.bs.modal', function() {

app/views/repositories/index.html.erb

@@ -62,5 +62,6 @@
 </div>
 
 <%= javascript_include_tag "repositories/index" %>
+<%= javascript_include_tag "repositories/share_modal" %>
 <%= stylesheet_link_tag 'datatables' %>
-<%= javascript_include_tag "vue_components_action_toolbar" %>
+<%= javascript_include_tag "vue_components_action_toolbar" %>

config/initializers/assets.rb

@@ -83,6 +83,7 @@ Rails.application.config.assets.precompile += %w(search.js)
 Rails.application.config.assets.precompile += %w(label_printers/index.js)
 Rails.application.config.assets.precompile += %w(label_printers/zebra_settings.js)
 Rails.application.config.assets.precompile += %w(repositories/index.js)
+Rails.application.config.assets.precompile += %w(repositories/share_modal.js)
 Rails.application.config.assets.precompile += %w(repositories/edit.js)
 Rails.application.config.assets.precompile += %w(repositories/stock.js)
 Rails.application.config.assets.precompile += %w(repositories/repository_datatable.js)