feat(integration): add a new tool to report data issues (#1524)

* feat(integration): add a new tool to report data issues

* wip

* wip

* refactor(integration): rename geometry-form-tool to data-issue-reporter-tool

* refactor(data-issue-reporter-tool): review comments

* wip

packages/integration/src/lib/geometry-form/data-issue-reporter-tool/data-issue-reporter-tool.component.html

@@ -0,0 +1,32 @@
+<igo-form
+  *ngIf="form$ | async as form"
+  [form]="form"
+  [formData]="data$ | async"
+  (submitForm)="onSubmit($event)"
+>
+  <div *ngIf="form.fields.length" class="form-container">
+    <igo-form-field
+      *ngFor="let field of form.fields"
+      [field]="field"
+    ></igo-form-field>
+  </div>
+
+  <div formButtons class="actions-container">
+    <button
+      mat-stroked-button
+      type="button"
+      color="primary"
+      (click)="clearForm()"
+    >
+      {{ 'igo.integration.dataIssueReporterTool.reset.button' | translate }}
+    </button>
+    <button
+      mat-flat-button
+      type="submit"
+      color="primary"
+      [disabled]="submitDisabled"
+    >
+      {{ 'igo.integration.dataIssueReporterTool.submit.button' | translate }}
+    </button>
+  </div>
+</igo-form>

packages/integration/src/lib/geometry-form/data-issue-reporter-tool/data-issue-reporter-tool.component.scss

@@ -0,0 +1,16 @@
+:host {
+  .actions-container {
+    button:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+  .form-container {
+    width: 100%;
+    padding: 10px;
+
+    igo-form-field {
+      display: block;
+      height: auto;
+    }
+  }
+}

packages/integration/src/lib/geometry-form/data-issue-reporter-tool/data-issue-reporter-tool.component.ts

@@ -0,0 +1,201 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Validators } from '@angular/forms';
+
+import { Form, FormService, ToolComponent } from '@igo2/common';
+import { LanguageService, MessageService } from '@igo2/core';
+import { IgoMap } from '@igo2/geo';
+
+import * as olstyle from 'ol/style';
+
+import { BehaviorSubject, combineLatest } from 'rxjs';
+import type { Subscription } from 'rxjs';
+
+import { MapState } from '../../map/map.state';
+
+interface DataIssueReporterData {
+  geometry: object;
+  layer: string;
+  desc: string;
+  email: string;
+}
+
+@ToolComponent({
+  name: 'dataIssueReporter',
+  title: 'igo.integration.tools.dataIssueReporter',
+  icon: 'message-alert'
+})
+@Component({
+  selector: 'igo-issue-reporter-tool',
+  templateUrl: './data-issue-reporter-tool.component.html',
+  styleUrls: ['./data-issue-reporter-tool.component.scss']
+})
+export class DataIssueReporterToolComponent implements OnInit, OnDestroy {
+  /**
+   * Url to report the data issue. Use the Post protocol to send the form.
+   */
+  @Input() url: string;
+
+  /**
+   * Map to link to the form
+   * @internal
+   */
+  get map(): IgoMap {
+    return this.mapState.map;
+  }
+
+  form$ = new BehaviorSubject<Form>(undefined);
+
+  data$ = new BehaviorSubject<{ [key: string]: any }>(undefined);
+
+  submitDisabled = true;
+
+  private valueChanges$$: Subscription;
+
+  constructor(
+    private mapState: MapState,
+    private formService: FormService,
+    private languageService: LanguageService,
+    private messageService: MessageService,
+    private httpClient: HttpClient
+  ) {}
+
+  ngOnInit() {
+    combineLatest([this.languageService.language$, this.map.layers$]).subscribe(
+      ([language, layers]) => {
+        const baseLayerOrShownInLayerList = layers
+          .filter((l) => l.baseLayer || l.showInLayerList)
+          .map((l) => {
+            return { value: `${l.title}-${l.id}`, title: l.title };
+          });
+        const fieldConfigs = [
+          {
+            name: 'geometry',
+            title: this.languageService.translate.instant(
+              'igo.integration.dataIssueReporterTool.geometry'
+            ),
+            type: 'geometry',
+            inputs: {
+              map: this.map,
+              geometryTypeField: true,
+              geometryType: 'Polygon',
+              drawGuideField: false,
+              drawGuide: 0,
+              drawGuidePlaceholder: this.languageService.translate.instant(
+                'igo.integration.dataIssueReporterTool.drawGuidePlaceholder'
+              ),
+              drawStyle: new olstyle.Style({
+                stroke: new olstyle.Stroke({
+                  color: [255, 0, 0, 1],
+                  width: 2
+                }),
+                fill: new olstyle.Fill({
+                  color: [255, 0, 0, 0.2]
+                }),
+                image: new olstyle.Circle({
+                  radius: 8,
+                  stroke: new olstyle.Stroke({
+                    color: [255, 0, 0, 1]
+                  }),
+                  fill: new olstyle.Fill({
+                    color: [255, 0, 0, 0.2]
+                  })
+                })
+              }),
+              overlayStyle: new olstyle.Style({
+                stroke: new olstyle.Stroke({
+                  color: [0, 255, 0, 1],
+                  width: 2
+                }),
+                fill: new olstyle.Fill({
+                  color: [0, 255, 0, 0.2]
+                }),
+                image: new olstyle.Circle({
+                  radius: 8,
+                  stroke: new olstyle.Stroke({
+                    color: [0, 255, 0, 1]
+                  }),
+                  fill: new olstyle.Fill({
+                    color: [0, 255, 0, 0.2]
+                  })
+                })
+              })
+            }
+          },
+          {
+            name: 'layer',
+            title: this.languageService.translate.instant(
+              'igo.integration.dataIssueReporterTool.layer'
+            ),
+            type: 'select',
+            options: {
+              cols: 2
+            },
+            inputs: {
+              choices: baseLayerOrShownInLayerList
+            }
+          },
+          {
+            name: 'desc',
+            title: this.languageService.translate.instant(
+              'igo.integration.dataIssueReporterTool.description'
+            ),
+            type: 'textarea',
+            options: {
+              validator: Validators.required
+            }
+          },
+          {
+            name: 'email',
+            title: this.languageService.translate.instant(
+              'igo.integration.dataIssueReporterTool.email'
+            ),
+            options: {
+              validator: Validators.email
+            }
+          }
+        ];
+
+        const fields = fieldConfigs.map((config) =>
+          this.formService.field(config)
+        );
+        const form = this.formService.form(fields, []);
+
+        this.valueChanges$$ = form.control.valueChanges.subscribe(() => {
+          this.submitDisabled = !form.control.valid;
+        });
+
+        this.form$.next(form);
+      }
+    );
+  }
+
+  ngOnDestroy() {
+    this.valueChanges$$.unsubscribe();
+  }
+
+  clearForm() {
+    this.form$.value.control.reset();
+  }
+
+  onSubmit(data: DataIssueReporterData) {
+    const submitTitle = 'igo.integration.dataIssueReporterTool.submit.title';
+    if (!this.url) {
+      this.messageService.alert(
+        'igo.integration.dataIssueReporterTool.submit.setupMessage',
+        submitTitle
+      );
+      alert(JSON.stringify(data));
+    } else {
+      this.httpClient
+        .post<DataIssueReporterData>(this.url, data)
+        .subscribe(() => {
+          this.messageService.success(
+            'igo.integration.dataIssueReporterTool.submit.message',
+            submitTitle
+          );
+        });
+      this.clearForm();
+    }
+  }
+}

packages/integration/src/lib/geometry-form/data-issue-reporter-tool/index.ts

@@ -0,0 +1 @@
+export * from './data-issue-reporter-tool.component';

packages/integration/src/lib/geometry-form/geometry-form.module.ts

@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+
+import { IgoFormModule } from '@igo2/common';
+import { IgoLanguageModule, IgoMessageModule } from '@igo2/core';
+
+import { DataIssueReporterToolComponent } from './data-issue-reporter-tool/data-issue-reporter-tool.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    IgoLanguageModule,
+    IgoFormModule,
+    IgoMessageModule
+  ],
+  declarations: [DataIssueReporterToolComponent],
+  exports: [DataIssueReporterToolComponent],
+  schemas: []
+})
+export class IgoAppGeometryFormModule {}

packages/integration/src/lib/geometry-form/index.ts

@@ -0,0 +1 @@
+export * from './data-issue-reporter-tool';

packages/integration/src/lib/integration.module.ts

@@ -7,6 +7,7 @@ import { IgoAppContextModule } from './context/context.module';
 import { IgoAppDirectionsModule } from './directions/directions.module';
 import { IgoAppDrawModule } from './draw/draw.module';
 import { IgoAppFilterModule } from './filter/filter.module';
+import { IgoAppGeometryFormModule } from './geometry-form/geometry-form.module';
 import { IgoAppImportExportModule } from './import-export/import-export.module';
 import { IgoAppMapModule } from './map/map.module';
 import { IgoAppMeasureModule } from './measure/measure.module';
@@ -32,7 +33,8 @@ import { IgoAppWorkspaceModule } from './workspace/workspace.module';
     IgoAppPrintModule,
     IgoAppSearchModule,
     IgoAppFilterModule,
-    IgoAppAboutModule
+    IgoAppAboutModule,
+    IgoAppGeometryFormModule
   ]
 })
 export class IgoIntegrationModule {}

packages/integration/src/locale/en.integration.json

@@ -6,6 +6,7 @@
         "contexts": "Contexts",
         "directions": "Directions",
         "draw": "Draw",
+        "dataIssueReporter": "Report a data inconsistency",
         "importExport": "Import & Export",
         "ogcFilter": "Filter by",
         "map": "Map",
@@ -21,6 +22,22 @@
         "advancedMap": "Advanced map tools",
         "closestFeature": "Closest feature tool"
       },
+      "dataIssueReporterTool": {
+        "submit": {
+          "title": "Submit a data inconsistency",
+          "message": "Your data inconsistency has been sucessfully reported.",
+          "setupMessage": "Please configure a server component to submit an inconsistency",
+          "button": "Submit location"
+        },
+        "reset": {
+          "button": "Reset input"
+        },
+        "geometry": "Enter geometry",
+        "drawGuidePlaceholder": "Drawing Guide",
+        "layer": "Layers of information",
+        "description": "Description",
+        "email": "Email"
+      },
       "searchResultsTool": {
         "noResults": "No results",
         "doSearch": "",

packages/integration/src/locale/fr.integration.json

@@ -6,6 +6,7 @@
         "contexts": "Contextes",
         "directions": "Itinéraire",
         "draw": "Dessin",
+        "dataIssueReporter": "Soumettre une incohérence de donnée",
         "importExport": "Importer et exporter",
         "ogcFilter": "Filtrer par",
         "map": "Carte",
@@ -21,6 +22,22 @@
         "advancedMap": "Outils avancés",
         "closestFeature": "Entités à proximité"
       },
+      "dataIssueReporterTool": {
+        "submit": {
+          "title": "Soumettre une incohérence de donnée",
+          "message": "L'incohérence de donnée a été soumise.",
+          "setupMessage": "Veuillez configurer une composante serveur pour soumettre une incohérence",
+          "button": "Soumettre la localisation"
+        },
+        "reset": {
+          "button": "Réinitialiser la saisie"
+        },
+        "geometry": "Saisir une géométrie",
+        "drawGuidePlaceholder": "Guide de dessin",
+        "layer": "Couches d'informations",
+        "description": "Description",
+        "email": "Courriel"
+      },
       "searchResultsTool": {
         "noResults": "Aucun résultat",
         "doSearch": "Veuillez effectuer une recherche dans la barre de recherche ci-dessus.",

packages/integration/src/public_api.ts

@@ -4,6 +4,7 @@
 
 export * from './lib/integration.module';
 export * from './lib/about/about.module';
+export * from './lib/geometry-form/geometry-form.module';
 export * from './lib/analytics/analytics.module';
 export * from './lib/storage/storage.module';
 export * from './lib/context/context.module';
@@ -21,6 +22,7 @@ export * from './lib/search/search.module';
 export * from './lib/tool/tool.module';
 
 export * from './lib/about';
+export * from './lib/geometry-form';
 export * from './lib/analytics';
 export * from './lib/context';
 export * from './lib/catalog';