From 73e3b0bed26130fea46849963fddc6ff6df44711 Mon Sep 17 00:00:00 2001
From: josee666 <josee.martel@mffp.gouv.qc.ca>
Date: Mon, 24 Oct 2022 10:32:33 -0400
Subject: [PATCH] feat(importExport): add custom html for clarification (#1095)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Pierre-Étienne Lord
---
 .../lib/import-export/import-export.module.ts |  3 ++-
 .../import-export.component.html              | 21 +++++++++++++------
 .../import-export/import-export.component.ts  |  4 ++++
 packages/geo/src/locale/en.geo.json           |  2 ++
 packages/geo/src/locale/fr.geo.json           |  2 ++
 5 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/geo/src/lib/import-export/import-export.module.ts b/packages/geo/src/lib/import-export/import-export.module.ts
index 64945e9812..e8fe27fcb1 100644
--- a/packages/geo/src/lib/import-export/import-export.module.ts
+++ b/packages/geo/src/lib/import-export/import-export.module.ts
@@ -14,7 +14,7 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { IgoLanguageModule } from '@igo2/core';
-import { IgoKeyValueModule, IgoDrapDropModule, IgoSpinnerModule } from '@igo2/common';
+import { IgoKeyValueModule, IgoDrapDropModule, IgoSpinnerModule, IgoCustomHtmlModule } from '@igo2/common';
 
 import { ExportButtonComponent } from './export-button/export-button.component';
 import { ImportExportComponent } from './import-export/import-export.component';
@@ -40,6 +40,7 @@ import { IgoStyleListModule } from './style-list/style-list.module';
     IgoSpinnerModule,
     IgoKeyValueModule,
     IgoDrapDropModule,
+    IgoCustomHtmlModule,
     IgoStyleListModule.forRoot()
   ],
   exports: [ImportExportComponent, DropGeoFileDirective, IgoStyleListModule, ExportButtonComponent],
diff --git a/packages/geo/src/lib/import-export/import-export/import-export.component.html b/packages/geo/src/lib/import-export/import-export/import-export.component.html
index a84b8882a9..ec8e7a7578 100644
--- a/packages/geo/src/lib/import-export/import-export/import-export.component.html
+++ b/packages/geo/src/lib/import-export/import-export/import-export.component.html
@@ -51,12 +51,17 @@
   </div>
 </form>
 <section class="mat-typography" *ngIf="selectedMode === 'import'">
-  <h4>{{'igo.geo.importExportForm.importClarifications' | translate}}</h4>
-  <ul>
-    <li>{{'igo.geo.importExportForm.importSizeMax' | translate: {size: fileSizeMb} }}</li>
-    <li>{{'igo.geo.importExportForm.importFormatAuthorized' | translate}}</li>
-    <li>{{'igo.geo.importExportForm.importShpZip' | translate}}</li>
-  </ul>
+  <div *ngIf="importHtmlClarifications === ''">
+    <h4>{{'igo.geo.importExportForm.importClarifications' | translate}}</h4>
+    <ul>
+      <li>{{'igo.geo.importExportForm.importSizeMax' | translate: {size: fileSizeMb} }}</li>
+      <li>{{'igo.geo.importExportForm.importFormatAuthorized' | translate}}</li>
+      <li>{{'igo.geo.importExportForm.importShpZip' | translate}}</li>
+    </ul>
+  </div>
+  <igo-custom-html *ngIf="importHtmlClarifications !== ''" class="mat-typography"
+    [html]="importHtmlClarifications">
+  </igo-custom-html>
 </section>
 
 <section class="mat-typography" *ngIf="(exportableLayers$ | async).length === 0 && selectedMode === 'export'">
@@ -167,4 +172,8 @@ <h4>{{'igo.geo.importExportForm.exportNoLayersExportable' | translate}}</h4>
     <igo-spinner [shown]="loading$ | async"></igo-spinner>
   </div>
 
+  <igo-custom-html *ngIf="exportHtmlClarifications !== ''" class="mat-typography"
+    [html]="exportHtmlClarifications">
+  </igo-custom-html>
+
 </form>
diff --git a/packages/geo/src/lib/import-export/import-export/import-export.component.ts b/packages/geo/src/lib/import-export/import-export/import-export.component.ts
index 86592a0734..3fcd8da670 100644
--- a/packages/geo/src/lib/import-export/import-export/import-export.component.ts
+++ b/packages/geo/src/lib/import-export/import-export/import-export.component.ts
@@ -81,6 +81,8 @@ export class ImportExportComponent implements OnDestroy, OnInit {
   private formLayer$$: Subscription;
   private exportOptions$$: Subscription;
 
+  public importHtmlClarifications: string;
+  public exportHtmlClarifications: string;
 
   private espgCodeRegex = new RegExp('^\\d{4,6}');
   private clientSideFileSizeMax: number;
@@ -167,6 +169,8 @@ export class ImportExportComponent implements OnDestroy, OnInit {
     this.loadConfig();
     this.buildForm();
     this.computeProjections();
+    this.importHtmlClarifications = this.languageService.translate.instant('igo.geo.importExportForm.importHtmlClarifications');
+    this.exportHtmlClarifications = this.languageService.translate.instant('igo.geo.importExportForm.exportHtmlClarifications');
   }
 
   ngOnInit() {
diff --git a/packages/geo/src/locale/en.geo.json b/packages/geo/src/locale/en.geo.json
index a4637c96f8..b1b0bd9bd9 100644
--- a/packages/geo/src/locale/en.geo.json
+++ b/packages/geo/src/locale/en.geo.json
@@ -137,6 +137,8 @@
         "importSizeMax": "The file size limit is {{size}} Mb",
         "importFormatAuthorized": "Formats authorized: geojson, kml, gpx, gml, shapefile",
         "importShpZip": "Shapefiles must be zipped AND geometries stored in Latitude Longitude coordinate (EPSG:4326/WGS:84)",
+        "importHtmlClarifications": "",
+        "exportHtmlClarifications": "",
         "other": "other",
         "others": "others",
         "projections": {
diff --git a/packages/geo/src/locale/fr.geo.json b/packages/geo/src/locale/fr.geo.json
index b33780b0f6..862046ef46 100644
--- a/packages/geo/src/locale/fr.geo.json
+++ b/packages/geo/src/locale/fr.geo.json
@@ -137,6 +137,8 @@
         "importSizeMax": "La taille limite du fichier est de {{size}} Mo",
         "importFormatAuthorized": "Formats autorisés: geojson, kml, gpx, gml, shapefile",
         "importShpZip": "Les shapefiles doivent être compressés (zippés) ET leurs géométries doivent être en coordonnées Latitude Longitude (EPSG:4326/WGS84)",
+        "importHtmlClarifications": "",
+        "exportHtmlClarifications": "",
         "other": "autre",
         "others": "autres",
         "projections": {