import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Input, Output, ContentChild, ContentChildren, NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ObjectUtils, FilterUtils } from 'primeng/utils'; import { Header, Footer, PrimeTemplate, SharedModule } from 'primeng/api'; import { PaginatorModule } from 'primeng/paginator'; class DataView { constructor(el, cd) { this.el = el; this.cd = cd; this.layout = 'list'; this.pageLinks = 5; this.paginatorPosition = 'bottom'; this.alwaysShowPaginator = true; this.paginatorDropdownScrollHeight = '200px'; this.currentPageReportTemplate = '{currentPage} of {totalPages}'; 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(); } 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 '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 = FilterUtils.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: `