From 06b8a26f1eeea67e6f259e80eb261d1046b5325f Mon Sep 17 00:00:00 2001
From: Etienne Delclaux <etienne_delclaux@natural-solutions.eu>
Date: Fri, 27 Sep 2024 13:13:32 +0200
Subject: [PATCH] feat: add status-badges component in GN2CommonModule

---
 .../app/GN2CommonModule/GN2Common.module.ts   |  3 +
 .../others/badge/badge.component.ts           |  4 +-
 .../status-badges.component.html              |  8 ++
 .../status-badges.component.scss              |  7 ++
 .../status-badges/status-badges.component.ts  | 83 +++++++++++++++++++
 .../infos/status/status.component.html        |  7 +-
 .../infos/status/status.component.scss        | 10 +--
 .../infos/status/status.component.ts          | 77 +----------------
 .../taxon-sheet/taxon-sheet.service.ts        |  7 --
 9 files changed, 108 insertions(+), 98 deletions(-)
 create mode 100644 frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.html
 create mode 100644 frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.scss
 create mode 100644 frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.ts

diff --git a/frontend/src/app/GN2CommonModule/GN2Common.module.ts b/frontend/src/app/GN2CommonModule/GN2Common.module.ts
index 3eb4649c98..a3d13c0a1c 100644
--- a/frontend/src/app/GN2CommonModule/GN2Common.module.ts
+++ b/frontend/src/app/GN2CommonModule/GN2Common.module.ts
@@ -75,6 +75,7 @@ import { ObserversTextComponent } from '@geonature_common/form/observers-text/ob
 import { PeriodComponent } from '@geonature_common/form/date/period.component';
 import { PlacesComponent } from './map/places/places.component';
 import { PlacesListComponent } from './map/placesList/placesList.component';
+import { StatusBadgesComponent } from '@geonature_common/others/status-badges/status-badges.component';
 import { SyntheseSearchComponent } from '@geonature_common/form/synthese-form/synthese-form.component';
 import { TaxaComponent } from '@geonature_common/form/taxa/taxa.component';
 import { TaxonAdvancedModalComponent } from '@geonature_common/form/synthese-form/advanced-form/synthese-advanced-form-component';
@@ -187,6 +188,7 @@ import { TaxonTreeComponent } from './form/taxon-tree/taxon-tree.component';
     SafeHtmlPipe,
     SyntheseSearchComponent,
     SafeStripHtmlPipe,
+    StatusBadgesComponent,
     StripHtmlPipe,
     TaxaComponent,
     TaxonAdvancedModalComponent,
@@ -291,6 +293,7 @@ import { TaxonTreeComponent } from './form/taxon-tree/taxon-tree.component';
     ReactiveFormsModule,
     ReadablePropertiePipe,
     SafeHtmlPipe,
+    StatusBadgesComponent,
     TaxaComponent,
     TaxonAdvancedModalComponent,
     TaxonomyComponent,
diff --git a/frontend/src/app/GN2CommonModule/others/badge/badge.component.ts b/frontend/src/app/GN2CommonModule/others/badge/badge.component.ts
index d395ce19e1..1138911743 100644
--- a/frontend/src/app/GN2CommonModule/others/badge/badge.component.ts
+++ b/frontend/src/app/GN2CommonModule/others/badge/badge.component.ts
@@ -1,6 +1,4 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
-import { GN2CommonModule } from '@geonature_common/GN2Common.module';
+import { Component, Input } from '@angular/core';
 
 // ////////////////////////////////////////////////////////////////////////////
 // helper method
diff --git a/frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.html b/frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.html
new file mode 100644
index 0000000000..4221d6f4a6
--- /dev/null
+++ b/frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.html
@@ -0,0 +1,8 @@
+<div class="StatusBadges">
+  <gn-badge
+    *ngFor="let status of status"
+    [tooltip]="status.tooltip"
+    [text]="status.badge"
+    [symbology]="status.symbology"
+  />
+</div>
diff --git a/frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.scss b/frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.scss
new file mode 100644
index 0000000000..9b42867b35
--- /dev/null
+++ b/frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.scss
@@ -0,0 +1,7 @@
+.StatusBadges {
+  display: flex;
+  flex-flow: row wrap;
+  width: 100%;
+  gap: 0.5rem;
+  line-height: inherit;
+}
diff --git a/frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.ts b/frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.ts
new file mode 100644
index 0000000000..d9c6ec47c5
--- /dev/null
+++ b/frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.ts
@@ -0,0 +1,83 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { TaxonSheetService } from '@geonature/syntheseModule/taxon-sheet/taxon-sheet.service';
+import { DataFormService } from '@geonature_common/form/data-form.service';
+import { Taxon } from '@geonature_common/form/taxonomy/taxonomy.component';
+import { BadgeSymbology } from '@geonature_common/others/badge/badge.component';
+
+interface Status {
+  badge: string;
+  tooltip: string;
+  symbology: BadgeSymbology | null;
+}
+@Component({
+  selector: 'gn-status-badges',
+  templateUrl: 'status-badges.component.html',
+  styleUrls: ['status-badges.component.scss'],
+})
+export class StatusBadgesComponent implements OnInit {
+  _taxon: Taxon | null;
+  _symbology: Array<{
+    types: Array<string>;
+    values: Record<string, BadgeSymbology>;
+  }>;
+  status: Array<Status> = [];
+
+  constructor(private _ds: DataFormService) {}
+
+  ngOnInit() {
+    this._ds.fetchStatusSymbology().subscribe((symbology) => {
+      this._symbology = [];
+      if (!symbology || !symbology.symbologies) {
+        return;
+      }
+      this._symbology = symbology.symbologies;
+
+      this.computeStatus();
+    });
+  }
+
+  _getSymbologyAsBadgeSymbology(type: string, value: string): BadgeSymbology | null {
+    if (!this._symbology) {
+      return null;
+    }
+    const symbologieItem = this._symbology.find((item) => item.types.includes(type));
+    if (!symbologieItem) {
+      return null;
+    }
+    if (!('color' in symbologieItem.values[value])) {
+      return null;
+    }
+    return {
+      color: symbologieItem.values[value].color,
+    };
+  }
+
+  @Input()
+  set taxon(taxon: Taxon | null) {
+    this._taxon = taxon;
+    this.computeStatus();
+  }
+
+  computeStatus() {
+    this.status = [];
+    if (!this._taxon) {
+      return;
+    }
+
+    for (const status of Object.values(this._taxon.status)) {
+      for (const text of Object.values<any>(status.text)) {
+        for (const value of Object.values<any>(text.values)) {
+          const badgeValue = ['true', 'false'].includes(value.code_statut)
+            ? `${status.cd_type_statut}`
+            : `${status.cd_type_statut}: ${value.code_statut}`;
+
+          this.status.push({
+            badge: badgeValue,
+            tooltip: `${status.cd_type_statut} : ${value.display} - ${text.full_citation}`,
+            symbology: this._getSymbologyAsBadgeSymbology(status.cd_type_statut, value.code_statut),
+          });
+        }
+      }
+    }
+  }
+}
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.html b/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.html
index f7a4de80b6..75d914d880 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.html
+++ b/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.html
@@ -1,11 +1,6 @@
 <div class="Status">
   <div class="Status__header">Statuts</div>
   <div class="Status__badges">
-    <gn-badge
-      *ngFor="let status of status"
-      [tooltip]="status.tooltip"
-      [text]="status.badge"
-      [symbology]="status.symbology"
-    />
+    <gn-status-badges [taxon]="taxon" />
   </div>
 </div>
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.scss b/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.scss
index 871f7ecef0..8d2326bd7c 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.scss
+++ b/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.scss
@@ -7,18 +7,10 @@
   flex-flow: row nowrap;
   justify-content: flex-start;
   align-items: center;
-  $gap: 0.5rem;
-  column-gap: $gap;
+  column-gap: 0.5rem;
   line-height: 1;
 
   &__header {
     vertical-align: middle;
   }
-  &__badges {
-    display: flex;
-    flex-flow: row wrap;
-    width: 100%;
-    gap: $gap;
-    line-height: inherit;
-  }
 }
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.ts b/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.ts
index f8ca16252a..0cc562647b 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.ts
+++ b/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.ts
@@ -1,15 +1,8 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { Taxon } from '@geonature_common/form/taxonomy/taxonomy.component';
 import { GN2CommonModule } from '@geonature_common/GN2Common.module';
-import { TaxonSheetService } from '../../taxon-sheet.service';
-import { BadgeSymbology } from '@geonature_common/others/badge/badge.component';
 
-interface Status {
-  badge: string;
-  tooltip: string;
-  symbology: BadgeSymbology | null;
-}
 @Component({
   standalone: true,
   selector: 'status',
@@ -17,71 +10,9 @@ interface Status {
   styleUrls: ['status.component.scss'],
   imports: [CommonModule, GN2CommonModule],
 })
-export class StatusComponent implements OnInit {
-  _taxon: Taxon | null;
-  _symbology: Array<{
-    types: Array<string>;
-    values: Record<string, BadgeSymbology>;
-  }>;
-  status: Array<Status> = [];
-
-  constructor(private _tss: TaxonSheetService) {}
-
-  ngOnInit() {
-    this._tss.symbology.subscribe((symbology) => {
-      this._symbology = [];
-      if (!symbology || !symbology.symbologies) {
-        return;
-      }
-      this._symbology = symbology.symbologies;
-
-      this.computeStatus();
-    });
-    this._tss.fetchStatusSymbology();
-  }
-
-  _getSymbologyAsBadgeSymbology(type: string, value: string): BadgeSymbology | null {
-    if (!this._symbology) {
-      return null;
-    }
-    const symbologieItem = this._symbology.find((item) => item.types.includes(type));
-    if (!symbologieItem) {
-      return null;
-    }
-    if (!('color' in symbologieItem.values[value])) {
-      return null;
-    }
-    return {
-      color: symbologieItem.values[value].color,
-    };
-  }
+export class StatusComponent {
+  constructor() {}
 
   @Input()
-  set taxon(taxon: Taxon | null) {
-    this._taxon = taxon;
-    this.computeStatus();
-  }
-
-  computeStatus() {
-    this.status = [];
-    if (!this._taxon) {
-      return;
-    }
-
-    for (const status of Object.values(this._taxon.status)) {
-      for (const text of Object.values<any>(status.text)) {
-        for (const value of Object.values<any>(text.values)) {
-          const badgeValue = ['true', 'false'].includes(value.code_statut)
-            ? `${status.cd_type_statut}`
-            : `${status.cd_type_statut}: ${value.code_statut}`;
-
-          this.status.push({
-            badge: badgeValue,
-            tooltip: `${status.cd_type_statut} : ${value.display} - ${text.full_citation}`,
-            symbology: this._getSymbologyAsBadgeSymbology(status.cd_type_statut, value.code_statut),
-          });
-        }
-      }
-    }
-  }
+  taxon: Taxon | null;
 }
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.service.ts b/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.service.ts
index e5dcc94917..097afe39dc 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.service.ts
+++ b/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.service.ts
@@ -6,16 +6,9 @@ import { BehaviorSubject } from 'rxjs';
 @Injectable()
 export class TaxonSheetService {
   taxon: BehaviorSubject<Taxon | null> = new BehaviorSubject<Taxon | null>(null);
-  symbology: BehaviorSubject<any> = new BehaviorSubject<any>(null);
 
   constructor(private _ds: DataFormService) {}
 
-  fetchStatusSymbology() {
-    this._ds.fetchStatusSymbology().subscribe((symbology) => {
-      this.symbology.next(symbology);
-    });
-  }
-
   updateTaxonByCdRef(cd_ref: number) {
     const taxon = this.taxon.getValue();
     if (taxon && taxon.cd_ref == cd_ref) {