From 3fa32750923d5eb8eee1428c8f5cc21d2309bde4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Andr=C3=A9?=
 <Sebastien.ANDRE@external.loccitane.com>
Date: Thu, 10 Oct 2019 11:00:15 +0200
Subject: [PATCH] Affichage en tableau de la liste des DZs

---
 .../src/app/list-of-dzs/list-of-dzs.component.html  |  7 +++++--
 .../src/app/list-of-dzs/list-of-dzs.component.ts    | 13 +++++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html
index 2dcc05a..03c4e52 100644
--- a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html
+++ b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html
@@ -2,7 +2,7 @@
   list-of-dzs works!
 </p>
 
-<table mat-table [dataSource]="listOfDropZones" class="mat-elevation-z8">
+<table mat-table [dataSource]="dataSourceTable" class="mat-elevation-z8">
   <ng-container matColumnDef="id">
     <th mat-header-cell *matHeaderCellDef>ID</th>
     <td mat-cell *matCellDef="let element">{{element.id}}</td>
@@ -12,5 +12,8 @@
     <th mat-header-cell *matHeaderCellDef>Name</th>
     <td mat-cell *matCellDef="let element">{{element.name}}</td>
   </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>
-<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+<mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
diff --git a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts
index 83adc24..0309e78 100644
--- a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts
+++ b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts
@@ -1,4 +1,6 @@
-import { Component, OnInit, Injectable } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
 
 import { DropZoneResp } from '../../models/dropzone';
 import { ServiceApi } from '../../services/serviceApi';
@@ -13,6 +15,9 @@ import { ServiceComm } from '../../services/serviceComm';
 
 export class ListOfDzsComponent implements OnInit {
   public listOfDropZones: Array<DropZoneResp> = new Array<DropZoneResp>();
+  public displayedColumns: Array<string> = ['id', 'name'];
+  public dataSourceTable = new MatTableDataSource<DropZoneResp>();
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
   constructor(private serviceApi: ServiceApi,
     private serviceComm: ServiceComm) {
@@ -25,6 +30,10 @@ export class ListOfDzsComponent implements OnInit {
 
   getListOfDropZones() {
     this.serviceApi.getListOfDropZones()
-      .subscribe(data => this.listOfDropZones = data);
+      .subscribe(data => {
+        this.listOfDropZones = data;
+        this.dataSourceTable = new MatTableDataSource<DropZoneResp>(data);
+        this.dataSourceTable.paginator = this.paginator;
+      });
   }
 }