Unverified Commit b81a7224 authored by Flávio Fernandes's avatar Flávio Fernandes Committed by GitHub
Browse files

Add pagination to leaderboards view. (#1057)

parent bb1a2534

console/ui/src/app/leaderboards/leaderboards.component.html

+15 −2
Original line number Diff line number Diff line 


<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">{{leaderboards.length}} leaderboards found.</h6>

      <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">

console/ui/src/app/leaderboards/leaderboards.component.ts

+43 −6
Original line number Diff line number Diff line
@@ -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'})