File

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

Description

Gestione elenco delle starship

Extends

ItemListBase

Example

Metadata

selector app-item-list-starship
styleUrls item-list-starship.component.css
templateUrl ./item-list-starship.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: Starship[]
Type : Starship[]

Oggetti caricati

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

Url caricamento 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 } 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>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""