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], })