Affichage en tableau pour les autres pages

Front/skydivelogs-app/src/app/app.component.css

@@ -1,8 +1,11 @@
+body {
+  margin: 10px;
+}
+
 .hamburger__icon {
   position: relative;
   z-index: 50;
   height: 1rem;
-  /*padding: 0.5rem 1.5rem;*/
   margin-right: 1rem;
   cursor: pointer;
   fill: #ffff;

Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html

@@ -1,10 +1,15 @@
-<p>
+<table mat-table [dataSource]="dataSourceTable">
-  list-of-aircrafts works!
+  <ng-container matColumnDef="id">
-</p>
+    <th mat-header-cell *matHeaderCellDef>ID</th>
+    <td mat-cell *matCellDef="let element">{{element.id}}</td>
+  </ng-container>
 
-<table>
+  <ng-container matColumnDef="name">
-  <tr *ngFor="let aircraft of this.listOfAircrafts; index as i;">
+    <th mat-header-cell *matHeaderCellDef>Name</th>
-    <td>{{ aircraft.id }}</td>
+    <td mat-cell *matCellDef="let element">{{element.name}}</td>
-    <td>{{ aircraft.name }}</td>
+  </ng-container>
-  </tr>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>
+<mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.ts

@@ -1,4 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+
 import { AircraftResp } from '../../models/aircraft';
 import { ServiceApi } from '../../services/serviceApi';
 import { ServiceComm } from '../../services/serviceComm';
@@ -10,6 +13,9 @@ import { ServiceComm } from '../../services/serviceComm';
 })
 export class ListOfAircraftsComponent implements OnInit {
   public listOfAircrafts: Array<AircraftResp> = new Array<AircraftResp>();
+  public displayedColumns: Array<string> = ['id', 'name'];
+  public dataSourceTable = new MatTableDataSource<AircraftResp>();
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
   constructor(private serviceApi: ServiceApi, private serviceComm: ServiceComm) {
   }
@@ -21,6 +27,10 @@ export class ListOfAircraftsComponent implements OnInit {
 
   getListOfAircrafts() {
     this.serviceApi.getListOfAircrafts()
-      .subscribe(data => this.listOfAircrafts = data);
+      .subscribe(data => {
+        this.listOfAircrafts = data;
+        this.dataSourceTable = new MatTableDataSource<AircraftResp>(data);
+        this.dataSourceTable.paginator = this.paginator;
+      });
   }
 }

Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html

@@ -1,7 +1,3 @@
-<p>
-  list-of-dzs works!
-</p>
-
 <table mat-table [dataSource]="dataSourceTable">
   <ng-container matColumnDef="id">
     <th mat-header-cell *matHeaderCellDef>ID</th>

Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html

@@ -1,10 +1,15 @@
-<p>
+<table mat-table [dataSource]="dataSourceTable">
-  list-of-jump-types works!
+  <ng-container matColumnDef="id">
-</p>
+    <th mat-header-cell *matHeaderCellDef>ID</th>
+    <td mat-cell *matCellDef="let element">{{element.id}}</td>
+  </ng-container>
 
-<table>
+  <ng-container matColumnDef="name">
-  <tr *ngFor="let jumpType of this.listOfJumpTypes; index as i;">
+    <th mat-header-cell *matHeaderCellDef>Name</th>
-    <td>{{ jumpType.id }}</td>
+    <td mat-cell *matCellDef="let element">{{element.name}}</td>
-    <td>{{ jumpType.name }}</td>
+  </ng-container>
-  </tr>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>
+<mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.ts

@@ -1,4 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+
 import { JumpTypeResp } from '../../models/jumpType';
 import { ServiceApi } from '../../services/serviceApi';
 import { ServiceComm } from '../../services/serviceComm';
@@ -10,6 +13,9 @@ import { ServiceComm } from '../../services/serviceComm';
 })
 export class ListOfJumpTypesComponent implements OnInit {
   public listOfJumpTypes: Array<JumpTypeResp> = new Array<JumpTypeResp>();
+  public displayedColumns: Array<string> = ['id', 'name'];
+  public dataSourceTable = new MatTableDataSource<JumpTypeResp>();
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
   constructor(private serviceApi: ServiceApi, private serviceComm: ServiceComm) {
   }
@@ -21,6 +27,10 @@ export class ListOfJumpTypesComponent implements OnInit {
 
   getListOfJumpTypes() {
     this.serviceApi.getListOfJumpTypes()
-      .subscribe(data => this.listOfJumpTypes = data);
+      .subscribe(data => {
+        this.listOfJumpTypes = data;
+        this.dataSourceTable = new MatTableDataSource<JumpTypeResp>(data);
+        this.dataSourceTable.paginator = this.paginator;
+      });
   }
 }

Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html

@@ -1,10 +1,10 @@
-<p>
+<table mat-table [dataSource]="dataSourceTable">
-  list-of-jumps works!
+  <ng-container matColumnDef="id">
-</p>
+    <th mat-header-cell *matHeaderCellDef>ID</th>
+    <td mat-cell *matCellDef="let element">{{element.id}}</td>
+  </ng-container>
 
-
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-<table>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  <tr *ngFor="let jump of this.listOfJumps | async; index as i;">
-    <td>{{ jump.id }}</td>
-  </tr>
 </table>
+<mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts

@@ -1,4 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+
 import { Observable } from 'rxjs';
 import { JumpResp } from '../../models/jump';
 import { ServiceApi } from '../../services/serviceApi';
@@ -12,6 +15,9 @@ import { ServiceComm } from '../../services/serviceComm';
 })
 export class ListOfJumpsComponent implements OnInit {
   public listOfJumps: Observable<Array<JumpResp>>;
+  public displayedColumns: Array<string> = ['id'];
+  public dataSourceTable;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
   constructor(private serviceApi: ServiceApi, private serviceComm: ServiceComm) {
   }
@@ -23,5 +29,9 @@ export class ListOfJumpsComponent implements OnInit {
 
   getListOfJumps() {
     this.listOfJumps = this.serviceApi.getListOfJumps();
+    this.listOfJumps.subscribe(data => {
+      this.dataSourceTable = new MatTableDataSource<JumpResp>(data);
+      this.dataSourceTable.paginator = this.paginator;
+    });
   }
 }