Fix step element reordering at importing protocol [SCI-7529] (#4677)

app/assets/javascripts/protocols/import_export/import.js

@@ -72,20 +72,8 @@ function importProtocolFromFile(
     return template;
   }
 
-  function addChildToPreviewElement(parentEl, name, childEl) {
-    parentEl.find("[data-hold='" + name + "']").append(childEl);
-  }
-
-  function hidePartOfElement(element, name) {
-    element.find("[data-toggle='" + name + "']").hide();
-  }
-
-  function showPartOfElement(element, name) {
-    element.find("[data-toggle='" + name + "']").show();
-  }
-
   function newAssetElement(folder, stepGuid, fileRef, fileName, fileType) {
-    var html = '<li>';
+    var html = '<li class="col-xs-12">';
     var assetBytes;
     if ($.inArray(fileType, ['image/png', 'image/jpeg', 'image/gif', 'image/bmp']) > 0) {
       assetBytes = getAssetBytes(folder, stepGuid, fileRef);
@@ -176,6 +164,8 @@ function importProtocolFromFile(
       var stepName = node.children('name').text();
       var checklistNodes;
       var tableNodes;
+      var assetNodes;
+      var fileHeader;
       var stepDescription = displayTinyMceAssetInDescription(
         node,
         protocolFolders[position],
@@ -191,39 +181,6 @@ function importProtocolFromFile(
         }
       );
 
-      // Iterate through step assets
-      var assetNodes = node.find('assets > asset');
-      if (assetNodes.length > 0) {
-        assetNodes.each(function() {
-          var fileRef = $(this).attr('fileRef');
-          var fileName = $(this).children('fileName').text();
-          var fileType = $(this).children('fileType').text();
-
-          var assetEl = newAssetElement(
-            protocolFolders[position],
-            stepGuid,
-            fileRef,
-            fileName,
-            fileType
-          );
-
-          // Append asset element to step
-          addChildToPreviewElement(stepEl, 'assets', assetEl);
-        });
-      } else {
-        hidePartOfElement(stepEl, 'assets');
-      }
-
-      // Iterate through step tables
-      tableNodes = node.find('elnTables > elnTable');
-      if (tableNodes.length > 0) {
-        tableNodes.each(function() {
-          addTablePreview(stepEl, this);
-        });
-      } else {
-        hidePartOfElement(stepEl, 'tables');
-      }
-
       // Iterate through step checklists
       checklistNodes = node.find('checklists > checklist');
       if (checklistNodes.length > 0) {
@@ -232,21 +189,26 @@ function importProtocolFromFile(
         });
       }
 
+      // Iterate through step tables
+      tableNodes = node.find('elnTables > elnTable');
+      if (tableNodes.length > 0) {
+        tableNodes.each(function() {
+          addTablePreview(stepEl, this);
+        });
+      }
+
       // Parse step elements
-      $(this).find('stepElements > stepElement').each(function() {
+      $(this).find('stepElements > stepElement').sort(stepComparator).each(function() {
         $element = $(this);
         switch ($(this).attr('type')) {
           case 'Checklist':
             addChecklistPreview(stepEl, $(this).find('checklist'));
-            showPartOfElement(stepEl, 'checklists');
             break;
           case 'StepTable':
             addTablePreview(stepEl, $(this).find('elnTable'));
-            showPartOfElement(stepEl, 'tables');
             break;
           case 'StepText':
             addStepTextPreview(stepEl, $(this).find('stepText'), protocolFolders[position], stepGuid);
-            showPartOfElement(stepEl, 'step-texts');
             break;
           default:
             // nothing to do
@@ -254,6 +216,32 @@ function importProtocolFromFile(
         }
       });
 
+      // Iterate through step assets
+      assetNodes = node.find('assets > asset');
+      if (assetNodes.length > 0) {
+        fileHeader = newPreviewElement('asset-file-name', null);
+
+        stepEl.append(fileHeader);
+
+        assetNodes.each(function() {
+          var fileRef = $(this).attr('fileRef');
+          var fileName = $(this).children('fileName').text();
+          var fileType = $(this).children('fileType').text();
+          var assetEl;
+
+          assetEl = newAssetElement(
+            protocolFolders[position],
+            stepGuid,
+            fileRef,
+            fileName,
+            fileType
+          );
+
+          // Append asset element to step
+          stepEl.append(assetEl);
+        });
+      }
+
       // Append step element to preview container
       previewContainer.append(stepEl);
     });
@@ -270,10 +258,10 @@ function importProtocolFromFile(
       { name: tableName }
     );
     var elnTableEl = generateElnTable(tableId, tableContent);
-    addChildToPreviewElement(tableEl, 'table', elnTableEl);
+    tableEl.append(elnTableEl);
 
     // Now, append table element to step
-    addChildToPreviewElement(stepEl, 'tables', tableEl);
+    stepEl.append(tableEl);
   }
 
   function addChecklistPreview(stepEl, checklistNode) {
@@ -294,11 +282,11 @@ function importProtocolFromFile(
         'checklist-item',
         { text: itemText }
       );
-      addChildToPreviewElement(checklistEl, 'checklist-items', itemEl);
+      checklistEl.append(itemEl);
     });
 
     // Now, add checklist item to step
-    addChildToPreviewElement(stepEl, 'checklists', checklistEl);
+    stepEl.append(stepEl, checklistEl);
   }
 
   function addStepTextPreview(stepEl, stepTextNode, folder, stepGuid) {
@@ -311,7 +299,7 @@ function importProtocolFromFile(
       { text: itemText }
     );
 
-    addChildToPreviewElement(stepEl, 'step-texts', textEl);
+    stepEl.append(textEl);
   }
 
   // display tiny_mce_assets in step description
@@ -743,7 +731,7 @@ function importProtocolFromFile(
       // Parse step elements
       stepJson.stepElements = [];
 
-      $(this).find('stepElements > stepElement').each(function() {
+      $(this).find('stepElements > stepElement').sort(stepComparator).each(function() {
         stepJson.stepElements.push(stepElementJson($(this), index, stepGuid));
       });
 

app/views/protocols/import_export/_preview_templates.html.erb

@@ -17,40 +17,26 @@
       <div data-val="description" class="ql-editor"></div>
       <hr>
       <div class="row">
-        <div class="col-xs-12">
-          <div data-hold="step-texts"></div>
-        </div>
-        <div data-toggle="tables" class="col-xs-12">
-          <div data-hold="tables"></div>
-        </div>
-        <div data-toggle="assets" class="col-xs-12">
-          <strong><%= t("protocols.import_export.import_modal.assets_header") %></strong>
-          <ul data-hold="assets">
-          </ul>
-        </div>
-        <div class="col-xs-12">
-          <div data-hold="checklists"></div>
-        </div>
       </div>
     </div>
   </div>
 </div>
 
-<div data-template="table" style="display: none;">
+<div data-template="table" class="col-xs-12">
   <div>
     <strong data-val="name"></strong>
   </div>
   <div data-hold="table"></div>
 </div>
 
-<div data-template="checklist" style="display: none;">
+<div data-template="checklist" class="col-xs-12">
   <div>
     <strong data-val="name"></strong>
   </div>
   <div data-hold="checklist-items"></div>
 </div>
 
-<div data-template="checklist-item" style="display: none;">
+<div data-template="checklist-item">
   <div class="checkbox">
     <label>
       <input type="checkbox" disabled="disabled">
@@ -59,6 +45,11 @@
   </div>
 </div>
 
-<div data-template="step-text" style="display: none;">
+<div data-template="step-text" class="col-xs-12">
   <div data-val="text"></div>
 </div>
+
+
+<div data-template="asset-file-name">
+    <strong><%= t("protocols.import_export.import_modal.assets_header") %></strong>
+</div>