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..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,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
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 @@
-
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..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,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
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 @@
+
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 bb9a8c3df0..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,6 +2,7 @@
+
= [
RouterOutlet,
RouterLink,
RouterLinkActive,
+ TaxonImageComponent,
],
providers: [TaxonSheetService],
})