SFM-Broker/src/app/list-all-rewards/list-all-rewards.component.ts

import { Component, OnInit } from '@angular/core';
import {AuthService} from '../service/auth.service';
import {HttpClient} from '@angular/common/http';
import {RewardByUserModel} from '../models/reward-by-user.model';
import {DataStateChangeEvent, GridDataResult,} from '@progress/kendo-angular-grid';
import {State, process} from '@progress/kendo-data-query';

@Component({
  selector: 'app-list-all-rewards',
  templateUrl: './list-all-rewards.component.html',
  styleUrls: ['./list-all-rewards.component.scss']
})
export class ListAllRewardsComponent implements OnInit {


  public gridData: RewardByUserModel[] = [] ;
  public gridView: GridDataResult;
  public state: State = {
    skip: 0,
    take: 20
  };
  public loading = true;

  constructor(private auth: AuthService, private http: HttpClient) { }

  ngOnInit(): void {
    this.loadInitRewardGrid();
  }


  public loadInitRewardGrid(): void {
    this.loading = true;
    this.gridData = [];
    this.http.get<RewardByUserModel[]>(this.auth.getUrl('user-reward/')).subscribe(
      rsp => {
        this.loading = false;
        rsp.forEach(v => {
          this.gridData.push(new RewardByUserModel(v));
        });
        this.loadRewards();
      }
    );
  }

  private loadRewards(): void {
    this.gridView = process(this.gridData, this.state);
  }

  public dataStateChange(state: DataStateChangeEvent): void {
    this.state = state;
    this.loadRewards();
  }

  private photoURL(peopleId: any): string {
    const url = this.auth.getUrl('avatar/') + peopleId;
    return 'url("' + url + '")';
  }
}