From ae8bde3f4de4e820663e3cf3c4c11fb956565af2 Mon Sep 17 00:00:00 2001
From: Etienne Delclaux <etienne_delclaux@natural-solutions.eu>
Date: Mon, 28 Oct 2024 18:17:45 +0100
Subject: [PATCH] feat: make the observer tab loadable

---
 .../syntheseModule/taxon-sheet/loadable.ts    | 19 +++++++++++++++++++
 .../tab-observers.component.html              |  1 +
 .../tab-observers/tab-observers.component.ts  | 15 +++++++++++----
 3 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/app/syntheseModule/taxon-sheet/loadable.ts

diff --git a/frontend/src/app/syntheseModule/taxon-sheet/loadable.ts b/frontend/src/app/syntheseModule/taxon-sheet/loadable.ts
new file mode 100644
index 0000000000..4561510d9b
--- /dev/null
+++ 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
index 06e8c244b8..5547e2e902 100644
--- 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
index 37532787c0..301f1f175a 100644
--- 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,6 +14,8 @@ 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',
@@ -21,7 +23,7 @@ import {
   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;