From fab84e19811c747af9943cc5f035f0df2c1ecd33 Mon Sep 17 00:00:00 2001
From: Pierre-Narcisi <pierre.narcisi@epitech.eu>
Date: Tue, 10 Dec 2024 17:02:29 +0100
Subject: [PATCH] fix(frontend) taxon sheet media

---
 .../indicator/indicator.component.html        | 19 +++++++++---
 .../indicator/indicator.component.scss        |  4 +++
 .../indicator/indicator.component.ts          |  3 +-
 .../taxon-sheet/indicator/indicator.ts        |  4 ++-
 .../taxon-sheet/infos/infos.component.html    |  9 ------
 .../taxon-sheet/infos/infos.component.ts      | 15 ----------
 .../taxon-sheet/taxon-sheet.component.html    | 10 ++++---
 .../taxon-sheet/taxon-sheet.component.ts      | 30 ++++++++++++++++---
 8 files changed, 56 insertions(+), 38 deletions(-)

diff --git a/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.component.html b/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.component.html
index 5a7f18ac24..6f16267d1c 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.component.html
+++ b/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.component.html
@@ -1,5 +1,16 @@
-<div [className]="small ? 'card Indicator Indicator--small' : 'card Indicator'">
-  <mat-icon class="Indicator__icon">{{ indicator.matIcon }}</mat-icon>
-  <span class="Indicator__value">{{ indicator.value }}</span>
-  <span class="Indicator__name text-secondary">{{ indicator.name }}</span>
+<div
+  [className]="small ? 'card Indicator Indicator--small' : 'card Indicator'"
+  [style]="indicator.type == 'image' ? 'padding: 0' : 'padding: 1rem'"
+>
+  <ng-container *ngIf="indicator.type != 'image'; else media">
+    <mat-icon class="Indicator__icon">{{ indicator.matIcon }}</mat-icon>
+    <span class="Indicator__value">{{ indicator.value }}</span>
+    <span class="Indicator__name text-secondary">{{ indicator.name }}</span>
+  </ng-container>
+  <ng-template #media>
+    <div
+      class="Indicator__media cover image"
+      [style.background-image]="'url(' + indicator.value + ')'"
+    ></div>
+  </ng-template>
 </div>
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.component.scss b/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.component.scss
index 2d21502485..45292ed2c3 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.component.scss
+++ b/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.component.scss
@@ -8,6 +8,10 @@
   height: 9rem;
   width: auto;
   min-width: 12rem;
+  &__media {
+    height: 100%;
+    width: 100%;
+  }
   &__icon {
     $icon-size: 2rem;
     font-size: $icon-size;
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.component.ts b/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.component.ts
index ee3fe6bdd5..8f939b580b 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.component.ts
+++ b/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.component.ts
@@ -1,13 +1,14 @@
 import { Component, Input } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { Indicator } from './indicator';
+import { CommonModule } from '@angular/common';
 
 @Component({
   standalone: true,
   selector: 'indicator',
   templateUrl: 'indicator.component.html',
   styleUrls: ['indicator.component.scss'],
-  imports: [MatIconModule],
+  imports: [MatIconModule, CommonModule],
 })
 export class IndicatorComponent {
   @Input()
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.ts b/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.ts
index 40b1679f2a..20cc57e073 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.ts
+++ b/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.ts
@@ -2,9 +2,10 @@ export interface Indicator {
   name: string;
   matIcon: string;
   value: string | null;
+  type: IndicatorRawType;
 }
 
-type IndicatorRawType = 'number' | 'string' | 'date';
+type IndicatorRawType = 'number' | 'string' | 'date' | 'image';
 export interface IndicatorDescription {
   name: string;
   matIcon: string;
@@ -57,5 +58,6 @@ export function computeIndicatorFromDescription(
     name: indicatorDescription.name,
     matIcon: indicatorDescription.matIcon,
     value: value,
+    type: indicatorDescription.type,
   };
 }
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/infos/infos.component.html b/frontend/src/app/syntheseModule/taxon-sheet/infos/infos.component.html
index b2d722d056..481e33d7c0 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/infos/infos.component.html
+++ b/frontend/src/app/syntheseModule/taxon-sheet/infos/infos.component.html
@@ -2,12 +2,3 @@
   <taxonomy [taxon]="taxon"></taxonomy>
   <status [taxon]="taxon"></status>
 </div>
-<div
-  class="card"
-  *ngIf="mediaUrl"
->
-  <div
-    class="card-body cover image"
-    [style.background-image]="'url(' + mediaUrl + ')'"
-  ></div>
-</div>
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/infos/infos.component.ts b/frontend/src/app/syntheseModule/taxon-sheet/infos/infos.component.ts
index dd2b47f9dc..50bc9caef0 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/infos/infos.component.ts
+++ b/frontend/src/app/syntheseModule/taxon-sheet/infos/infos.component.ts
@@ -28,21 +28,6 @@ export class InfosComponent implements OnInit {
   ngOnInit() {
     this._tss.taxon.subscribe((taxon: Taxon | null) => {
       this.taxon = taxon;
-      if (!this.taxon) {
-        return;
-      }
-      this._ds
-        .getTaxonInfo(this.taxon.cd_ref, ['medias', 'cd_nom'])
-        .subscribe((taxonAttrAndMedias) => {
-          const media = taxonAttrAndMedias['medias'].find(
-            (m) => m.id_type == this._config.TAXHUB.ID_TYPE_MAIN_PHOTO
-          );
-          if (media) {
-            this.mediaUrl = `${this._ds.getTaxhubAPI()}/tmedias/thumbnail/${
-              media.id_media
-            }?h=300&w300`;
-          }
-        });
     });
   }
 }
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.component.html b/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.component.html
index bb9a8c3df0..7f3446eed1 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.component.html
+++ b/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.component.html
@@ -2,10 +2,12 @@
   <div class="TaxonSheet">
     <infos class="TaxonSheet__infos" />
     <div class="TaxonSheet__indicators">
-      <indicator
-        *ngFor="let indicator of indicators"
-        [indicator]="indicator"
-      />
+      <ng-container *ngFor="let indicator of indicators">
+        <indicator
+          *ngIf="indicator.type != 'image' || indicator.value != '-'"
+          [indicator]="indicator"
+        />
+      </ng-container>
     </div>
     <div class="card AvancedInfos">
       <nav
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.component.ts b/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.component.ts
index 6710ecd0b4..9c689bd404 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.component.ts
+++ b/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.component.ts
@@ -19,8 +19,17 @@ import { CommonModule } from '@angular/common';
 import { SyntheseDataService } from '@geonature_common/form/synthese-form/synthese-data.service';
 import { TaxonSheetService } from './taxon-sheet.service';
 import { RouteService } from './taxon-sheet.route.service';
+import { Taxon } from '@geonature_common/form/taxonomy/taxonomy.component';
+import { DataFormService } from '@geonature_common/form/data-form.service';
+import { ConfigService } from '@geonature/services/config.service';
 
 const INDICATORS: Array<IndicatorDescription> = [
+  {
+    name: 'Image',
+    matIcon: '',
+    type: 'image',
+    field: 'media',
+  },
   {
     name: 'observation(s)',
     matIcon: 'search',
@@ -74,6 +83,7 @@ const INDICATORS: Array<IndicatorDescription> = [
 })
 export class TaxonSheetComponent implements OnInit {
   readonly TAB_LINKS = [];
+  mediaUrl: string = null;
 
   indicators: Array<Indicator>;
 
@@ -82,7 +92,9 @@ export class TaxonSheetComponent implements OnInit {
     private _route: ActivatedRoute,
     private _tss: TaxonSheetService,
     private _syntheseDataService: SyntheseDataService,
-    private _routes: RouteService
+    private _routes: RouteService,
+    private _ds: DataFormService,
+    private _config: ConfigService
   ) {
     this.TAB_LINKS = this._routes.TAB_LINKS;
   }
@@ -90,9 +102,19 @@ export class TaxonSheetComponent implements OnInit {
     this._route.params.subscribe((params) => {
       const cd_ref = params['cd_ref'];
       if (cd_ref) {
-        this._tss.updateTaxonByCdRef(cd_ref);
-        this._syntheseDataService.getSyntheseTaxonSheetStat(cd_ref).subscribe((stats) => {
-          this.setIndicators(stats);
+        this._ds.getTaxonInfo(cd_ref, ['medias', 'cd_nom']).subscribe((taxonAttrAndMedias) => {
+          const media = taxonAttrAndMedias['medias'].find(
+            (m) => m.id_type == this._config.TAXHUB.ID_TYPE_MAIN_PHOTO
+          );
+          let mediaUrl;
+          if (media) {
+            mediaUrl = `${this._ds.getTaxhubAPI()}/tmedias/thumbnail/${media.id_media}?h=300&w300`;
+          }
+          this._tss.updateTaxonByCdRef(cd_ref);
+          this._syntheseDataService.getSyntheseTaxonSheetStat(cd_ref).subscribe((stats) => {
+            stats['media'] = mediaUrl;
+            this.setIndicators(stats);
+          });
         });
       }
     });