Update to retrieve the jumps page by page.

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 { MatPaginator } from '@angular/material/paginator';
-import { MatTableDataSource } from '@angular/material/table';
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { MatPaginator, PageEvent } from "@angular/material/paginator";
+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 { Jump } from '../../models/jump';
-import { JumpService } from '../../services/jump.service';
-import { ServiceComm } from '../../services/service-comm.service';
+import { AddAction } from "../../models/add-action.enum";
+import { Jump } from "../../models/jump";
+import { JumpService } from "../../services/jump.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',
-  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 displayedColumns: Array<string> = [
-    'infos',
-    'id',
-    'jumpDate',
-    'jumpType',
-    'aircraft',
-    'dropZone',
-    'actions'
+    "infos",
+    "id",
+    "jumpDate",
+    "jumpType",
+    "aircraft",
+    "dropZone",
+    "actions",
   ];
-  public dataSourceTable;
-  public resultsLength = 0;
+  public dataSourceTable: MatTableDataSource<Jump> = new MatTableDataSource();
   @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)=> {
-      if (data === true){
+    this.serviceComm.forceTranslateTitle.subscribe((data) => {
+      if (data === true) {
         this.updateTitle();
       }
     });
-    
+
     this.updateTitle();
     this.getListOfJumps();
   }
 
-  getListOfJumps() {
-    this.serviceApi.GetListOfJumps().subscribe(data => {
-      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;
-        });
+  getListOfJumps(pageSize: number = 20, pageIndex: number = 0) {
+    this.isLoading = true;
 
-        this.dataSourceTable = new MatTableDataSource<Jump>(data);
-        this.dataSourceTable.paginator = this.paginator;
-        this.paginator.pageSize
-        this.resultsLength = data.length;
-      }, 500);
-    });
+    this.serviceApi.GetJumps(pageIndex * pageSize, pageIndex * pageSize + pageSize)
+                   .subscribe((data) => {
+                     this.dataSourceTable.data = data.rows;
+                     setTimeout(() => {
+                       this.paginator.length = data.count;
+                       this.paginator.pageIndex = pageIndex;
+                       this.isLoading = false;
+                     }, 500);
+                   });
   }
 
   openDialog(item: Jump, editMode: boolean) {
-    this.dialog.open(JumpInfosComponent, 
-                     { data: { "jump": item, "editMode": editMode},
-                       maxHeight: "400px",
-                       minWidth: "350px"
-                     });
+    this.dialog.open(JumpInfosComponent, {
+      data: { jump: item, editMode: editMode },
+      maxHeight: "400px",
+      minWidth: "350px",
+    });
   }
 
   delete(item: Jump) {
-    let data : Array<Jump> = this.dataSourceTable.data;
-    data = data.filter(d => d.id !== item.id);
-    
+    let data: Array<Jump> = this.dataSourceTable.data;
+    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(
-      data => { this.serviceComm.UpdatedComponentTitle(data); }
-    );
+    this.translateService.get("ListJumps_Title").subscribe((data) => {
+      this.serviceComm.UpdatedComponentTitle(data);
+    });
   }
 }