Add pagination to leaderboards view

heroiclabs · Jul 14, 2023 · 9eeefdd · 9eeefdd
1 parent bb1a253
commit 9eeefdd
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 8 deletions.
diff --git a/console/ui/src/app/leaderboards/leaderboards.component.html b/console/ui/src/app/leaderboards/leaderboards.component.html
@@ -1,5 +1,18 @@
-<h2 class="pb-1">Leaderboards</h2>
-<h6 class="pb-4">{{leaderboards.length}} leaderboards found.</h6>
+
+<div class="row no-gutters">
+  <div class="col d-flex justify-content-between no-gutters align-items-center">
+    <div class="col-md-9">
+      <h2 class="pb-1">Leaderboards</h2>
+      <h6 class="pb-4">{{leaderboardsCount}} leaderboards found.</h6>
+    </div>
+    <div class="col-md-3 justify-content-end text-right">
+        <div class="btn-group page-btns" role="group" aria-label="Basic example">
+          <button type="button" class="btn btn-outline-secondary" (click)="search(0)" [disabled]="leaderboards.length === 0"><img src="/static/svg/page-first.svg" alt="" width="20" height=""></button>
+          <button type="button" class="btn btn-outline-secondary" (click)="search(1)" [disabled]="nextCursor === ''"><img src="/static/svg/page-next.svg" alt="" width="20" height=""></button>
+        </div>
+    </div>
+  </div>
+</div>
 
 <ngb-alert [dismissible]="false" type="danger" *ngIf="error">
   <img src="/static/svg/red-triangle.svg" alt="" width="16" height="" class="mr-2">

diff --git a/console/ui/src/app/leaderboards/leaderboards.component.ts b/console/ui/src/app/leaderboards/leaderboards.component.ts
@@ -25,6 +25,9 @@ import {AuthenticationService} from '../authentication.service';
 export class LeaderboardsComponent implements OnInit {
   public error = '';
   public leaderboards: Array<Leaderboard> = [];
+
+  public nextCursor: string = "";
+  public leaderboardsCount: number = 0;
   public orderString = {
     0: 'Ascending',
     1: 'Descending',
@@ -44,12 +47,14 @@ export class LeaderboardsComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.route.data.subscribe(d => {
-      this.leaderboards.length = 0;
-      this.leaderboards.push(...d[0].leaderboards);
-    }, err => {
-      this.error = err;
-    });
+    const qp = this.route.snapshot.queryParamMap;
+    this.nextCursor = qp.get('cursor');
+
+    if (this.nextCursor && this.nextCursor !== '') {
+      this.search(1);
+    } else {
+      this.search(0);
+    }
   }
 
   deleteAllowed(): boolean {
@@ -64,6 +69,7 @@ export class LeaderboardsComponent implements OnInit {
     this.consoleService.deleteLeaderboard('', l.id).subscribe(() => {
       this.error = '';
       this.leaderboards.splice(i, 1);
+      this.leaderboardsCount--;
     }, err => {
       this.error = err;
     });
@@ -72,6 +78,37 @@ export class LeaderboardsComponent implements OnInit {
   viewLeaderboardEntries(l: Leaderboard): void {
     this.router.navigate(['/leaderboards', l.id], {relativeTo: this.route});
   }
+
+  search(state: number): void {
+    let cursor = '';
+    switch (state) {
+      case 0:
+        cursor = '';
+        break;
+      case 1:
+        cursor = this.nextCursor;
+        break;
+    }
+
+    this.consoleService.listLeaderboards('', cursor).subscribe(d => {
+      this.error = '';
+
+      this.leaderboards.length = 0;
+      this.leaderboards.push(...d.leaderboards);
+      this.leaderboardsCount = d.total;
+      this.nextCursor = d.cursor;
+
+      this.router.navigate([], {
+        relativeTo: this.route,
+        queryParams: {
+          cursor
+        },
+        queryParamsHandling: 'merge',
+      });
+    }, err => {
+      this.error = err;
+    });
+  }
 }
 
 @Injectable({providedIn: 'root'})