src/app/components/item-list-film/item-list-film.component.ts
Componente per la visualizzazione dell'elenco dei Film
| selector | app-item-list-film |
| styleUrls | item-list-film.component.css |
| templateUrl | ./item-list-film.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 : Film[]
|
|
Caricamento dei dati |
| Public mainUrl |
mainUrl:
|
Type : string
|
Default value : 'films'
|
|
Url principale 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 { Film } from '../../models/film.model';
import { ItemListBase } from '../item-list-base';
/**
* Componente per la visualizzazione dell'elenco dei Film
*
* @export
* @class ItemListFilmComponent
* @extends {ItemListBase}
*/
@Component({
selector: 'app-item-list-film',
templateUrl: './item-list-film.component.html',
styleUrls: ['./item-list-film.component.css']
})
export class ItemListFilmComponent extends ItemListBase {
/**
*Caricamento dei dati
*
* @type {Film[]}
* @memberof ItemListFilmComponent
*/
public loadData: Film[];
/**
*Url principale e titolo della pagina
*
* @memberof ItemListFilmComponent
*/
public mainUrl = 'films';
/**
*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 style="font-size: 0.8em">
<th style="width:120px;">
Title
</th>
<th style="width:100px;">
Director
</th>
<th style="width:40px;">
Ep
</th>
<th>
Opening crawl
</th>
<th style="width:120px;">
Producer
</th>
<th tyle="width:20px;">
Release
</th>
<th style="width:90px;">
Species
</th>
<th>
Characters
</th>
<th style="width:80px;">
Planets
</th>
<th>
Vehicles
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-item>
<tr>
<td class="main">
{{item.title}}
</td>
<td>
{{item.director}}
</td>
<td style="text-align: center;">
{{item.episode_id}}
</td>
<td class="reducetext" pTooltip="{{item.opening_crawl}}" tooltipPosition="right">
{{item.opening_crawl}}
</td>
<td>
{{item.producer}}
</td>
<td style="text-align: center;">
{{item.release_date}}
</td>
<td>
<ul class="nobullet">
<li *ngFor="let ss of item.speciesObj">
<a (click)="displayModalPannel(ss,'specie')" class="pointer">
<img src="/assets/i.png"> {{ss.name}}</a>
</li>
</ul>
</td>
<td>
<ul class="nobullet">
<li *ngFor="let ss of item.charactersObj">
<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.planetsObj">
<a class="pointer" (click)="displayModalPannel(ss,'planet')">
<img src="/assets/i.png">{{ss.name}}</a>
</li>
</ul>
</td>
<td>
<ul class="nobullet">
<li *ngFor="let ss of item.vehiclesObj">
<a class="pointer" (click)="displayModalPannel(ss,'veichle')">
<img src="/assets/i.png">{{ss.name}}</a>
</li>
</ul>
</td>
</tr>
</ng-template>
</p-table>
<app-item-details (onChiudi)="resetModal($event)" [objecttype]="modalType" [modalItem]="modalItem" [displayModal]="displayModalDetail"></app-item-details>