feat: adjust the front structure used to display the taxon "profile" pic

naturalsolutions · Dec 11, 2024 · 589ba61 · 589ba61
1 parent 89cd00a
commit 589ba61
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 32 deletions.
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,7 +5,7 @@
   justify-content: center;
   row-gap: 0rem;
   padding: 1rem;
-  height: 9rem;
+  height: 100%;
   width: auto;
   min-width: 12rem;
   &__icon {
@@ -30,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/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
@@ -16,33 +16,13 @@ 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) => {
       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/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,6 +2,7 @@
   <div class="TaxonSheet">
     <infos class="TaxonSheet__infos" />
     <div class="TaxonSheet__indicators">
+      <taxon-image />
       <indicator
         *ngFor="let indicator of indicators"
         [indicator]="indicator"

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,6 +14,7 @@ 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';
@@ -69,6 +70,7 @@ const INDICATORS: Array<IndicatorDescription> = [
     RouterOutlet,
     RouterLink,
     RouterLinkActive,
+    TaxonImageComponent,
   ],
   providers: [TaxonSheetService],
 })