ion3-list
Version:
Ionic 3 template list with filtereing, dynamic loading dom
139 lines • 4.78 kB
JavaScript
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
const core_1 = require("@angular/core");
const ngx_pipes_1 = require("ngx-pipes");
let IonTempList = class IonTempList {
constructor(searchPipe) {
this.searchPipe = searchPipe;
this.items = [];
this.loaded = false;
this.noDataText = "No data available";
this.filterKeys = [];
this.limit = 15;
this.loadAjax = new core_1.EventEmitter();
this.areAjaxDataAllLoaded = false;
}
ngOnInit() {
this.limitCount = this.limit;
}
ngOnChanges() {
if (!this.isAjaxActive()) {
this.limitCount = this.limit;
}
if (this.filterKeys.length === 0 && this.items.length !== 0) {
this.fullFilterKey();
}
}
fullFilterKey() {
const self = this;
Object.keys(this.items[0]).forEach(key => {
self.filterKeys.push(key);
});
}
doInfinite(infiniteScroll) {
this.infiniteScroll = infiniteScroll;
if (this.isAjaxActive() && !this.areAjaxDataAllLoaded && this.limitCount >= this.items.length) {
this.loadAjax.emit();
}
else {
setTimeout(() => {
this.completeScroll();
}, 300);
}
}
afterAjax(items) {
if (items.length < this.limit) {
this.areAjaxDataAllLoaded = true;
}
this.completeScroll();
}
completeScroll() {
if (this.infiniteScroll) {
this.limitCount = this.limitCount + this.limit;
this.infiniteScroll.complete();
}
}
showInfinitScroll() {
if (this.isAjaxActive() && !this.areAjaxDataAllLoaded) {
return true;
}
else {
return this.searchPipe.transform(this.items, this.filterKeys, this.filter).length >= this.limitCount;
}
}
isAjaxActive() {
return this.loadAjax.observers.length > 0;
}
};
__decorate([
core_1.ContentChild(core_1.TemplateRef),
__metadata("design:type", core_1.TemplateRef)
], IonTempList.prototype, "template", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Object)
], IonTempList.prototype, "items", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Object)
], IonTempList.prototype, "loaded", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Object)
], IonTempList.prototype, "noDataText", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", String)
], IonTempList.prototype, "filter", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Array)
], IonTempList.prototype, "filterKeys", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", String)
], IonTempList.prototype, "orderBy", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Number)
], IonTempList.prototype, "limit", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", core_1.EventEmitter)
], IonTempList.prototype, "loadAjax", void 0);
IonTempList = __decorate([
core_1.Component({
selector: 'ion-temp-list',
template: `
<ion-list *ngIf="items.length">
<ng-content></ng-content>
<ng-template ngFor let-item [ngForOf]="items | filterBy:filterKeys:filter | orderBy:orderBy | slice:0:limitCount" [ngForTemplate]="template">
</ng-template>
</ion-list>
<div *ngIf="!items.length && !loaded" text-center>
<br/>
<img src="assets/img/loading.gif" />
</div>
<ion-card *ngIf="!items.length && loaded" >
<ion-card-content text-center>
{{ noDataText }}
</ion-card-content>
</ion-card>
<ion-infinite-scroll *ngIf="showInfinitScroll()" (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
`
}),
__metadata("design:paramtypes", [ngx_pipes_1.FilterByPipe])
], IonTempList);
exports.IonTempList = IonTempList;
//# sourceMappingURL=ion-temp-list.js.map