Fonctionnement du tri en fonction des en-têtes du tableau

src/app/collaborateurs/collaborateurs.component.html

@@ -45,25 +45,26 @@
   </mat-form-field>
 
   <!-- Affichage de la liste des collaborateurs -->
-  <mat-table matSort [dataSource]="dataSource">
+  <mat-table matSort [dataSource]="dataSource" (matSortChange)="triTableau($event)" matSortActive="{{this.tri}}" matSortDirection="asc" >
-    <ng-container matColumnDef="agence">
+    
-      <mat-header-cell *matHeaderCellDef mat-sort-header>Agence</mat-header-cell>
+    <ng-container matColumnDef="businessunit">
+      <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Agence</mat-header-cell>
       <mat-cell *matCellDef="let row">{{ row.businessUnit.nom }}</mat-cell>
     </ng-container>
 
     <ng-container matColumnDef="collaborateur">
-      <mat-header-cell *matHeaderCellDef mat-sort-header>Collabotareur</mat-header-cell>
+      <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Collabotareur</mat-header-cell>
       <!--Créer un lien vers les détails du collaborateur-->
-      <mat-cell *matCellDef="let row" [routerLink]="['/collaborateurs', row.id]">{{row.prenom}} {{row.nom}}</mat-cell>
+      <mat-cell *matCellDef="let row" [routerLink]="['/collaborateurs', row.id]">{{row.nom}} {{row.prenom}}</mat-cell>
     </ng-container>
 
-    <ng-container matColumnDef="dateembauche">
+    <ng-container matColumnDef="datearrivee">
-      <mat-header-cell *matHeaderCellDef mat-sort-header>Date embauche</mat-header-cell>
+      <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Date embauche</mat-header-cell>
       <mat-cell *matCellDef="let row">{{row.dateArrivee | date:'dd/MM/yyyy'}}</mat-cell>
     </ng-container>
 
     <ng-container matColumnDef="referent">
-      <mat-header-cell *matHeaderCellDef mat-sort-header>Référent</mat-header-cell>
+      <mat-header-cell *matHeaderCellDef >Référent</mat-header-cell>
       <mat-cell *matCellDef="let row">
         <p *ngIf="row.referent" [routerLink]="['/referents', row.referent.id]">{{ row.referent.prenom }} {{ row.referent.nom }}</p>
         <p *ngIf="!row.referent"> Aucun référent</p>

src/app/collaborateurs/collaborateurs.component.ts

@@ -8,7 +8,7 @@ import {MatTableDataSource} from '@angular/material/table';
 import {MatPaginator, PageEvent} from '@angular/material/paginator';
 import {MatSort} from '@angular/material/sort';
 
-import { CollaborateurDTO } from '@shared/api-swagger/model/models'
+import { BusinessUnitDTO, CollaborateurDTO } from '@shared/api-swagger/model/models'
 import { CollaborateursService } from "@shared/api-swagger/api/api";
 import { CollaborateurConnecte } from "@shared/globales/collaborateur-connecte"
 
@@ -26,15 +26,16 @@ export class CollaborateursComponent implements OnInit {
   /**
     * Ordre de tri à envoyer au serveur (true : croissant, false : décroissantà).
     */
-  asc = true;
+  asc : boolean = true;
+
   /**
     * Numéro de la page à afficher dans le tableau.
     */
-  numPage = 1;
+  numPage: number = 1;
   /**
     * Nombre d'élément du tableau à affiche en une page.
     */
-  parPage = 15;
+  parPage: number = 15;
   /**
     * Rôle des collaborateurs à récupérer via le service collaborateur, ici nous ne voulons que les collaborateurs (pour le moment...).
     */
@@ -50,7 +51,7 @@ export class CollaborateursComponent implements OnInit {
   /**
     * Liste des colonnes du tableau à afficher.
     */
-  displayedColumns : string[] = ["agence", "collaborateur", "dateembauche", "referent"];
+  displayedColumns : string[] = ["businessunit", "collaborateur", "datearrivee", "referent"];
 
   /**
     * C'est dans cet objet que seront stockés les collaborateurs à afficher dans le Mat Table côté template.
@@ -60,16 +61,17 @@ export class CollaborateursComponent implements OnInit {
   /**
     * contenu de la recherche pour trouver un collaborateur.
     */
-  search = "";
+  search: string = "";
   /**
     * Permet de savoir sur quelle attribut d'un CollaborateurDTO doit être trié le tableau.
     */
-  tri = "";
+  tri: string = "collaborateur";
+
 
   /**
    * Liste des business units du collaborateur connecté
    */
-  bus = [];
+  bus: Array<BusinessUnitDTO> = [];
 
   /**
    * Liste des id des business units des collaborateurs à afficher
@@ -102,17 +104,17 @@ export class CollaborateursComponent implements OnInit {
   /**
     * Spécifie si la liste des collaborateurs est en cours de chargement dans le tableau.
     */
-  chargement = true;
+  chargement: boolean = true;
   
   /**
    * 
    */
-  dateDebut = undefined;
+  dateDebut: Date = undefined;
   
   /**
    * 
    */
-  dateFin = undefined;
+  dateFin: Date = undefined;
 
   constructor(private service: CollaborateursService, private collaborateurConnecte: CollaborateurConnecte) {}
 
@@ -168,6 +170,20 @@ export class CollaborateursComponent implements OnInit {
     this.updateDataSource();
   }
 
+
+  triTableau(e) {
+    this.tri = e.active;
+    switch(e.direction) {
+      case "asc":
+        this.asc = true;
+        break;
+      case "desc":
+        this.asc = false;
+        break;
+    }
+    this.updateDataSource();
+  }
+
   /**
     * Fonction qui calculait le nombre d'année qu'un collaborateur a passé chez Apside (calculer entre la date d'aujourd'hui et la date d'arrivée du collaborateur).
     */