src/app/components/item-list-planet/item-list-planet.component.ts
componente base per la visualizzazione dei pianeti
| selector | app-item-list-planet |
| styleUrls | item-list-planet.component.css |
| templateUrl | ./item-list-planet.component.html |
Properties |
|
Methods |
|
constructor(apiService: ApiService, route: ActivatedRoute)
|
|||||||||
|
Aggancio un observer ai paramtri ricevuti in path, ogni volta che cambiano effettuo un caricamento diverso per la prima pagina almeno
Parameters :
|
| Public loadDataAndConfigureTable | ||||||
loadDataAndConfigureTable(event: LazyLoadEvent)
|
||||||
|
Caricamento e configurazione tabella principale
Parameters :
Returns :
void
|
| Public displayModalPannel |
displayModalPannel(item: any, type: string)
|
|
Inherited from
ItemListBase
|
|
Defined in ItemListBase:53
|
|
Visualizza la modale con le info dell'object richiesto
Returns :
void
|
| Public resetModal | ||||||
resetModal(Event: Event)
|
||||||
|
Inherited from
ItemListBase
|
||||||
|
Defined in ItemListBase:41
|
||||||
|
Reseta la modal sull'evento di chiusura dello stesso
Parameters :
Returns :
void
|
| Public loadData |
loadData:
|
Type : Planet[]
|
|
Oggetti Caricati |
| Public mainUrl |
mainUrl:
|
Type : string
|
Default value : 'planets'
|
|
Oggeto api chiamate e titolo della pagina |
| Public currentPage |
currentPage:
|
Type : number
|
Default value : 1
|
|
Inherited from
ItemListBase
|
|
Defined in ItemListBase:23
|
|
Pagina corrente |
| Public customFields |
customFields:
|
|
Inherited from
ItemListBase
|
|
Defined in ItemListBase:30
|
|
Campi custom da visualizzare |
| Public displayModalDetail |
displayModalDetail:
|
Default value : false
|
|
Inherited from
ItemListBase
|
|
Defined in ItemListBase:33
|
| Public loading |
loading:
|
Default value : true
|
|
Inherited from
ItemListBase
|
|
Defined in ItemListBase:17
|
|
Variabile di caricamento |
| Public modalItem |
modalItem:
|
|
Inherited from
ItemListBase
|
|
Defined in ItemListBase:32
|
| Public modalType |
modalType:
|
Type : string
|
|
Inherited from
ItemListBase
|
|
Defined in ItemListBase:34
|
| Public totalRecords |
totalRecords:
|
Type : number
|
|
Inherited from
ItemListBase
|
|
Defined in ItemListBase:11
|
|
Numero totale dei record proveniente dalle api |
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ApiService } from '../../services/api.service';
import { LazyLoadEvent } from 'primeng/primeng';
import { Planet } from '../../models/planet.model';
import { ItemListBase } from '../item-list-base';
/**
* componente base per la visualizzazione dei pianeti
*
* @export
* @class ItemListPlanetComponent
* @extends {ItemListBase}
*/
@Component({
selector: 'app-item-list-planet',
templateUrl: './item-list-planet.component.html',
styleUrls: ['./item-list-planet.component.css']
})
export class ItemListPlanetComponent extends ItemListBase {
/**
* Oggetti Caricati
*
* @type {Planet[]}
* @memberof ItemListPlanetComponent
*/
public loadData: Planet[];
/**
* Oggeto api chiamate e titolo della pagina
*
* @memberof ItemListPlanetComponent
*/
public mainUrl = 'planets';
/**
*Aggancio un observer ai paramtri ricevuti in path, ogni volta che cambiano effettuo un caricamento diverso per la prima pagina almeno
* @param {ApiService} apiService
* @param {ActivatedRoute} route
* @memberof ItemListComponent
*/
constructor(private apiService: ApiService, private route: ActivatedRoute) {
super();
}
/**
*Caricamento e configurazione tabella principale
*
* @public
* @memberof ItemListComponent
*/
public loadDataAndConfigureTable(event: LazyLoadEvent) {
this.currentPage = event.first / event.rows;
if (this.currentPage === 0) {
this.currentPage = 1;
} else {
this.currentPage++;
}
this.loading = true;
this.apiService.getUrlPages(this.currentPage, this.mainUrl).then(data => {
data.results.forEach(d => this.apiService.elaborateLookup(d));
this.loadData = data.results;
this.totalRecords = data.count;
this.loading = false;
});
}
}
<p-table [value]="loadData" [totalRecords]="totalRecords" [paginator]="true" [rows]="10" [loading]="loading" [lazy]="true"
(onLazyLoad)="loadDataAndConfigureTable($event)" [paginator]="true" [responsive]="true">
<ng-template pTemplate="caption">
<div class="ui-g">
<div class="ui-g-2">
</div>
<div class="ui-g-8">
<span class="headerTable">{{mainUrl}}</span>
</div>
<div class="ui-g-2"></div>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th>
Name
</th>
<th>
Climate
</th>
<th style="width: 80px;">
Diameter
</th>
<th>
Gravity
</th>
<th style="width: 80px;">
Orbital Period
</th>
<th>
Population
</th>
<th style="width: 80px;">
Rotation
</th>
<th style="width: 80px;">
Surface Water
</th>
<th>
Terrain
</th>
<th>
Residents
</th>
<th>
Film
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-item>
<tr>
<td class="main">
{{item.name}}
</td>
<td>
{{item.climate}}
</td>
<td class="center">
{{item.diameter}}
</td>
<td class="center">
{{item.gravity}}
</td>
<td class="center">
{{item.orbital_period}}
</td>
<td class="center">
{{item.population}}
</td>
<td class="center">
{{item.rotation_period}}
</td>
<td class="center">
{{item.surface_water}}
</td>
<td>
{{item.terrain}}
</td>
<td>
<ul class="nobullet">
<li *ngFor="let ss of item.residentsObj">
<a class="pointer" (click)="displayModalPannel(ss,'people')">
<img src="/assets/i.png">{{ss.name}}</a>
</li>
</ul>
</td>
<td>
<ul class="nobullet">
<li *ngFor="let ss of item.filmsObj">
<a class="pointer" (click)="displayModalPannel(ss,'film')">
<img src="/assets/i.png">{{ss.title}}</a>
</li>
</ul>
</td>
</tr>
</ng-template>
</p-table>
<app-item-details (onChiudi)="resetModal($event)" [objecttype]="modalType" [modalItem]="modalItem" [displayModal]="displayModalDetail"></app-item-details>