swaping documentation
  1. Components
  2. ItemListPeopleComponent

File

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

Description

Componente base per la visualizzazione dell'elenco dei personaggi

Extends

ItemListBase

Example

Metadata

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

Index

Properties
Methods

Constructor

constructor(apiService: ApiService, route: ActivatedRoute)
Defined in src/app/components/item-list-people/item-list-people.component.ts:32

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)
Defined in src/app/components/item-list-people/item-list-people.component.ts:49

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: People[]
Type : People[]
Defined in src/app/components/item-list-people/item-list-people.component.ts:26

Dati caricati
Public mainUrl
mainUrl: string
Type : string
Default value : 'people'
Defined in src/app/components/item-list-people/item-list-people.component.ts:32

Url di caricamento api e titolo 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 { People } from '../../models/people.model';
import { ItemListBase } from '../item-list-base';
/**
 * Componente base per la visualizzazione dell'elenco dei personaggi
 *
 * @export
 * @class ItemListPeopleComponent
 * @extends {ItemListBase}
 */
@Component({
  selector: 'app-item-list-people',
  templateUrl: './item-list-people.component.html',
  styleUrls: ['./item-list-people.component.css']
})
export class ItemListPeopleComponent extends ItemListBase {
  /**
   *Dati caricati
   *
   * @type {People[]}
   * @memberof ItemListPeopleComponent
   */
  public loadData: People[];
  /**
   *Url di caricamento api e titolo pagina
   *
   * @memberof ItemListPeopleComponent
   */
  public mainUrl = 'people';
  /**
   *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)" dataKey="name" [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.9em">
      <th>
        Name
      </th>
      <th>
        Birth Year
      </th>
      <th>
        Homeworld
      </th>
      <th>
        Species
      </th>

      <th>
        Height
      </th>
      <th>
        Hair Color
      </th>
      <th>
        Skin Color
      </th>
      <th>
        Eye Color
      </th>

      <th style="width: 3em"></th>

    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-item let-expanded="expanded" let-columns="columns">
    <tr>
      <td class="{{item.gender}}">

        <span class="main" *ngIf="item.name">
          {{item.name}}
        </span>

      </td>
      <td class="center" style="font-size: 0.9em">
        {{item.birth_year}}
      </td>

      <td>

        <a *ngIf="item.homeworldObj && item.homeworldObj.name" class="pointer" (click)="displayModalPannel(item.homeworldObj,'planet')">
          {{item.homeworldObj.name}}
          <img src="/assets/i.png">
        </a>

      </td>

      <td>
        <span *ngIf="item.speciesObj && item.speciesObj[0] && item.speciesObj[0].name">
          <a class="pointer" (click)="displayModalPannel(item.speciesObj[0],'specie')">
            {{item.speciesObj[0].name}}
            <img src="/assets/i.png">
          </a>
        </span>
      </td>
      <td class="center">
        {{item.height}}
      </td>
      <td class="center">
        {{item.hair_color}}
      </td>
      <td class="center">
        {{item.skin_color}}
      </td>
      <td class="center">
        {{item.eye_color}}
      </td>


      <td>
        <a href="#" [pRowToggler]="item">
          <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
        </a>
      </td>


    </tr>
  </ng-template>

  <ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
    <tr>
      <td [attr.colspan]="9">
        <div class="ui-g ui-fluid" style="background-color: aquamarine;">

          <div class=" ui-g-3 subtitle">
            Vehicles
          </div>
          <div class="ui-g-1"></div>

          <div class="ui-g-3 subtitle">
            Starship
          </div>

          <div class="ui-g-1"></div>

          <div class="ui-g-3 subtitle">
            Films
          </div>


          <div class="ui-g-3" style="text-align: left;">

            <ul class="nobullet" *ngIf="rowData.vehiclesObj">
              <li *ngFor="let ss of rowData.vehiclesObj">
                <a *ngIf="ss.name" class="pointer" (click)="displayModalPannel(ss, 'veichle')">
                  {{ss.name}}
                  <img src="/assets/i.png">
                </a>
              </li>
            </ul>
          </div>

          <div class="ui-g-1"></div>

          <div class="ui-g-3" style="text-align: left;">

            <ul class="nobullet" *ngIf="rowData.starshipsObj">
              <li *ngFor="let ss of rowData.starshipsObj">
                <a *ngIf="ss.name" class="pointer" (click)="displayModalPannel(rowData.starshipsObj[0], 'starship')">
                  {{ss.name}}
                  <img src="/assets/i.png">
                </a>
              </li>
            </ul>
          </div>

          <div class="ui-g-1"></div>

          <div class="ui-g-3" style="text-align: left;">

            <ul class="nobullet" *ngIf="rowData.filmsObj">
              <li *ngFor="let ss of rowData.filmsObj">
                <a *ngIf="ss.title" class="pointer" (click)="displayModalPannel(ss, 'film')">
                  {{ss.title}}
                  <img src="/assets/i.png">
                </a>
              </li>
            </ul>
          </div>

        </div>

      </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 ""