Merge pull request #5067 from sboursen-scinote/sb_SCI-8032

Old buttons at importing protocols.io protocol [SCI-8032]

app/assets/javascripts/protocols/protocolsio.js

@@ -1,5 +1,5 @@
 /* global animateSpinner PerfectSb initHandsOnTable */
-/* global HelperModule */
+/* global HelperModule dropdownSelector */
 /* eslint-disable no-use-before-define, no-alert */
 
 function applyClickCallbackOnProtocolCards() {
@@ -34,6 +34,7 @@ function applyClickCallbackOnProtocolCards() {
           $('.full-preview-panel').attr('data-url', currProtocolCard.data('url'));
           $('.full-preview-panel').attr('data-protocol-source', currProtocolCard.data('protocol-source'));
           $('.full-preview-panel').attr('data-id', currProtocolCard.data('id'));
+          $('.full-preview-panel').data('id', currProtocolCard.data('id'));
           $('.convert-protocol').attr('disabled', false);
 
           // Set base tag to account for relative links in the iframe
@@ -194,6 +195,16 @@ function handleFormSubmit(modal) {
     e.preventDefault(); // avoid to execute the actual submit of the form.
     e.stopPropagation();
     animateSpinner(modal, true);
+
+    const visibility = $('#protocol-preview-modal .modal-footer #visibility').prop('checked');
+    const defaultPublicUserRoleId = $('#protocol-preview-modal .modal-footer #default_public_user_role_id')
+      .prop('value');
+    const visibilityField = $('#protocol-preview-modal #protocol_visibility');
+    const defaultPublicUserRoleIdField = $('#protocol-preview-modal #protocol_default_public_user_role_id');
+
+    visibilityField.prop('value', visibility ? 'visible' : 'hidden');
+    defaultPublicUserRoleIdField.prop('value', defaultPublicUserRoleId);
+
     $.ajax({
       type: 'POST',
       url: url,
@@ -215,7 +226,7 @@ function handleFormSubmit(modal) {
 
 function initLoadProtocolModalPreview() {
   $('.convert-protocol').off('click').on('click', function(e) {
-    var link = $('.full-preview-panel');
+    const link = $('.full-preview-panel');
     animateSpinner(null, true);
     $.ajax({
       url: link.data('url'),
@@ -226,10 +237,11 @@ function initLoadProtocolModalPreview() {
       },
       dataType: 'json',
       success: function(data) {
-        var modal = $('#protocol-preview-modal');
-        var modalTitle = modal.find('.modal-title');
-        var modalBody = modal.find('.modal-body');
-        var modalFooter = modal.find('.modal-footer');
+        $('#protocolsioModal').modal('hide');
+        const modal = $('#protocol-preview-modal');
+        const modalTitle = modal.find('.modal-title');
+        const modalBody = modal.find('.modal-body');
+        const modalFooter = modal.find('.modal-footer');
 
         modalTitle.html(data.title);
         modalBody.html(data.html);
@@ -243,6 +255,7 @@ function initLoadProtocolModalPreview() {
           showFormErrors(modal, data.validation_errors);
         }
 
+        initProtocolModalPreview();
         initFormSubmits();
         handleFormSubmit(modal);
       },
@@ -272,3 +285,36 @@ applySearchCallback();
 
 // Trigger initial retrieval of latest publications
 $('form.protocols-search-bar').submit();
+
+function initProtocolModalPreview() {
+  $('#protocol-preview-modal').on('change', '#visibility', function() {
+    const checkbox = this;
+    $('#protocol-preview-modal #roleSelectWrapper').toggleClass('hidden', !checkbox.checked);
+  });
+
+
+  const roleSelector = '#protocol-preview-modal #role_selector';
+
+  dropdownSelector.init(roleSelector, {
+    noEmptyOption: true,
+    singleSelect: true,
+    closeOnSelect: true,
+    selectAppearance: 'simple',
+    onChange: function() {
+      $('#protocol-preview-modal #default_public_user_role_id').val(dropdownSelector.getValues(roleSelector));
+    }
+  });
+
+  $('#protocol-preview-modal')
+    .on('ajax:error', 'form', function(e, error) {
+      let msg = error.responseJSON.error;
+      $('#protocol-preview-modal #protocol_name').parent().addClass('error').attr('data-error-text', msg);
+    })
+    .on('ajax:success', 'form', function(e, data) {
+      if (data.message) {
+        HelperModule.flashAlertMsg(data.message, 'success');
+      }
+      $('#protocol-preview-modal #protocol_name').parent().removeClass('error');
+      $('#protocol-preview-modal').modal('hide');
+    });
+}

app/assets/stylesheets/protocols/preview_modal.scss

@@ -26,4 +26,43 @@
   .general-error {
     text-align: center;
   }
+
+  .modal-footer {
+    .footer {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+
+      .left-section {
+        column-gap: 32px;
+        display: flex;
+        justify-content: space-between;
+
+        .default-role-container {
+          align-items: center;
+          column-gap: 8px;
+          display: flex;
+        }
+
+        .sci-input-container {
+          display: flex;
+          align-items: center;
+          column-gap: 12px;
+          flex-grow: 1;
+
+          label {
+            margin-bottom: 0;
+            white-space: nowrap;
+          }
+        }
+      }
+
+      .right-section {
+        column-gap: 8px;
+        display: flex;
+        flex-basis: 0;
+        justify-content: flex-end;
+      }
+    }
+  }
 }

app/views/protocol_importers/_import_form.html.erb

@@ -32,6 +32,8 @@
   <%= f.hidden_field(:published_on, value: protocol.published_on) %>
   <%= f.hidden_field(:description, value: protocol.description) %>
   <%= f.hidden_field(:protocol_type, value: protocol.protocol_type) %>
+  <%= f.hidden_field(:visibility) %>
+  <%= f.hidden_field(:default_public_user_role_id) %>
 
 <% end %>
 

app/views/protocol_importers/_preview_modal_footer.html.erb

@@ -1,3 +1,25 @@
-<button type="button" class="btn btn-secondary" data-dismiss="modal"><%=t "general.cancel" %></button>
-<button type="button" class="btn btn-primary" data-action="import_protocol" data-import_type="in_repository_draft"><%=t "protocols.import_export.import_modal.import_to_team_protocols_label" %></button>
-<button type="button" class="btn btn-primary" data-action="import_protocol" data-import_type="in_repository_draft"><%=t "protocols.import_export.import_modal.import_to_private_protocols_label" %></button>
+<div class="footer">
+  <div class="left-section">
+    <div class="default-role-container">
+      <div class="sci-checkbox-container">
+        <%= check_box_tag "visibility", "visible", false, class: "sci-checkbox" %>
+        <span class="sci-checkbox-label"></span>
+      </div>
+      <div class="default-role-description">
+        <%= t("protocols.new_protocol_modal.access_label") %>
+      </div>
+    </div>
+    <div class="hidden" id="roleSelectWrapper">
+      <div class="sci-input-container">
+        <%= label_tag :default_public_user_role_id, t("protocols.new_protocol_modal.role_label") %>
+        <% default_role = UserRole.find_by(name: I18n.t('user_roles.predefined.viewer')).id %>
+        <%= hidden_field_tag :default_public_user_role_id, value: default_role %>
+        <%= select_tag :role_selector, options_for_select(user_roles_collection, default_role) %>
+      </div>
+    </div>
+  </div>
+  <div class="right-section">
+    <button type="button" class="btn btn-secondary" data-dismiss="modal"><%=t "general.cancel" %></button>
+    <button type="button" class="btn btn-primary" data-action="import_protocol" data-import_type="in_repository_draft"><%=t "protocols.import_export.import_modal.import_protocols_label" %></button>
+  </div>
+</div>

app/views/protocols/index.html.erb

@@ -43,6 +43,7 @@
 <%= render partial: "protocols/index/linked_children_modal.html.erb" %>
 <%= render partial: "protocols/index/protocolsio_modal.html.erb" %>
 <%= render partial: "protocols/index/new_protocol_modal.html.erb", locals: {type: 'new'} %>
+<%= render partial: "protocols/index/protocol_preview_modal.html.erb" %>
 
 <%= render partial: "protocols/import_export/import_elements.html.erb" %>
 

app/views/protocols/index/_protocolsio_modal_body.html.erb

@@ -98,7 +98,5 @@
   <button type="button" class="btn btn-primary convert-protocol" disabled><%= t('protocols.index.protocolsio.convert') %></button>
 </div>
 
-<%= render partial: "protocols/index/protocol_preview_modal.html.erb" %>
-
 <%= javascript_include_tag "protocols/steps" %>
 <%= javascript_include_tag "protocols/protocolsio.js" %>

config/locales/en.yml

@@ -2641,6 +2641,7 @@ en:
         import: "Load"
         import_to_team_protocols_label: "Import to Team Protocols"
         import_to_private_protocols_label: "Import to My Protocols"
+        import_protocols_label: "Import"
     export:
       export_results:
         title: "Export results"
@@ -2851,7 +2852,7 @@ en:
         import:
           public: "Team protocols"
           private: "My protocols"
-          success_flash: 'Protocol <strong>%{name}</strong> successfully imported to %{type}.'
+          success_flash: 'Protocol <strong>%{name}</strong> successfully imported.'
 
     steps:
       placeholder: 'Enter step name'