From 02266d59b246474f7929cab7685de87118b28f25 Mon Sep 17 00:00:00 2001
From: Jean-Pascal MILCENT <jp.milcent@cbn-alpin.fr>
Date: Sat, 9 Oct 2021 00:55:23 +0200
Subject: [PATCH] Feat frontend/synthese: improve display of form fields used

Resolve #1492.
---
 .../synthese-advanced-form-component.ts       | 44 +++++++++
 .../synthese-advanced-form.component.html     | 11 +++
 .../synthese-form.component.html              | 97 ++++++++++++++-----
 .../synthese-form.component.scss              |  7 +-
 .../synthese-form/synthese-form.component.ts  |  3 +
 .../synthese-form/synthese-form.service.ts    | 33 ++++++-
 .../app/syntheseModule/synthese.component.ts  |  3 +
 7 files changed, 171 insertions(+), 27 deletions(-)

diff --git a/frontend/src/app/GN2CommonModule/form/synthese-form/advanced-form/synthese-advanced-form-component.ts b/frontend/src/app/GN2CommonModule/form/synthese-form/advanced-form/synthese-advanced-form-component.ts
index 3aab6eda6c..c17f9588a0 100644
--- a/frontend/src/app/GN2CommonModule/form/synthese-form/advanced-form/synthese-advanced-form-component.ts
+++ b/frontend/src/app/GN2CommonModule/form/synthese-form/advanced-form/synthese-advanced-form-component.ts
@@ -95,6 +95,50 @@ export class TaxonAdvancedModalComponent implements OnInit, AfterContentInit {
     this.formService.searchForm.controls.taxon_rank.reset();
   }
 
+  onStatusCheckboxChanged(event) {
+    if (event.target.checked == true) {
+      this.formService.selectedStatus.push(event.target.value);
+    } else if (event.target.checked == false) {
+      this.formService.selectedStatus.splice(
+        this.formService.selectedStatus.indexOf(event.target.value),
+        1
+      );
+    }
+  }
+
+  onStatusSelected(event) {
+    this.formService.selectedStatus.push(event);
+  }
+
+  onStatusDeleted(event) {
+    this.formService.selectedStatus.splice(
+      this.formService.selectedStatus.indexOf(event),
+      1
+    );
+  }
+
+  onRedListsSelected(event) {
+    this.formService.selectedRedLists.push(event);
+  }
+
+  onRedListsDeleted(event) {
+    this.formService.selectedRedLists.splice(
+      this.formService.selectedRedLists.indexOf(event),
+      1
+    );
+  }
+
+  onTaxRefAttributsSelected(event) {
+    this.formService.selectedTaxRefAttributs.push(event);
+  }
+
+  onTaxRefAttributsDeleted(event) {
+    this.formService.selectedTaxRefAttributs.splice(
+      this.formService.selectedTaxRefAttributs.indexOf(event),
+      1
+    );
+  }
+
   // algo recursif pour retrouver tout les cd_ref sélectionné à partir de l'arbre
   searchSelectedId(node, depth): Array<any> {
     if (node.children) {
diff --git a/frontend/src/app/GN2CommonModule/form/synthese-form/advanced-form/synthese-advanced-form.component.html b/frontend/src/app/GN2CommonModule/form/synthese-form/advanced-form/synthese-advanced-form.component.html
index 2a4298286e..735402b22e 100644
--- a/frontend/src/app/GN2CommonModule/form/synthese-form/advanced-form/synthese-advanced-form.component.html
+++ b/frontend/src/app/GN2CommonModule/form/synthese-form/advanced-form/synthese-advanced-form.component.html
@@ -140,6 +140,8 @@ <h5>Statuts</h5>
         keyLabel="display"
         keyValue="code"
         [label]="status.display_name"
+        (onChange)="onStatusSelected($event)"
+        (onDelete)="onStatusDeleted($event.code)"
       >
       </pnx-multiselect>
 
@@ -154,6 +156,7 @@ <h5>Statuts</h5>
             class="custom-control-input"
             [formControl]="status.control"
             [value]="status.status_types[0]"
+            (change)="onStatusCheckboxChanged($event)"
           />
           <label [for]="status.control_name" class="custom-control-label">
             <small>{{ status.display_name }}</small>
@@ -175,6 +178,8 @@ <h5>Listes rouges</h5>
         keyLabel="display"
         keyValue="code"
         [label]="redList.display_name"
+        (onChange)="onRedListsSelected(redList.status_type + ' [' + $event + ']')"
+        (onDelete)="onRedListsDeleted(redList.status_type + ' [' + $event.code + ']')"
       >
       </pnx-multiselect>
     </div>
@@ -189,6 +194,8 @@ <h5>Attributs TaxRef</h5>
         keyLabel="nom_categorie_lr"
         keyValue="id_categorie_france"
         label="Liste rouge UICN"
+        (onChange)="onTaxRefAttributsSelected($event)"
+        (onDelete)="onTaxRefAttributsDeleted($event.id_categorie_france)"
       >
       </pnx-multiselect>
     </div>
@@ -200,6 +207,8 @@ <h5>Attributs TaxRef</h5>
         keyLabel="nom_habitat"
         keyValue="id_habitat"
         label="Habitat"
+        (onChange)="onTaxRefAttributsSelected($event)"
+        (onDelete)="onTaxRefAttributsDeleted($event.id_habitat)"
       >
       </pnx-multiselect>
     </div>
@@ -211,6 +220,8 @@ <h5>Attributs TaxRef</h5>
         keyLabel="value"
         keyValue="value"
         label="Groupe 2 INPN"
+        (onChange)="onTaxRefAttributsSelected($event)"
+        (onDelete)="onTaxRefAttributsDeleted($event.value)"
       >
       </pnx-multiselect>
     </div>
diff --git a/frontend/src/app/GN2CommonModule/form/synthese-form/synthese-form.component.html b/frontend/src/app/GN2CommonModule/form/synthese-form/synthese-form.component.html
index f540c94933..26978cf844 100644
--- a/frontend/src/app/GN2CommonModule/form/synthese-form/synthese-form.component.html
+++ b/frontend/src/app/GN2CommonModule/form/synthese-form/synthese-form.component.html
@@ -120,40 +120,91 @@
       (onChange)="formService.getCurrentTaxon($event)"
     >
     </pnx-taxonomy>
+
     <div
-      class="alert alert-warning taxon-alert"
       *ngIf="formService.selectedtaxonFromComponent.length > 0"
+      class="alert alert-warning search-alert mt-2"
     >
-      <p class="taxon-list">
-        <b> Taxon(s) recherché(s):</b>
-      </p>
-      <li
-        class="taxon-list"
-        *ngFor="let taxon of formService.selectedtaxonFromComponent; let i = index"
+    <h2 class="h6 mb-1"><small>Taxon(s) recherché(s) :</small></h2>
+      <ul
+        *ngIf="formService.selectedtaxonFromComponent.length > 0"
+        class="list-unstyled search-list"
       >
-        {{taxon.nom_valide}}
-        <i
-          (click)="formService.removeTaxon(i, formService.selectedtaxonFromComponent)"
-          class="fa fa-times clickable"
-        ></i>
-      </li>
-
+        <li 
+          *ngFor="let taxon of formService.selectedtaxonFromComponent; let i = index"
+          class="d-flex justify-content-between align-items-center"
+        >
+          {{taxon.nom_valide}}
+          <i
+            (click)="formService.removeTaxon(i, formService.selectedtaxonFromComponent)"
+            class="fa fa-times clickable"
+            matTooltip="Retirer « {{taxon.nom_valide}} » des filtres de recherche"
+          ></i>
+        </li>
+      </ul>
     </div>
+
     <button
       (click)="openModal($event, advancedTaxon)"
-      class="btn btn-xs btn-outline-secondary advanced"
-    > Avancé
+      class="btn btn-xs btn-outline-secondary advanced mt-2"
+    >
+      Avancé
     </button>
 
-    <br>
-    <span
-      *ngIf="formService.selectedCdRefFromTree.length > 0 || formService.selectedTaxonFromRankInput.length > 0"
+    <div
+      *ngIf="formService.haveAdvancedFormValues()"
+      class="alert alert-warning search-alert mt-2"
     >
-      <b>
-        {{formService.selectedCdRefFromTree.length  + formService.selectedTaxonFromRankInput.length}}
-        taxons séléctionné(s)</b>
-    </span>
+      <h2 class="h6 mb-1"><small>Champs avancé(s) sélectionné(s) :</small></h2>
+      <ul class="list-unstyled search-list">
+        <li *ngIf="
+            formService.selectedCdRefFromTree.length > 0 || formService.selectedTaxonFromRankInput.length > 0
+          "
+          class="d-flex justify-content-between align-items-center"
+        >
+          {{formService.selectedCdRefFromTree.length  + formService.selectedTaxonFromRankInput.length}}
+          taxons
+          
+          <i class="fa fa-info-circle clickable"
+            [matTooltip]="'Sélection : ' + formService.getSelectedTaxonsSummary()"
+            matTooltipPosition="above"
+          ></i>
+        </li>
+        <li 
+          *ngIf="formService.selectedRedLists.length > 0"
+          class="d-flex justify-content-between align-items-center"
+        >
+          {{formService.selectedRedLists.length}} catégories de listes rouges
+          
+          <i class="fa fa-info-circle clickable"
+            [matTooltip]="'Sélection : ' + formService.selectedRedLists.join(', ')"
+            matTooltipPosition="above"
+          ></i>
+        </li>
+        <li 
+          *ngIf="formService.selectedStatus.length > 0"
+          class="d-flex justify-content-between align-items-center"
+        >
+          {{formService.selectedStatus.length}} statuts de protection
+          
+          <i class="fa fa-info-circle clickable"
+            [matTooltip]="'Sélection : ' + formService.selectedStatus.join(', ')"
+            matTooltipPosition="above"
+          ></i>
+        </li>
+        <li 
+          *ngIf="formService.selectedTaxRefAttributs.length > 0"
+          class="d-flex justify-content-between align-items-center"
+        >
+          {{formService.selectedTaxRefAttributs.length}} attributs TaxRef
 
+          <i class="fa fa-info-circle clickable"
+            [matTooltip]="'Sélection : ' + formService.selectedTaxRefAttributs.join(', ')"
+            matTooltipPosition="above"
+          ></i>
+        </li>
+      </ul>
+    </div>
   </fieldset>
 
   <fieldset>
diff --git a/frontend/src/app/GN2CommonModule/form/synthese-form/synthese-form.component.scss b/frontend/src/app/GN2CommonModule/form/synthese-form/synthese-form.component.scss
index ef37fbc50d..6f501fa2d3 100644
--- a/frontend/src/app/GN2CommonModule/form/synthese-form/synthese-form.component.scss
+++ b/frontend/src/app/GN2CommonModule/form/synthese-form/synthese-form.component.scss
@@ -54,11 +54,14 @@ legend {
   max-width: 90%;
 }
 
-.taxon-list {
+.search-list {
   margin-bottom: 0px;
   font-size: 12px;
 }
-.taxon-alert {
+.search-list li:hover {
+  background-color: rgba(#FFF, .5)
+}
+.search-alert {
   margin-top: 5px;
   padding: 2px;
   margin-bottom: 5px;
diff --git a/frontend/src/app/GN2CommonModule/form/synthese-form/synthese-form.component.ts b/frontend/src/app/GN2CommonModule/form/synthese-form/synthese-form.component.ts
index f0e602024a..33f7c22a5d 100644
--- a/frontend/src/app/GN2CommonModule/form/synthese-form/synthese-form.component.ts
+++ b/frontend/src/app/GN2CommonModule/form/synthese-form/synthese-form.component.ts
@@ -84,6 +84,9 @@ export class SyntheseSearchComponent implements OnInit {
     this.formService.selectedtaxonFromComponent = [];
     this.formService.selectedTaxonFromRankInput = [];
     this.formService.selectedCdRefFromTree = [];
+    this.formService.selectedRedLists = [];
+    this.formService.selectedStatus = [];
+    this.formService.selectedTaxRefAttributs = [];
     this.formService.searchForm.reset();
 
     // refresh taxon tree
diff --git a/frontend/src/app/GN2CommonModule/form/synthese-form/synthese-form.service.ts b/frontend/src/app/GN2CommonModule/form/synthese-form/synthese-form.service.ts
index 8e86f232f6..484adfea6f 100644
--- a/frontend/src/app/GN2CommonModule/form/synthese-form/synthese-form.service.ts
+++ b/frontend/src/app/GN2CommonModule/form/synthese-form/synthese-form.service.ts
@@ -17,8 +17,11 @@ export class SyntheseFormService {
   public selectedTaxonFromRankInput = [];
   public dynamycFormDef: Array<any>;
   public areasFilters;
-  public redListsFilters;
   public statusFilters;
+  public selectedStatus = [];
+  public redListsFilters;
+  public selectedRedLists = [];
+  public selectedTaxRefAttributs = [];
 
   constructor(
     @Inject(APP_CONFIG_TOKEN) private cfg,
@@ -101,7 +104,6 @@ export class SyntheseFormService {
     const params = Object.assign({}, this.searchForm.value);
     const updatedParams = {};
     // tslint:disable-next-line:forin
-
     for (const key in params) {
       if (key === 'cd_nom') {
         // Test if cd_nom is an integer
@@ -164,4 +166,31 @@ export class SyntheseFormService {
       return null;
     };
   }
+
+  haveAdvancedFormValues(): Boolean {
+    if (this.selectedTaxonFromRankInput.length > 0) {
+      return true;
+    } else if (this.selectedCdRefFromTree.length > 0) {
+      return true;
+    } else if (this.selectedStatus.length > 0) {
+      return true;
+    } else if (this.selectedRedLists.length > 0) {
+      return true;
+    } else if (this.selectedTaxRefAttributs.length > 0) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  getSelectedTaxonsSummary(): String {
+    let summary = [];
+    if (this.selectedTaxonFromRankInput.length > 0) {
+      summary.push('Rangs : ' + this.selectedTaxonFromRankInput.map(e => e.lb_nom).join(', ') + '.');
+    }
+    if (this.selectedCdRefFromTree.length > 0) {
+      summary.push('Arbre taxo : ' + this.selectedCdRefFromTree.length + ' taxons.');
+    }
+    return summary.join(' ');
+  }
 }
diff --git a/frontend/src/app/syntheseModule/synthese.component.ts b/frontend/src/app/syntheseModule/synthese.component.ts
index 0aa78f351e..76c6573a8e 100644
--- a/frontend/src/app/syntheseModule/synthese.component.ts
+++ b/frontend/src/app/syntheseModule/synthese.component.ts
@@ -94,6 +94,9 @@ export class SyntheseComponent implements OnInit {
       this._fs.selectedCdRefFromTree = [];
       this._fs.selectedTaxonFromRankInput = [];
       this._fs.selectedtaxonFromComponent = [];
+      this._fs.selectedRedLists = [];
+      this._fs.selectedStatus = [];
+      this._fs.selectedTaxRefAttributs = [];
       this.loadAndStoreData(initialFilter);
     })