Skip to content

Commit

Permalink
Fixed #9717 - New Lazy Table Demo with Remote Source
Browse files Browse the repository at this point in the history
  • Loading branch information
@yigitfindikli
yigitfindikli committed Jan 6, 2021
1 parent 3909c9c commit 66e91e0
Show file tree
Hide file tree
Showing 5 changed files with 108 additions and 56 deletions.
114 changes: 81 additions & 33 deletions src/app/showcase/components/table/tablelazydemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,39 @@ <h1>Table <span>Lazy</span></h1>

<div class="content-section implementation">
<div class="card">
<p-table [value]="customers" [lazy]="true" (onLazyLoad)="loadCustomers($event)"
[paginator]="true" [rows]="10" [totalRecords]="totalRecords" [loading]="loading">
<p-table [value]="customers" [lazy]="true" (onLazyLoad)="loadCustomers($event)"
[paginator]="true" [rows]="10" [totalRecords]="totalRecords" [loading]="loading" [globalFilterFields]="['name','country.name', 'company', 'representative.name']">
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Country</th>
<th>Company</th>
<th>Representative</th>
<th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
<th pSortableColumn="country.name">Country <p-sortIcon field="country.name"></p-sortIcon></th>
<th pSortableColumn="company">Company <p-sortIcon field="company"></p-sortIcon></th>
<th pSortableColumn="representative.name">Representative <p-sortIcon field="representative.name"></p-sortIcon></th>
</tr>
<tr>
<th>
<p-columnFilter type="text" field="name"></p-columnFilter>
</th>
<th>
<p-columnFilter type="text" field="country.name"></p-columnFilter>
</th>
<th>
<p-columnFilter type="text" field="company"></p-columnFilter>
</th>
<th>
<p-columnFilter field="representative" matchMode="in" [showMenu]="false">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
<ng-template let-option pTemplate="item">
<div class="p-multiselect-representative-option">
<img [alt]="option.label" src="assets/showcase/images/demo/avatar/{{option.image}}" width="32" style="vertical-align: middle" />
<span class="p-ml-1">{{option.name}}</span>
</div>
</ng-template>
</p-multiSelect>
</ng-template>
</p-columnFilter>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
Expand All @@ -41,14 +66,39 @@ <h1>Table <span>Lazy</span></h1>
</a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-table [value]="customers" [lazy]="true" (onLazyLoad)="loadCustomers($event)"
[paginator]="true" [rows]="10" [totalRecords]="totalRecords" [loading]="loading"&gt;
&lt;p-table [value]="customers" [lazy]="true" (onLazyLoad)="loadCustomers($event)"
[paginator]="true" [rows]="10" [totalRecords]="totalRecords" [loading]="loading" [globalFilterFields]="['name','country.name', 'company', 'representative.name']"&gt;
&lt;ng-template pTemplate="header"&gt;
&lt;tr&gt;
&lt;th&gt;Name&lt;/th&gt;
&lt;th&gt;Country&lt;/th&gt;
&lt;th&gt;Company&lt;/th&gt;
&lt;th&gt;Representative&lt;/th&gt;
&lt;th pSortableColumn="name"&gt;Name &lt;p-sortIcon field="name"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
&lt;th pSortableColumn="country.name"&gt;Country &lt;p-sortIcon field="country.name"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
&lt;th pSortableColumn="company"&gt;Company &lt;p-sortIcon field="company"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
&lt;th pSortableColumn="representative.name"&gt;Representative &lt;p-sortIcon field="representative.name"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th&gt;
&lt;p-columnFilter type="text" field="name"&gt;&lt;/p-columnFilter&gt;
&lt;/th&gt;
&lt;th&gt;
&lt;p-columnFilter type="text" field="country.name"&gt;&lt;/p-columnFilter&gt;
&lt;/th&gt;
&lt;th&gt;
&lt;p-columnFilter type="text" field="company"&gt;&lt;/p-columnFilter&gt;
&lt;/th&gt;
&lt;th&gt;
&lt;p-columnFilter field="representative" matchMode="in" [showMenu]="false"&gt;
&lt;ng-template pTemplate="filter" let-value let-filter="filterCallback"&gt;
&lt;p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name"&gt;
&lt;ng-template let-option pTemplate="item"&gt;
&lt;div class="p-multiselect-representative-option"&gt;
&lt;img [alt]="option.label" src="assets/showcase/images/demo/avatar/&#123;&#123;option.image&#125;&#125;" width="32" style="vertical-align: middle" /&gt;
&lt;span class="p-ml-1"&gt;&#123;&#123;option.name&#125;&#125;&lt;/span&gt;
&lt;/div&gt;
&lt;/ng-template&gt;
&lt;/p-multiSelect&gt;
&lt;/ng-template&gt;
&lt;/p-columnFilter&gt;
&lt;/th&gt;
&lt;/tr&gt;
&lt;/ng-template&gt;
&lt;ng-template pTemplate="body" let-customer&gt;
Expand All @@ -64,57 +114,55 @@ <h1>Table <span>Lazy</span></h1>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123; Component, OnInit &#125; from '@angular/core';
import &#123; Customer &#125; from '../../domain/customer';
import &#123; Customer, Representative &#125; from '../../domain/customer';
import &#123; CustomerService &#125; from '../../service/customerservice';
import &#123; LazyLoadEvent &#125; from 'primeng/api';
import &#123; FilterMetadata &#125; from 'primeng/api';

@Component(&#123;
templateUrl: './tablelazydemo.html'
&#125;)
export class TableLazyDemo implements OnInit &#123;

datasource: Customer[];

customers: Customer[];

totalRecords: number;

cols: any[];

loading: boolean;

representatives: Representative[];

constructor(private customerService: CustomerService) &#123; &#125;

ngOnInit() &#123;
//datasource imitation
this.customerService.getCustomersLarge().then(data =&gt; &#123;
this.datasource = data;
this.totalRecords = data.length;
&#125;);
this.representatives = [
&#123;name: "Amy Elsner", image: 'amyelsner.png'&#125;,
&#123;name: "Anna Fali", image: 'annafali.png'&#125;,
&#123;name: "Asiya Javayant", image: 'asiyajavayant.png'&#125;,
&#123;name: "Bernardo Dominic", image: 'bernardodominic.png'&#125;,
&#123;name: "Elwin Sharvill", image: 'elwinsharvill.png'&#125;,
&#123;name: "Ioni Bowcher", image: 'ionibowcher.png'&#125;,
&#123;name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'&#125;,
&#123;name: "Onyama Limba", image: 'onyamalimba.png'&#125;,
&#123;name: "Stephen Shaw", image: 'stephenshaw.png'&#125;,
&#123;name: "Xuxue Feng", image: 'xuxuefeng.png'&#125;
];

this.loading = true;
&#125;

loadCustomers(event: LazyLoadEvent) &#123;
this.loading = true;

//in a real application, make a remote request to load data using state metadata from event
//event.first = First row offset
//event.rows = Number of rows per page
//event.sortField = Field name to sort with
//event.sortOrder = Sort order as number, 1 for asc and -1 for dec
//filters: FilterMetadata object having field as key and filter value, filter matchMode as value

//imitate db connection over a network
setTimeout(() =&gt; &#123;
if (this.datasource) &#123;
this.customers = this.datasource.slice(event.first, (event.first + event.rows));
this.customerService.getCustomers(&#123;lazyEvent: JSON.stringify(event)&#125;).then(res =&gt; &#123;
this.customers = res.customers;
this.totalRecords = res.totalRecords;
this.loading = false;
&#125;
&#125;)
&#125;, 1000);
&#125;

&#125;
</app-code>

Expand Down
40 changes: 19 additions & 21 deletions src/app/showcase/components/table/tablelazydemo.ts
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,51 @@
import { Component, OnInit } from '@angular/core';
import { Customer } from '../../domain/customer';
import { Customer, Representative } from '../../domain/customer';
import { CustomerService } from '../../service/customerservice';
import { LazyLoadEvent } from 'primeng/api';
import { FilterMetadata } from 'primeng/api';

@Component({
templateUrl: './tablelazydemo.html'
})
export class TableLazyDemo implements OnInit {

datasource: Customer[];

customers: Customer[];

totalRecords: number;

cols: any[];

loading: boolean;

representatives: Representative[];

constructor(private customerService: CustomerService) { }

ngOnInit() {
//datasource imitation
this.customerService.getCustomersLarge().then(data => {
this.datasource = data;
this.totalRecords = data.length;
});
this.representatives = [
{name: "Amy Elsner", image: 'amyelsner.png'},
{name: "Anna Fali", image: 'annafali.png'},
{name: "Asiya Javayant", image: 'asiyajavayant.png'},
{name: "Bernardo Dominic", image: 'bernardodominic.png'},
{name: "Elwin Sharvill", image: 'elwinsharvill.png'},
{name: "Ioni Bowcher", image: 'ionibowcher.png'},
{name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'},
{name: "Onyama Limba", image: 'onyamalimba.png'},
{name: "Stephen Shaw", image: 'stephenshaw.png'},
{name: "Xuxue Feng", image: 'xuxuefeng.png'}
];

this.loading = true;
}

loadCustomers(event: LazyLoadEvent) {
this.loading = true;

//in a real application, make a remote request to load data using state metadata from event
//event.first = First row offset
//event.rows = Number of rows per page
//event.sortField = Field name to sort with
//event.sortOrder = Sort order as number, 1 for asc and -1 for dec
//filters: FilterMetadata object having field as key and filter value, filter matchMode as value

//imitate db connection over a network
setTimeout(() => {
if (this.datasource) {
this.customers = this.datasource.slice(event.first, (event.first + event.rows));
this.customerService.getCustomers({lazyEvent: JSON.stringify(event)}).then(res => {
this.customers = res.customers;
this.totalRecords = res.totalRecords;
this.loading = false;
}
})
}, 1000);
}

}
4 changes: 4 additions & 0 deletions src/app/showcase/service/customerservice.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { Customer } from '../domain/customer';

@Injectable()
Expand Down Expand Up @@ -35,4 +36,7 @@ export class CustomerService {
.then(data => { return data; });
}

getCustomers(params) {
return this.http.get<any>(environment.apiUrl, {params: params}).toPromise();
}
}
3 changes: 2 additions & 1 deletion src/environments/environment.prod.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export const environment = {
production: true
production: true,
apiUrl: 'https://www.primefaces.org/data/customers'
};
3 changes: 2 additions & 1 deletion src/environments/environment.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
// The list of file replacements can be found in `angular.json`.

export const environment = {
production: false
production: false,
apiUrl: 'https://www.primefaces.org/data/customers'
};

/*
Expand Down

0 comments on commit 66e91e0

Please sign in to comment.