game.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs/Rx';
import { JhiEventManager, JhiParseLinks, JhiPaginationUtil, JhiLanguageService, JhiAlertService } from 'ng-jhipster';

import { Game } from './game.model';
import { GameService } from './game.service';
import { ITEMS_PER_PAGE, Principal, ResponseWrapper } from '../../shared';
import { PaginationConfig } from '../../blocks/config/uib-pagination.config';

@Component({
    selector: 'jhi-game',
    templateUrl: './game.component.html'
})
export class GameComponent implements OnInit, OnDestroy {
    // The games to be listed
    games: Game[];
    // The current account logued
    currentAccount: any;
    eventSubscriber: Subscription;
    // The number of items to list per page
    itemsPerPage: number;
    /*
     * This is used to get the track of all the necessary data from pagination
     * { next: <next page>, prev: <previous page>, last: <last page>, first: <first page> }
     * Its used principaly for stop the autoscroll component
     */
    links: any;
    // Number of page
    page: any;
    // Key to sort by
    predicate: any;
    // It's not used lol
    queryCount: any;
    // Asc or Desc
    reverse: any;
    // This store the number of totalItems stored in database. We can get 10 items in the client, but we get the track of the total of them
    totalItems: number;

    constructor(
        private gameService: GameService,
        // Service to log an error
        private alertService: JhiAlertService,
        private eventManager: JhiEventManager,
        // Used to parse the header's property 'link' to get the track of the pages to paginate
        private parseLinks: JhiParseLinks,
        // Current user logued
        private principal: Principal
    ) {
        this.games = [];
        this.itemsPerPage = ITEMS_PER_PAGE;
        this.page = 0;
        this.links = {
            last: 0
        };
        this.predicate = 'id';
        this.reverse = true;
    }

    ngOnInit() {
        // First, we load the data
        this.loadAll();
        // Second, we get the current data account
        this.principal.identity().then((account) => {
            this.currentAccount = account;
        });
        this.registerChangeInGames();
    }

    ngOnDestroy() {
        this.eventManager.destroy(this.eventSubscriber);
    }

    loadAll() {
        // We prepared the query object
        this.gameService.query({
            page: this.page,
            size: this.itemsPerPage,
            // The key to sort by, and ASC or DESC
            sort: this.sort()
        }).subscribe(
            (res: ResponseWrapper) => this.onSuccess(res.json, res.headers),
            (res: ResponseWrapper) => this.onError(res.json)
        );
    }

    reset() {
        this.page = 0;
        this.games = [];
        this.loadAll();
    }

    loadPage(page) {
        this.page = page;
        this.loadAll();
    }

    // It uses trackBy just for perfomance optimization and its not necessary used. Its used by ngFor directive. http://blog.angular-university.io/angular-2-ngfor/#whentousetrackby
    trackId(index: number, item: Game) {
        return item.id;
    }
    registerChangeInGames() {
        this.eventSubscriber = this.eventManager.subscribe('gameListModification', (response) => this.reset());
    }

    sort() {
        // This is used to create the param sort for the query
        const result = [this.predicate + ',' + (this.reverse ? 'asc' : 'desc')];
        if (this.predicate !== 'id') {
            result.push('id');
        }
        return result;
    }

    private onSuccess(data, headers) {
        // this function parse the link of the headers to get the previous page, the first page, the last page and the next page
        this.links = this.parseLinks.parse(headers.get('link'));
        // We get the total count of items in server
        this.totalItems = headers.get('X-Total-Count');
        for (let i = 0; i < data.length; i++) {
            // We push the new data, persisting the previous games loaded
            this.games.push(data[i]);
        }
    }

    private onError(error) {
        // Call alertService error handle
        this.alertService.error(error.message, null, null);
    }
}