From e5a8cb1f3a4a238f601ae5bce888a3d01730672d Mon Sep 17 00:00:00 2001 From: Etienne Delclaux Date: Thu, 26 Sep 2024 12:49:02 +0200 Subject: [PATCH 1/5] feat: add taxonomy tab + status badges to species page --- backend/geonature/utils/config_schema.py | 1 + .../GN2CommonModule/form/data-form.service.ts | 4 + .../form/taxonomy/taxonomy.component.ts | 2 +- .../taxonomy/taxonomy.component.html | 86 ++++ .../taxonomy/taxonomy.component.scss | 23 + .../taxonomy/taxonomy.component.ts | 15 + .../synthese-shared.module.ts | 15 +- .../modal-info-obs.component.html | 477 ------------------ .../modal-info-obs.component.ts | 80 --- .../taxon-sheet/infos/infos.component.html | 16 +- .../taxon-sheet/infos/infos.component.scss | 16 +- .../taxon-sheet/infos/infos.component.ts | 5 +- .../infos/status/status.component.html | 13 + .../infos/status/status.component.scss | 37 ++ .../infos/status/status.component.ts | 115 +++++ .../infos/taxonomy/taxonomy.component.html | 8 + .../infos/taxonomy/taxonomy.component.scss | 12 + .../infos/taxonomy/taxonomy.component.ts | 14 + .../tab-taxonomy/tab-taxonomy.component.html | 3 + .../tab-taxonomy/tab-taxonomy.component.scss | 0 .../tab-taxonomy/tab-taxonomy.component.ts | 24 + .../taxon-sheet/taxon-sheet.route.service.ts | 7 + .../taxon-sheet/taxon-sheet.service.ts | 7 + 23 files changed, 390 insertions(+), 590 deletions(-) create mode 100644 frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.html create mode 100644 frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.scss create mode 100644 frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.ts delete mode 100644 frontend/src/app/syntheseModule/synthese-results/synthese-list/synthese-info-obs/modal-info-obs.component.html delete mode 100644 frontend/src/app/syntheseModule/synthese-results/synthese-list/synthese-info-obs/modal-info-obs.component.ts create mode 100644 frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.html create mode 100644 frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.scss create mode 100644 frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.ts create mode 100644 frontend/src/app/syntheseModule/taxon-sheet/infos/taxonomy/taxonomy.component.html create mode 100644 frontend/src/app/syntheseModule/taxon-sheet/infos/taxonomy/taxonomy.component.scss create mode 100644 frontend/src/app/syntheseModule/taxon-sheet/infos/taxonomy/taxonomy.component.ts create mode 100644 frontend/src/app/syntheseModule/taxon-sheet/tab-taxonomy/tab-taxonomy.component.html create mode 100644 frontend/src/app/syntheseModule/taxon-sheet/tab-taxonomy/tab-taxonomy.component.scss create mode 100644 frontend/src/app/syntheseModule/taxon-sheet/tab-taxonomy/tab-taxonomy.component.ts diff --git a/backend/geonature/utils/config_schema.py b/backend/geonature/utils/config_schema.py index 1e83119c8e..4d21312bba 100644 --- a/backend/geonature/utils/config_schema.py +++ b/backend/geonature/utils/config_schema.py @@ -280,6 +280,7 @@ class TaxonSheet(Schema): # -------------------------------------------------------------------- # SYNTHESE - TAXON_SHEET ENABLE_PROFILE = fields.Boolean(load_default=True) + ENABLE_TAXONOMY = fields.Boolean(load_default=True) class Synthese(Schema): diff --git a/frontend/src/app/GN2CommonModule/form/data-form.service.ts b/frontend/src/app/GN2CommonModule/form/data-form.service.ts index f144c9006b..82ba35a8bd 100644 --- a/frontend/src/app/GN2CommonModule/form/data-form.service.ts +++ b/frontend/src/app/GN2CommonModule/form/data-form.service.ts @@ -159,6 +159,10 @@ export class DataFormService { }); } + fetchStatusSymbology() { + return this._http.get(`${this.config.API_TAXHUB}/bdc_statuts/status_symbologies`); + } + getTaxaBibList() { return this._http.get(`${this.getTaxhubAPI()}/biblistes/`).pipe(map((d) => d.data)); } diff --git a/frontend/src/app/GN2CommonModule/form/taxonomy/taxonomy.component.ts b/frontend/src/app/GN2CommonModule/form/taxonomy/taxonomy.component.ts index 40281d85f6..dc3ca24f40 100644 --- a/frontend/src/app/GN2CommonModule/form/taxonomy/taxonomy.component.ts +++ b/frontend/src/app/GN2CommonModule/form/taxonomy/taxonomy.component.ts @@ -35,7 +35,7 @@ export interface Taxon { nom_vern?: string; ordre?: string; phylum?: string; - statuts_protection?: any[]; + status?: any[]; synonymes?: any[]; } diff --git a/frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.html b/frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.html new file mode 100644 index 0000000000..d3350df06b --- /dev/null +++ b/frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.html @@ -0,0 +1,86 @@ +
+
Classification
+ + + + + + + + + + + + + + + +
Groupe taxonomique{{ taxon?.classe }}
Ordre{{ taxon?.ordre }}
Famille + {{ taxon?.famille }} +
+ + + +
Statuts
+ + + + + + + + + +
{{ status.value.display }}
+
    +
  • + + +
    + ({{ text.value.lb_adm_tr }} - {{ text.value.cd_sig }}) +     + + Voir / Télécharger + + +
    • +
  • + + + {{ value.value.code_statut }} + + {{ value.value.label_statut }} + {{ value.value.rq_statut }} + +
    • +
+
+

Aucun

 +
diff --git a/frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.scss b/frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.scss new file mode 100644 index 0000000000..2ad0c2cd00 --- /dev/null +++ b/frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.scss @@ -0,0 +1,23 @@ +.Taxonomy { + display: flex; + flex-flow: column; + justify-content: flex-start; + row-gap: 0.5rem; + + &__subtitle { + text-decoration: underline; + text-decoration-color: currentColor; + text-underline-offset: 0.4rem; + text-decoration-thickness: 2px; + } + .Classification { + &__name { + font-weight: bold; + white-space: nowrap; + } + &__value { + width: 100%; + padding-left: 1rem; + } + } +} diff --git a/frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.ts b/frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.ts new file mode 100644 index 0000000000..52a5bc2c12 --- /dev/null +++ b/frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.ts @@ -0,0 +1,15 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { GN2CommonModule } from '@geonature_common/GN2Common.module'; +import { CommonModule } from '@angular/common'; +import { Taxon } from '@geonature_common/form/taxonomy/taxonomy.component'; + +@Component({ + selector: 'pnx-synthese-taxonomy', + templateUrl: 'taxonomy.component.html', + styleUrls: ['taxonomy.component.scss'], +}) +export class TaxonomyComponent { + @Input() + taxon: Taxon | null = null; + constructor() {} +} diff --git a/frontend/src/app/shared/syntheseSharedModule/synthese-shared.module.ts b/frontend/src/app/shared/syntheseSharedModule/synthese-shared.module.ts index 4065730a24..3cfbc72764 100644 --- a/frontend/src/app/shared/syntheseSharedModule/synthese-shared.module.ts +++ b/frontend/src/app/shared/syntheseSharedModule/synthese-shared.module.ts @@ -8,11 +8,22 @@ import { ClipboardModule } from '@angular/cdk/clipboard'; import { SyntheseInfoObsComponent } from './synthese-info-obs/synthese-info-obs.component'; import { DiscussionCardComponent } from '../discussionCardModule/discussion-card.component'; import { AlertInfoComponent } from '../alertInfoModule/alert-Info.component'; +import { TaxonomyComponent } from './synthese-info-obs/taxonomy/taxonomy.component'; @NgModule({ imports: [CommonModule, GN2CommonModule, NgChartsModule, RouterModule, ClipboardModule], - exports: [SyntheseInfoObsComponent, DiscussionCardComponent, AlertInfoComponent], - declarations: [SyntheseInfoObsComponent, DiscussionCardComponent, AlertInfoComponent], + exports: [ + SyntheseInfoObsComponent, + DiscussionCardComponent, + AlertInfoComponent, + TaxonomyComponent, + ], + declarations: [ + SyntheseInfoObsComponent, + DiscussionCardComponent, + AlertInfoComponent, + TaxonomyComponent, + ], providers: [], }) export class SharedSyntheseModule {} diff --git a/frontend/src/app/syntheseModule/synthese-results/synthese-list/synthese-info-obs/modal-info-obs.component.html b/frontend/src/app/syntheseModule/synthese-results/synthese-list/synthese-info-obs/modal-info-obs.component.html deleted file mode 100644 index cf63290746..0000000000 --- a/frontend/src/app/syntheseModule/synthese-results/synthese-list/synthese-info-obs/modal-info-obs.component.html +++ /dev/null @@ -1,477 +0,0 @@ -
- -
-
- {{ selectedObsTaxonDetail?.nom_vern }} - {{ selectedObsTaxonDetail?.nom_valide }} -
- - - - -
-
-
-
-
- -
- - Nom du lieu : - {{ selectedObs?.place_name }} - - - Précision du pointage : - {{ selectedObs?.precision }} - -
- Observation de : - {{ selectedObs?.observers }} - -
- - Date : - {{ selectedObs?.date_min }} -> {{ selectedObs?.date_max }} - - - Date : - {{ selectedObs?.date_min }} - -
- - Altitude - : {{ selectedObs?.altitude_min }} m - {{ selectedObs?.altitude_max }} m -
- - - Profondeur min - : {{ selectedObs?.depth_min }} m - - Profondeur max : - {{ selectedObs?.depth_max }} m -
- - UUID observation : - {{ selectedObs?.unique_id_sinp }} -
- Habitat associé - : {{ selectedObs?.habitat?.lb_hab_fr }} - - {{ selectedObs?.habitat?.lb_code }} -
- - - -
- Autres espaces concernés par l'observation -
  • {{ area.area_name }}
    • -
    -
    -
    -
    - - -
    -
    -
    -
    -
    Métadonnées
    - - - - - - - - - - - - - - - - - - -
    Jeu de données{{ selectedObs?.datasets?.dataset_name }}
    Cadre d'acquisition{{ selectedObs?.acquisition_framework.acquisition_framework_name }}
    Acteurs -
      -
    • - {{ act }} -
      • -
    -
    Module de provenance{{ selectedObs?.source.name_source }}
    - - -
    Médias
    - - - - - - - - - - - - - - - - - - -
    Titre - - {{ media.title_fr }} - -
    Description{{ media.description_fr }}
    Auteur{{ media.author }}
    - -
    -     -
    -
    -
    Détail de l'occurrence
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Statut de l'observation{{ selectedObs?.observation_status }}
    Technique d'observation{{ selectedObs?.obs_technique }}
    Etat biologique{{ selectedObs?.bio_condition }}
    Statut biologique{{ selectedObs?.bio_status }}
    Comportement{{ selectedObs?.occ_behaviour }}
    Sexe{{ selectedObs?.sex }}
    Stade de vie{{ selectedObs?.life_stage }}
    Denombrement min{{ selectedObs?.count_min }}
    Denombrement max{{ selectedObs?.count_max }}
    Type de dénombrement{{ selectedObs?.type_count }}
    Objet du dénombrement{{ selectedObs?.obj_count }}
    Naturalité{{ selectedObs?.naturalness }}
    Commentaire relevé{{ selectedObs?.comment_context }}
    Commentaire occurrence{{ selectedObs?.comment_description }}
    Determinateur{{ selectedObs?.determiner }}
    Preuve d'existence{{ selectedObs?.exist_proof }}
    Preuve numérique{{ selectedObs?.digital_proof }}
    Preuve non numérique{{ selectedObs?.non_digital_proof }}
    Echantillon de preuve{{ selectedObs?.sample_number_proof }}
    Type de regroupement{{ selectedObs?.grp_typ }}
    Méthode de regroupement{{ selectedObs?.grp_method }}
    Source de la donnée{{ selectedObs?.source_status }}
    Statut de validation{{ selectedObs?.valid_status }}
    Sensibilité{{ selectedObs?.sensitivity }}
    Niveau de diffusion{{ selectedObs?.diffusion_level }}
    Nature de l'objet géographique{{ selectedObs?.nat_obj_geo }}
    Floutage{{ selectedObs?.blurring }}
    Identifiant unique SINP{{ selectedObs?.unique_id_sinp }}
    {{ data.key }}{{ data.value }}
    -
    - -
    -
    Taxonomie
    - - - - - - - - - - - - - - -
    - Groupe taxonomique - {{ selectedObsTaxonDetail?.classe }}
    - Ordre - {{ selectedObsTaxonDetail?.ordre }}
    - Famille - {{ selectedObsTaxonDetail?.famille }}
    - -
    Attribut(s) Taxonomique(s) locaux
    - - - - - -
    - {{ attr.bib_attribut.label_attribut }} - {{ attr.valeur_attribut }}
    - -
    Réglementation
    - - - - -
    - {{ arrete.intitule }} -
    - - - -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - -
    Date de validationStatutValidateurCommentaire
    {{ row.validation_date | date: 'dd-MM-yyyy' }}{{ row.validation_label.label_default }} - - {{ row.validator_role.prenom_role }} {{ row.validator_role.nom_role }} - - Validation automatique - {{ row.validation_comment }}
    -
    -
    - - - - - - - - - - - - - - -
    Type de zonageZones
    - {{ area_type.area_type }} - - - {{ area.area_name }} - , - -
    -
    - - -
    -
    diff --git a/frontend/src/app/syntheseModule/synthese-results/synthese-list/synthese-info-obs/modal-info-obs.component.ts b/frontend/src/app/syntheseModule/synthese-results/synthese-list/synthese-info-obs/modal-info-obs.component.ts deleted file mode 100644 index faec54615d..0000000000 --- a/frontend/src/app/syntheseModule/synthese-results/synthese-list/synthese-info-obs/modal-info-obs.component.ts +++ /dev/null @@ -1,80 +0,0 @@ -import { Component, OnInit, Input } from '@angular/core'; -import { SyntheseDataService } from '@geonature_common/form/synthese-form/synthese-data.service'; -import { DataFormService } from '@geonature_common/form/data-form.service'; -import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; -import { MediaService } from '@geonature_common/service/media.service'; -import { finalize } from 'rxjs/operators'; -import { ConfigService } from '@geonature/services/config.service'; - -@Component({ - selector: 'pnx-synthese-modal-info-obs', - templateUrl: 'modal-info-obs.component.html', -}) -export class ModalInfoObsComponent implements OnInit { - @Input() syntheseObs: any; - public selectedObs; - public selectedObsTaxonDetail; - public formatedAreas = []; - public SYNTHESE_CONFIG = null; - public isLoading = false; - constructor( - private _gnDataService: DataFormService, - private _dataService: SyntheseDataService, - public activeModal: NgbActiveModal, - public mediaService: MediaService, - public config: ConfigService - ) { - this.SYNTHESE_CONFIG = this.config.SYNTHESE; - } - - ngOnInit() { - this.loadOneSyntheseReleve(this.syntheseObs); - } - - loadOneSyntheseReleve(syntheseObs) { - this.isLoading = true; - this._dataService - .getOneSyntheseObservation(syntheseObs.id) - .pipe( - finalize(() => { - this.isLoading = false; - }) - ) - .subscribe((data) => { - this.selectedObs = data; - this.selectedObs['municipalities'] = []; - this.selectedObs['other_areas'] = []; - this.selectedObs['actors'] = this.selectedObs['actors'].split('|'); - const areaDict = {}; - // for each area type we want all the areas: we build an dict of array - this.selectedObs.areas.forEach((area) => { - if (!areaDict[area.area_type.type_name]) { - areaDict[area.area_type.type_name] = [area]; - } else { - areaDict[area.area_type.type_name].push(area); - } - }); - // for angular tempate we need to convert it into a aray - for (let key in areaDict) { - this.formatedAreas.push({ area_type: key, areas: areaDict[key] }); - } - - // this.inpnMapUrl = `https://inpn.mnhn.fr/cartosvg/couchegeo/repartition/atlas/${ - // this.selectedObs['cd_nom'] - // }/fr_light_l93,fr_light_mer_l93,fr_lit_l93)`; - }); - - const taxhubFields = ['attributs', 'attributs.bib_attribut.label_attribut', 'status']; - this._gnDataService.getTaxonInfo(syntheseObs.cd_nom, taxhubFields).subscribe((taxInfo) => { - this.selectedObsTaxonDetail = taxInfo; - // filter attributs - this.selectedObsTaxonDetail.attributs = taxInfo['attributs'].filter((v) => - this.config.SYNTHESE.ID_ATTRIBUT_TAXHUB.includes(v.id_attribut) - ); - }); - } - - backToModule(url_source, id_pk_source) { - window.open(url_source + '/' + id_pk_source, '_blank'); - } -} 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 9608bc40c2..b2d722d056 100644 --- a/frontend/src/app/syntheseModule/taxon-sheet/infos/infos.component.html +++ b/frontend/src/app/syntheseModule/taxon-sheet/infos/infos.component.html @@ -1,18 +1,6 @@
    -
    -
    - {{ taxon?.nom_complet }} -
    -
    - {{ taxon?.nom_vern }} -
    -
    + +
    +
    Statuts
    +
    + + {{ status.badge }} + +
    +
    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 new file mode 100644 index 0000000000..c77e17171b --- /dev/null +++ b/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.scss @@ -0,0 +1,37 @@ +// //////////////////////////////////////////////////////////////////////////// +// +// //////////////////////////////////////////////////////////////////////////// + +.Status { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + $gap: 0.5rem; + column-gap: $gap; + line-height: 1; + + &__header { + vertical-align: middle; + } + &__badges { + display: flex; + flex-flow: row wrap; + width: 100%; + gap: $gap; + line-height: inherit; + --bgColor: #ffffff; // Default value + --textColor: #444; // Default value + .badge { + display: flex; + flex-flow: row nowrap; + white-space: nowrap; + gap: $gap / 2; + text-transform: uppercase; + font-weight: bold; + background-color: var(--bgColor); + border: 2px solid color-mix(in srgb, var(--bgColor) 80%, black); + color: var(--textColor); + } + } +} 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 new file mode 100644 index 0000000000..7638b3c0ec --- /dev/null +++ b/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.ts @@ -0,0 +1,115 @@ +import { CommonModule } from '@angular/common'; +import { Component, Input, OnInit } 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'; + +interface Status { + badge: string; + tooltip: string; + symbologyAsCSS: string; +} + +function computeContrastColor(backgroundColor: string) { + // Convertir la couleur en un format RGB + const r = parseInt(backgroundColor.slice(1, 3), 16); + const g = parseInt(backgroundColor.slice(3, 5), 16); + const b = parseInt(backgroundColor.slice(5, 7), 16); + + // Calculer la luminosité + const luminance = 0.299 * r + 0.587 * g + 0.114 * b; + + // Retourner une couleur claire ou foncée selon la luminosité + return luminance < 128 ? '#ffffff' : '#444'; +} + +function colorToCSS(color: string) { + return `--bgColor: ${color}; --textColor: ${computeContrastColor(color)};`; +} + +@Component({ + standalone: true, + selector: 'status', + templateUrl: 'status.component.html', + styleUrls: ['status.component.scss'], + imports: [CommonModule, GN2CommonModule], +}) +export class StatusComponent implements OnInit { + _taxon: Taxon | null; + _symbology: Array<{ + types: Array; + values: Record< + string, + { + symbologyAsCSSStyle: string; + } + >; + }>; + status: Array = []; + + constructor(private _tss: TaxonSheetService) {} + + ngOnInit() { + this._tss.symbology.subscribe((symbology) => { + this._symbology = []; + if (!symbology || !symbology.symbologies) { + return; + } + for (const symbologyItem of symbology.symbologies) { + const values = {}; + for (const key of Object.keys(symbologyItem.values)) { + values[key] = { + symbologyAsCSSStyle: colorToCSS(symbologyItem.values[key].color), + }; + } + this._symbology.push({ + types: symbologyItem.types, + values: values, + }); + } + this.computeStatus(); + }); + this._tss.fetchStatusSymbology(); + } + + _getSymbologyAsCSSStyle(type: string, value: string): string { + if (!this._symbology) { + return ''; + } + const symbologieItem = this._symbology.find((item) => item.types.includes(type)); + if (!symbologieItem) { + return ''; + } + + return symbologieItem.values[value]?.symbologyAsCSSStyle ?? ''; + } + + @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}`, + symbologyAsCSS: this._getSymbologyAsCSSStyle(status.cd_type_statut, value.code_statut), + }); + } + } + } + } +} diff --git a/frontend/src/app/syntheseModule/taxon-sheet/infos/taxonomy/taxonomy.component.html b/frontend/src/app/syntheseModule/taxon-sheet/infos/taxonomy/taxonomy.component.html new file mode 100644 index 0000000000..c74e9f299b --- /dev/null +++ b/frontend/src/app/syntheseModule/taxon-sheet/infos/taxonomy/taxonomy.component.html @@ -0,0 +1,8 @@ +
    +
    + {{ taxon?.nom_complet }} +
    +
    + {{ taxon?.nom_vern }} +
    +
    diff --git a/frontend/src/app/syntheseModule/taxon-sheet/infos/taxonomy/taxonomy.component.scss b/frontend/src/app/syntheseModule/taxon-sheet/infos/taxonomy/taxonomy.component.scss new file mode 100644 index 0000000000..4ac109a575 --- /dev/null +++ b/frontend/src/app/syntheseModule/taxon-sheet/infos/taxonomy/taxonomy.component.scss @@ -0,0 +1,12 @@ +.Taxonomy { + display: flex; + flex-flow: column; + &__completeName { + font-weight: lighter; + font-style: italic; + } + &__vernacularName { + font-size: 1.5rem; + font-weight: bold; + } +} diff --git a/frontend/src/app/syntheseModule/taxon-sheet/infos/taxonomy/taxonomy.component.ts b/frontend/src/app/syntheseModule/taxon-sheet/infos/taxonomy/taxonomy.component.ts new file mode 100644 index 0000000000..27e3cbb63c --- /dev/null +++ b/frontend/src/app/syntheseModule/taxon-sheet/infos/taxonomy/taxonomy.component.ts @@ -0,0 +1,14 @@ +import { CommonModule } from '@angular/common'; +import { Component, Input } from '@angular/core'; +import { Taxon } from '@geonature_common/form/taxonomy/taxonomy.component'; +@Component({ + standalone: true, + selector: 'taxonomy', + templateUrl: 'taxonomy.component.html', + styleUrls: ['taxonomy.component.scss'], + imports: [CommonModule], +}) +export class TaxonomyComponent { + @Input() + taxon: Taxon | null = null; +} diff --git a/frontend/src/app/syntheseModule/taxon-sheet/tab-taxonomy/tab-taxonomy.component.html b/frontend/src/app/syntheseModule/taxon-sheet/tab-taxonomy/tab-taxonomy.component.html new file mode 100644 index 0000000000..94da0dd149 --- /dev/null +++ b/frontend/src/app/syntheseModule/taxon-sheet/tab-taxonomy/tab-taxonomy.component.html @@ -0,0 +1,3 @@ +
    + +
    diff --git a/frontend/src/app/syntheseModule/taxon-sheet/tab-taxonomy/tab-taxonomy.component.scss b/frontend/src/app/syntheseModule/taxon-sheet/tab-taxonomy/tab-taxonomy.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/frontend/src/app/syntheseModule/taxon-sheet/tab-taxonomy/tab-taxonomy.component.ts b/frontend/src/app/syntheseModule/taxon-sheet/tab-taxonomy/tab-taxonomy.component.ts new file mode 100644 index 0000000000..e5767049de --- /dev/null +++ b/frontend/src/app/syntheseModule/taxon-sheet/tab-taxonomy/tab-taxonomy.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from '@angular/core'; +import { GN2CommonModule } from '@geonature_common/GN2Common.module'; +import { CommonModule } from '@angular/common'; +import { TaxonSheetService } from '../taxon-sheet.service'; +import { Taxon } from '@geonature_common/form/taxonomy/taxonomy.component'; +import { SharedSyntheseModule } from '@geonature/shared/syntheseSharedModule/synthese-shared.module'; + +@Component({ + standalone: true, + selector: 'tab-taxonomy', + templateUrl: 'tab-taxonomy.component.html', + styleUrls: ['tab-taxonomy.component.scss'], + imports: [GN2CommonModule, CommonModule, SharedSyntheseModule], +}) +export class TabTaxonomyComponent implements OnInit { + taxon: Taxon | null = null; + constructor(private _tss: TaxonSheetService) {} + + ngOnInit() { + this._tss.taxon.subscribe((taxon: Taxon | null) => { + this.taxon = taxon; + }); + } +} diff --git a/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.route.service.ts b/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.route.service.ts index 66b098d819..b045a9e1c2 100644 --- a/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.route.service.ts +++ b/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.route.service.ts @@ -9,6 +9,7 @@ import { ConfigService } from '@geonature/services/config.service'; import { Observable } from 'rxjs'; import { TabGeographicOverviewComponent } from './tab-geographic-overview/tab-geographic-overview.component'; import { TabProfileComponent } from './tab-profile/tab-profile.component'; +import { TabTaxonomyComponent } from './tab-taxonomy/tab-taxonomy.component'; interface Tab { label: string; @@ -24,6 +25,12 @@ export const ALL_TAXON_SHEET_ADVANCED_INFOS_ROUTES: Array = [ component: TabGeographicOverviewComponent, configEnabledField: null, // make it always available ! }, + { + label: 'Taxonomie', + path: 'taxonomy', + configEnabledField: 'ENABLE_TAXONOMY', + component: TabTaxonomyComponent, + }, { label: 'Profil', path: 'profile', 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 097afe39dc..e5dcc94917 100644 --- a/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.service.ts +++ b/frontend/src/app/syntheseModule/taxon-sheet/taxon-sheet.service.ts @@ -6,9 +6,16 @@ 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) { From 91031c22d7151c2c183101d9954b7002439c4837 Mon Sep 17 00:00:00 2001 From: Etienne Delclaux Date: Thu, 26 Sep 2024 17:50:14 +0200 Subject: [PATCH 2/5] refact: move badge to a separate component --- .../app/GN2CommonModule/GN2Common.module.ts | 3 + .../others/badge/badge.component.html | 7 ++ .../others/badge/badge.component.scss | 15 ++++ .../others/badge/badge.component.ts | 68 +++++++++++++++++++ .../infos/status/status.component.html | 14 ++-- .../infos/status/status.component.scss | 13 ---- .../infos/status/status.component.ts | 58 ++++------------ 7 files changed, 114 insertions(+), 64 deletions(-) create mode 100644 frontend/src/app/GN2CommonModule/others/badge/badge.component.html create mode 100644 frontend/src/app/GN2CommonModule/others/badge/badge.component.scss create mode 100644 frontend/src/app/GN2CommonModule/others/badge/badge.component.ts diff --git a/frontend/src/app/GN2CommonModule/GN2Common.module.ts b/frontend/src/app/GN2CommonModule/GN2Common.module.ts index 6cd8392c2d..3eb4649c98 100644 --- a/frontend/src/app/GN2CommonModule/GN2Common.module.ts +++ b/frontend/src/app/GN2CommonModule/GN2Common.module.ts @@ -40,6 +40,7 @@ import { AreasIntersectedComponent } from './form/areas-intersected/areas-inters import { AutoCompleteComponent } from '@geonature_common/form/autocomplete/autocomplete.component'; import { ConfirmationDialog } from '@geonature_common/others/modal-confirmation/confirmation.dialog'; import { DatalistComponent } from '@geonature_common/form/datalist/datalist.component'; +import { BadgeComponent } from '@geonature_common/others/badge/badge.component'; import { BreadcrumbsComponent } from '@geonature_common/others/breadcrumbs/breadcrumbs.component'; import { DatasetsComponent } from './form/datasets/datasets.component'; import { DateComponent } from './form/date/date.component'; @@ -141,6 +142,7 @@ import { TaxonTreeComponent } from './form/taxon-tree/taxon-tree.component'; AreasComponent, NomenclatureComponent, ObserversComponent, + BadgeComponent, BreadcrumbsComponent, DateComponent, TaxonomyComponent, @@ -208,6 +210,7 @@ import { TaxonTreeComponent } from './form/taxon-tree/taxon-tree.component'; AcquisitionFrameworksComponent, AreasComponent, MunicipalitiesComponent, + BadgeComponent, BreadcrumbsComponent, DynamicFormComponent, NomenclatureComponent, diff --git a/frontend/src/app/GN2CommonModule/others/badge/badge.component.html b/frontend/src/app/GN2CommonModule/others/badge/badge.component.html new file mode 100644 index 0000000000..7d5af3e2c3 --- /dev/null +++ b/frontend/src/app/GN2CommonModule/others/badge/badge.component.html @@ -0,0 +1,7 @@ + + {{ text }} + diff --git a/frontend/src/app/GN2CommonModule/others/badge/badge.component.scss b/frontend/src/app/GN2CommonModule/others/badge/badge.component.scss new file mode 100644 index 0000000000..2a48c04202 --- /dev/null +++ b/frontend/src/app/GN2CommonModule/others/badge/badge.component.scss @@ -0,0 +1,15 @@ +.badge { + --bgColor: #ffffff; // Default value + --textColor: #444; // Default value + + display: flex; + flex-flow: row nowrap; + white-space: nowrap; + gap: 0.25rem; + text-transform: uppercase; + font-weight: bold; + + background-color: var(--bgColor); + border: 2px solid color-mix(in srgb, var(--bgColor) 80%, black); + color: var(--textColor); +} diff --git a/frontend/src/app/GN2CommonModule/others/badge/badge.component.ts b/frontend/src/app/GN2CommonModule/others/badge/badge.component.ts new file mode 100644 index 0000000000..d395ce19e1 --- /dev/null +++ b/frontend/src/app/GN2CommonModule/others/badge/badge.component.ts @@ -0,0 +1,68 @@ +import { CommonModule } from '@angular/common'; +import { Component, Input, OnInit } from '@angular/core'; +import { GN2CommonModule } from '@geonature_common/GN2Common.module'; + +// //////////////////////////////////////////////////////////////////////////// +// helper method +// //////////////////////////////////////////////////////////////////////////// + +function isHexadecimalColor(color: string) { + return /^#[0-9A-F]{6}$/i.test(color); +} + +function computeContrastColor(backgroundColor: string) { + // Convertir la couleur en un format RGB + const r = parseInt(backgroundColor.slice(1, 3), 16); + const g = parseInt(backgroundColor.slice(3, 5), 16); + const b = parseInt(backgroundColor.slice(5, 7), 16); + + // Calculer la luminosité + const luminance = 0.299 * r + 0.587 * g + 0.114 * b; + + // Retourner une couleur claire ou foncée selon la luminosité + return luminance < 128 ? '#ffffff' : '#444'; +} + +function colorToCSS(color: string) { + return `--bgColor: ${color}; --textColor: ${computeContrastColor(color)};`; +} + +// //////////////////////////////////////////////////////////////////////////// +// Badge parameters +// //////////////////////////////////////////////////////////////////////////// + +export interface BadgeSymbology { + color?: string; +} + +// //////////////////////////////////////////////////////////////////////////// +// helper method +// //////////////////////////////////////////////////////////////////////////// + +@Component({ + selector: 'gn-badge', + templateUrl: 'badge.component.html', + styleUrls: ['badge.component.scss'], +}) +export class BadgeComponent { + @Input() + text: string; + + @Input() + tooltip: string; + + symbologyAsCSS: string; + + @Input() + set symbology(symbology: BadgeSymbology | null) { + this.symbologyAsCSS = ''; + if (!symbology) { + return; + } + if (!isHexadecimalColor(symbology.color)) { + console.warn(`[badge] ${symbology.color} is not a valid hexadecimal color`); + return; + } + this.symbologyAsCSS = colorToCSS(symbology.color); + } +} 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 3623d6205d..f7a4de80b6 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,13 +1,11 @@
    Statuts
    - - {{ status.badge }} - +
    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 c77e17171b..871f7ecef0 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 @@ -20,18 +20,5 @@ width: 100%; gap: $gap; line-height: inherit; - --bgColor: #ffffff; // Default value - --textColor: #444; // Default value - .badge { - display: flex; - flex-flow: row nowrap; - white-space: nowrap; - gap: $gap / 2; - text-transform: uppercase; - font-weight: bold; - background-color: var(--bgColor); - border: 2px solid color-mix(in srgb, var(--bgColor) 80%, black); - color: var(--textColor); - } } } 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 7638b3c0ec..f8ca16252a 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 @@ -3,30 +3,13 @@ import { Component, Input, OnInit } 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; - symbologyAsCSS: string; + symbology: BadgeSymbology | null; } - -function computeContrastColor(backgroundColor: string) { - // Convertir la couleur en un format RGB - const r = parseInt(backgroundColor.slice(1, 3), 16); - const g = parseInt(backgroundColor.slice(3, 5), 16); - const b = parseInt(backgroundColor.slice(5, 7), 16); - - // Calculer la luminosité - const luminance = 0.299 * r + 0.587 * g + 0.114 * b; - - // Retourner une couleur claire ou foncée selon la luminosité - return luminance < 128 ? '#ffffff' : '#444'; -} - -function colorToCSS(color: string) { - return `--bgColor: ${color}; --textColor: ${computeContrastColor(color)};`; -} - @Component({ standalone: true, selector: 'status', @@ -38,12 +21,7 @@ export class StatusComponent implements OnInit { _taxon: Taxon | null; _symbology: Array<{ types: Array; - values: Record< - string, - { - symbologyAsCSSStyle: string; - } - >; + values: Record; }>; status: Array = []; @@ -55,33 +33,27 @@ export class StatusComponent implements OnInit { if (!symbology || !symbology.symbologies) { return; } - for (const symbologyItem of symbology.symbologies) { - const values = {}; - for (const key of Object.keys(symbologyItem.values)) { - values[key] = { - symbologyAsCSSStyle: colorToCSS(symbologyItem.values[key].color), - }; - } - this._symbology.push({ - types: symbologyItem.types, - values: values, - }); - } + this._symbology = symbology.symbologies; + this.computeStatus(); }); this._tss.fetchStatusSymbology(); } - _getSymbologyAsCSSStyle(type: string, value: string): string { + _getSymbologyAsBadgeSymbology(type: string, value: string): BadgeSymbology | null { if (!this._symbology) { - return ''; + return null; } const symbologieItem = this._symbology.find((item) => item.types.includes(type)); if (!symbologieItem) { - return ''; + return null; } - - return symbologieItem.values[value]?.symbologyAsCSSStyle ?? ''; + if (!('color' in symbologieItem.values[value])) { + return null; + } + return { + color: symbologieItem.values[value].color, + }; } @Input() @@ -106,7 +78,7 @@ export class StatusComponent implements OnInit { this.status.push({ badge: badgeValue, tooltip: `${status.cd_type_statut} : ${value.display} - ${text.full_citation}`, - symbologyAsCSS: this._getSymbologyAsCSSStyle(status.cd_type_statut, value.code_statut), + symbology: this._getSymbologyAsBadgeSymbology(status.cd_type_statut, value.code_statut), }); } } From 8f5b9fe973813b55b7570b9cb48d30d15bf327d7 Mon Sep 17 00:00:00 2001 From: Etienne Delclaux Date: Fri, 27 Sep 2024 13:13:32 +0200 Subject: [PATCH 3/5] feat: add status-badges component in GN2CommonModule --- .../app/GN2CommonModule/GN2Common.module.ts | 3 + .../others/badge/badge.component.ts | 4 +- .../status-badges.component.html | 8 ++ .../status-badges.component.scss | 7 ++ .../status-badges/status-badges.component.ts | 83 +++++++++++++++++++ .../infos/status/status.component.html | 7 +- .../infos/status/status.component.scss | 10 +-- .../infos/status/status.component.ts | 77 +---------------- .../taxon-sheet/taxon-sheet.service.ts | 7 -- 9 files changed, 108 insertions(+), 98 deletions(-) create mode 100644 frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.html create mode 100644 frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.scss create mode 100644 frontend/src/app/GN2CommonModule/others/status-badges/status-badges.component.ts 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) { From 8eb0b37b95f161cc928a4d65dd32d27472f43727 Mon Sep 17 00:00:00 2001 From: Etienne Delclaux Date: Fri, 27 Sep 2024 12:51:05 +0200 Subject: [PATCH 4/5] feat: adjust species-sheet config structure --- config/default_config.toml.example | 2 ++ 1 file changed, 2 insertions(+) diff --git a/config/default_config.toml.example b/config/default_config.toml.example index 3e3418b622..012c784109 100644 --- a/config/default_config.toml.example +++ b/config/default_config.toml.example @@ -445,6 +445,8 @@ MEDIA_CLEAN_CRONTAB = "0 1 * * *" # Options dédiées à la fiche taxon # Permet d'activer ou non la section "Profile" ENABLE_PROFILE = true + # Permet d'activer ou non la section "Taxonomy" + ENABLE_TAXONOMY = true # Gestion des demandes d'inscription [ACCOUNT_MANAGEMENT] From 4f48e3904dda5590b77bd30c64e6cc01a0fcb0a1 Mon Sep 17 00:00:00 2001 From: jacquesfize Date: Wed, 30 Oct 2024 09:36:18 +0100 Subject: [PATCH 5/5] fix(frontend): fix call to an old API url --- frontend/src/app/GN2CommonModule/form/data-form.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/GN2CommonModule/form/data-form.service.ts b/frontend/src/app/GN2CommonModule/form/data-form.service.ts index 82ba35a8bd..dd05134246 100644 --- a/frontend/src/app/GN2CommonModule/form/data-form.service.ts +++ b/frontend/src/app/GN2CommonModule/form/data-form.service.ts @@ -160,7 +160,7 @@ export class DataFormService { } fetchStatusSymbology() { - return this._http.get(`${this.config.API_TAXHUB}/bdc_statuts/status_symbologies`); + return this._http.get(`${this.getTaxhubAPI()}/bdc_statuts/status_symbologies`); } getTaxaBibList() {