Fix Event Imports

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

@@ -28,7 +28,9 @@ export default Component.extend(FormMixin, {
   },
   actions: {
     submit() {
+      let _this = this;
       this.onValid(() => {
+        _this.sendAction('uploadFile', event.target.getElementsByTagName('input')[0].files);
       });
     }
   }

app/controllers/events/import.js

@@ -0,0 +1,65 @@
+import Controller from '@ember/controller';
+import { run } from '@ember/runloop';
+import ENV from 'open-event-frontend/config/environment';
+
+export default Controller.extend({
+  importStatus   : 'Importing',
+  importError    : 'Import Error',
+  btnImportEvent : false,
+  file           : false,
+  fileName       : '',
+  importTask(taskUrl) {
+    let _this = this;
+    run.later(() => {
+      this.get('loader')
+        .load(taskUrl)
+        .then(data => {
+          if (data.state !== 'SUCCESS') {
+            this.set('importStatus', `Status: ${  data.state}`);
+            _this.importTask(taskUrl);
+          } else {
+            this.set('importStatus', `Status: ${  data.state}`);
+            document.location = `/events/${  data.result.id}`;
+          }
+        })
+        .catch(e => {
+          this.set('');
+          this.set('importError', e.message);
+          this.set('btnImportEvent', false);
+          this.set('file', false);
+        });
+    }, 3000);
+  },
+  actions: {
+    uploadFile(files) {
+      let _this = this;
+      let [file] = files;
+      var data = new FormData();
+      var endpoint = 'import/json';
+      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);
+
+      this.set('importStatus', 'Uploading file.. Please don\'t close this window');
+      this.set('importError', '');
+      this.set('btnImportEvent', true);
+      this.set('file', true);
+
+      this.get('loader').post(
+        `${`${ENV.APP.apiHost}/${ENV.APP.apiNamespace}/events/`}${endpoint}`,
+        data,
+        { isExternal: true, isFile: true }
+      ).then(data => {
+        _this.importTask(`tasks/${data.task_url.split('/')[3]}`);
+      }).catch(e => {
+        this.set('');
+        this.set('importError', e.message);
+      });
+    }
+  }
+});

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

@@ -2,14 +2,18 @@
   <form class="ui form" {{action 'submit' on='submit'}}>
     <div class="field {{if device.isMobile 'sixteen' 'five'}} wide column">
       <label class="required" for="file"> {{t 'Select event source file to import'}}</label>
-      {{input type='file' id='file'}}
+      {{input type='file' disabled=file}}
     </div>
     <div class="field {{if device.isMobile 'sixteen' 'five'}} wide column">
       <span class="text muted">
         <b>{{t 'Supported formats:'}}</b>
         {{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" disabled={{btnImportEvent}}>{{t 'Import Event'}}</button>
+    <div style="margin-top: 10px;">
+      <span>{{importStatus}}</span>
+      <span class="red">{{importError}}</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}}
+{{events/event-import-section uploadFile=(action 'uploadFile') importStatus=importStatus importError=importError btnImportEvent=btnImportEvent file=file}}
 <br><br>
-{{events/imports-history-section}}
+{{events/imports-history-section data=model.data}}