Add steps preview

app/assets/javascripts/sitewide/external_protocols.js

@@ -1,4 +1,4 @@
-/* global animateSpinner */
+/* global animateSpinner initHandsOnTable */
 /* eslint-disable no-restricted-globals, no-alert */
 
 var ExternalProtocols = (function() {
@@ -26,6 +26,26 @@ var ExternalProtocols = (function() {
     });
   }
 
+  function renderTable(table) {
+    $(table).handsontable('render');
+    // Yet another dirty hack to solve HandsOnTable problems
+    if (parseInt($(table).css('height'), 10) < parseInt($(table).css('max-height'), 10) - 30) {
+      $(table).find('.ht_master .wtHolder').css({ height: '100%', width: '100%' });
+    }
+  }
+
+  // Expand all steps
+  function expandAllSteps() {
+    $('.step .panel-collapse').collapse('show');
+    $(document).find("[data-role='step-hot-table']").each(function() {
+      renderTable($(this));
+    });
+    $(document).find('span.collapse-step-icon').each(function() {
+      $(this).addClass('fa-caret-square-up');
+      $(this).removeClass('fa-caret-square-down');
+    });
+  }
+
   function handleFormSubmit(modal) {
     var form = modal.find('form');
     form.on('submit', function(e) {
@@ -73,7 +93,10 @@ var ExternalProtocols = (function() {
           modalTitle.html(data.title);
           modalBody.html(data.html);
           modalFooter.html(data.footer);
+          initHandsOnTable(modalBody);
           modal.modal('show');
+          expandAllSteps();
+          initHandsOnTable(modalBody);
 
           if (data.validation_errors) {
             showFormErrors(modal, data.validation_errors);

app/controllers/external_protocols_controller.rb

@@ -52,7 +52,7 @@ class ExternalProtocolsController < ApplicationController
     p = service_call.built_protocol
     p.valid? # Get validations errors here
 
-
+    @protocol = p
     if service_call.succeed?
       render json: {
         html: render_to_string(

app/views/protocol_importers/_import_form.html.erb

@@ -34,3 +34,16 @@
   <%= f.hidden_field(:protocol_type, value: protocol.protocol_type) %>
 
 <% end %>
+
+<div data-role="steps-container">
+  <div class="row">
+    <div class="col-xs-8">
+      <h2><%= t("protocols.steps.subtitle") %></h2>
+    </div>
+  </div>
+  <div id="steps">
+    <% protocol.steps.sort_by{ |s| s.position }.each do |step| %>
+      <%= render partial: "steps/step.html.erb", locals: { step: step, preview: true } %>
+    <% end %>
+  </div>
+</div>

app/views/steps/_step.html.erb

@@ -56,7 +56,7 @@
       </div>
       <div class="left-floats">
         <a class="step-panel-collapse-link"
-           href="#step-panel-<%= step.id %>"
+           href="#step-panel-<%= step.id || step.position %>"
            data-toggle="collapse"
            data-remote="true">
           <span class="fas fa-caret-square-down collapse-step-icon"></span>
@@ -65,19 +65,21 @@
         <span class="step-number"><%= step.position + 1 %></span>
 
         <a class="step-panel-collapse-link step-name-link"
-           href="#step-panel-<%= step.id %>"
+           href="#step-panel-<%= step.id || step.position %>"
            data-toggle="collapse"
            data-remote="true">
           <span class="name-block"><strong><%= step.name %></strong></span>
+          <% unless step.new_record? %>
             <span class="delimiter">|</span>
             <span class="author-block"><%= sanitize_input t('protocols.steps.published_on',
                                        timestamp: l(step.created_at, format: :full),
                                        user: h(step.user.full_name)) %></span>
+          <% end %>
         </a>
       </div>
 
     </div>
-    <div class="panel-collapse collapse" id="step-panel-<%= step.id %>" role="tabpanel">
+    <div class="panel-collapse collapse" id="step-panel-<%= step.id || step.position %>" role="tabpanel">
       <div class="panel-body">
         <div class="row">
           <div class="col-xs-12">
@@ -94,7 +96,7 @@
           </div>
         </div>
         <div class="row">
-          <% unless step.tables.blank? then %>
+          <% if step.tables.any? %>
             <div class="col-xs-12">
               <hr>
               <% step.tables.each do |table| %>