diff --git a/frontend/src/app/GN2CommonModule/GN2Common.module.ts b/frontend/src/app/GN2CommonModule/GN2Common.module.ts index 3eb4649c98..a3d13c0a1c 100644 --- a/frontend/src/app/GN2CommonModule/GN2Common.module.ts +++ b/frontend/src/app/GN2CommonModule/GN2Common.module.ts @@ -75,6 +75,7 @@ import { ObserversTextComponent } from '@geonature_common/form/observers-text/ob import { PeriodComponent } from '@geonature_common/form/date/period.component'; import { PlacesComponent } from './map/places/places.component'; import { PlacesListComponent } from './map/placesList/placesList.component'; +import { StatusBadgesComponent } from '@geonature_common/others/status-badges/status-badges.component'; import { SyntheseSearchComponent } from '@geonature_common/form/synthese-form/synthese-form.component'; import { TaxaComponent } from '@geonature_common/form/taxa/taxa.component'; import { TaxonAdvancedModalComponent } from '@geonature_common/form/synthese-form/advanced-form/synthese-advanced-form-component'; @@ -187,6 +188,7 @@ import { TaxonTreeComponent } from './form/taxon-tree/taxon-tree.component'; SafeHtmlPipe, SyntheseSearchComponent, SafeStripHtmlPipe, + StatusBadgesComponent, StripHtmlPipe, TaxaComponent, TaxonAdvancedModalComponent, @@ -291,6 +293,7 @@ import { TaxonTreeComponent } from './form/taxon-tree/taxon-tree.component'; ReactiveFormsModule, ReadablePropertiePipe, SafeHtmlPipe, + StatusBadgesComponent, TaxaComponent, TaxonAdvancedModalComponent, TaxonomyComponent, diff --git a/frontend/src/app/GN2CommonModule/others/badge/badge.component.ts b/frontend/src/app/GN2CommonModule/others/badge/badge.component.ts index d395ce19e1..1138911743 100644 --- a/frontend/src/app/GN2CommonModule/others/badge/badge.component.ts +++ b/frontend/src/app/GN2CommonModule/others/badge/badge.component.ts @@ -1,6 +1,4 @@ -import { CommonModule } from '@angular/common'; -import { Component, Input, OnInit } from '@angular/core'; -import { GN2CommonModule } from '@geonature_common/GN2Common.module'; +import { Component, Input } from '@angular/core'; // //////////////////////////////////////////////////////////////////////////// // helper method diff --git a/frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.html b/frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.html new file mode 100644 index 0000000000..4221d6f4a6 --- /dev/null +++ b/frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.html @@ -0,0 +1,8 @@ +
+ +
diff --git a/frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.scss b/frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.scss new file mode 100644 index 0000000000..9b42867b35 --- /dev/null +++ b/frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.scss @@ -0,0 +1,7 @@ +.StatusBadges { + display: flex; + flex-flow: row wrap; + width: 100%; + gap: 0.5rem; + line-height: inherit; +} diff --git a/frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.ts b/frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.ts new file mode 100644 index 0000000000..d9c6ec47c5 --- /dev/null +++ b/frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.ts @@ -0,0 +1,83 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { TaxonSheetService } from '@geonature/syntheseModule/taxon-sheet/taxon-sheet.service'; +import { DataFormService } from '@geonature_common/form/data-form.service'; +import { Taxon } from '@geonature_common/form/taxonomy/taxonomy.component'; +import { BadgeSymbology } from '@geonature_common/others/badge/badge.component'; + +interface Status { + badge: string; + tooltip: string; + symbology: BadgeSymbology | null; +} +@Component({ + selector: 'gn-status-badges', + templateUrl: 'status-badges.component.html', + styleUrls: ['status-badges.component.scss'], +}) +export class StatusBadgesComponent implements OnInit { + _taxon: Taxon | null; + _symbology: Array<{ + types: Array; + values: Record; + }>; + status: Array = []; + + constructor(private _ds: DataFormService) {} + + ngOnInit() { + this._ds.fetchStatusSymbology().subscribe((symbology) => { + this._symbology = []; + if (!symbology || !symbology.symbologies) { + return; + } + this._symbology = symbology.symbologies; + + this.computeStatus(); + }); + } + + _getSymbologyAsBadgeSymbology(type: string, value: string): BadgeSymbology | null { + if (!this._symbology) { + return null; + } + const symbologieItem = this._symbology.find((item) => item.types.includes(type)); + if (!symbologieItem) { + return null; + } + if (!('color' in symbologieItem.values[value])) { + return null; + } + return { + color: symbologieItem.values[value].color, + }; + } + + @Input() + set taxon(taxon: Taxon | null) { + this._taxon = taxon; + this.computeStatus(); + } + + computeStatus() { + this.status = []; + if (!this._taxon) { + return; + } + + for (const status of Object.values(this._taxon.status)) { + for (const text of Object.values(status.text)) { + for (const value of Object.values(text.values)) { + const badgeValue = ['true', 'false'].includes(value.code_statut) + ? `${status.cd_type_statut}` + : `${status.cd_type_statut}: ${value.code_statut}`; + + this.status.push({ + badge: badgeValue, + tooltip: `${status.cd_type_statut} : ${value.display} - ${text.full_citation}`, + symbology: this._getSymbologyAsBadgeSymbology(status.cd_type_statut, value.code_statut), + }); + } + } + } + } +} diff --git a/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.html b/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.html index f7a4de80b6..75d914d880 100644 --- a/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.html +++ b/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.html @@ -1,11 +1,6 @@
Statuts
- +
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.scss b/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.scss index 871f7ecef0..8d2326bd7c 100644 --- a/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.scss +++ b/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.scss @@ -7,18 +7,10 @@ flex-flow: row nowrap; justify-content: flex-start; align-items: center; - $gap: 0.5rem; - column-gap: $gap; + column-gap: 0.5rem; line-height: 1; &__header { vertical-align: middle; } - &__badges { - display: flex; - flex-flow: row wrap; - width: 100%; - gap: $gap; - line-height: inherit; - } } diff --git a/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.ts b/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.ts index f8ca16252a..0cc562647b 100644 --- a/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.ts +++ b/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.ts @@ -1,15 +1,8 @@ import { CommonModule } from '@angular/common'; -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input } from '@angular/core'; import { Taxon } from '@geonature_common/form/taxonomy/taxonomy.component'; import { GN2CommonModule } from '@geonature_common/GN2Common.module'; -import { TaxonSheetService } from '../../taxon-sheet.service'; -import { BadgeSymbology } from '@geonature_common/others/badge/badge.component'; -interface Status { - badge: string; - tooltip: string; - symbology: BadgeSymbology | null; -} @Component({ standalone: true, selector: 'status', @@ -17,71 +10,9 @@ interface Status { styleUrls: ['status.component.scss'], imports: [CommonModule, GN2CommonModule], }) -export class StatusComponent implements OnInit { - _taxon: Taxon | null; - _symbology: Array<{ - types: Array; - values: Record; - }>; - status: Array = []; - - constructor(private _tss: TaxonSheetService) {} - - ngOnInit() { - this._tss.symbology.subscribe((symbology) => { - this._symbology = []; - if (!symbology || !symbology.symbologies) { - return; - } - this._symbology = symbology.symbologies; - - this.computeStatus(); - }); - this._tss.fetchStatusSymbology(); - } - - _getSymbologyAsBadgeSymbology(type: string, value: string): BadgeSymbology | null { - if (!this._symbology) { - return null; - } - const symbologieItem = this._symbology.find((item) => item.types.includes(type)); - if (!symbologieItem) { - return null; - } - if (!('color' in symbologieItem.values[value])) { - return null; - } - return { - color: symbologieItem.values[value].color, - }; - } +export class StatusComponent { + constructor() {} @Input() - set taxon(taxon: Taxon | null) { - this._taxon = taxon; - this.computeStatus(); - } - - computeStatus() { - this.status = []; - if (!this._taxon) { - return; - } - - for (const status of Object.values(this._taxon.status)) { - for (const text of Object.values(status.text)) { - for (const value of Object.values(text.values)) { - const badgeValue = ['true', 'false'].includes(value.code_statut) - ? `${status.cd_type_statut}` - : `${status.cd_type_statut}: ${value.code_statut}`; - - this.status.push({ - badge: badgeValue, - tooltip: `${status.cd_type_statut} : ${value.display} - ${text.full_citation}`, - symbology: this._getSymbologyAsBadgeSymbology(status.cd_type_statut, value.code_statut), - }); - } - } - } - } + taxon: Taxon | null; } diff --git a/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.service.ts b/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.service.ts index e5dcc94917..097afe39dc 100644 --- a/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.service.ts +++ b/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.service.ts @@ -6,16 +6,9 @@ import { BehaviorSubject } from 'rxjs'; @Injectable() export class TaxonSheetService { taxon: BehaviorSubject = new BehaviorSubject(null); - symbology: BehaviorSubject = new BehaviorSubject(null); constructor(private _ds: DataFormService) {} - fetchStatusSymbology() { - this._ds.fetchStatusSymbology().subscribe((symbology) => { - this.symbology.next(symbology); - }); - } - updateTaxonByCdRef(cd_ref: number) { const taxon = this.taxon.getValue(); if (taxon && taxon.cd_ref == cd_ref) {