Changement sur l'affichage de la pagination

Front/skydivelogs-app/src/app/app.module.ts

@@ -1,23 +1,23 @@
-import { BrowserModule } from "@angular/platform-browser";
-import { NgModule } from "@angular/core";
-import { RouterModule, Routes } from "@angular/router";
-import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 
-import { AppComponent } from "./app.component";
+import { AppComponent } from './app.component';
 
-import { SummaryComponent } from "./summary/summary.component";
-import { ListOfJumpsComponent } from "./list-of-jumps/list-of-jumps.component";
-import { ListOfDzsComponent } from "./list-of-dzs/list-of-dzs.component";
-import { NewJumpComponent } from "./new-jump/new-jump.component";
-import { ListOfAircraftsComponent } from "./list-of-aircrafts/list-of-aircrafts.component";
-import { ListOfJumpTypesComponent } from "./list-of-jump-types/list-of-jump-types.component";
+import { SummaryComponent } from './summary/summary.component';
+import { ListOfJumpsComponent } from './list-of-jumps/list-of-jumps.component';
+import { ListOfDzsComponent } from './list-of-dzs/list-of-dzs.component';
+import { NewJumpComponent } from './new-jump/new-jump.component';
+import { ListOfAircraftsComponent } from './list-of-aircrafts/list-of-aircrafts.component';
+import { ListOfJumpTypesComponent } from './list-of-jump-types/list-of-jump-types.component';
 
-import { DateService } from "../services/date.service";
-import { ServiceApiGet } from "../services/service-api-get.service";
-import { ServiceApiPost } from "../services/service-api-post.service";
-import { ServiceComm } from "../services/service-comm.service";
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { FormsModule } from "@angular/forms";
+import { DateService } from '../services/date.service';
+import { ServiceApiGet } from '../services/service-api-get.service';
+import { ServiceApiPost } from '../services/service-api-post.service';
+import { ServiceComm } from '../services/service-comm.service';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormsModule } from '@angular/forms';
 import {
   MatPaginatorModule,
   MatTableModule,
@@ -30,17 +30,17 @@ import {
   MatInputModule,
   MatButtonModule,
   MatIconModule
-} from "@angular/material";
-import { RequestCache } from "../services/request-cache.service";
-import { CachingInterceptor } from "../services/caching-interceptor.service";
+} from '@angular/material';
+import { RequestCache } from '../services/request-cache.service';
+import { CachingInterceptor } from '../services/caching-interceptor.service';
 
 const appRoutes: Routes = [
-  { path: "summary", component: SummaryComponent },
-  { path: "jumpsList", component: ListOfJumpsComponent },
-  { path: "dz", component: ListOfDzsComponent },
-  { path: "newjump", component: NewJumpComponent },
-  { path: "aircraftList", component: ListOfAircraftsComponent },
-  { path: "jumpTypeList", component: ListOfJumpTypesComponent }
+  { path: 'summary', component: SummaryComponent },
+  { path: 'jumpsList', component: ListOfJumpsComponent },
+  { path: 'dz', component: ListOfDzsComponent },
+  { path: 'newjump', component: NewJumpComponent },
+  { path: 'aircraftList', component: ListOfAircraftsComponent },
+  { path: 'jumpTypeList', component: ListOfJumpTypesComponent }
 ];
 
 @NgModule({
@@ -84,4 +84,4 @@ const appRoutes: Routes = [
   ],
   bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule { }

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

@@ -12,4 +12,4 @@
   <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>
+<mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>

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

@@ -14,12 +14,13 @@ import { ServiceComm } from "../../services/service-comm.service";
 export class ListOfAircraftsComponent implements OnInit {
   public displayedColumns: Array<string> = ["id", "name"];
   public dataSourceTable;
+  public resultsLength = 0;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
   constructor(
     private serviceApi: ServiceApiGet,
     private serviceComm: ServiceComm
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.serviceComm.updatedComponentTitle("List of aircrafts");
@@ -30,6 +31,7 @@ export class ListOfAircraftsComponent implements OnInit {
     this.serviceApi.getListOfAircrafts().subscribe(data => {
       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.html

@@ -34,4 +34,4 @@
   <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>
+<mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>

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

@@ -1,36 +1,37 @@
-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 { DropZoneResp } from "../../models/dropzone";
-import { ServiceApiGet } from "../../services/service-api-get.service";
-import { ServiceComm } from "../../services/service-comm.service";
+import { DropZoneResp } from '../../models/dropzone';
+import { ServiceApiGet } from '../../services/service-api-get.service';
+import { ServiceComm } from '../../services/service-comm.service';
 
 @Component({
-  selector: "app-list-of-dzs",
-  templateUrl: "./list-of-dzs.component.html",
-  styleUrls: ["./list-of-dzs.component.css"]
+  selector: 'app-list-of-dzs',
+  templateUrl: './list-of-dzs.component.html',
+  styleUrls: ['./list-of-dzs.component.css']
 })
 export class ListOfDzsComponent 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;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
   constructor(
     private serviceApi: ServiceApiGet,
     private serviceComm: ServiceComm
-  ) {}
+  ) { }
 
   ngOnInit() {
-    this.serviceComm.updatedComponentTitle("List of DZs");
+    this.serviceComm.updatedComponentTitle('List of DZs');
     this.getListOfDropZones();
   }
 
@@ -38,6 +39,7 @@ export class ListOfDzsComponent implements OnInit {
     this.serviceApi.getListOfDropZones().subscribe(data => {
       this.dataSourceTable = new MatTableDataSource<DropZoneResp>(data);
       this.dataSourceTable.paginator = this.paginator;
+      this.resultsLength = data.length;
     });
   }
 }

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

@@ -12,4 +12,4 @@
   <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>
+<mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>

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

@@ -14,12 +14,13 @@ import { ServiceComm } from "../../services/service-comm.service";
 export class ListOfJumpTypesComponent implements OnInit {
   public displayedColumns: Array<string> = ["id", "name"];
   public dataSourceTable;
+  public resultsLength = 0;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
   constructor(
     private serviceApi: ServiceApiGet,
     private serviceComm: ServiceComm
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.serviceComm.updatedComponentTitle("List of jump types");
@@ -30,6 +31,7 @@ export class ListOfJumpTypesComponent implements OnInit {
     this.serviceApi.getListOfJumpTypes().subscribe(data => {
       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.html

@@ -25,4 +25,4 @@
   <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>
+<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>

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

@@ -1,36 +1,37 @@
-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",
-    "jumpTypeId",
-    "aircraftId",
-    "dropZoneId"
+    'id',
+    'jumpDate',
+    'jumpTypeId',
+    'aircraftId',
+    'dropZoneId'
   ];
   public dataSourceTable;
+  public resultsLength = 0;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
   constructor(
     private serviceApi: ServiceApiGet,
     private serviceComm: ServiceComm
-  ) {}
+  ) { }
 
   ngOnInit() {
-    this.serviceComm.updatedComponentTitle("List of jumps");
+    this.serviceComm.updatedComponentTitle('List of jumps');
     this.getListOfJumps();
   }
 
@@ -39,6 +40,7 @@ export class ListOfJumpsComponent implements OnInit {
     this.listOfJumps.subscribe(data => {
       this.dataSourceTable = new MatTableDataSource<JumpResp>(data);
       this.dataSourceTable.paginator = this.paginator;
+      this.resultsLength = data.length;
     });
   }
 }

Front/skydivelogs-app/src/styles.css

@@ -1,4 +1,11 @@
 /* You can add global styles to this file, and also import other style files */
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}