feat: Enhance Taxon Info (closes #3334)

frontend/cypress/e2e/synthese-spec.js

@@ -142,7 +142,14 @@ describe('Tests gn_synthese', () => {
     cy.get('[data-qa="synthese-obs-detail-ca"]').invoke('text').should('not.equal', '');
     // vérification de la présence de l'onglet taxonomie
     cy.get('.mat-mdc-tab').contains('Taxonomie').click({ force: true });
-    cy.get('[data-qa="synthese-obs-detail-taxo-familly"]').invoke('text').should('not.equal', '');
+    cy.get('[data-qa="taxonomy-detail-taxo-classe"]').invoke('text').should('not.equal', '');
+    cy.get('[data-qa="taxonomy-detail-taxo-ordre"]').invoke('text').should('not.equal', '');
+    cy.get('[data-qa="taxonomy-detail-taxo-famille"]').invoke('text').should('not.equal', '');
+    cy.get('[data-qa="taxonomy-detail-taxo-cd_nom"]').invoke('text').should('not.equal', '');
+    cy.get('[data-qa="taxonomy-detail-taxo-lb_nom"]').invoke('text').should('not.equal', '');
+    cy.get('[data-qa="taxonomy-detail-taxo-cd_ref"]').invoke('text').should('not.equal', '');
+    cy.get('[data-qa="taxonomy-detail-taxo-nom_cite"]').invoke('text').should('not.equal', '');
+
     // vérification de la présence de l'onglet zonage
     cy.get('.mat-mdc-tab').contains('Zonage').click({ force: true });
     cy.get('[data-qa="synthese-obs-detail-area"]');

frontend/src/app/GN2CommonModule/form/taxonomy/taxonomy.component.ts

@@ -37,6 +37,7 @@ export interface Taxon {
   phylum?: string;
   status?: any[];
   synonymes?: any[];
+  attributs?: any[];
 }
 
 /**

frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/synthese-info-obs.component.html

@@ -389,90 +389,7 @@ <h4 class="mr-auto gn-color">
       </ng-container>
 
       <ng-container *ngSwitchCase="'taxonomy'">
-        <table class="font-xs table table-striped table-sm">
-          <tr>
-            <td>
-              <b>Groupe taxonomique</b>
-            </td>
-            <td>{{ selectedObsTaxonDetail?.classe }}</td>
-          </tr>
-          <tr>
-            <td>
-              <b>Ordre</b>
-            </td>
-            <td>{{ selectedObsTaxonDetail?.ordre }}</td>
-          </tr>
-          <tr>
-            <td>
-              <b>Famille</b>
-            </td>
-            <td data-qa="synthese-obs-detail-taxo-familly">
-              {{ selectedObsTaxonDetail?.famille }}
-            </td>
-          </tr>
-        </table>
-
-        <h5 class="underlined underlined-sm main-color">Attribut(s) Taxonomique(s) locaux</h5>
-        <table class="font-xs table table-striped table-sm">
-          <tr
-            class="font-xs"
-            *ngFor="let attr of selectedObsTaxonDetail?.attributs"
-          >
-            <td>
-              <b>{{ attr?.bib_attribut?.label_attribut }}</b>
-            </td>
-            <td>{{ attr.valeur_attribut }}</td>
-          </tr>
-        </table>
-
-        <h5 class="underlined underlined-sm main-color">Statuts</h5>
-        <table
-          class="font-xs table table-sm"
-          *ngIf="selectedObsTaxonDetail?.status; else noStatus"
-        >
-          <ng-container *ngFor="let status of selectedObsTaxonDetail?.status | keyvalue">
-            <tr class="table-primary">
-              <th>{{ status.value.display }}</th>
-            </tr>
-            <tr *ngFor="let text of status.value.text | keyvalue">
-              <td>
-                <ul class="list-unstyled mt-2">
-                  <li
-                    *ngIf="text.value.full_citation"
-                    class="d-flex w-100 justify-content-between"
-                  >
-                    <span class="flex-shrink-1 w-75">
-                      <strong [innerHtml]="text.value.full_citation | safeHTML"></strong>
-                      <br />
-                      ({{ text.value.lb_adm_tr }} - {{ text.value.cd_sig }})
-                    </span>
-                    <a
-                      *ngIf="text.value.doc_url"
-                      class="btn align-self-start"
-                      href="{{ text.value.doc_url }}"
-                      mat-stroked-button
-                      color="primary"
-                      target="_blank"
-                    >
-                      Voir / Télécharger
-                      <mat-icon aria-hidden="true">launch</mat-icon>
-                    </a>
-                  </li>
-                  <li>
-                    <span *ngFor="let value of text.value.values | keyvalue">
-                      <strong *ngIf="value.value.code != 'true'">
-                        {{ value.value.code_statut }}
-                      </strong>
-                      {{ value.value.label_statut }}
-                      {{ value.value.rq_statut }}
-                    </span>
-                  </li>
-                </ul>
-              </td>
-            </tr>
-          </ng-container>
-        </table>
-        <ng-template #noStatus><p>Aucun</p></ng-template>
+        <pnx-synthese-taxonomy [taxon]="selectedObsTaxonDetail" />
       </ng-container>
 
       <ng-container *ngSwitchCase="'media'">

frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/synthese-info-obs.component.ts

@@ -12,6 +12,11 @@ import { ModuleService } from '@geonature/services/module.service';
 import { ConfigService } from '@geonature/services/config.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Location } from '@angular/common';
+import { Taxon } from '@geonature_common/form/taxonomy/taxonomy.component';
+
+export interface ObservedTaxon extends Taxon {
+  nom_cite?: string;
+}
 
 @Component({
   selector: 'pnx-synthese-info-obs',
@@ -31,7 +36,7 @@ export class SyntheseInfoObsComponent implements OnInit, OnChanges {
 
   public selectedObs: any;
   public validationHistory: Array<any> = [];
-  public selectedObsTaxonDetail: any;
+  public selectedObsTaxonDetail: ObservedTaxon;
   @ViewChild('tabGroup') tabGroup;
   public selectedGeom;
   // public chartType = 'line';
@@ -197,11 +202,11 @@ export class SyntheseInfoObsComponent implements OnInit, OnChanges {
         if (this.selectedObs['unique_id_sinp']) {
           this.loadValidationHistory(this.selectedObs['unique_id_sinp']);
         }
-        let cdNom = this.selectedObs['cd_nom'];
-        let areasStatus = this.selectedObs['areas'].map((area) => area.id_area);
+        const cdNom = this.selectedObs['cd_nom'];
+        const areasStatus = this.selectedObs['areas'].map((area) => area.id_area);
         const taxhubFields = ['attributs', 'attributs.bib_attribut.label_attribut', 'status'];
         this._gnDataService.getTaxonInfo(cdNom, taxhubFields, areasStatus).subscribe((taxInfo) => {
-          this.selectedObsTaxonDetail = taxInfo;
+          this.selectedObsTaxonDetail = { ...taxInfo, nom_cite: this.selectedObs.nom_cite };
           // filter attributs
           this.selectedObsTaxonDetail.attributs = taxInfo['attributs'].filter((v) =>
             this.config.SYNTHESE.ID_ATTRIBUT_TAXHUB.includes(v.id_attribut)
@@ -224,6 +229,7 @@ export class SyntheseInfoObsComponent implements OnInit, OnChanges {
         this.filterTabs();
         this.selectedTab = this.selectedTab ? this.selectedTab : this.defaultTab;
         this.selectTab(this.selectedTab);
+        console.log(this.selectedObs);
       });
 
     this._gnDataService.getProfileConsistancyData(this.idSynthese).subscribe((dataChecks) => {

frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.html

@@ -1,46 +1,49 @@
 <div class="Taxonomy">
   <h5 class="Taxonomy__subtitle">Classification</h5>
-  <table class="Classification font-xs table table-striped table-sm">
+  <table
+    *ngIf="taxon; else noClassification"
+    class="Classification font-xs table table-striped table-sm"
+  >
     <tbody>
-      <tr>
-        <td class="Classification__name">Groupe taxonomique</td>
-        <td class="Classification__value">{{ taxon?.classe }}</td>
-      </tr>
-      <tr>
-        <td class="Classification__name">Ordre</td>
-        <td class="Classification__value">{{ taxon?.ordre }}</td>
-      </tr>
-      <tr>
-        <td class="Classification__name">Famille</td>
+      <tr *ngFor="let information of informationsFiltered">
+        <td class="Classification__name">
+          {{ information.label }}
+        </td>
         <td
           class="Classification__value"
-          data-qa="synthese-obs-detail-taxo-familly"
+          [attr.data-qa]="'taxonomy-detail-taxo-' + information.field"
         >
-          {{ taxon?.famille }}
+          {{ taxon[information.field] }}
         </td>
       </tr>
     </tbody>
   </table>
+  <ng-template #noClassification><p>Aucune</p></ng-template>
 
-  <!-- <h5 class="underlined underlined-sm main-color">Attribut(s) Taxonomique(s) locaux</h5>
-  <table class="font-xs table table-striped table-sm">
-    <tr
-      class="font-xs"
-      *ngFor="let attr of taxon?.attributs"
+  <div *ngIf="taxon?.attributs && (taxon.status.length || !hideLocalAttributesOnEmpty)">
+    <h5 class="Taxonomy__subtitle">Attribut(s) Taxonomique(s) locaux</h5>
+    <table
+      *ngIf="taxon?.attributs && taxon.status.length; else noLocalAttributes"
+      class="font-xs table table-striped table-sm"
     >
-      <td>
-        <b>{{ attr.label_attribut }}</b>
-      </td>
-      <td>{{ attr.valeur_attribut }}</td>
-    </tr>
-  </table> -->
-
+      <tr
+        class="font-xs"
+        *ngFor="let attr of taxon?.attributs"
+      >
+        <td>
+          <b>{{ attr.label_attribut }}</b>
+        </td>
+        <td>{{ attr.valeur_attribut }}</td>
+      </tr>
+    </table>
+    <ng-template #noLocalAttributes><p>Aucun</p></ng-template>
+  </div>
   <h5 class="Taxonomy__subtitle">Statuts</h5>
   <table
     class="font-xs table table-sm"
-    *ngIf="taxon?.status; else noStatus"
+    *ngIf="taxon?.status && taxon.status.length > 0; else noStatus"
   >
-    <ng-container *ngFor="let status of taxon?.status | keyvalue">
+    <ng-container *ngFor="let status of taxon.status | keyvalue">
       <tr class="table-primary">
         <th>{{ status.value.display }}</th>
       </tr>

frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.scss

@@ -17,7 +17,7 @@
     }
     &__value {
       width: 100%;
-      padding-left: 1rem;
+      padding-left: 3rem;
     }
   }
 }

frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.ts

@@ -1,7 +1,10 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { GN2CommonModule } from '@geonature_common/GN2Common.module';
-import { CommonModule } from '@angular/common';
-import { Taxon } from '@geonature_common/form/taxonomy/taxonomy.component';
+import { ObservedTaxon } from '../synthese-info-obs.component';
+
+interface TaxonInformation {
+  label: string;
+  field: keyof ObservedTaxon;
+}
 
 @Component({
   selector: 'pnx-synthese-taxonomy',
@@ -10,6 +13,49 @@ import { Taxon } from '@geonature_common/form/taxonomy/taxonomy.component';
 })
 export class TaxonomyComponent {
   @Input()
-  taxon: Taxon | null = null;
+  taxon: ObservedTaxon | null = null;
+
+  @Input()
+  hideLocalAttributesOnEmpty: boolean = false;
+
   constructor() {}
+
+  readonly INFORMATIONS: Array<TaxonInformation> = [
+    {
+      label: 'Groupe taxonomique',
+      field: 'classe',
+    },
+    {
+      label: 'Ordre',
+      field: 'ordre',
+    },
+    {
+      label: 'Famille',
+      field: 'famille',
+    },
+    {
+      label: 'lb nom',
+      field: 'lb_nom',
+    },
+    {
+      label: 'cd nom',
+      field: 'cd_nom',
+    },
+    {
+      label: 'cd ref',
+      field: 'cd_ref',
+    },
+    {
+      label: 'Nom valide',
+      field: 'nom_valide',
+    },
+    {
+      label: 'Nom cite',
+      field: 'nom_cite',
+    },
+  ];
+
+  get informationsFiltered() {
+    return this.INFORMATIONS.filter((information) => this.taxon[information.field]);
+  }
 }

frontend/src/app/syntheseModule/taxon-sheet/tab-taxonomy/tab-taxonomy.component.html

@@ -1,3 +1,6 @@
 <div class="Taxonomy">
-  <pnx-synthese-taxonomy [taxon]="taxon" />
+  <pnx-synthese-taxonomy
+    [taxon]="taxon"
+    [hideLocalAttributesOnEmpty]="true"
+  />
 </div>