src/app/components/item-list-starship/item-list-starship.component.ts
Gestione elenco delle starship
| selector | app-item-list-starship |
| styleUrls | item-list-starship.component.css |
| templateUrl | ./item-list-starship.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 : Starship[]
|
|
Oggetti caricati |
| Public mainUrl |
mainUrl:
|
Type : string
|
Default value : 'starships'
|
|
Url caricamento 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 } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ApiService } from '../../services/api.service';
import { LazyLoadEvent } from 'primeng/primeng';
import { Starship } from '../../models/starship.model';
import { ItemListBase } from '../item-list-base';
/**
* Gestione elenco delle starship
*
* @export
* @class ItemListStarshipComponent
* @extends {ItemListBase}
*/
@Component({
selector: 'app-item-list-starship',
templateUrl: './item-list-starship.component.html',
styleUrls: ['./item-list-starship.component.css']
})
export class ItemListStarshipComponent extends ItemListBase {
/**
* Oggetti caricati
*
* @type {Starship[]}
* @memberof ItemListStarshipComponent
*/
public loadData: Starship[];
/**
* Url caricamento e titolo della pagina
*
* @memberof ItemListStarshipComponent
*/
public mainUrl = 'starships';
/**
*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>
Model
</th>
<th>
Class
</th>
<th>
Cargo Capacity
</th>
<th>
Cost in credits
</th>
<th>Crew</th>
<th>
Consumables
</th>
<th>
Length
</th>
<th>
Max atmosphering speed
</th>
<th>
Pilots
</th>
<th>
Film
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-item>
<tr>
<td class="main">
{{item.name}}
</td>
<td class="center">
{{item.model}}
</td>
<td class="center">
{{item.vehicle_class}}
</td>
<td class="center" style="width: 80px;">
{{item.cargo_capacity}}
</td>
<td class="center">
{{item.cost_in_credits}}
</td>
<td class="center" style="width: 80px;">
{{item.crew}}
</td>
<td class="center">
{{item.consumables}}
</td>
<td class="center" style="width: 80px;">
{{item.length}}
</td>
<td class="center">
{{item.max_atmosphering_speed}}
</td>
<td>
<ul class="nobullet">
<li *ngFor="let ss of item.pilotsObj">
<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>