frontend - tab 9 : hierarchy error displays

frontend/app/services/hierarchy.service.ts

@@ -26,6 +26,7 @@ export class HierarchyService {
   public items: ItemModel[];
   public rb_name: string;
   public isLoading: boolean = false;
+  public warning: string = '';
 
   constructor(
     private _dataService: ZhDataService,
@@ -40,32 +41,31 @@ export class HierarchyService {
   // get current zone humides
   getHierarchy(zhId, rb_name) {
     this.isLoading = true;
+    this.warning = '';
     this.rb_name = rb_name;
-    this._dataService.getHierZh(zhId).subscribe(
-      (data: HierarchyModel) => {
-        this.items = this.setItems(data);
-      },
-      (error) => {
-        this.isLoading = false;
-        this.items = [];
-        if (error.status === 404) {
-          this._toastr.warning("La ZH n'est présente dans aucun bassin versant", '', {
-            closeButton: true,
-          });
-        } else if (error.status === 400) {
-          this._toastr.warning(
-            this._error['errors'].filter((i) => error.error['message'] === i.api)[0].front,
-            '',
-            {
-              closeButton: true,
-            }
-          );
+    this._dataService
+      .getHierZh(zhId, {
+        'not-to-handle': '1',
+      })
+      .subscribe(
+        (data: HierarchyModel) => {
+          this.items = this.setItems(data);
+        },
+        (error) => {
+          this.isLoading = false;
+          this.items = [];
+          if (error.status === 404) {
+            this.warning = "La ZH n'est présente dans aucun bassin versant";
+          } else if (error.status === 400) {
+            this.warning = this._error['errors'].filter(
+              (i) => error.error['message'] === i.api
+            )[0].front;
+          }
+        },
+        () => {
+          this.isLoading = false;
         }
-      },
-      () => {
-        this.isLoading = false;
-      }
-    );
+      );
   }
 
   // set list of hierarchy items

frontend/app/services/zh-data.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { BehaviorSubject } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { ConfigService } from '@geonature/services/config.service';
@@ -115,10 +115,10 @@ export class ZhDataService {
     return this._api.get(`${this.config.API_ENDPOINT}/zones_humides/${zhId}/taxa`);
   }
 
-  getHierZh(zhId: string) {
-    return this._api.get<HierarchyModel>(
-      `${this.config.API_ENDPOINT}/zones_humides/${zhId}/hierarchy`
-    );
+  getHierZh(zhId: string, headers?: HttpHeaders | { [header: string]: string | string[] }) {
+    return this._api.get(`${this.config.API_ENDPOINT}/zones_humides/${zhId}/hierarchy`, {
+      headers,
+    });
   }
 
   getPdf(zhId: number) {

frontend/app/zh-details/hierarchy/hierarchy.component.html

@@ -1,5 +1,12 @@
 <h4 class="tabsSubtitle">Bassin versant : {{ data?.river_basin_name }}</h4>
+<div
+  *ngIf="hierarchy.warning"
+  class="alert alert-warning mat-alert"
+>
+  {{ hierarchy.warning }}
+</div>
 <zh-table
+  *ngIf="hierarchy.items?.length"
   [tableCols]="hierarchy.hierTableCols"
   [data]="hierarchy.items"
   [bold_row_values]="hierarchy.bold_row_values"

frontend/app/zh-details/zh-details.component.html

@@ -83,7 +83,7 @@
       [title]="'9. Hiérarchisation'"
       [expanded]="expanded"
     >
-      <zh-details-hierarchy [data]="zhDetails.hierarchy"></zh-details-hierarchy>
+      <zh-details-hierarchy [data]="hierarchy"></zh-details-hierarchy>
     </collapse>
   </mat-accordion>
 </div>

frontend/app/zh-details/zh-details.component.ts

@@ -6,10 +6,11 @@ import { ZhDataService } from '../services/zh-data.service';
 import { ErrorTranslatorService } from '../services/error-translator.service';
 import { Rights } from '../models/rights';
 import { ToastrService } from 'ngx-toastr';
-import { GeoJSON } from 'leaflet';
+import { Subscription } from 'rxjs';
 import * as L from 'leaflet';
 
 import { DetailsModel } from './models/zh-details.model';
+import { HierarchyService } from '../services/hierarchy.service';
 
 @Component({
   selector: 'zh-details',
@@ -24,10 +25,13 @@ export class ZhDetailsComponent implements OnInit, AfterViewInit {
   public rights: Rights;
   public expanded: boolean = false;
   public onError: boolean = false;
+  private $_currentZhSub: Subscription;
+  public currentZh: any;
 
   constructor(
     private _mapService: MapService,
     private _zhService: ZhDataService,
+    public hierarchy: HierarchyService,
     private _route: ActivatedRoute,
     private _toastr: ToastrService,
     private _error: ErrorTranslatorService
@@ -37,6 +41,16 @@ export class ZhDetailsComponent implements OnInit, AfterViewInit {
     this.id_zh = this._route.snapshot.params['id'];
     this.getRights(this.id_zh);
     this.getData();
+    this.getCurrentZh();
+  }
+
+  getCurrentZh() {
+    this._zhService.getZhById(this.id_zh).subscribe((zh: any) => {
+      if (zh) {
+        this.currentZh = zh;
+        this.hierarchy.getHierarchy(zh.id, zh.properties.bassin_versant);
+      }
+    });
   }
 
   getRights(idZh: number) {
@@ -107,4 +121,8 @@ export class ZhDetailsComponent implements OnInit, AfterViewInit {
   onWrapAll() {
     this.expanded = !this.expanded;
   }
+
+  ngOnDestroy() {
+    if (this.$_currentZhSub) this.$_currentZhSub.unsubscribe();
+  }
 }

frontend/app/zh-forms/tabs/tab9/zh-form-tab9.component.html

@@ -3,8 +3,14 @@ <h2 class="tabsTitle">Hiérarchisation</h2>
 
   <div *ngIf="!hierarchy.isLoading">
     <h4 class="tabsSubtitle">Bassin versant : {{ hierarchy.rb_name }}</h4>
-
+    <div
+      *ngIf="hierarchy.warning"
+      class="alert alert-warning mat-alert"
+    >
+      {{ hierarchy.warning }}
+    </div>
     <zh-table
+      *ngIf="hierarchy.items?.length"
       [tableCols]="hierarchy.hierTableCols"
       [data]="hierarchy.items"
       [bold_row_values]="hierarchy.bold_row_values"