Skip to content

Instantly share code, notes, and snippets.

@AlbertFX91
Created August 9, 2017 11:06
Show Gist options
  • Save AlbertFX91/e3156fd9a150b27b3b02c403fc40fc21 to your computer and use it in GitHub Desktop.
Save AlbertFX91/e3156fd9a150b27b3b02c403fc40fc21 to your computer and use it in GitHub Desktop.
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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment