Created
August 2, 2017 20:34
-
-
Save kurapatijayaram/0a2e4ded7806c190d6f77f9e739dca46 to your computer and use it in GitHub Desktop.
AngularJS 2.x/4.x component for firebase pagination
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component, Input, Output, EventEmitter, AfterViewInit } from "@angular/core"; | |
import { Pagination } from "./pagination"; | |
@Component({ | |
selector: "fb-pagination", | |
template:` | |
<button [disabled]="!hasRecords" (click)="fetchMore()" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"> | |
More | |
</button> | |
` | |
}) | |
export class FbPaginationComponent implements AfterViewInit { | |
@Input("dataRef") dataRef: string; | |
@Input("perPage") perPage: number = 10; | |
@Input("order") order: string = 'asc'; | |
@Output() currentSet = new EventEmitter(); | |
private _cursor: string = ""; | |
private _pageRecordCount: number = 0; | |
private _pagination: Pagination; | |
public hasRecords: boolean = true; | |
constructor(){} | |
public fetchMore(){ | |
this._fetchRecords(); | |
} | |
private _fetchRecords(){ | |
this._pagination.fetchRecords(); | |
} | |
ngAfterViewInit(){ | |
this._pagination = new Pagination(this.dataRef, this.perPage, this.order); | |
this._pagination.records$.subscribe((data) => { | |
if(data){ | |
this.currentSet.emit(data); | |
} | |
}); | |
this.hasRecords = this._pagination.hasRecords; | |
this._fetchRecords(); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as firebase from "firebase"; | |
import { Subject } from "rxjs"; | |
export class Pagination { | |
public dataRef: string; | |
public perPage: number; | |
public order: string; | |
public hasRecords: boolean = true; | |
public records$: Subject<any> = new Subject(); | |
private _pageRecordCount: number = 0; | |
private _cursor: string = ""; | |
constructor(dataRef: string, perPage?: number, order?: string){ | |
this.dataRef = dataRef; | |
this.perPage = perPage || 10; | |
this.order = order || 'dsc'; | |
} | |
private _handleData(data: any){ | |
let currentRecords = []; | |
this.hasRecords = false; | |
this._pageRecordCount = 0; | |
this._cursor = ""; | |
if(data){ | |
let entities = data; | |
let entityKeys = Object.keys(entities); | |
if(entityKeys.length > this.perPage){ | |
(this.order == 'asc') ? (this._cursor = entityKeys.pop()) : (this._cursor = entityKeys.shift()); | |
this.hasRecords = true; | |
} | |
for(let entity of entityKeys){ | |
this._pageRecordCount++; | |
if(this._pageRecordCount <= this.perPage){ | |
let tempData = entities[entity]; | |
tempData["id"] = entity; | |
(this.order == 'asc') ? (currentRecords.push(tempData)) : (currentRecords.unshift(tempData)); | |
} | |
} | |
this.records$.next(currentRecords); | |
} | |
} | |
public fetchRecords(){ | |
let databaseRef = firebase.database().ref(this.dataRef); | |
let orderByRef = databaseRef.orderByKey(); | |
let filterRef; | |
let cursorRef; | |
if(this._cursor){ | |
cursorRef = (this.order == 'asc') ? orderByRef.startAt(this._cursor) : orderByRef.endAt(this._cursor); | |
}else{ | |
cursorRef = orderByRef; | |
} | |
if(this.order == 'asc'){ | |
filterRef = cursorRef.limitToFirst(this.perPage + 1); | |
}else { | |
filterRef = cursorRef.limitToLast(this.perPage + 1); | |
} | |
filterRef.once("value", (data) => { | |
this._handleData(data.val()); | |
}); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment