feat(context): Import export context

.prettierrc

@@ -1,4 +1,5 @@
 {
   "singleQuote": true,
+  "trailingComma": "none",
   "prettier.disableLanguages": ["html"]
 }

packages/context/src/lib/context-import-export/context-import-export.module.ts

@@ -0,0 +1,51 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  MatButtonModule,
+  MatFormFieldModule,
+  MatInputModule,
+  MatDividerModule,
+  MatTabsModule,
+  MatSelectModule,
+  MatOptionModule,
+  MatTooltipModule,
+  MatCheckboxModule,
+  MatButtonToggleModule,
+} from '@angular/material';
+import { IgoLanguageModule } from '@igo2/core';
+import { ContextImportExportComponent } from './context-import-export/context-import-export.component';
+import { IgoSpinnerModule } from '@igo2/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+@NgModule({
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    CommonModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatDividerModule,
+    MatTabsModule,
+    MatSelectModule,
+    MatOptionModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatCheckboxModule,
+    IgoLanguageModule,
+    IgoSpinnerModule,
+    MatTooltipModule,
+  ],
+  exports: [
+    ContextImportExportComponent
+  ],
+  declarations: [
+    ContextImportExportComponent
+  ]
+})
+export class IgoContextImportExportModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: IgoContextImportExportModule
+    };
+  }
+}

packages/context/src/lib/context-import-export/context-import-export/context-import-export.component.html

@@ -0,0 +1,67 @@
+<div class="import-export-toggle mat-typography">
+    <mat-button-toggle-group
+          [value]="activeImportExport"
+          (change)="onImportExportChange($event)">
+          <mat-button-toggle [value]="'import'">
+            {{'igo.geo.importExportForm.importTabTitle' | translate}}
+          </mat-button-toggle>
+          <mat-button-toggle [value]="'export'">
+            {{'igo.geo.importExportForm.exportTabTitle' | translate}}
+          </mat-button-toggle>
+    </mat-button-toggle-group>
+</div>
+
+<div *ngIf="activeImportExport === 'import'">
+    <form class="igo-form">
+        <div class="igo-form-button-group">
+            <button mat-raised-button type="button" (click)="fileInput.click()" [disabled]="loading$ | async">
+                {{'igo.geo.importExportForm.importButton' | translate}}
+            </button>
+            <igo-spinner [shown]="loading$ | async"></igo-spinner>
+            <input
+                #fileInput
+                type="file"
+                [style.display]="'none'"
+                (click)="fileInput.value = null"
+                (change)="importFiles($event.target.files)">
+        </div>
+    </form>
+    <section class="mat-typography">
+        <h4>{{'igo.geo.importExportForm.importClarifications' | translate}}</h4>
+            <ul>
+                <li>{{'igo.geo.importExportForm.importSizeMax' | translate: {size: fileSizeMb} }}</li>
+            </ul>
+    </section>
+</div>
+
+
+<form class="igo-form" *ngIf="activeImportExport === 'export'" [formGroup]="form">
+    <div class="igo-input-container">
+        <mat-form-field class="example-full-width">
+            <mat-label>{{'igo.context.contextImportExport.export.exportContextName' | translate}}</mat-label>
+            <input formControlName="name" matInput [value]="">
+        </mat-form-field>
+    </div>
+    <div class="igo-input-container">
+        <mat-form-field>
+            <mat-label>{{'igo.context.contextImportExport.export.exportPlaceHolder' | translate}}</mat-label>
+            <mat-select formControlName="layers" multiple>
+                <mat-option [value]="1" (click)="selectAll(e)" #e>
+                    {{'igo.context.contextImportExport.export.exportSelectAll' | translate}}
+                </mat-option>
+                <mat-divider></mat-divider>
+                <mat-option *ngFor="let layer of layerList" [value]="layer">{{layer.title}}</mat-option>
+            </mat-select>
+        </mat-form-field>
+    </div>
+    <div class="igo-form-button-group">
+        <button
+            mat-raised-button
+            type="button"
+            [disabled]="!form.valid || (loading$ | async)"
+            (click)="handleExportFormSubmit(form.value)">
+            {{'igo.geo.importExportForm.exportButton' | translate}}
+        </button>
+        <igo-spinner [shown]="loading$ | async"></igo-spinner>
+    </div>
+</form>

packages/context/src/lib/context-import-export/context-import-export/context-import-export.component.scss

@@ -0,0 +1,38 @@
+.import-export-toggle {
+  padding: 10px;
+  text-align: center;
+
+  mat-button-toggle-group {
+    width: 100%;
+
+    mat-button-toggle {
+      width: 50%;
+    }
+  }
+}
+
+.igo-input-container {
+  padding: 10px;
+
+  mat-form-field {
+    width: 100%;
+  }
+}
+
+h4 {
+  padding: 0 5px;
+}
+
+.igo-form {
+  padding: 15px 5px;
+}
+
+.igo-form-button-group {
+  text-align: center;
+  padding-top: 10px;
+}
+
+igo-spinner {
+  position: absolute;
+  padding-left: 10px;
+} 

packages/context/src/lib/context-import-export/context-import-export/context-import-export.component.ts

@@ -0,0 +1,139 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { BehaviorSubject } from 'rxjs';
+
+import { MessageService, LanguageService, ConfigService } from '@igo2/core';
+import { IgoMap, Layer, VectorLayer } from '@igo2/geo';
+
+import { handleFileExportError } from '../shared/context-export.utils';
+import {
+  handleFileImportSuccess,
+  handleFileImportError
+} from '../shared/context-import.utils';
+import { handleFileExportSuccess } from '../shared/context-export.utils';
+import { ContextService } from '../../context-manager/shared/context.service';
+import { ContextImportService } from '../shared/context-import.service';
+import { ContextExportService } from '../shared/context-export.service';
+import { DetailedContext } from '../../context-manager/shared/context.interface';
+
+@Component({
+  selector: 'igo-context-import-export',
+  templateUrl: './context-import-export.component.html',
+  styleUrls: ['./context-import-export.component.scss']
+})
+export class ContextImportExportComponent implements OnInit {
+  public form: FormGroup;
+  public layers: VectorLayer[];
+  public inputProj: string = 'EPSG:4326';
+  public loading$ = new BehaviorSubject(false);
+  public forceNaming = false;
+  public layerList: Layer[];
+  public res: DetailedContext;
+  private clientSideFileSizeMax: number;
+  public fileSizeMb: number;
+  public activeImportExport: string = 'import';
+
+  @Input() map: IgoMap;
+
+  constructor(
+    private contextImportService: ContextImportService,
+    private contextExportService: ContextExportService,
+    private languageService: LanguageService,
+    private messageService: MessageService,
+    private formBuilder: FormBuilder,
+    private config: ConfigService,
+    private contextService: ContextService
+  ) {
+    this.buildForm();
+  }
+
+  ngOnInit() {
+    const configFileSizeMb = this.config.getConfig(
+      'importExport.clientSideFileSizeMaxMb'
+    );
+    this.clientSideFileSizeMax =
+      (configFileSizeMb ? configFileSizeMb : 30) * Math.pow(1024, 2);
+    this.fileSizeMb = this.clientSideFileSizeMax / Math.pow(1024, 2);
+    this.layerList = this.contextService.getContextLayers(this.map);
+  }
+
+  importFiles(files: File[]) {
+    this.loading$.next(true);
+    for (const file of files) {
+      this.contextImportService.import(file).subscribe(
+        (context: DetailedContext) => this.onFileImportSuccess(file, context),
+        (error: Error) => this.onFileImportError(file, error),
+        () => {
+          this.loading$.next(false);
+        }
+      );
+    }
+  }
+
+  handleExportFormSubmit(contextOptions) {
+    this.loading$.next(true);
+    this.res = this.contextService.getContextFromLayers(this.map, contextOptions.layers, contextOptions.name);
+    this.res.imported = true;
+    this.contextExportService
+      .export(this.res)
+      .subscribe(
+        () => {},
+        (error: Error) => this.onFileExportError(error),
+        () => {
+          this.onFileExportSuccess();
+          this.loading$.next(false);
+        }
+      );
+}
+
+  private buildForm() {
+    this.form = this.formBuilder.group({
+        layers: ['', [Validators.required]],
+        name: ['', [Validators.required]]
+    });
+  }
+
+  private onFileImportSuccess(file: File, context: DetailedContext) {
+    handleFileImportSuccess(
+    file,
+    context,
+    this.messageService,
+    this.languageService,
+    this.contextService
+    );
+  }
+
+  private onFileImportError(file: File, error: Error) {
+    this.loading$.next(false);
+    handleFileImportError(
+      file,
+      error,
+      this.messageService,
+      this.languageService,
+      this.fileSizeMb
+    );
+  }
+
+  private onFileExportError(error: Error) {
+    this.loading$.next(false);
+    handleFileExportError(error, this.messageService, this.languageService);
+  }
+
+  private onFileExportSuccess() {
+    handleFileExportSuccess(this.messageService, this.languageService);
+  }
+
+  selectAll(e) {
+    if (e._selected) {
+        this.form.controls.layers.setValue(this.layerList);
+        e._selected = true;
+    }
+    if (e._selected === false) {
+        this.form.controls.layers.setValue([]);
+    }
+  }
+
+  onImportExportChange(event) {
+    this.activeImportExport = event.value;
+  }
+}

packages/context/src/lib/context-import-export/index.ts

@@ -0,0 +1,2 @@
+export * from './shared';
+export * from './context-import-export/context-import-export.component';

packages/context/src/lib/context-import-export/shared/context-export-ionic.service.ts

@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+
+import { ConfigService } from '@igo2/core';
+import { downloadContent } from '@igo2/utils';
+
+import { DetailedContext } from '../../context-manager/shared/context.interface';
+import { ExportNothingToExportError } from './context-export.errors';
+import { Observer, Observable } from 'rxjs';
+
+import { Platform } from '@ionic/angular';
+import { File } from '@ionic-native/file/ngx';
+import { FileOpener } from '@ionic-native/file-opener/ngx';
+import { ContextExportService } from './context-export.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ContextExportIonicService extends ContextExportService {
+
+  constructor(
+    private config: ConfigService,
+    private platform: Platform,
+    private fileOpener: FileOpener,
+    private file: File
+    ) {
+      super();
+  }
+
+  protected exportAsync(res: DetailedContext): Observable<void> {
+    const doExport = (observer: Observer<void>) => {
+        const nothingToExport = super.nothingToExport(res);
+        if (nothingToExport === true) {
+            observer.error(new ExportNothingToExportError());
+            return;
+        }
+
+        const contextJSON = JSON.stringify(res);
+
+        if (this.platform.is('cordova')) {
+            const directory = this.config.getConfig('ExportDirectory');
+            this.file.writeFile(directory, `${res.uri}.json`, contextJSON, { replace: true }).then((success) =>
+            this.fileOpener.open(directory + '/' + `${res.uri}.json`, 'text/plain'));
+            observer.complete();
+        } else {
+            downloadContent(contextJSON, 'text/json;charset=utf-8', `${res.uri}.json`);
+            observer.complete();
+        }
+    };
+    return new Observable(doExport);
+  }
+}

packages/context/src/lib/context-import-export/shared/context-export.errors.ts

@@ -0,0 +1,15 @@
+export class ExportError extends Error {}
+
+export class ExportInvalidFileError extends ExportError {
+  constructor() {
+    super('Invalid context');
+    Object.setPrototypeOf(this, ExportInvalidFileError.prototype);
+  }
+}
+
+export class ExportNothingToExportError extends ExportError {
+  constructor() {
+    super('Nothing to export');
+    Object.setPrototypeOf(this, ExportNothingToExportError.prototype);
+  }
+}

packages/context/src/lib/context-import-export/shared/context-export.interface.ts

@@ -0,0 +1,6 @@
+import { Layer } from '@igo2/geo';
+
+export interface ContextExportOptions {
+  layer: Layer[];
+  name: string;
+}