Fix Event Imports

app/components/events/event-import-section.js

@@ -1,5 +1,7 @@
+import $ from 'jquery';
 import Component from '@ember/component';
 import FormMixin from 'open-event-frontend/mixins/form';
+import ENV from 'open-event-frontend/config/environment';
 
 export default Component.extend(FormMixin, {
   classNames: ['ui', 'stackable', 'centered', 'grid'],
@@ -26,9 +28,62 @@ export default Component.extend(FormMixin, {
       }
     };
   },
+  importTask(url) {
+    let _this = this;
+    this.get('loader')
+      .load(url)
+      .then(data => {
+        if (data.state !== 'SUCCESS') {
+          $('#import_status').html(`<b>Status:</b> ${  data.state}`);
+          setTimeout(function() {
+            _this.importTask(url);
+          }, 3000);
+        } else {
+          $('#import_status').html(`<b>Status:</b> ${  data.state}`);
+          document.location = `/events/${  data.result.id}`;
+        }
+      })
+      .catch(e => {
+        $('#import_status').text('');
+        $('#btnImportEvent').prop('disabled', false);
+        $('#import_file').prop('disabled', false);
+        $('#import_error').text(e.message);
+      });
+  },
   actions: {
     submit() {
+      let _this = this;
       this.onValid(() => {
+        var data = new FormData();
+        var endpoint = 'import/json';
+        $.each($('#file')[0].files, function(i, file) {
+          var ext = file.name.split('.');
+          ext = ext[ext.length - 1].toLowerCase();
+          if (ext === 'xml') {
+            endpoint = 'import/pentabarf';
+          } else if (ext === 'ical') {
+            endpoint = 'import/ical';
+          }
+          data.append('file', file);
+
+          $('#import_status').text('Uploading file.. Please don\'t close this window');
+          $('#import_error').text('');
+          $('#btnImportEvent').prop('disabled', true);
+          $('#file').prop('disabled', true);
+
+          _this.get('loader').post(
+            `${`${ENV.APP.apiHost}/${ENV.APP.apiNamespace}/events/`}${endpoint}`,
+            data,
+            { isExternal: true, isFile: true }
+          ).then(data => {
+            setTimeout(function() {
+              _this.importTask(`tasks/${data.task_url.split('/')[3]}`);
+            }, 1000);
+          }).catch(e => {
+            $('#import_status').text('');
+            $('#import_error').text(e);
+          });
+        });
       });
     }
   }

app/models/import-job.js

@@ -0,0 +1,9 @@
+import attr from 'ember-data/attr';
+import ModelBase from 'open-event-frontend/models/base';
+
+export default ModelBase.extend({
+  resultStatus : attr('string'),
+  result       : attr('string'),
+  task         : attr('string'),
+  startsAt     : attr('moment', { readOnly: true })
+});

app/routes/events/import.js

@@ -3,5 +3,14 @@ import Route from '@ember/routing/route';
 export default Route.extend({
   titleToken() {
     return this.get('l10n').t('Import');
+  },
+  async model() {
+
+    const data = await this.get('store').findAll('importJob');
+
+    return {
+      data,
+      objectType: 'importJob'
+    };
   }
 });

app/services/loader.js

@@ -17,6 +17,7 @@ export default Service.extend({
     adapter           : 'adapter:application',
     isExternal        : false,
     isFormData        : false,
+    isFile            : false,
     queryParams       : {},
     withoutPrefix     : false,
     replaceHeaders    : false,
@@ -48,6 +49,9 @@ export default Service.extend({
         } else {
           if (config.isFormData) {
             fetchOptions.body = objectToFormData(data);
+          } else if (config.isFile) {
+            fetchOptions.headers.Authorization = adapter.ajaxOptions().headers.Authorization;
+            fetchOptions.body = data;
           } else {
             fetchOptions.headers['Content-Type'] = 'application/json';
             fetchOptions.body = JSON.stringify(data);

app/templates/components/events/event-import-section.hbs

@@ -10,6 +10,10 @@
         {{t 'Open Event compatible json package (.zip), PentabarfXML (.xml), iCalendar (.ical, .ics), XML Representation of iCalendar (.xcal)'}}
       </span>
     </div>
-    <button class="ui small primary button" type="submit">{{t 'Import Event'}}</button>
+    <button class="ui small primary button" id="btnImportEvent" type="submit">{{t 'Import Event'}}</button>
+    <div style="margin-top: 10px;">
+      <span id="import_status"></span>
+      <span id="import_error" class="red"></span>
+    </div>
   </form>
 </div>

app/templates/components/events/imports-history-section.hbs

@@ -24,13 +24,13 @@
       </tr>
     </thead>
     <tbody>
-      <tr>
-        <td>
-          <i class="check circle icon green"></i>{{t 'Success'}}
-        </td>
-        <td>{{t 'Check your event here'}}</td>
-        <td>{{t '8 days ago'}}</td>
-      </tr>
+      {{#each data as |job|}}
+        <tr>
+          <td>{{job.resultStatus}}</td>
+          <td>{{job.result}}</td>
+          <td>{{header-date job.startsAt}}</td>
+        </tr>
+      {{/each}}
     </tbody>
     <tfoot>
       <tr>

app/templates/events/import.hbs

@@ -1,3 +1,3 @@
 {{events/event-import-section}}
 <br><br>
-{{events/imports-history-section}}
+{{events/imports-history-section data=model.data}}