Fix sur la pagination et fix sur le tri par date

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

@@ -1,3 +1,9 @@
 table {
   width: 100%;
 }
+
+.table-container {
+  position: relative;
+  height: 600px;
+  overflow: auto;
+}

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

@@ -1,4 +1,4 @@
-<div *ngIf="dataSourceTable != null else loading">
+<div *ngIf="dataSourceTable != null else loading" class="table-container">
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef>ID</th>
@@ -13,6 +13,6 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
-  <mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
 </div>
+<mat-paginator [length]="resultsLength" [pageSize]="5"></mat-paginator>
 <ng-template #loading>Waiting...</ng-template>

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

@@ -1,18 +1,18 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
-import { MatPaginator } from "@angular/material/paginator";
-import { MatTableDataSource } from "@angular/material/table";
+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 { ServiceApiGet } from "../../services/service-api-get.service";
-import { ServiceComm } from "../../services/service-comm.service";
+import { AircraftResp } from '../../models/aircraft';
+import { ServiceApiGet } from '../../services/service-api-get.service';
+import { ServiceComm } from '../../services/service-comm.service';
 
 @Component({
-  selector: "app-list-of-aircrafts",
-  templateUrl: "./list-of-aircrafts.component.html",
-  styleUrls: ["./list-of-aircrafts.component.css"]
+  selector: 'app-list-of-aircrafts',
+  templateUrl: './list-of-aircrafts.component.html',
+  styleUrls: ['./list-of-aircrafts.component.css']
 })
 export class ListOfAircraftsComponent implements OnInit {
-  public displayedColumns: Array<string> = ["id", "name"];
+  public displayedColumns: Array<string> = ['id', 'name'];
   public dataSourceTable;
   public resultsLength = 0;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@@ -23,12 +23,13 @@ export class ListOfAircraftsComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.serviceComm.updatedComponentTitle("List of aircrafts");
+    this.serviceComm.updatedComponentTitle('List of aircrafts');
     this.getListOfAircrafts();
   }
 
   getListOfAircrafts() {
     this.serviceApi.getListOfAircrafts().subscribe(data => {
+      data.sort((a, b) => (b.name < a.name) ? 1 : -1);
       this.dataSourceTable = new MatTableDataSource<AircraftResp>(data);
       this.dataSourceTable.paginator = this.paginator;
       this.resultsLength = data.length;

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

@@ -1,3 +1,9 @@
 table {
   width: 100%;
 }
+
+.table-container {
+  position: relative;
+  height: 600px;
+  overflow: auto;
+}

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

@@ -1,4 +1,4 @@
-<div *ngIf="dataSourceTable != null else loading">
+<div *ngIf="dataSourceTable != null else loading" class="table-container">
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="isfavorite">
       <th mat-header-cell *matHeaderCellDef></th>
@@ -45,6 +45,6 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
-  <mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
 </div>
+<mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
 <ng-template #loading>Waiting...</ng-template>

Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.css

@@ -1,3 +1,9 @@
 table {
   width: 100%;
 }
+
+.table-container {
+  position: relative;
+  height: 600px;
+  overflow: auto;
+}

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

@@ -1,4 +1,4 @@
-<div *ngIf="dataSourceTable != null else loading">
+<div *ngIf="dataSourceTable != null else loading" class="table-container">
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef>ID</th>
@@ -35,6 +35,6 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
-  <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
 </div>
+<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
 <ng-template #loading>Waiting...</ng-template>

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

@@ -1,24 +1,24 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
-import { MatPaginator, MatTableDataSource } from "@angular/material";
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator, MatTableDataSource } from '@angular/material';
 
-import { ServiceApiGet } from "../../services/service-api-get.service";
-import { ServiceComm } from "../../services/service-comm.service";
-import { GearResp } from "../../models/gear";
+import { ServiceApiGet } from '../../services/service-api-get.service';
+import { ServiceComm } from '../../services/service-comm.service';
+import { GearResp } from '../../models/gear';
 
 @Component({
-  selector: "app-list-of-gears",
-  templateUrl: "./list-of-gears.component.html",
-  styleUrls: ["./list-of-gears.component.css"]
+  selector: 'app-list-of-gears',
+  templateUrl: './list-of-gears.component.html',
+  styleUrls: ['./list-of-gears.component.css']
 })
 export class ListOfGearsComponent implements OnInit {
   public displayedColumns: Array<string> = [
-    "id",
-    "name",
-    "latitude",
-    "longitude",
-    "address",
-    "email",
-    "type"
+    'id',
+    'name',
+    'latitude',
+    'longitude',
+    'address',
+    'email',
+    'type'
   ];
   public dataSourceTable;
   public resultsLength = 0;
@@ -27,15 +27,16 @@ export class ListOfGearsComponent implements OnInit {
   constructor(
     private serviceApi: ServiceApiGet,
     private serviceComm: ServiceComm
-  ) {}
+  ) { }
 
   ngOnInit() {
-    this.serviceComm.updatedComponentTitle("List of gears");
+    this.serviceComm.updatedComponentTitle('List of gears');
     this.getListOfGears();
   }
 
   getListOfGears() {
     this.serviceApi.getListOfGears().subscribe(data => {
+      //data.sort((a, b) => (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0));
       this.dataSourceTable = new MatTableDataSource<GearResp>(data);
       this.dataSourceTable.paginator = this.paginator;
       this.resultsLength = data.length;

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

@@ -1,3 +1,9 @@
 table {
   width: 100%;
 }
+
+.table-container {
+  position: relative;
+  height: 600px;
+  overflow: auto;
+}

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

@@ -1,4 +1,4 @@
-<div *ngIf="dataSourceTable != null else loading">
+<div *ngIf="dataSourceTable != null else loading" class="table-container">
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef>ID</th>
@@ -13,6 +13,6 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
-  <mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
 </div>
+<mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
 <ng-template #loading>Waiting...</ng-template>

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

@@ -1,18 +1,18 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
-import { MatPaginator } from "@angular/material/paginator";
-import { MatTableDataSource } from "@angular/material/table";
+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 { ServiceApiGet } from "../../services/service-api-get.service";
-import { ServiceComm } from "../../services/service-comm.service";
+import { JumpTypeResp } from '../../models/jumpType';
+import { ServiceApiGet } from '../../services/service-api-get.service';
+import { ServiceComm } from '../../services/service-comm.service';
 
 @Component({
-  selector: "app-list-of-jump-types",
-  templateUrl: "./list-of-jump-types.component.html",
-  styleUrls: ["./list-of-jump-types.component.css"]
+  selector: 'app-list-of-jump-types',
+  templateUrl: './list-of-jump-types.component.html',
+  styleUrls: ['./list-of-jump-types.component.css']
 })
 export class ListOfJumpTypesComponent implements OnInit {
-  public displayedColumns: Array<string> = ["id", "name"];
+  public displayedColumns: Array<string> = ['id', 'name'];
   public dataSourceTable;
   public resultsLength = 0;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@@ -23,12 +23,13 @@ export class ListOfJumpTypesComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.serviceComm.updatedComponentTitle("List of jump types");
+    this.serviceComm.updatedComponentTitle('List of jump types');
     this.getListOfJumpTypes();
   }
 
   getListOfJumpTypes() {
     this.serviceApi.getListOfJumpTypes().subscribe(data => {
+      data.sort((a, b) => (b.name < a.name) ? 1 : -1);
       this.dataSourceTable = new MatTableDataSource<JumpTypeResp>(data);
       this.dataSourceTable.paginator = this.paginator;
       this.resultsLength = data.length;

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

@@ -1,3 +1,9 @@
 table {
   width: 100%;
 }
+
+.table-container {
+  position: relative;
+  height: 600px;
+  overflow: auto;
+}

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

@@ -1,4 +1,4 @@
-<div *ngIf="dataSourceTable != null else loading">
+<div *ngIf="dataSourceTable != null else loading" class="table-container">
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef>ID</th>
@@ -30,6 +30,6 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
-  <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
 </div>
+<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
 <ng-template #loading>Waiting...</ng-template>

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

@@ -1,26 +1,26 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
-import { MatPaginator } from "@angular/material/paginator";
-import { MatTableDataSource } from "@angular/material/table";
+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 { ServiceApiGet } from "../../services/service-api-get.service";
-import { ServiceComm } from "../../services/service-comm.service";
+import { Observable } from 'rxjs';
+import { JumpResp } from '../../models/jump';
+import { ServiceApiGet } from '../../services/service-api-get.service';
+import { ServiceComm } from '../../services/service-comm.service';
 
 @Component({
-  selector: "app-list-of-jumps",
-  templateUrl: "./list-of-jumps.component.html",
-  styleUrls: ["./list-of-jumps.component.css"]
+  selector: 'app-list-of-jumps',
+  templateUrl: './list-of-jumps.component.html',
+  styleUrls: ['./list-of-jumps.component.css']
 })
 export class ListOfJumpsComponent implements OnInit {
   public listOfJumps: Observable<Array<JumpResp>>;
   public displayedColumns: Array<string> = [
-    "id",
-    "jumpDate",
-    "jumpType",
-    "aircraft",
-    "dropZone",
-    "gear"
+    'id',
+    'jumpDate',
+    'jumpType',
+    'aircraft',
+    'dropZone',
+    'gear'
   ];
   public dataSourceTable;
   public resultsLength = 0;
@@ -29,16 +29,17 @@ export class ListOfJumpsComponent implements OnInit {
   constructor(
     private serviceApi: ServiceApiGet,
     private serviceComm: ServiceComm
-  ) {}
+  ) { }
 
   ngOnInit() {
-    this.serviceComm.updatedComponentTitle("List of jumps");
+    this.serviceComm.updatedComponentTitle('List of jumps');
     this.getListOfJumps();
   }
 
   getListOfJumps() {
     this.listOfJumps = this.serviceApi.getListOfJumps();
     this.listOfJumps.subscribe(data => {
+      data.sort((a, b) => b.jumpDate.getTime() - a.jumpDate.getTime());
       this.dataSourceTable = new MatTableDataSource<JumpResp>(data);
       this.dataSourceTable.paginator = this.paginator;
       this.resultsLength = data.length;

Front/skydivelogs-app/src/models/jump.ts

@@ -1,7 +1,7 @@
-import { GearResp } from "./gear";
-import { DropZoneResp } from "./dropzone";
-import { AircraftResp } from "./aircraft";
-import { JumpTypeResp } from "./jumpType";
+import { GearResp } from './gear';
+import { DropZoneResp } from './dropzone';
+import { AircraftResp } from './aircraft';
+import { JumpTypeResp } from './jumpType';
 
 export class JumpReq {
   constructor(data: any) {
@@ -23,6 +23,7 @@ export class JumpReq {
 export class JumpResp {
   constructor(data: any) {
     Object.assign(this, data);
+    this.jumpDate = new Date(data.jumpDate);
   }
 
   public id: number;

Front/skydivelogs-app/src/services/service-api-get.service.ts

@@ -42,7 +42,13 @@ export class ServiceApiGet {
   public getListOfJumps(): Observable<Array<JumpResp>> {
     return this.http.get<Array<JumpResp>>(`${environment.urlApi}/api/Jump`, {
       headers: this.headers
-    });
+    })
+      .pipe(
+        map(response => {
+          const details = response.map(data => new JumpResp(data));
+          return details;
+        })
+      );
   }
 
   public getListOfAircrafts(): Observable<Array<AircraftResp>> {