Update to retrieve the jumps page by page.

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

@@ -51,6 +51,7 @@ import { MatIconModule } from "@angular/material/icon";
 import { MatInputModule } from "@angular/material/input";
 import { MatPaginatorModule } from "@angular/material/paginator";
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
 import { MatSelectModule } from "@angular/material/select";
 import { MatTableModule } from "@angular/material/table";
 import { MatTabsModule } from "@angular/material/tabs";
@@ -173,6 +174,7 @@ export function initConfig(configService: ConfigurationHelper) {
     MatIconModule,
     MatAutocompleteModule,
     MatProgressSpinnerModule,
+    MatProgressBarModule,
     MatTabsModule,
     MatDialogModule,
     MatCardModule,

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

@@ -2,7 +2,10 @@
   <div>
     <button mat-raised-button color="accent" [routerLink]="['/newjump']" [routerLinkActive]="['active']" skipLocationChange>{{ 'List_Jump_Add' | translate }}</button>
   </div>
-  <div *ngIf="dataSourceTable != null else loading">
+
+  <mat-progress-bar [mode]="'indeterminate'" *ngIf="isLoading"></mat-progress-bar>
+
+  <div>
     <table mat-table [dataSource]="dataSourceTable">
       <ng-container matColumnDef="infos">
         <th mat-header-cell *matHeaderCellDef style="min-width: 80px;"></th>
@@ -17,7 +20,7 @@
       <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef style="min-width: 70px;">{{ 'List_Jump_Header_Num' | translate }}</th>
         <td mat-cell *matCellDef="let element; let i = index">
-          {{ resultsLength - ( (dataSourceTable.paginator.pageIndex * dataSourceTable.paginator.pageSize ) + i ) }}
+          {{ paginator.length - ( (paginator.pageIndex * paginator.pageSize ) + i ) }}
         </td>
       </ng-container>
 
@@ -68,9 +71,6 @@
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>
-  <mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
 
-  <ng-template #loading>
+  <mat-paginator #paginator [pageSize]="20" (page)="pageChanged($event)" showFirstLastButtons></mat-paginator>
-    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-  </ng-template>
 </div>

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

@@ -1,98 +1,102 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild } from "@angular/core";
-import { MatPaginator } from '@angular/material/paginator';
+import { MatPaginator, PageEvent } from "@angular/material/paginator";
-import { MatTableDataSource } from '@angular/material/table';
+import { MatTableDataSource } from "@angular/material/table";
 import { MatDialog } from "@angular/material/dialog";
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateService } from "@ngx-translate/core";
 
-import { AddAction } from '../../models/add-action.enum';
+import { AddAction } from "../../models/add-action.enum";
-import { Jump } from '../../models/jump';
+import { Jump } from "../../models/jump";
-import { JumpService } from '../../services/jump.service';
+import { JumpService } from "../../services/jump.service";
-import { ServiceComm } from '../../services/service-comm.service';
+import { ServiceComm } from "../../services/service-comm.service";
 import { JumpInfosComponent } from "../jump-infos/jump-infos.component";
-import { StatsService } from '../../services/stats.service';
+import { StatsService } from "../../services/stats.service";
 
 @Component({
-  selector: 'app-list-of-jumps',
+  selector: "app-list-of-jumps",
-  templateUrl: './list-of-jumps.component.html',
+  templateUrl: "./list-of-jumps.component.html",
-  styleUrls: ['./list-of-jumps.component.css']
+  styleUrls: ["./list-of-jumps.component.css"],
 })
 export class ListOfJumpsComponent implements OnInit {
   public displayedColumns: Array<string> = [
-    'infos',
+    "infos",
-    'id',
+    "id",
-    'jumpDate',
+    "jumpDate",
-    'jumpType',
+    "jumpType",
-    'aircraft',
+    "aircraft",
-    'dropZone',
+    "dropZone",
-    'actions'
+    "actions",
   ];
-  public dataSourceTable;
+  public dataSourceTable: MatTableDataSource<Jump> = new MatTableDataSource();
-  public resultsLength = 0;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  public isLoading: boolean = false;
 
   constructor(private serviceApi: JumpService,
               private serviceComm: ServiceComm,
               public dialog: MatDialog,
               private translateService: TranslateService,
-              private statsService : StatsService) { }
+              private statsService: StatsService
+  ) {}
+
+  ngAferViewInit(): void {
+    this.dataSourceTable.paginator = this.paginator;
+  }
 
   ngOnInit() {
-    this.serviceComm.refreshRequest.subscribe(action => {
+    this.serviceComm.refreshRequest.subscribe((action) => {
       if (action === AddAction.Jump) {
         this.dialog.closeAll();
         this.getListOfJumps();
       }
     });
-    this.serviceComm.forceTranslateTitle.subscribe((data)=> {
+    this.serviceComm.forceTranslateTitle.subscribe((data) => {
-      if (data === true){
+      if (data === true) {
         this.updateTitle();
       }
     });
-    
+
     this.updateTitle();
     this.getListOfJumps();
   }
 
-  getListOfJumps() {
+  getListOfJumps(pageSize: number = 20, pageIndex: number = 0) {
-    this.serviceApi.GetListOfJumps().subscribe(data => {
+    this.isLoading = true;
-      setTimeout(() => {
-        data.sort((a, b) => {
-          if (a.jumpDate.getTime() === b.jumpDate.getTime()) {
-            return b.id > a.id ? 1 : -1;
-          }
-          return b.jumpDate > a.jumpDate ? 1 : -1;
-        });
 
-        this.dataSourceTable = new MatTableDataSource<Jump>(data);
+    this.serviceApi.GetJumps(pageIndex * pageSize, pageIndex * pageSize + pageSize)
-        this.dataSourceTable.paginator = this.paginator;
+                   .subscribe((data) => {
-        this.paginator.pageSize
+                     this.dataSourceTable.data = data.rows;
-        this.resultsLength = data.length;
+                     setTimeout(() => {
-      }, 500);
+                       this.paginator.length = data.count;
-    });
+                       this.paginator.pageIndex = pageIndex;
+                       this.isLoading = false;
+                     }, 500);
+                   });
   }
 
   openDialog(item: Jump, editMode: boolean) {
-    this.dialog.open(JumpInfosComponent, 
+    this.dialog.open(JumpInfosComponent, {
-                     { data: { "jump": item, "editMode": editMode},
+      data: { jump: item, editMode: editMode },
-                       maxHeight: "400px",
+      maxHeight: "400px",
-                       minWidth: "350px"
+      minWidth: "350px",
-                     });
+    });
   }
 
   delete(item: Jump) {
-    let data : Array<Jump> = this.dataSourceTable.data;
+    let data: Array<Jump> = this.dataSourceTable.data;
-    data = data.filter(d => d.id !== item.id);
+    data = data.filter((d) => d.id !== item.id);
-    
+
     this.dataSourceTable.data = data;
-    this.resultsLength = data.length;
 
     this.serviceApi.DeleteJump(item);
     this.statsService.resetStats();
   }
 
+  pageChanged(event: PageEvent) {
+    this.getListOfJumps(event.pageSize, event.pageIndex);
+  }
+
   private updateTitle() {
-    this.translateService.get("ListJumps_Title").subscribe(
+    this.translateService.get("ListJumps_Title").subscribe((data) => {
-      data => { this.serviceComm.UpdatedComponentTitle(data); }
+      this.serviceComm.UpdatedComponentTitle(data);
-    );
+    });
   }
 }

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

@@ -0,0 +1,19 @@
+import { JumpResp, Jump } from "./jump";
+
+export class JumpListResp {
+  constructor(data: any) {
+    Object.assign(this, data);
+  }
+
+  public count: number;
+  public rows: Array<JumpResp>;
+}
+
+export class JumpList {
+  constructor(data: any) {
+    Object.assign(this, data);
+  }
+
+  public count: number;
+  public rows: Array<Jump>;
+}

Front/skydivelogs-app/src/services/jump.service.ts

@@ -5,6 +5,7 @@ import { forkJoin, Observable, of } from "rxjs";
 import { map } from "rxjs/operators";
 
 import { JumpResp, JumpReq, Jump } from "../models/jump";
+import { JumpListResp, JumpList } from "../models/jumpList";
 import { GearResp } from "../models/gear";
 import { DropZoneResp } from "../models/dropzone";
 import { AircraftResp } from "../models/aircraft";
@@ -39,6 +40,19 @@ export class JumpService extends BaseService {
                       }));
   }
 
+  public GetJumps(beginIndex: number, endIndex: number): Observable<JumpList> {
+    return this.http.get<JumpListResp>(`${this.apiUrl}/Jump/${beginIndex}/${endIndex}`, 
+                                        { headers: this.headers })
+                    .pipe(map((response) => {
+                      let result: JumpList = {
+                        rows : this.MapWithDataInCache(response.rows),
+                        count : response.count
+                      };
+
+                      return new JumpList(result);
+                    }));
+  }
+
   public AddListOfJump(selectedJumpType: number,
                        selectedAircraft: number,
                        selectedDz: number,