Wfs editor

demo/src/app/app.component.html

@@ -48,6 +48,7 @@ <h1>{{title}}</h1>
         <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>
+        <a mat-list-item routerLink="edition">Edition</a>
 
         <hr>
 

demo/src/app/app.module.ts

@@ -41,6 +41,7 @@ import { AppPrintModule } from './geo/print/print.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';
+import { AppEditionModule } from './geo/edition/edition.module';
 
 import { AppContextModule } from './context/context/context.module';
 
@@ -90,6 +91,7 @@ import { AppComponent } from './app.component';
     AppDirectionsModule,
     AppTimeFilterModule,
     AppOgcFilterModule,
+    AppEditionModule,
 
     AppContextModule,
 

demo/src/app/common/entity-selector/entity-selector.component.html

@@ -2,8 +2,9 @@
   <mat-card-subtitle>Common</mat-card-subtitle>
   <mat-card-title>Entity Selector</mat-card-title>
   <mat-card-content>
-    See the <a href="https://github.com/infra-geo-ouverte/igo2-lib/tree/master/demo/src/app/common/entity-table">code of this example</a>
+    See the <a href="https://github.com/infra-geo-ouverte/igo2-lib/tree/master/demo/src/app/common/entity-selector">code of this example</a>
   </mat-card-content>
+
   <igo-entity-selector
     [store]="store"
     [titleAccessor]="getTitle"

demo/src/app/common/form/form.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Validators } from '@angular/forms';
 import { BehaviorSubject, Subscription } from 'rxjs';
 
+import { LanguageService } from '@igo2/core';
 import { Form, FormService } from '@igo2/common';
 
 @Component({
@@ -19,7 +20,10 @@ export class AppFormComponent implements OnInit, OnDestroy {
 
   private valueChanges$$: Subscription;
 
-  constructor(private formService: FormService) {}
+  constructor(
+    private formService: FormService,
+    private languageService: LanguageService
+  ) {}
 
   ngOnInit() {
     const fieldConfigs = [

demo/src/app/geo/edition/edition-routing.module.ts

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

demo/src/app/geo/edition/edition.component.html

@@ -0,0 +1,36 @@
+<mat-card>
+  <mat-card-subtitle>Geo</mat-card-subtitle>
+  <mat-card-title>Edition</mat-card-title>
+  <mat-card-content>
+    See the <a href="https://github.com/infra-geo-ouverte/igo2-lib/tree/master/demo/src/app/geo/edition">code of this example</a>
+  </mat-card-content>
+
+  <igo-map-browser [map]="map" [view]="view">
+    <igo-zoom-button [map]="map" color="primary"></igo-zoom-button>
+  </igo-map-browser>
+
+  <igo-editor-selector
+    igoWfsEditorSelector
+    [store]="editorStore"
+    [map]="map">
+  </igo-editor-selector>
+  <ng-container *ngIf="selectedEditor$ | async as editor">
+    <igo-actionbar
+      [store]="editor.actionStore"
+      [horizontal]="true"
+      [withToggleButton]="true"
+      [withTitle]="false"
+      [mode]="actionbarMode">
+    </igo-actionbar>
+
+    <igo-editor-outlet [editor]="editor"></igo-editor-outlet>
+
+    <igo-entity-table
+      class="table-compact table-centered"
+      [scrollBehavior]="scrollBehavior"
+      [store]="editor.entityStore"
+      [template]="editor.tableTemplate">
+    </igo-entity-table>
+  </ng-container>
+
+</mat-card>

demo/src/app/geo/edition/edition.component.scss

@@ -0,0 +1,17 @@
+igo-map-browser {
+  width: 100%;
+  height: 300px;
+}
+
+igo-panel {
+  width: 100%;
+  padding-top: 10px;
+}
+
+igo-entity-table {
+  height: 400px;
+}
+
+igo-actionbar {
+  height: 48px;
+}

demo/src/app/geo/edition/edition.component.ts

@@ -0,0 +1,106 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { LanguageService } from '@igo2/core';
+import {
+  ActionbarMode,
+  EntityRecord,
+  EntityTableScrollBehavior,
+  Editor,
+  EditorStore
+} from '@igo2/common';
+import {
+  IgoMap,
+  DataSourceService,
+  LayerService,
+  LayerOptions,
+  WFSDataSourceOptions
+} from '@igo2/geo';
+
+@Component({
+  selector: 'app-edition',
+  templateUrl: './edition.component.html',
+  styleUrls: ['./edition.component.scss']
+})
+export class AppEditionComponent implements OnInit {
+
+  public map = new IgoMap({
+    controls: {
+      attribution: {
+        collapsed: true
+      }
+    }
+  });
+
+  public view = {
+    center: [-72, 47.2],
+    zoom: 5
+  };
+
+  public editorStore = new EditorStore([]);
+
+  public selectedEditor$: Observable<Editor>;
+
+  public actionbarMode = ActionbarMode.Dock;
+
+  public scrollBehavior = EntityTableScrollBehavior.Instant;
+
+  constructor(
+    private languageService: LanguageService,
+    private dataSourceService: DataSourceService,
+    private layerService: LayerService
+  ) {}
+
+  ngOnInit() {
+    this.selectedEditor$ = this.editorStore.stateView
+      .firstBy$((record: EntityRecord<Editor>) => record.state.selected === true)
+      .pipe(
+        map((record: EntityRecord<Editor>) => {
+          return record === undefined ? undefined : record.entity;
+        })
+      );
+
+    this.dataSourceService
+      .createAsyncDataSource({
+        type: 'osm'
+      })
+      .subscribe(dataSource => {
+        this.map.addLayer(
+          this.layerService.createLayer({
+            title: 'OSM',
+            source: dataSource
+          })
+        );
+      });
+
+    const wfsDatasource: WFSDataSourceOptions = {
+      type: 'wfs',
+      url: 'https://geoegl.msp.gouv.qc.ca/apis/ws/swtq',
+      params: {
+        featureTypes: 'etablissement_mtq',
+        fieldNameGeometry: 'geometry',
+        version: '2.0.0',
+        outputFormat: 'geojson'
+      },
+      sourceFields: [
+        {name: 'idetablis', alias: 'ID'},
+        {name: 'nometablis', alias: 'Name'},
+        {name: 'typetablis', alias: 'Type'}
+      ]
+    };
+
+    this.dataSourceService
+      .createAsyncDataSource(wfsDatasource)
+      .subscribe(dataSource => {
+        const layer: LayerOptions = {
+          title: 'Simple WFS ',
+          visible: true,
+          source: dataSource
+        };
+        this.map.addLayer(this.layerService.createLayer(layer));
+      });
+  }
+
+}

demo/src/app/geo/edition/edition.module.ts

@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  MatCardModule,
+  MatButtonModule,
+  MatIconModule
+} from '@angular/material';
+
+import {
+  IgoActionModule,
+  IgoEntityModule,
+  IgoEditionModule,
+  IgoPanelModule
+} from '@igo2/common';
+import {
+  IgoMapModule,
+  IgoGeoEditionModule
+} from '@igo2/geo';
+
+import { AppEditionComponent } from './edition.component';
+import { AppEditionRoutingModule } from './edition-routing.module';
+
+@NgModule({
+  declarations: [AppEditionComponent],
+  imports: [
+    CommonModule,
+    AppEditionRoutingModule,
+    MatCardModule,
+    MatButtonModule,
+    MatIconModule,
+    IgoActionModule,
+    IgoEntityModule,
+    IgoEditionModule,
+    IgoPanelModule,
+    IgoMapModule,
+    IgoGeoEditionModule
+  ],
+  exports: [AppEditionComponent]
+})
+export class AppEditionModule {}

demo/src/app/geo/feature/feature.component.ts

@@ -61,7 +61,7 @@ export class AppFeatureComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    const loadingStrategy = new FeatureStoreLoadingStrategy();
+    const loadingStrategy = new FeatureStoreLoadingStrategy({});
     this.store.addStrategy(loadingStrategy);
 
     const selectionStrategy = new FeatureStoreSelectionStrategy({

packages/common/src/lib/edition/edition.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { IgoEditorOutletModule } from './editor-outlet/editor-outlet.module';
+import { IgoEditorSelectorModule } from './editor-selector/editor-selector.module';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    IgoEditorOutletModule,
+    IgoEditorSelectorModule
+  ],
+  declarations: []
+})
+export class IgoEditionModule {}

packages/common/src/lib/edition/editor-outlet/editor-outlet.component.html

@@ -0,0 +1,8 @@
+<ng-container *ngIf="widget$ | async as widget">
+  <igo-widget-outlet
+    [widget]="widget"
+    [inputs]="widgetInputs$ | async"
+    (cancel)="onWidgetCancel(widget)"
+    (complete)="onWidgetComplete(widget)">
+  </igo-widget-outlet>
+</ng-container>

packages/common/src/lib/edition/editor-outlet/editor-outlet.component.scss

@@ -0,0 +1,3 @@
+igo-widget-outlet {
+  height: 100%;
+}

packages/common/src/lib/edition/editor-outlet/editor-outlet.component.ts

@@ -0,0 +1,76 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ChangeDetectionStrategy
+} from '@angular/core';
+
+import { BehaviorSubject } from 'rxjs';
+
+import { Widget } from '../../widget';
+import { Editor } from '../shared/editor';
+
+/**
+ * This component dynamically render an Editor's active widget.
+ * It also deactivate that widget whenever the widget's component
+ * emit the 'cancel' or 'complete' event.
+ */
+@Component({
+  selector: 'igo-editor-outlet',
+  templateUrl: './editor-outlet.component.html',
+  styleUrls: ['./editor-outlet.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class EditorOutletComponent {
+
+  /**
+   * Editor
+   */
+  @Input() editor: Editor;
+
+  /**
+   * Event emitted when a widget is deactivate which happens
+   * when the widget's component emits the 'cancel' or 'complete' event.
+   */
+  @Output() deactivateWidget = new EventEmitter<Widget>();
+
+  /**
+   * Observable of the editor's active widget
+   * @internal
+   */
+  get widget$(): BehaviorSubject<Widget> { return this.editor.widget$; }
+
+  /**
+   * Observable of the editor's widget inputs
+   * @internal
+   */
+  get widgetInputs$(): BehaviorSubject<{ [key: string]: any }> {
+    return this.editor.widgetInputs$;
+  }
+
+  constructor() {}
+
+  /**
+   * When a widget's component emit the 'cancel' event,
+   * deactivate that widget and emit the 'deactivateWidget' event.
+   * @param widget Widget
+   * @internal
+   */
+  onWidgetCancel(widget: Widget) {
+    this.editor.deactivateWidget();
+    this.deactivateWidget.emit(widget);
+  }
+
+  /**
+   * When a widget's component emit the 'cancel' event,
+   * deactivate that widget and emit the 'deactivateWidget' event.
+   * @param widget Widget
+   * @internal
+   */
+  onWidgetComplete(widget: Widget) {
+    this.editor.deactivateWidget();
+    this.deactivateWidget.emit(widget);
+  }
+
+}