From 222c4087ab56256e07293ab110e6faf1fb540b9a Mon Sep 17 00:00:00 2001
From: Etienne Delclaux <etienne_delclaux@natural-solutions.eu>
Date: Thu, 17 Oct 2024 15:52:43 +0200
Subject: [PATCH] feat: display date nicely

---
 .../tab-observers.component.html              | 83 ++++++++++++++++++-
 .../tab-observers/tab-observers.component.ts  | 20 +++--
 2 files changed, 92 insertions(+), 11 deletions(-)

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 54ccc3b483..2701fdccf2 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
@@ -1,8 +1,21 @@
 <div class="Observers">
+  <ng-template
+    #cellDateTemplate
+    let-date="date"
+  >
+    {{ renderDate(date) }}
+  </ng-template>
+
+  <ng-template
+    #cellDefaultTemplate
+    let-value="value"
+  >
+    {{ value }}
+  </ng-template>
+
   <ngx-datatable
     class="Observers__table material striped"
     [rows]="items"
-    [columns]="COLUMNS"
     columnMode="force"
     [draggable]="false"
     (page)="onChangePage($event)"
@@ -15,5 +28,71 @@
     [externalSorting]="true"
     (sort)="onSort($event)"
     [sorts]="[{ prop: sort.sortBy, dir: sort.sortOrder }]"
-  ></ngx-datatable>
+  >
+    <ngx-datatable-column
+      name="Observateur"
+      [prop]="PROP_OBSERVER"
+    >
+      <ng-template
+        ngx-datatable-cell-template
+        let-row="row"
+      >
+        <ng-template
+          *ngTemplateOutlet="cellDefaultTemplate; context: { value: row[PROP_OBSERVER] }"
+        ></ng-template>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column
+      name="Plus ancienne"
+      [prop]="PROP_DATE_MIN"
+    >
+      <ng-template
+        ngx-datatable-cell-template
+        let-row="row"
+      >
+        <ng-template
+          *ngTemplateOutlet="cellDateTemplate; context: { date: row[PROP_DATE_MIN] }"
+        ></ng-template>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column
+      name="Plus récente"
+      [prop]="PROP_DATE_MAX"
+    >
+      <ng-template
+        ngx-datatable-cell-template
+        let-row="row"
+      >
+        <ng-template
+          *ngTemplateOutlet="cellDateTemplate; context: { date: row[PROP_DATE_MAX] }"
+        ></ng-template>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column
+      name="Nombre d'observation(s)"
+      [prop]="PROP_OBSERVATION_COUNT"
+    >
+      <ng-template
+        ngx-datatable-cell-template
+        let-row="row"
+      >
+        <ng-template
+          *ngTemplateOutlet="cellDefaultTemplate; context: { value: row[PROP_OBSERVATION_COUNT] }"
+        ></ng-template>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column
+      name="Nombre de media(s)"
+      [prop]="PROP_MEDIA_COUNT"
+    >
+      <ng-template
+        ngx-datatable-cell-template
+        let-row="row"
+      >
+        <ng-template
+          *ngTemplateOutlet="cellDefaultTemplate; context: { value: row[PROP_MEDIA_COUNT] }"
+        ></ng-template>
+      </ng-template>
+    </ngx-datatable-column>
+  </ngx-datatable>
 </div>
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 212b1534f0..37532787c0 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
@@ -22,16 +22,15 @@ import {
   imports: [GN2CommonModule, CommonModule],
 })
 export class TabObserversComponent implements OnInit {
-  readonly COLUMNS = [
-    { prop: 'observer', name: 'Observateur', sort: true, order: 'asc' },
-    { prop: 'date_min', name: 'Plus ancienne' },
-    { prop: 'date_max', name: 'Plus récente' },
-    { prop: 'observation_count', name: "Nombre d'observations" },
-    { prop: 'media_count', name: 'Nombre de media' },
-  ];
+  readonly PROP_OBSERVER = 'observer';
+  readonly PROP_DATE_MIN = 'date_min';
+  readonly PROP_DATE_MAX = 'date_max';
+  readonly PROP_OBSERVATION_COUNT = 'observation_count';
+  readonly PROP_MEDIA_COUNT = 'media_count';
+
   readonly DEFAULT_SORT = {
     ...DEFAULT_SORT,
-    sortBy: this.COLUMNS[0].prop,
+    sortBy: this.PROP_OBSERVER,
     sortOrder: SORT_ORDER.ASC,
   };
   items: any[] = [];
@@ -40,7 +39,6 @@ export class TabObserversComponent implements OnInit {
 
   constructor(
     private _syntheseDataService: SyntheseDataService,
-    private _config: ConfigService,
     private _tss: TaxonSheetService
   ) {}
 
@@ -50,6 +48,10 @@ export class TabObserversComponent implements OnInit {
     });
   }
 
+  renderDate(date: string): string {
+    return new Date(date).toLocaleDateString();
+  }
+
   onChangePage(event) {
     this.pagination.currentPage = event.offset + 1;
     this.fetchObservers();