File

src/app/components/item-list-planet/item-list-planet.component.ts

Description

componente base per la visualizzazione dei pianeti

Extends

ItemListBase

Example

Metadata

selector app-item-list-planet
styleUrls item-list-planet.component.css
templateUrl ./item-list-planet.component.html

Index

Properties
Methods

Constructor

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 :
Name Type Optional
apiService ApiService no
route ActivatedRoute no

Methods

Public loadDataAndConfigureTable
loadDataAndConfigureTable(event: LazyLoadEvent)

Caricamento e configurazione tabella principale

Parameters :
Name Type Optional
event LazyLoadEvent no
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

Parameters :
Name Type Optional
item any no
type string no
Returns : void
Public resetModal
resetModal(Event: Event)
Inherited from ItemListBase
Defined in ItemListBase:41

Reseta la modal sull'evento di chiusura dello stesso

Parameters :
Name Type Optional
Event Event no
Returns : void

Properties

Public loadData
loadData: Planet[]
Type : Planet[]

Oggetti Caricati

Public mainUrl
mainUrl: string
Type : string
Default value : 'planets'

Oggeto api chiamate e titolo della pagina

Public currentPage
currentPage: number
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: string
Type : string
Inherited from ItemListBase
Defined in ItemListBase:34
Public totalRecords
totalRecords: number
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>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""