Cross-framework import support

frontend/src/modules/frameworkImport/index.js

@@ -12,7 +12,7 @@ define(function(require) {
     Origin.permissions.addRoute('frameworkImport', data.featurePermissions);
   });
 
-  Origin.on('router:frameworkImport', function(location, subLocation, action) {
+  Origin.on('router:frameworkImport', function() {
     Origin.contentPane.setView(FrameworkImportView, { model: new Backbone.Model({ globalData: data }) });
     Origin.sidebar.addView(new FrameworkImportSidebarView().$el);
   });

frontend/src/modules/frameworkImport/less/frameworkImport.less

@@ -1,5 +1,8 @@
 @import 'colours';
 @import 'sharedStyles';
+@framework-import-red: #ff3343;
+@framework-import-amber: #ffa340;
+@framework-import-green: @secondary-color;
 
 .frameworkImport .inner {
   .form-container-style;
@@ -26,6 +29,15 @@
     }
   }
 
+  .col-row {
+    display: flex;
+    align-items: center;
+  }
+
+  .tb-row .tb-col-inner {
+    padding: 0;
+  }
+
   li {
     margin-left: 0;
     list-style: none;
@@ -43,4 +55,62 @@
       padding-bottom: 5px;
     }
   }
+
+  &.import-summary {
+    .title {
+      padding-bottom: 10px;
+      color: @primary-color;
+
+      &.red {
+        color: @framework-import-red;
+      }
+
+      &.amber {
+        color: @framework-import-amber;
+      }
+
+      &.green {
+        color: @framework-import-green;
+      }
+    }
+    .description {
+      font-weight: @font-weight-bold;
+    }
+  }
+
+  &.plugin-list {
+    .red {
+      .status, .key {
+        color: @framework-import-red;
+      }
+    }
+
+    .amber {
+      .status, .key {
+        color: @framework-import-amber;
+      }
+
+      .at-version {
+        font-weight: @font-weight-bold;
+      }
+    }
+
+    .green-install, .green-update {
+      .status, .key {
+        color: @framework-import-green;
+      }
+
+      .import-version {
+        font-weight: @font-weight-bold;
+      }
+    }
+
+    .status, .key {
+      font-weight: @font-weight-bold;
+    }
+
+    .key-field {
+      margin-bottom: 5px;
+    }
+  }
 }

frontend/src/modules/frameworkImport/templates/frameworkImport.hbs

@@ -1,42 +1,58 @@
-<div class="inner">
-  <form class="frameworkImport forms" action="importsource" method="post" autocomplete="off">
-      <div class="form-group">
-        <div class="field field-file">
-          <label for="file">
-              {{t 'app.assetfile'}} <span class="req">*</span>
-              <span class="error"></span>
-          </label>
-          <div class="field-help">
-            {{t 'app.importframeworkinstruction'}}
-          </div>
-          {{#if path}}
-          <div class="asset-management-new-asset-file">
-            {{t 'app.importframeworkfileuploaded'}}
-          </div>
-          {{else}}
-          <input type="file" class="asset-file" name="file">
-          {{maxUploadSize}}
-          <div class="progress-container">
-              <div class="progress-bar">
-                  <div class="progress-percent">0%</div>
-              </div>
+<div id="import_upload" class="inner">
+  <form class="frameworkImport forms" action="importsourcecheck" method="post" autocomplete="off">
+    <div class="form-group">
+      <div class="field field-file">
+        <label for="file">
+          {{t 'app.assetfile'}} <span class="req">*</span>
+          <span class="error"></span>
+        </label>
+        <div class="field-help">
+          {{t 'app.importframeworkinstruction'}}
+        </div>
+        {{#if path}}
+        <div class="asset-management-new-asset-file">
+          {{t 'app.importframeworkfileuploaded'}}
+        </div>
+        {{else}}
+        <input type="file" class="asset-file" name="file">
+        {{maxUploadSize}}
+        <div class="progress-container">
+          <div class="progress-bar">
+            <div class="progress-percent">0%</div>
           </div>
-          {{/if}}
         </div>
-        <div class="field field-assets">
-            <label for="tags">{{t 'app.importassetfolderstitle'}}</label>
-            <div class="field-help">
-              {{t 'app.importassetfoldersinstruction'}}
-            </div>
-            <div>
-              <input type="text" autocomplete="off" class="width-30" id="formAssetFolders" name="formAssetFolders" placeholder="{{t 'app.importassetfoldersplaceholder'}}" value="" />
-            </div>
+        {{/if}}
+      </div>
+      <div class="field field-assets">
+        <label for="tags">{{t 'app.importassetfolderstitle'}}</label>
+        <div class="field-help">
+          {{t 'app.importassetfoldersinstruction'}}
         </div>
-        <div class="field field-tags">
-            <label for="tags">{{t 'app.tags'}}</label>
-            <input type="text" autocomplete="off" class="width-30" id="tags_control" name="tags_control" value="{{pickCSV tags "title"}}" />
+        <div>
+          <input type="text" autocomplete="off" class="width-30" id="formAssetFolders" name="formAssetFolders" placeholder="{{t 'app.importassetfoldersplaceholder'}}" value="" />
         </div>
-        <input type="hidden" name="tags" id="tags" />
       </div>
+      <div class="field field-tags">
+        <label for="tags">{{t 'app.tags'}}</label>
+        <input type="text" autocomplete="off" class="width-30" id="tags_control" name="tags_control" value="{{pickCSV tags "title"}}" />
+      </div>
+      <input type="hidden" name="tags" id="tags" />
+    </div>
+  </form>
+</div>
+
+<div id="import_details" class="display-none">
+  <form class="frameworkImportDetails forms" action="importsource" method="post" autocomplete="off">
+    <div class="inner framework-versions display-none"></div>
+    <div class="inner import-summary">
+      <div class="title"></div>
+      <div class="description"></div>
+    </div>
+    <div class="inner plugin-list display-none">
+      <div class="red key-field display-none"><span class="key">{{t 'app.pluginredlabel'}}</span> - {{t 'app.pluginredkey'}}</div>
+      <div class="amber key-field display-none"><span class="key">{{t 'app.pluginamberlabel'}}</span> - {{t 'app.pluginamberkey'}}</div>
+      <div class="green-update key-field display-none"><span class="key">{{t 'app.plugingreenupdatelabel'}}</span> - {{t 'app.plugingreenupdatekey'}}</div>
+      <div class="green-install key-field display-none"><span class="key">{{t 'app.plugingreeninstalllabel'}}</span> - {{t 'app.plugingreeninstallkey'}}</div>
+    </div>
   </form>
 </div>

frontend/src/modules/frameworkImport/templates/frameworkImportPluginHeadingView.hbs

@@ -0,0 +1,20 @@
+<div class="frameworkImportPlugin-headings tb-heading col-row tb-row">
+
+  <div class="frameworkImportPlugin-heading col-40">
+    <h4 class="tb-col-inner">{{t 'app.name'}}</h4>
+  </div>
+
+  <div class="frameworkImportPlugin-heading col-20 col-centered">
+    <h4 class="tb-col-inner">{{t 'app.importversion'}}</h4>
+  </div>
+
+  <div class="frameworkImportPlugin-heading col-20 col-centered">
+    <h4 class="tb-col-inner">{{t 'app.atversion'}}</h4>
+  </div>
+
+  <div class="frameworkImportPlugin-heading col-20 col-centered">
+    <h4 class="tb-col-inner">{{t 'app.action'}}</h4>
+  </div>
+
+</div>
+<ul class="frameworkImportPlugin-plugins clearfix grid-layout"></ul>

frontend/src/modules/frameworkImport/templates/frameworkImportPluginView.hbs

@@ -0,0 +1,16 @@
+<div class="frameworkImport-inner">
+  <div class="frameworkImport-description col-row tb-row {{category}}">
+    <div class="col-40">
+      {{displayName}}
+    </div>
+    <div class="col-20 col-centered import-version">
+      {{importVersion}}
+    </div>
+    <div class="col-20 col-centered at-version">
+      {{authoringToolVersion}}
+    </div>
+    <div class="col-20 col-centered status">
+      {{status}}
+    </div>
+  </div>
+</div>

frontend/src/modules/frameworkImport/templates/frameworkImportSidebar.hbs

@@ -1,6 +1,6 @@
 <div class="separator"></div>
 <div class="sidebar-item-inner">
-  <button type="submit" class="action-primary framework-import-sidebar-save-button save">
+  <button type="submit" class="action-primary framework-import-sidebar-save-button show-details">
     <span>{{t 'app.importcourse'}}</span>
   </button>
   <button type="button" class="cancel action-secondary">

frontend/src/modules/frameworkImport/views/frameworkImportPluginHeadingView.js

@@ -0,0 +1,12 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+  var OriginView = require('core/views/originView');
+
+  var FrameworkImportPluginHeadingView = OriginView.extend({
+    tagName: 'div'
+  }, {
+    template: 'frameworkImportPluginHeadingView'
+  });
+
+  return FrameworkImportPluginHeadingView;
+});

frontend/src/modules/frameworkImport/views/frameworkImportPluginView.js

@@ -0,0 +1,21 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+  var OriginView = require('core/views/originView');
+
+  var FrameworkImportPluginView = OriginView.extend({
+    tagName: 'div',
+    initialize: function(options) {
+      this.options = options;
+      this.render();
+    },
+
+    render: function() {
+      var template = Handlebars.templates[this.constructor.template];
+      this.$el.html(template(this.options.data));
+    }
+  }, {
+    template: 'frameworkImportPluginView'
+  });
+
+  return FrameworkImportPluginView;
+});

frontend/src/modules/frameworkImport/views/frameworkImportSidebarView.js

@@ -5,13 +5,19 @@ define(function(require) {
 
   var FrameworkImportSidebarView = SidebarItemView.extend({
     events: {
-      'click button.save': 'importCourse',
-      'click button.cancel': 'goBack'
+      'click button.show-details': 'showDetails',
+      'click button.cancel': 'goBack',
+      'click button.save': 'importCourse'
+    },
+
+    showDetails: function(event) {
+      event && event.preventDefault();
+      Origin.trigger('frameworkImport:showDetails', this);
     },
 
     importCourse: function(event) {
       event && event.preventDefault();
-      Origin.trigger('frameworkImport:uploadCourse', this);
+      Origin.trigger('frameworkImport:completeImport', this);
     },
 
     goBack: function(event) {