From d0371aee636ed07351037f4bd146ea152c716b3a Mon Sep 17 00:00:00 2001
From: Etienne Delclaux <etienne_delclaux@natural-solutions.eu>
Date: Thu, 26 Sep 2024 17:50:14 +0200
Subject: [PATCH] refact: move badge to a separate component

---
 .../infos/status/badge.component.html         |  7 ++
 .../infos/status/badge.component.scss         | 15 ++++
 .../infos/status/badge.component.ts           | 70 +++++++++++++++++++
 .../infos/status/status.component.html        | 14 ++--
 .../infos/status/status.component.scss        | 13 ----
 .../infos/status/status.component.ts          | 60 +++++-----------
 6 files changed, 114 insertions(+), 65 deletions(-)
 create mode 100644 frontend/src/app/syntheseModule/taxon-sheet/infos/status/badge.component.html
 create mode 100644 frontend/src/app/syntheseModule/taxon-sheet/infos/status/badge.component.scss
 create mode 100644 frontend/src/app/syntheseModule/taxon-sheet/infos/status/badge.component.ts

diff --git a/frontend/src/app/syntheseModule/taxon-sheet/infos/status/badge.component.html b/frontend/src/app/syntheseModule/taxon-sheet/infos/status/badge.component.html
new file mode 100644
index 0000000000..7d5af3e2c3
--- /dev/null
+++ b/frontend/src/app/syntheseModule/taxon-sheet/infos/status/badge.component.html
@@ -0,0 +1,7 @@
+<span
+  class="badge badge-secondary"
+  [style]="symbologyAsCSS"
+  matTooltip="{{ tooltip }}"
+>
+  {{ text }}
+</span>
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/infos/status/badge.component.scss b/frontend/src/app/syntheseModule/taxon-sheet/infos/status/badge.component.scss
new file mode 100644
index 0000000000..2a48c04202
--- /dev/null
+++ b/frontend/src/app/syntheseModule/taxon-sheet/infos/status/badge.component.scss
@@ -0,0 +1,15 @@
+.badge {
+  --bgColor: #ffffff; // Default value
+  --textColor: #444; // Default value
+
+  display: flex;
+  flex-flow: row nowrap;
+  white-space: nowrap;
+  gap: 0.25rem;
+  text-transform: uppercase;
+  font-weight: bold;
+
+  background-color: var(--bgColor);
+  border: 2px solid color-mix(in srgb, var(--bgColor) 80%, black);
+  color: var(--textColor);
+}
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/infos/status/badge.component.ts b/frontend/src/app/syntheseModule/taxon-sheet/infos/status/badge.component.ts
new file mode 100644
index 0000000000..b8d333996a
--- /dev/null
+++ b/frontend/src/app/syntheseModule/taxon-sheet/infos/status/badge.component.ts
@@ -0,0 +1,70 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { GN2CommonModule } from '@geonature_common/GN2Common.module';
+
+// ////////////////////////////////////////////////////////////////////////////
+// helper method
+// ////////////////////////////////////////////////////////////////////////////
+
+function isHexadecimalColor(color: string) {
+  return /^#[0-9A-F]{6}$/i.test(color);
+}
+
+function computeContrastColor(backgroundColor: string) {
+  // Convertir la couleur en un format RGB
+  const r = parseInt(backgroundColor.slice(1, 3), 16);
+  const g = parseInt(backgroundColor.slice(3, 5), 16);
+  const b = parseInt(backgroundColor.slice(5, 7), 16);
+
+  // Calculer la luminosité
+  const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
+
+  // Retourner une couleur claire ou foncée selon la luminosité
+  return luminance < 128 ? '#ffffff' : '#444';
+}
+
+function colorToCSS(color: string) {
+  return `--bgColor: ${color}; --textColor: ${computeContrastColor(color)};`;
+}
+
+// ////////////////////////////////////////////////////////////////////////////
+// Badge parameters
+// ////////////////////////////////////////////////////////////////////////////
+
+export interface BadgeSymbology {
+  color?: string;
+}
+
+// ////////////////////////////////////////////////////////////////////////////
+// helper method
+// ////////////////////////////////////////////////////////////////////////////
+
+@Component({
+  standalone: true,
+  selector: 'badge',
+  templateUrl: 'badge.component.html',
+  styleUrls: ['badge.component.scss'],
+  imports: [CommonModule, GN2CommonModule],
+})
+export class BadgeComponent {
+  @Input()
+  text: string;
+
+  @Input()
+  tooltip: string;
+
+  symbologyAsCSS: string;
+
+  @Input()
+  set symbology(symbology: BadgeSymbology | null) {
+    this.symbologyAsCSS = '';
+    if (!symbology) {
+      return;
+    }
+    if (!isHexadecimalColor(symbology.color)) {
+      console.warn(`[badge] ${symbology.color} is not a valid hexadecimal color`);
+      return;
+    }
+    this.symbologyAsCSS = colorToCSS(symbology.color);
+  }
+}
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 3623d6205d..a4a41ca398 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,13 +1,11 @@
 <div class="Status">
   <div class="Status__header">Statuts</div>
   <div class="Status__badges">
-    <span
-      class="badge badge-secondary"
-      *ngFor="let status of status; let isLast = last"
-      [style]="status.symbologyAsCSS"
-      matTooltip="{{ status.tooltip }}"
-    >
-      {{ status.badge }}
-    </span>
+    <badge
+      *ngFor="let status of status"
+      [tooltip]="status.tooltip"
+      [text]="status.badge"
+      [symbology]="status.symbology"
+    />
   </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 c77e17171b..871f7ecef0 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
@@ -20,18 +20,5 @@
     width: 100%;
     gap: $gap;
     line-height: inherit;
-    --bgColor: #ffffff; // Default value
-    --textColor: #444; // Default value
-    .badge {
-      display: flex;
-      flex-flow: row nowrap;
-      white-space: nowrap;
-      gap: $gap / 2;
-      text-transform: uppercase;
-      font-weight: bold;
-      background-color: var(--bgColor);
-      border: 2px solid color-mix(in srgb, var(--bgColor) 80%, black);
-      color: var(--textColor);
-    }
   }
 }
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 7638b3c0ec..4a708db488 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
@@ -3,47 +3,25 @@ import { Component, Input, OnInit } 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 { BadgeComponent, BadgeSymbology } from './badge.component';
 
 interface Status {
   badge: string;
   tooltip: string;
-  symbologyAsCSS: string;
+  symbology: BadgeSymbology | null;
 }
-
-function computeContrastColor(backgroundColor: string) {
-  // Convertir la couleur en un format RGB
-  const r = parseInt(backgroundColor.slice(1, 3), 16);
-  const g = parseInt(backgroundColor.slice(3, 5), 16);
-  const b = parseInt(backgroundColor.slice(5, 7), 16);
-
-  // Calculer la luminosité
-  const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
-
-  // Retourner une couleur claire ou foncée selon la luminosité
-  return luminance < 128 ? '#ffffff' : '#444';
-}
-
-function colorToCSS(color: string) {
-  return `--bgColor: ${color}; --textColor: ${computeContrastColor(color)};`;
-}
-
 @Component({
   standalone: true,
   selector: 'status',
   templateUrl: 'status.component.html',
   styleUrls: ['status.component.scss'],
-  imports: [CommonModule, GN2CommonModule],
+  imports: [CommonModule, GN2CommonModule, BadgeComponent],
 })
 export class StatusComponent implements OnInit {
   _taxon: Taxon | null;
   _symbology: Array<{
     types: Array<string>;
-    values: Record<
-      string,
-      {
-        symbologyAsCSSStyle: string;
-      }
-    >;
+    values: Record<string, BadgeSymbology>;
   }>;
   status: Array<Status> = [];
 
@@ -55,33 +33,27 @@ export class StatusComponent implements OnInit {
       if (!symbology || !symbology.symbologies) {
         return;
       }
-      for (const symbologyItem of symbology.symbologies) {
-        const values = {};
-        for (const key of Object.keys(symbologyItem.values)) {
-          values[key] = {
-            symbologyAsCSSStyle: colorToCSS(symbologyItem.values[key].color),
-          };
-        }
-        this._symbology.push({
-          types: symbologyItem.types,
-          values: values,
-        });
-      }
+      this._symbology = symbology.symbologies;
+
       this.computeStatus();
     });
     this._tss.fetchStatusSymbology();
   }
 
-  _getSymbologyAsCSSStyle(type: string, value: string): string {
+  _getSymbologyAsBadgeSymbology(type: string, value: string): BadgeSymbology | null {
     if (!this._symbology) {
-      return '';
+      return null;
     }
     const symbologieItem = this._symbology.find((item) => item.types.includes(type));
     if (!symbologieItem) {
-      return '';
+      return null;
     }
-
-    return symbologieItem.values[value]?.symbologyAsCSSStyle ?? '';
+    if (!('color' in symbologieItem.values[value])) {
+      return null;
+    }
+    return {
+      color: symbologieItem.values[value].color,
+    };
   }
 
   @Input()
@@ -106,7 +78,7 @@ export class StatusComponent implements OnInit {
           this.status.push({
             badge: badgeValue,
             tooltip: `${status.cd_type_statut} : ${value.display} - ${text.full_citation}`,
-            symbologyAsCSS: this._getSymbologyAsCSSStyle(status.cd_type_statut, value.code_statut),
+            symbology: this._getSymbologyAsBadgeSymbology(status.cd_type_statut, value.code_statut),
           });
         }
       }