src/app/components/item-list-specie/item-list-specie.component.ts
Gestione caricamento oggetto specie
| selector | app-item-list-specie |
| styleUrls | item-list-specie.component.css |
| templateUrl | ./item-list-specie.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 : Specie[]
|
|
Oggetti caricati |
| Public mainUrl |
mainUrl:
|
Type : string
|
Default value : 'species'
|
|
Indirizzo API 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 { Specie } from '../../models/specie.model';
import { ItemListBase } from '../item-list-base';
/**
* Gestione caricamento oggetto specie
*
* @export
* @class ItemListSpecieComponent
* @extends {ItemListBase}
*/
@Component({
selector: 'app-item-list-specie',
templateUrl: './item-list-specie.component.html',
styleUrls: ['./item-list-specie.component.css']
})
export class ItemListSpecieComponent extends ItemListBase {
/**
* Oggetti caricati
*
* @type {Specie[]}
* @memberof ItemListSpecieComponent
*/
public loadData: Specie[];
/**
*Indirizzo API e titolo della pagina
*
* @memberof ItemListSpecieComponent
*/
public mainUrl = 'species';
/**
*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 style="width: 80px;">
Average height
</th>
<th style="width: 80px;">
Average lifespan
</th>
<th>
Classification
</th>
<th style="width: 80px;">
Designation
</th>
<th style="width: 80px;">
skin colors
</th>
<th style="width: 80px;">
eye colors
</th>
<th style="width: 80px;">
hair colors
</th>
<th>
Homeworld
</th>
<th>
Language
</th>
<th>
People
</th>
<th>
Film
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-item>
<tr>
<td class="main">
{{item.name}}
</td>
<td class="center">
{{item.average_height}}
</td>
<td class="center">
{{item.average_lifespan}}
</td>
<td class="center">
{{item.classification}}
</td>
<td class="center">
{{item.designation}}
</td>
<td class="center">
{{item.skin_colors}}
</td>
<td class="center">
{{item.eye_colors}}
</td>
<td class="center">
{{item.hair_colors}}
</td>
<td class="center">
<a class="pointer" (click)="displayModalPannel(item.homeworldObj,'planet')">
<img src="/assets/i.png">{{item.homeworldObj?.name}}</a>
</td>
<td class="center">
{{item.language}}
</td>
<td>
<ul class="nobullet">
<li *ngFor="let ss of item.peoplesObj">
<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>