feat: display date nicely

PnX-SI · Dec 9, 2024 · 222c408 · 222c408
1 parent f696461
commit 222c408
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 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
@@ -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
@@ -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();