From df951cddac17ab141e0cf1ef4854d374712e03ec Mon Sep 17 00:00:00 2001
From: Etienne Delclaux <150020787+edelclaux@users.noreply.github.com>
Date: Fri, 13 Dec 2024 14:44:40 +0100
Subject: [PATCH] Fix(taxon sheet): correct taxon media view (#3287)

* Revert "fix(frontend) taxon sheet media"

This reverts commit fab84e19811c747af9943cc5f035f0df2c1ecd33.

* feat: adjust the front structure used to display the taxon "profile" pic
---
 .../indicator/indicator.component.html        | 19 ++-------
 .../indicator/indicator.component.scss        |  7 +---
 .../indicator/indicator.component.ts          |  3 +-
 .../taxon-sheet/indicator/indicator.ts        |  4 +-
 .../taxon-sheet/infos/infos.component.ts      |  7 +---
 .../taxon-image/taxon-image.component.html    |  5 +++
 .../taxon-image/taxon-image.component.scss    |  5 +++
 .../taxon-image/taxon-image.component.ts      | 40 +++++++++++++++++++
 .../taxon-sheet/taxon-sheet.component.html    | 11 +++--
 .../taxon-sheet/taxon-sheet.component.scss    |  5 +++
 .../taxon-sheet/taxon-sheet.component.ts      | 32 +++------------
 11 files changed, 74 insertions(+), 64 deletions(-)
 create mode 100644 frontend/src/app/syntheseModule/taxon-sheet/infos/taxon-image/taxon-image.component.html
 create mode 100644 frontend/src/app/syntheseModule/taxon-sheet/infos/taxon-image/taxon-image.component.scss
 create mode 100644 frontend/src/app/syntheseModule/taxon-sheet/infos/taxon-image/taxon-image.component.ts

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 6f16267d1c..5a7f18ac24 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.component.html
+++ b/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.component.html
@@ -1,16 +1,5 @@
-<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 [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>
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 45292ed2c3..4fe375f16b 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.component.scss
+++ b/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.component.scss
@@ -5,13 +5,9 @@
   justify-content: center;
   row-gap: 0rem;
   padding: 1rem;
-  height: 9rem;
+  height: 100%;
   width: auto;
   min-width: 12rem;
-  &__media {
-    height: 100%;
-    width: 100%;
-  }
   &__icon {
     $icon-size: 2rem;
     font-size: $icon-size;
@@ -34,7 +30,6 @@
 
 .Indicator--small {
   border: none;
-  height: auto;
   .Indicator__icon {
     $icon-size: 1.5rem;
     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 8f939b580b..ee3fe6bdd5 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.component.ts
+++ b/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.component.ts
@@ -1,14 +1,13 @@
 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, CommonModule],
+  imports: [MatIconModule],
 })
 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 20cc57e073..40b1679f2a 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.ts
+++ b/frontend/src/app/syntheseModule/taxon-sheet/indicator/indicator.ts
@@ -2,10 +2,9 @@ export interface Indicator {
   name: string;
   matIcon: string;
   value: string | null;
-  type: IndicatorRawType;
 }
 
-type IndicatorRawType = 'number' | 'string' | 'date' | 'image';
+type IndicatorRawType = 'number' | 'string' | 'date';
 export interface IndicatorDescription {
   name: string;
   matIcon: string;
@@ -58,6 +57,5 @@ 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.ts b/frontend/src/app/syntheseModule/taxon-sheet/infos/infos.component.ts
index 50bc9caef0..4c95392d61 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/infos/infos.component.ts
+++ b/frontend/src/app/syntheseModule/taxon-sheet/infos/infos.component.ts
@@ -16,14 +16,9 @@ import { TaxonomyComponent } from './taxonomy/taxonomy.component';
   imports: [CommonModule, StatusComponent, TaxonomyComponent],
 })
 export class InfosComponent implements OnInit {
-  mediaUrl: string;
   taxon: Taxon | null = null;
 
-  constructor(
-    private _config: ConfigService,
-    private _ds: DataFormService,
-    private _tss: TaxonSheetService
-  ) {}
+  constructor(private _tss: TaxonSheetService) {}
 
   ngOnInit() {
     this._tss.taxon.subscribe((taxon: Taxon | null) => {
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/infos/taxon-image/taxon-image.component.html b/frontend/src/app/syntheseModule/taxon-sheet/infos/taxon-image/taxon-image.component.html
new file mode 100644
index 0000000000..9fbf918d86
--- /dev/null
+++ b/frontend/src/app/syntheseModule/taxon-sheet/infos/taxon-image/taxon-image.component.html
@@ -0,0 +1,5 @@
+<img
+  *ngIf="mediaUrl"
+  class="TaxonImage"
+  [src]="mediaUrl"
+/>
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/infos/taxon-image/taxon-image.component.scss b/frontend/src/app/syntheseModule/taxon-sheet/infos/taxon-image/taxon-image.component.scss
new file mode 100644
index 0000000000..2076c82bf5
--- /dev/null
+++ b/frontend/src/app/syntheseModule/taxon-sheet/infos/taxon-image/taxon-image.component.scss
@@ -0,0 +1,5 @@
+.TaxonImage {
+  height: 100%;
+  width: auto;
+  border-radius: 0.25rem;
+}
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/infos/taxon-image/taxon-image.component.ts b/frontend/src/app/syntheseModule/taxon-sheet/infos/taxon-image/taxon-image.component.ts
new file mode 100644
index 0000000000..237a0a4ba7
--- /dev/null
+++ b/frontend/src/app/syntheseModule/taxon-sheet/infos/taxon-image/taxon-image.component.ts
@@ -0,0 +1,40 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { ConfigService } from '@geonature/services/config.service';
+import { DataFormService } from '@geonature_common/form/data-form.service';
+import { Taxon } from '@geonature_common/form/taxonomy/taxonomy.component';
+import { TaxonSheetService } from '../../taxon-sheet.service';
+
+@Component({
+  standalone: true,
+  selector: 'taxon-image',
+  templateUrl: 'taxon-image.component.html',
+  styleUrls: ['taxon-image.component.scss'],
+  imports: [CommonModule],
+})
+export class TaxonImageComponent {
+  mediaUrl: string = '';
+
+  constructor(
+    private _ds: DataFormService,
+    private _tss: TaxonSheetService,
+    private _config: ConfigService
+  ) {}
+
+  ngOnInit() {
+    this._tss.taxon.subscribe((taxon: Taxon | null) => {
+      this.mediaUrl = '';
+      if (!taxon) {
+        return;
+      }
+      this._ds.getTaxonInfo(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 7f3446eed1..37ff51e015 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.component.html
+++ b/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.component.html
@@ -2,12 +2,11 @@
   <div class="TaxonSheet">
     <infos class="TaxonSheet__infos" />
     <div class="TaxonSheet__indicators">
-      <ng-container *ngFor="let indicator of indicators">
-        <indicator
-          *ngIf="indicator.type != 'image' || indicator.value != '-'"
-          [indicator]="indicator"
-        />
-      </ng-container>
+      <taxon-image />
+      <indicator
+        *ngFor="let indicator of indicators"
+        [indicator]="indicator"
+      />
     </div>
     <div class="card AvancedInfos">
       <nav
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.component.scss b/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.component.scss
index 79263159f4..63ac58dbe1 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.component.scss
+++ b/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.component.scss
@@ -13,6 +13,11 @@
     flex-flow: row wrap;
     justify-content: space-evenly;
     gap: 1rem;
+
+    indicator,
+    taxon-image {
+      height: 9rem;
+    }
   }
   .AvancedInfos {
     &__navBar {
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 9c689bd404..c34591dcb9 100644
--- a/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.component.ts
+++ b/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.component.ts
@@ -14,22 +14,14 @@ import {
   Indicator,
   IndicatorDescription,
 } from './indicator/indicator';
+import { TaxonImageComponent } from './infos/taxon-image/taxon-image.component';
 import { IndicatorComponent } from './indicator/indicator.component';
 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',
@@ -78,12 +70,12 @@ const INDICATORS: Array<IndicatorDescription> = [
     RouterOutlet,
     RouterLink,
     RouterLinkActive,
+    TaxonImageComponent,
   ],
   providers: [TaxonSheetService],
 })
 export class TaxonSheetComponent implements OnInit {
   readonly TAB_LINKS = [];
-  mediaUrl: string = null;
 
   indicators: Array<Indicator>;
 
@@ -92,9 +84,7 @@ export class TaxonSheetComponent implements OnInit {
     private _route: ActivatedRoute,
     private _tss: TaxonSheetService,
     private _syntheseDataService: SyntheseDataService,
-    private _routes: RouteService,
-    private _ds: DataFormService,
-    private _config: ConfigService
+    private _routes: RouteService
   ) {
     this.TAB_LINKS = this._routes.TAB_LINKS;
   }
@@ -102,19 +92,9 @@ export class TaxonSheetComponent implements OnInit {
     this._route.params.subscribe((params) => {
       const cd_ref = params['cd_ref'];
       if (cd_ref) {
-        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);
-          });
+        this._tss.updateTaxonByCdRef(cd_ref);
+        this._syntheseDataService.getSyntheseTaxonSheetStat(cd_ref).subscribe((stats) => {
+          this.setIndicators(stats);
         });
       }
     });