feat(app): option for custom import handlers

packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/io-options/io-options-dialog/io-options-dialog.component.ts

@@ -1,9 +1,13 @@
 import { OnInit, Component, Input } from '@angular/core';
-import { EventDisplayService } from '../../../../services/event-display.service';
-import { MatDialogRef } from '@angular/material/dialog';
 import { CMSLoader, JiveXMLLoader, ScriptLoader } from 'phoenix-event-display';
-import { EventDataFormat } from '../../../../types';
 import JSZip from 'jszip';
+import { EventDisplayService } from '../../../../services/event-display.service';
+import { MatDialogRef } from '@angular/material/dialog';
+import {
+  EventDataFormat,
+  EventDataImportOption,
+  ImportOption,
+} from '../../../../services/extras/event-data-import';
 
 @Component({
   selector: 'app-io-options-dialog',
@@ -12,36 +16,33 @@ import JSZip from 'jszip';
 })
 export class IOOptionsDialogComponent implements OnInit {
   @Input()
-  eventDataFormats: EventDataFormat[] = [EventDataFormat.JSON];
-  eventDataFormatsWithHandler: {
-    format: EventDataFormat;
-    fileType: string;
-    accept?: string;
-    handler: () => void;
-  }[];
+  eventDataFormats: EventDataImportOption[] = [EventDataFormat.JSON];
+
+  eventDataFormatsWithHandler: ImportOption[];
+
   private supportedEventDataFormats = [
-    {
-      format: EventDataFormat.JSON,
-      fileType: '.json',
-      accept: 'application/json',
-      handler: this.handleJSONEventDataInput.bind(this),
-    },
-    {
-      format: EventDataFormat.JIVEXML,
-      fileType: '.xml',
-      accept: 'text/xml',
-      handler: this.handleJiveXMLDataInput.bind(this),
-    },
-    {
-      format: EventDataFormat.ZIP,
-      fileType: '.zip',
-      handler: this.handleZipEventDataInput.bind(this),
-    },
-    {
-      format: EventDataFormat.IG,
-      fileType: '.ig',
-      handler: this.handleIgEventDataInput.bind(this),
-    },
+    new ImportOption(
+      EventDataFormat.JSON,
+      '.json',
+      this.handleJSONEventDataInput.bind(this),
+      'application/json'
+    ),
+    new ImportOption(
+      EventDataFormat.JIVEXML,
+      '.xml',
+      this.handleJiveXMLDataInput.bind(this),
+      'text/xml'
+    ),
+    new ImportOption(
+      EventDataFormat.ZIP,
+      '.zip',
+      this.handleZipEventDataInput.bind(this)
+    ),
+    new ImportOption(
+      EventDataFormat.IG,
+      '.ig',
+      this.handleIgEventDataInput.bind(this)
+    ),
   ];
 
   constructor(
@@ -52,8 +53,16 @@ export class IOOptionsDialogComponent implements OnInit {
   ngOnInit() {
     this.eventDataFormatsWithHandler = this.supportedEventDataFormats.filter(
       (eventDataFormat) =>
-        this.eventDataFormats.includes(eventDataFormat.format)
+        this.eventDataFormats.includes(
+          eventDataFormat.format as EventDataFormat
+        )
     );
+
+    this.eventDataFormats.forEach((eventDataImportOption) => {
+      if (eventDataImportOption instanceof ImportOption) {
+        this.eventDataFormatsWithHandler.push(eventDataImportOption);
+      }
+    });
   }
 
   getSupportedEventDataFormats() {

packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/io-options/io-options.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { EventDataFormat } from '../../../types';
+import { EventDataImportOption } from '../../../services/extras/event-data-import';
 import { IOOptionsDialogComponent } from './io-options-dialog/io-options-dialog.component';
 
 @Component({
@@ -10,7 +10,7 @@ import { IOOptionsDialogComponent } from './io-options-dialog/io-options-dialog.
 })
 export class IoOptionsComponent {
   @Input()
-  eventDataFormats: EventDataFormat[] = [];
+  eventDataFormats: EventDataImportOption[] = [];
 
   constructor(private dialog: MatDialog) {}
 

packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/ui-menu.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { EventDataFormat } from '../../types';
+import { EventDataImportOption } from '../../services/extras/event-data-import';
 
 @Component({
   selector: 'app-ui-menu',
@@ -8,7 +8,7 @@ import { EventDataFormat } from '../../types';
 })
 export class UiMenuComponent {
   @Input()
-  eventDataFormats: EventDataFormat[] = [];
+  eventDataFormats: EventDataImportOption[] = [];
 
   hideUIMenu: boolean = false;
 }

packages/phoenix-ng/projects/phoenix-ui-components/src/services/extras/event-data-import.ts

@@ -0,0 +1,17 @@
+export enum EventDataFormat {
+  JSON = 'JSON',
+  JIVEXML = 'JIVEXML',
+  IG = 'IG',
+  ZIP = 'ZIP',
+}
+
+export type EventDataImportOption = EventDataFormat | ImportOption;
+
+export class ImportOption {
+  constructor(
+    public format: string,
+    public fileType: string,
+    public handler: (files: FileList) => void,
+    public accept?: string
+  ) {}
+}