Paging over firebase collections or data array.

Set up:

npm i @pineapplelab/paging

Don't Import PagingModule into your angular project,

If you want run the paging over firestore be sure of call setFirestoreInstance( afs: AngularFirestore )

Example:

@NgModule({
  declarations: [],
  imports: [
    ...
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    ...
  ],
  exports: [
    ...
  ]
})
export class CoreModule {
  constructor ( private afs: AngularFirestore ) {
    PagingModule.setFirestoreInstance(afs);
  }
}

API

Default values:

    action = null;
    collection;
    keyField = 'id';
    loading = false;
    orderBy: string = 'name';
    orderDataType = EnumDataType.string;
    orderType = EnumOrderType.asc;
    pagingKey = null;
    preconditions = []
    response = { data: [], hasMore: false, hasLess: false };
    search = '';
    size = this.sizeOptions[0];
    subCollections = [];

Properties:

action: PagingAction; this describe if the paging must change the page on the next loadData() call.

collection: string; this is the collection where the paging run in firestore.

keyField: string; this is the key property in the docs of the current collection, by default is the filed: 'id'.

loading: boolean; this let you know when the paging is loading data.

orderBy: string; The paging will order the result by this field, if it is undefined, empty or null the result will be order by the keyField property.

orderDataType: PagingDataType; this describe the current data type of the orderBy property, by default is string, but if you want order by number or date you must specify it.

orderType: PagingOrderType; this if the order is ascendent or descendent.

pagingKey: string; you must set a paging key if you want for any propose you want.

preconditions: { fieldPath: string | FieldPath, filterOp: WhereFilterOp, value: any }[]; this is used for filter the data, fieldPath must be the property name that you want filter, filterOp must define the how will filter the data, and value is the what will be compared.

response: IPagingResponse<T>; this object has the result data.

search: string; this is for what the paging will be filter.

size: number; this is the size of the current page.

subCollections: { collection: string, docKey: string }[] this is used for run the paging over a sub-collection no matter how deep is it.

mapElements: (element: any, index: number, array: any[]) => T; this can be used for map every row in the result data.

Utilization examples:

  export const PAGING = new Paging<Assessments>( <Paging.IPaging>{
    collection: `assessments`,
    keyField: 'id',
    orderBy: 'name',
    orderType: Paging.orderType.asc,
    mapElements: doc => new Assessments(doc)
  } );
  
  await PAGING.loadData();

Extensions

There are 2 available extended Paging class:

ProgressivePaging:

• A progressive paging allows to load data from the beginning to the end of the collection.
• You only need to call the loadMore() method when you see the end of the current list.

LocalPaging:

• A local paging will get all firebase documents that meet the defined preconditions and sort it in memory.
• If you want use your own data, call the setLocalData method.