feat: make the observer tab loadable

PnX-SI · Dec 9, 2024 · ae8bde3 · ae8bde3
1 parent a97ce97
commit ae8bde3
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/loadable.ts b/frontend/src/app/syntheseModule/taxon-sheet/loadable.ts
@@ -0,0 +1,19 @@
+export class Loadable {
+  _isLoading: boolean;
+
+  constructor(isLoading: boolean = false) {
+    this._isLoading = isLoading;
+  }
+
+  startLoading() {
+    this._isLoading = true;
+  }
+
+  stopLoading() {
+    this._isLoading = false;
+  }
+
+  get isLoading(): boolean {
+    return this._isLoading;
+  }
+}
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/tab-observers/tab-observers.component.html b/frontend/src/app/syntheseModule/taxon-sheet/tab-observers/tab-observers.component.html
@@ -35,6 +35,7 @@
     [externalSorting]="true"
     (sort)="onSort($event)"
     [sorts]="[{ prop: sort.sortBy, dir: sort.sortOrder }]"
+    [loadingIndicator]="isLoading"
   >
     <ngx-datatable-column
       name="Observateur"

diff --git a/frontend/src/app/syntheseModule/taxon-sheet/tab-observers/tab-observers.component.ts b/frontend/src/app/syntheseModule/taxon-sheet/tab-observers/tab-observers.component.ts
@@ -14,14 +14,16 @@ import {
   SORT_ORDER,
   SyntheseDataSortItem,
 } from '@geonature_common/form/synthese-form/synthese-data-sort-item';
+import { Loadable } from '../loadable';
+import { finalize } from 'rxjs/operators';
 @Component({
   standalone: true,
   selector: 'tab-observers',
   templateUrl: 'tab-observers.component.html',
   styleUrls: ['tab-observers.component.scss'],
   imports: [GN2CommonModule, CommonModule],
 })
-export class TabObserversComponent implements OnInit {
+export class TabObserversComponent extends Loadable implements OnInit {
   readonly PROP_OBSERVER = 'observer';
   readonly PROP_DATE_MIN = 'date_min';
   readonly PROP_DATE_MAX = 'date_max';
@@ -40,7 +42,9 @@ export class TabObserversComponent implements OnInit {
   constructor(
     private _syntheseDataService: SyntheseDataService,
     private _tss: TaxonSheetService
-  ) {}
+  ) {
+    super();
+  }
 
   ngOnInit() {
     this._tss.taxon.subscribe((taxon: Taxon | null) => {
@@ -65,16 +69,19 @@ export class TabObserversComponent implements OnInit {
     this.fetchObservers();
   }
 
-  fetchObservers() {
+  async fetchObservers() {
+    this.startLoading();
     const taxon = this._tss.taxon.getValue();
+    this.items = [];
     if (!taxon) {
-      this.items = [];
       this.pagination = DEFAULT_PAGINATION;
       this.sort = this.DEFAULT_SORT;
+      this.stopLoading();
       return;
     }
     this._syntheseDataService
       .getSyntheseTaxonSheetObservers(taxon.cd_ref, this.pagination, this.sort)
+      .pipe(finalize(() => this.stopLoading()))
       .subscribe((data) => {
         // Store result
         this.items = data.items;