Skip to content

Commit

Permalink
feat: add status-badges component in GN2CommonModule
Browse files Browse the repository at this point in the history
  • Loading branch information
edelclaux committed Oct 8, 2024
1 parent 608b7fc commit 06b8a26
Show file tree
Hide file tree
Showing 9 changed files with 108 additions and 98 deletions.
3 changes: 3 additions & 0 deletions frontend/src/app/GN2CommonModule/GN2Common.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -187,6 +188,7 @@ import { TaxonTreeComponent } from './form/taxon-tree/taxon-tree.component';
SafeHtmlPipe,
SyntheseSearchComponent,
SafeStripHtmlPipe,
StatusBadgesComponent,
StripHtmlPipe,
TaxaComponent,
TaxonAdvancedModalComponent,
Expand Down Expand Up @@ -291,6 +293,7 @@ import { TaxonTreeComponent } from './form/taxon-tree/taxon-tree.component';
ReactiveFormsModule,
ReadablePropertiePipe,
SafeHtmlPipe,
StatusBadgesComponent,
TaxaComponent,
TaxonAdvancedModalComponent,
TaxonomyComponent,
Expand Down
Original file line number Diff line number Diff line change
@@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<div class="StatusBadges">
<gn-badge
*ngFor="let status of status"
[tooltip]="status.tooltip"
[text]="status.badge"
[symbology]="status.symbology"
/>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.StatusBadges {
display: flex;
flex-flow: row wrap;
width: 100%;
gap: 0.5rem;
line-height: inherit;
}
Original file line number Diff line number Diff line change
@@ -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<string>;
values: Record<string, BadgeSymbology>;
}>;
status: Array<Status> = [];

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<any>(status.text)) {
for (const value of Object.values<any>(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),
});
}
}
}
}
}
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
<div class="Status">
<div class="Status__header">Statuts</div>
<div class="Status__badges">
<gn-badge
*ngFor="let status of status"
[tooltip]="status.tooltip"
[text]="status.badge"
[symbology]="status.symbology"
/>
<gn-status-badges [taxon]="taxon" />
</div>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Original file line number Diff line number Diff line change
@@ -1,87 +1,18 @@
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',
templateUrl: 'status.component.html',
styleUrls: ['status.component.scss'],
imports: [CommonModule, GN2CommonModule],
})
export class StatusComponent implements OnInit {
_taxon: Taxon | null;
_symbology: Array<{
types: Array<string>;
values: Record<string, BadgeSymbology>;
}>;
status: Array<Status> = [];

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<any>(status.text)) {
for (const value of Object.values<any>(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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,9 @@ import { BehaviorSubject } from 'rxjs';
@Injectable()
export class TaxonSheetService {
taxon: BehaviorSubject<Taxon | null> = new BehaviorSubject<Taxon | null>(null);
symbology: BehaviorSubject<any> = new BehaviorSubject<any>(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) {
Expand Down

0 comments on commit 06b8a26

Please sign in to comment.