fix(import-export): better error handling

demo/src/app/app.component.html

@@ -45,6 +45,7 @@ <h1>{{title}}</h1>
         <a mat-list-item routerLink="catalog">Catalog</a>
         <a mat-list-item routerLink="search">Search</a>
         <a mat-list-item routerLink="print">Print</a>
+        <a mat-list-item routerLink="import-export">Import/Export</a>
         <a mat-list-item routerLink="directions">Directions</a>
         <a mat-list-item routerLink="time-filter">Time filter</a>
         <a mat-list-item routerLink="ogc-filter">OGC filter</a>

demo/src/app/app.module.ts

@@ -39,6 +39,7 @@ import { AppQueryModule } from './geo/query/query.module';
 import { AppCatalogModule } from './geo/catalog/catalog.module';
 import { AppSearchModule } from './geo/search/search.module';
 import { AppPrintModule } from './geo/print/print.module';
+import { AppImportExport } from './geo/import-export/import-export.module';
 import { AppDirectionsModule } from './geo/directions/directions.module';
 import { AppTimeFilterModule } from './geo/time-filter/time-filter.module';
 import { AppOgcFilterModule } from './geo/ogc-filter/ogc-filter.module';
@@ -89,6 +90,7 @@ import { AppComponent } from './app.component';
     AppCatalogModule,
     AppSearchModule,
     AppPrintModule,
+    AppImportExport,
     AppDirectionsModule,
     AppTimeFilterModule,
     AppOgcFilterModule,

demo/src/app/geo/import-export/import-export-routing.module.ts

@@ -0,0 +1,15 @@
+import { Routes, RouterModule } from '@angular/router';
+import { ModuleWithProviders } from '@angular/core';
+
+import { AppImportExportComponent } from './import-export.component';
+
+const routes: Routes = [
+  {
+    path: 'import-export',
+    component: AppImportExportComponent
+  }
+];
+
+export const AppImportExportRoutingModule: ModuleWithProviders = RouterModule.forChild(
+  routes
+);

demo/src/app/geo/import-export/import-export.component.html

@@ -0,0 +1,20 @@
+<mat-card>
+  <mat-card-subtitle>Geo</mat-card-subtitle>
+  <mat-card-title>Import / Export</mat-card-title>
+  <mat-card-content>
+    <li>Dependencies: LanguageService</li>
+
+    <br>
+    See the <a href="https://github.com/infra-geo-ouverte/igo2-lib/tree/master/demo/src/app/geo/import-export">code of this example</a>
+    <hr>
+  </mat-card-content>
+
+  <igo-map-browser [map]="map" [view]="view">
+    <igo-zoom-button [map]="map" color="primary"></igo-zoom-button>
+  </igo-map-browser>
+
+  <igo-import-export [map]="map"></igo-import-export>
+
+</mat-card>
+
+<igo-message-center></igo-message-center>

demo/src/app/geo/import-export/import-export.component.scss

@@ -0,0 +1,4 @@
+igo-map-browser {
+  width: 900px;
+  height: 1000px;
+}

demo/src/app/geo/import-export/import-export.component.ts

@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+
+import { LanguageService } from '@igo2/core';
+import { IgoMap, LayerService } from '@igo2/geo';
+
+@Component({
+  selector: 'app-import-export',
+  templateUrl: './import-export.component.html',
+  styleUrls: ['./import-export.component.scss']
+})
+export class AppImportExportComponent {
+  public map = new IgoMap({
+    controls: {
+      attribution: {
+        collapsed: true
+      }
+    }
+  });
+
+  public view = {
+    center: [-73, 47.2],
+    zoom: 9
+  };
+
+  constructor(
+    private languageService: LanguageService,
+    private layerService: LayerService
+  ) {
+    this.layerService
+      .createAsyncLayer({
+        title: 'Quebec Base Map',
+        sourceOptions: {
+          type: 'wmts',
+          url: '/carto/wmts/1.0.0/wmts',
+          layer: 'carte_gouv_qc_ro',
+          matrixSet: 'EPSG_3857',
+          version: '1.3.0'
+        }
+      })
+      .subscribe(l => this.map.addLayer(l));
+
+  }
+}

demo/src/app/geo/import-export/import-export.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { MatCardModule, MatButtonModule } from '@angular/material';
+
+import { IgoMessageModule } from '@igo2/core';
+import { IgoMapModule, IgoImportExportModule } from '@igo2/geo';
+
+import { AppImportExportComponent } from './import-export.component';
+import { AppImportExportRoutingModule } from './import-export-routing.module';
+
+@NgModule({
+  declarations: [AppImportExportComponent],
+  imports: [
+    AppImportExportRoutingModule,
+    MatCardModule,
+    MatButtonModule,
+    IgoMessageModule,
+    IgoMapModule,
+    IgoImportExportModule
+  ],
+  exports: [AppImportExportComponent]
+})
+export class AppImportExport {}

demo/src/environments/environment.ts

@@ -28,6 +28,9 @@ export const environment: Environment = {
     language: {
       prefix: './locale/'
     },
+    importExport: {
+      url: 'https://testgeoegl.msp.gouv.qc.ca/apis/ogre'
+    },
     catalog: {
       sources: [
         {

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

@@ -11,7 +11,7 @@ import {
 } from '@angular/material';
 
 import { IgoLanguageModule } from '@igo2/core';
-import { IgoKeyValueModule, IgoDrapDropModule } from '@igo2/common';
+import { IgoKeyValueModule, IgoDrapDropModule, IgoSpinnerModule } from '@igo2/common';
 
 import { ImportExportComponent } from './import-export/import-export.component';
 import { DropGeoFileDirective } from './shared/drop-geo-file.directive';
@@ -28,6 +28,7 @@ import { DropGeoFileDirective } from './shared/drop-geo-file.directive';
     MatFormFieldModule,
     MatInputModule,
     IgoLanguageModule,
+    IgoSpinnerModule,
     IgoKeyValueModule,
     IgoDrapDropModule
   ],

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

@@ -13,9 +13,10 @@
       </div>
 
       <div class="igo-form-button-group">
-        <button mat-raised-button type="button" (click)="fileInput.click()">
+        <button mat-raised-button type="button" (click)="fileInput.click()" [disabled]="loading">
           {{'igo.geo.importExportForm.importButton' | translate}}
         </button>
+        <igo-spinner [shown]="loading"></igo-spinner>
         <input
           #fileInput
           type="file"
@@ -24,6 +25,12 @@
           (change)="importFiles($event.target.files)">
       </div>
     </form>
+
+    <h4>{{'igo.geo.importExportForm.importClarifications' | translate}}</h4>
+    <ul>
+      <li>{{'igo.geo.importExportForm.importSizeMax' | translate}}</li>
+      <li>{{'igo.geo.importExportForm.importShpZip' | translate}}</li>
+    </ul>
   </mat-tab>
 
   <mat-tab [label]="'igo.geo.importExportForm.exportTabTitle' | translate">
@@ -57,10 +64,11 @@
         <button
           mat-raised-button
           type="button"
-          [disabled]="!form.valid"
+          [disabled]="!form.valid || loading"
           (click)="handleExportFormSubmit(form.value)">
           {{'igo.geo.importExportForm.exportButton' | translate}}
         </button>
+        <igo-spinner [shown]="loading"></igo-spinner>
       </div>
 
     </form>

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

@@ -10,3 +10,8 @@ mat-form-field {
   text-align: center;
   padding-top: 10px;
 }
+
+igo-spinner {
+  position: absolute;
+  padding-left: 10px;
+}

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

@@ -1,6 +1,6 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { Subscription } from 'rxjs';
+import { Subscription, throwError } from 'rxjs';
 
 import { MessageService, LanguageService } from '@igo2/core';
 
@@ -14,19 +14,22 @@ import { ExportOptions } from '../shared/export.interface';
 import { ExportFormat } from '../shared/export.type';
 import { ExportService } from '../shared/export.service';
 import { ImportService } from '../shared/import.service';
-import { handleFileImportSuccess, handleFileImportError } from '../shared/import.utils';
+import {
+  handleFileImportSuccess,
+  handleFileImportError
+} from '../shared/import.utils';
 
 @Component({
   selector: 'igo-import-export',
   templateUrl: './import-export.component.html',
   styleUrls: ['./import-export.component.scss']
 })
 export class ImportExportComponent implements OnDestroy, OnInit {
-
   public form: FormGroup;
   public formats = ExportFormat;
   public layers: VectorLayer[];
   public inputProj: string = 'EPSG:4326';
+  public loading = false;
 
   private layers$$: Subscription;
 
@@ -44,10 +47,9 @@ export class ImportExportComponent implements OnDestroy, OnInit {
 
   ngOnInit() {
     this.layers$$ = this.map.layers$.subscribe(layers => {
-      this.layers = layers
-        .filter((layer: Layer) => {
-          return layer instanceof VectorLayer && layer.exportable === true;
-        }) as VectorLayer[];
+      this.layers = layers.filter((layer: Layer) => {
+        return layer instanceof VectorLayer && layer.exportable === true;
+      }) as VectorLayer[];
     });
   }
 
@@ -56,6 +58,7 @@ export class ImportExportComponent implements OnDestroy, OnInit {
   }
 
   importFiles(files: File[]) {
+    this.loading = true;
     for (const file of files) {
       this.importService
         .import(file, this.inputProj)
@@ -67,12 +70,13 @@ export class ImportExportComponent implements OnDestroy, OnInit {
   }
 
   handleExportFormSubmit(data: ExportOptions) {
+    this.loading = true;
     const layer = this.map.getLayerById(data.layer);
     const olFeatures = layer.dataSource.ol.getFeatures();
     this.exportService
       .export(olFeatures, data.format, layer.title, this.map.projection)
       .subscribe(
-        () => {},
+        () => { this.loading = false;},
         (error: Error) => this.onFileExportError(error)
       );
   }
@@ -85,14 +89,28 @@ export class ImportExportComponent implements OnDestroy, OnInit {
   }
 
   private onFileImportSuccess(file: File, features: Feature[]) {
-    handleFileImportSuccess(file, features, this.map, this.messageService, this.languageService);
+    this.loading = false;
+    handleFileImportSuccess(
+      file,
+      features,
+      this.map,
+      this.messageService,
+      this.languageService
+    );
   }
 
   private onFileImportError(file: File, error: Error) {
-    handleFileImportError(file, error, this.messageService, this.languageService);
+    this.loading = false;
+    handleFileImportError(
+      file,
+      error,
+      this.messageService,
+      this.languageService
+    );
   }
 
   private onFileExportError(error: Error) {
+    this.loading = false;
     handleFileExportError(error, this.messageService, this.languageService);
   }
 }

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

@@ -2,14 +2,14 @@ export class ExportError extends Error {}
 
 export class ExportInvalidFileError extends ExportError {
   constructor() {
-    super('Invalid file.');
+    super('Invalid file');
     Object.setPrototypeOf(this, ExportInvalidFileError.prototype);
   }
 }
 
 export class ExportNothingToExportError extends ExportError {
   constructor() {
-    super('Nothing to export.');
+    super('Nothing to export');
     Object.setPrototypeOf(this, ExportNothingToExportError.prototype);
   }
 }

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

@@ -2,21 +2,35 @@ export class ImportError extends Error {}
 
 export class ImportInvalidFileError extends ImportError {
   constructor() {
-    super('Invalid file.');
+    super('Invalid file');
     Object.setPrototypeOf(this, ImportInvalidFileError.prototype);
   }
 }
 
 export class ImportUnreadableFileError extends ImportError {
   constructor() {
-      super('Failed to read file.');
+      super('Failed to read file');
       Object.setPrototypeOf(this, ImportUnreadableFileError.prototype);
   }
 }
 
 export class ImportNothingToImportError extends ImportError {
   constructor() {
-      super('Nothing to import.');
+      super('Nothing to import');
+      Object.setPrototypeOf(this, ImportNothingToImportError.prototype);
+  }
+}
+
+export class ImportSizeError extends ImportError {
+  constructor() {
+      super('File is too large');
+      Object.setPrototypeOf(this, ImportNothingToImportError.prototype);
+  }
+}
+
+export class ImportSRSError extends ImportError {
+  constructor() {
+      super('Invalid SRS definition');
       Object.setPrototypeOf(this, ImportNothingToImportError.prototype);
   }
 }