Merge pull request #8372 from aignatov-bio/ai-sci-11557-add-eln-import-forms-preview

Add forms preview to eln import [SCI-11557]

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

@@ -234,10 +234,10 @@ function importProtocolFromFile(
           addTablePreview(stepEl, this);
         });
       }
-
       // Parse step elements
       $(this).find('stepElements > stepElement').sort(stepComparator).each(function() {
         $element = $(this);
+
         switch ($(this).attr('type')) {
           case 'Checklist':
             addChecklistPreview(stepEl, $(this).find('checklist'));
@@ -248,6 +248,9 @@ function importProtocolFromFile(
           case 'StepText':
             addStepTextPreview(stepEl, $(this).find('stepText'), protocolFolders[position], stepGuid);
             break;
+          case 'FormResponse':
+            addStepFormPreview(stepEl, $(this).find('form'));
+            break;
           default:
             // nothing to do
             break;
@@ -340,6 +343,32 @@ function importProtocolFromFile(
     stepEl.append(textEl);
   }
 
+  function addStepFormPreview(stepEl, stepFormNode) {
+    const formId = $(stepFormNode)[0].id;
+    const $formContainer = $(`<div id="formId-${formId}"></div>`);
+    $.get(`/forms/${formId}?format=json`, (data) => {
+      const formEl = newPreviewElement(
+        'step-form',
+        { name: $('<div>').text(data.data.attributes.name) }
+      );
+      $.each(data.included, (i, field) => {
+        const fieldEl = newPreviewElement(
+          'form-field',
+          { text: $('<div>').text(field.attributes.name) }
+        );
+        formEl.append(fieldEl);
+      });
+      $formContainer.append(formEl);
+    }).fail(() => {
+      const formEl = newPreviewElement(
+        'step-form-error',
+        { text: I18n.t('protocols.import_export.import_modal.forms_error', { form_id: formId }) }
+      );
+      $formContainer.append(formEl);
+    });
+    stepEl.append($formContainer);
+  }
+
   // display tiny_mce_assets in step description
   function displayTinyMceAssetInDescription(node, folder, stepGuid) {
     var description = node.children('description').html() || node.children('contents').html();

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

@@ -56,3 +56,20 @@
 <div data-template="asset-file-name">
     <strong><%= t("protocols.import_export.import_modal.assets_header") %></strong>
 </div>
+
+<div data-template="step-form" class="col-xs-12">
+  <div>
+    <strong data-val="name"></strong>
+  </div>
+</div>
+
+<div data-template="step-form-error" class="col-xs-12">
+  <div>
+    <strong data-val="text" class="text-sn-alert-passion"></strong>
+  </div>
+</div>
+
+
+<div data-template="form-field" class="col-xs-12">
+  <div data-val="text"></div>
+</div>

config/locales/en.yml

@@ -3676,6 +3676,7 @@ en:
         import_to_team_protocols_label: "Import to Team Protocols"
         import_to_private_protocols_label: "Import to My Protocols"
         import_protocols_label: "Import"
+        forms_error: "Form %{form_id} doesn't exist or you don't have access and it won’t be imported."
       import_protocol_notification:
         title: "The import process has been successfully completed. You can download original file here: %{link}"
         message: "Protocol template:"