primeng
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [ • 13.6 kB
JavaScript
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Input, Output, ContentChild, ContentChildren, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ObjectUtils } from 'primeng/utils';
import { FilterService, Header, Footer, PrimeTemplate, SharedModule } from 'primeng/api';
import { PaginatorModule } from 'primeng/paginator';
class DataView {
constructor(el, cd, filterService) {
this.el = el;
this.cd = cd;
this.filterService = filterService;
this.pageLinks = 5;
this.paginatorPosition = 'bottom';
this.alwaysShowPaginator = true;
this.paginatorDropdownScrollHeight = '200px';
this.currentPageReportTemplate = '{currentPage} of {totalPages}';
this.showFirstLastIcon = true;
this.showPageLinks = true;
this.emptyMessage = 'No records found';
this.onLazyLoad = new EventEmitter();
this.trackBy = (index, item) => item;
this.loadingIcon = 'pi pi-spinner';
this.first = 0;
this.onPage = new EventEmitter();
this.onSort = new EventEmitter();
this.onChangeLayout = new EventEmitter();
this._layout = 'list';
}
get layout() {
return this._layout;
}
set layout(layout) {
this._layout = layout;
if (this.initialized) {
this.changeLayout(layout);
}
}
ngOnInit() {
if (this.lazy) {
this.onLazyLoad.emit(this.createLazyLoadMetadata());
}
this.initialized = true;
}
ngOnChanges(simpleChanges) {
if (simpleChanges.value) {
this._value = simpleChanges.value.currentValue;
this.updateTotalRecords();
if (!this.lazy && this.hasFilter()) {
this.filter(this.filterValue);
}
}
if (simpleChanges.sortField || simpleChanges.sortOrder) {
//avoid triggering lazy load prior to lazy initialization at onInit
if (!this.lazy || this.initialized) {
this.sort();
}
}
}
ngAfterContentInit() {
this.templates.forEach((item) => {
switch (item.getType()) {
case 'listItem':
this.listItemTemplate = item.template;
break;
case 'gridItem':
this.gridItemTemplate = item.template;
break;
case 'paginatorleft':
this.paginatorLeftTemplate = item.template;
break;
case 'paginatorright':
this.paginatorRightTemplate = item.template;
break;
case 'paginatordropdownitem':
this.paginatorDropdownItemTemplate = item.template;
break;
case 'header':
this.headerTemplate = item.template;
break;
case 'footer':
this.footerTemplate = item.template;
break;
}
});
this.updateItemTemplate();
}
updateItemTemplate() {
switch (this.layout) {
case 'list':
this.itemTemplate = this.listItemTemplate;
break;
case 'grid':
this.itemTemplate = this.gridItemTemplate;
break;
}
}
changeLayout(layout) {
this._layout = layout;
this.onChangeLayout.emit({
layout: this.layout
});
this.updateItemTemplate();
this.cd.markForCheck();
}
updateTotalRecords() {
this.totalRecords = this.lazy ? this.totalRecords : (this._value ? this._value.length : 0);
}
paginate(event) {
this.first = event.first;
this.rows = event.rows;
if (this.lazy) {
this.onLazyLoad.emit(this.createLazyLoadMetadata());
}
this.onPage.emit({
first: this.first,
rows: this.rows
});
}
sort() {
this.first = 0;
if (this.lazy) {
this.onLazyLoad.emit(this.createLazyLoadMetadata());
}
else if (this.value) {
this.value.sort((data1, data2) => {
let value1 = ObjectUtils.resolveFieldData(data1, this.sortField);
let value2 = ObjectUtils.resolveFieldData(data2, this.sortField);
let result = null;
if (value1 == null && value2 != null)
result = -1;
else if (value1 != null && value2 == null)
result = 1;
else if (value1 == null && value2 == null)
result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string')
result = value1.localeCompare(value2);
else
result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
return (this.sortOrder * result);
});
if (this.hasFilter()) {
this.filter(this.filterValue);
}
}
this.onSort.emit({
sortField: this.sortField,
sortOrder: this.sortOrder
});
}
isEmpty() {
let data = this.filteredValue || this.value;
return data == null || data.length == 0;
}
createLazyLoadMetadata() {
return {
first: this.first,
rows: this.rows,
sortField: this.sortField,
sortOrder: this.sortOrder
};
}
getBlockableElement() {
return this.el.nativeElement.children[0];
}
filter(filter, filterMatchMode = "contains") {
this.filterValue = filter;
if (this.value && this.value.length) {
let searchFields = this.filterBy.split(',');
this.filteredValue = this.filterService.filter(this.value, searchFields, filter, filterMatchMode, this.filterLocale);
if (this.filteredValue.length === this.value.length) {
this.filteredValue = null;
}
if (this.paginator) {
this.first = 0;
this.totalRecords = this.filteredValue ? this.filteredValue.length : this.value ? this.value.length : 0;
}
this.cd.markForCheck();
}
}
hasFilter() {
return this.filterValue && this.filterValue.trim().length > 0;
}
}
DataView.decorators = [
{ type: Component, args: [{
selector: 'p-dataView',
template: `
<div [ngClass]="{'p-dataview p-component': true, 'p-dataview-list': (layout === 'list'), 'p-dataview-grid': (layout === 'grid')}" [ngStyle]="style" [class]="styleClass">
<div class="p-dataview-loading" *ngIf="loading">
<div class="p-dataview-loading-overlay p-component-overlay">
<i [class]="'p-dataview-loading-icon pi-spin ' + loadingIcon"></i>
</div>
</div>
<div class="p-dataview-header" *ngIf="header || headerTemplate">
<ng-content select="p-header"></ng-content>
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
</div>
<p-paginator [rows]="rows" [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" [alwaysShow]="alwaysShowPaginator"
(onPageChange)="paginate($event)" styleClass="p-paginator-top" [rowsPerPageOptions]="rowsPerPageOptions" *ngIf="paginator && (paginatorPosition === 'top' || paginatorPosition =='both')"
[dropdownAppendTo]="paginatorDropdownAppendTo" [dropdownScrollHeight]="paginatorDropdownScrollHeight" [templateLeft]="paginatorLeftTemplate" [templateRight]="paginatorRightTemplate"
[currentPageReportTemplate]="currentPageReportTemplate" [showFirstLastIcon]="showFirstLastIcon" [dropdownItemTemplate]="paginatorDropdownItemTemplate" [showCurrentPageReport]="showCurrentPageReport" [showJumpToPageDropdown]="showJumpToPageDropdown" [showPageLinks]="showPageLinks"></p-paginator>
<div class="p-dataview-content">
<div class="p-grid p-nogutter">
<ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="paginator ? ((filteredValue||value) | slice:(lazy ? 0 : first):((lazy ? 0 : first) + rows)) : (filteredValue||value)" [ngForTrackBy]="trackBy">
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: rowData, rowIndex: rowIndex}"></ng-container>
</ng-template>
<div *ngIf="isEmpty()" class="p-col">
<div class="p-dataview-emptymessage">{{emptyMessage}}</div>
</div>
</div>
</div>
<p-paginator [rows]="rows" [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" [alwaysShow]="alwaysShowPaginator"
(onPageChange)="paginate($event)" styleClass="p-paginator-bottom" [rowsPerPageOptions]="rowsPerPageOptions" *ngIf="paginator && (paginatorPosition === 'bottom' || paginatorPosition =='both')"
[dropdownAppendTo]="paginatorDropdownAppendTo" [dropdownScrollHeight]="paginatorDropdownScrollHeight" [templateLeft]="paginatorLeftTemplate" [templateRight]="paginatorRightTemplate"
[currentPageReportTemplate]="currentPageReportTemplate" [showFirstLastIcon]="showFirstLastIcon" [dropdownItemTemplate]="paginatorDropdownItemTemplate" [showCurrentPageReport]="showCurrentPageReport" [showJumpToPageDropdown]="showJumpToPageDropdown" [showPageLinks]="showPageLinks"></p-paginator>
<div class="p-dataview-footer" *ngIf="footer || footerTemplate">
<ng-content select="p-footer"></ng-content>
<ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
</div>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
styles: [".p-dataview{position:relative}.p-dataview .p-dataview-loading-overlay{align-items:center;display:flex;justify-content:center;position:absolute;z-index:2}"]
},] }
];
DataView.ctorParameters = () => [
{ type: ElementRef },
{ type: ChangeDetectorRef },
{ type: FilterService }
];
DataView.propDecorators = {
paginator: [{ type: Input }],
rows: [{ type: Input }],
totalRecords: [{ type: Input }],
pageLinks: [{ type: Input }],
rowsPerPageOptions: [{ type: Input }],
paginatorPosition: [{ type: Input }],
alwaysShowPaginator: [{ type: Input }],
paginatorDropdownAppendTo: [{ type: Input }],
paginatorDropdownScrollHeight: [{ type: Input }],
currentPageReportTemplate: [{ type: Input }],
showCurrentPageReport: [{ type: Input }],
showJumpToPageDropdown: [{ type: Input }],
showFirstLastIcon: [{ type: Input }],
showPageLinks: [{ type: Input }],
lazy: [{ type: Input }],
emptyMessage: [{ type: Input }],
onLazyLoad: [{ type: Output }],
style: [{ type: Input }],
styleClass: [{ type: Input }],
trackBy: [{ type: Input }],
filterBy: [{ type: Input }],
filterLocale: [{ type: Input }],
loading: [{ type: Input }],
loadingIcon: [{ type: Input }],
first: [{ type: Input }],
sortField: [{ type: Input }],
sortOrder: [{ type: Input }],
value: [{ type: Input }],
onPage: [{ type: Output }],
onSort: [{ type: Output }],
onChangeLayout: [{ type: Output }],
header: [{ type: ContentChild, args: [Header,] }],
footer: [{ type: ContentChild, args: [Footer,] }],
templates: [{ type: ContentChildren, args: [PrimeTemplate,] }],
layout: [{ type: Input }]
};
class DataViewLayoutOptions {
constructor(dv) {
this.dv = dv;
}
changeLayout(event, layout) {
this.dv.changeLayout(layout);
event.preventDefault();
}
}
DataViewLayoutOptions.decorators = [
{ type: Component, args: [{
selector: 'p-dataViewLayoutOptions',
template: `
<div [ngClass]="'p-dataview-layout-options p-selectbutton p-buttonset'" [ngStyle]="style" [class]="styleClass">
<button type="button" class="p-button p-button-icon-only" [ngClass]="{'p-highlight': dv.layout === 'list'}" (click)="changeLayout($event, 'list')" (keydown.enter)="changeLayout($event, 'list')">
<i class="pi pi-bars"></i>
</button><button type="button" class="p-button p-button-icon-only" [ngClass]="{'p-highlight': dv.layout === 'grid'}" (click)="changeLayout($event, 'grid')" (keydown.enter)="changeLayout($event, 'grid')">
<i class="pi pi-th-large"></i>
</button>
</div>
`,
encapsulation: ViewEncapsulation.None
},] }
];
DataViewLayoutOptions.ctorParameters = () => [
{ type: DataView }
];
DataViewLayoutOptions.propDecorators = {
style: [{ type: Input }],
styleClass: [{ type: Input }]
};
class DataViewModule {
}
DataViewModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, SharedModule, PaginatorModule],
exports: [DataView, SharedModule, DataViewLayoutOptions],
declarations: [DataView, DataViewLayoutOptions]
},] }
];
/**
* Generated bundle index. Do not edit.
*/
export { DataView, DataViewLayoutOptions, DataViewModule };
//# sourceMappingURL=primeng-dataview.js.map