Fix(taxon sheet): correct taxon media view (#3287)

* Revert "fix(frontend) taxon sheet media" This reverts commit fab84e1. * feat: adjust the front structure used to display the taxon "profile" pic
PnX-SI · Dec 13, 2024 · df951cd · df951cd
1 parent 996903b
commit df951cd
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 64 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,29 +84,17 @@ 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;
   }
   ngOnInit() {
     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);
         });
       }
     });