Add pagination for editing sermons

src/app/components/atoms/material.ts

@@ -5,6 +5,7 @@ import {
   MatExpansionModule,
   MatIconModule,
   MatInputModule,
+  MatPaginatorModule,
   MatSelectModule,
   MatListModule
 } from '@angular/material';
@@ -15,6 +16,7 @@ export const MATERIAL_MODULES = [
   MatExpansionModule,
   MatIconModule,
   MatInputModule,
+  MatPaginatorModule,
   MatSelectModule,
   MatListModule
 ];

src/app/components/pages/admin/sermons.html

@@ -62,9 +62,12 @@ <h4>Sermons</h4>
         </mat-expansion-panel>
       </mat-accordion>
 
-      <div class="submit-wrapper">
-        <bc-observable-button class="save" (bcOnClick)="save()" [disabled]="!valid">Save</bc-observable-button>
-      </div>
+      <mat-paginator
+        [length]="pager.length"
+        [pageSize]="pager.itemsPerPage"
+        [pageSizeOptions]="[5, 10, 25]"
+        (page)="pager.update($event)"
+      ></mat-paginator>
     </form>
   </section>
 

src/app/components/pages/admin/sermons.scss

@@ -40,22 +40,15 @@ form {
     }
   }
 
-  div.submit-wrapper {
+  mat-paginator {
     flex: 100%;
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: center;
-
-    observable-button {
-      flex: 1 1 auto;
-      max-width: 230px;
-      margin: 13px;
+    padding-bottom: 13px;
+
+    /deep/ mat-select.mat-select {
+      height: initial;
     }
   }
-}
 
-mat-list-item.new-sermon /deep/ div.mat-list-item {
-  justify-content: flex-end;
 }
 
 div.icon {

src/app/components/pages/admin/sermons.ts

@@ -5,6 +5,7 @@ import { Secured }            from './secured';
 import {
   FirebaseService,
   Observable,
+  Pager,
   SeriesImageForm,
   SeriesImageService,
   Sermon,
@@ -19,6 +20,7 @@ export class SermonsComponent extends Secured implements OnInit {
 
   sermons: Sermon[];
   images: SeriesImageForm[];
+  pager: Pager<Sermon>;
 
   constructor(
     router: Router,
@@ -39,7 +41,9 @@ export class SermonsComponent extends Secured implements OnInit {
   }
 
   update(): void {
-    this.service.all()
+    this.pager = this.service.page();
+    this.pager
+      .observe()
       .subscribe(sermons => {
         this.sermons = sermons;
       });

src/app/services/firebase.browser.ts

@@ -43,14 +43,14 @@ export class FirebaseBrowserDatabase implements FirebaseDatabase {
       .map((snap: firebase.database.DataSnapshot) => snap.exists());
   }
 
-  getOnce(path: string): Observable<any> {
+  getOnce<T>(path: string): Observable<T> {
     return observe(this.database.ref(path).once('value'))
       .map((snap: firebase.database.DataSnapshot) => snap.val());
   }
 
-  watch(path: string): Observable<any> {
+  watch<T>(path: string): Observable<T> {
     return Observable
-      .create((observer: Observer<any>) => {
+      .create((observer: Observer<T>) => {
         this.database.ref(path).on('value', (snap) => {
           observer.next(snap.val());
         });

src/app/services/index.ts

@@ -6,6 +6,7 @@ import { Env }                                                from './env';
 import { GlobalErrorHandler }                                 from './error.handler';
 import { FirebaseService, FirebaseStorage, FirebaseDatabase } from './firebase.service';
 import { Observable, Subscription }                           from './observable';
+import { Pager }                                              from './pager';
 import { SeriesImageForm, SeriesImageService }                from './series.service';
 import { SermonService, Sermon }                              from './sermon.service';
 import { FeatureToggles, TogglesService }                     from './toggles.service';
@@ -36,6 +37,7 @@ export {
   FirebaseStorage,
   GlobalErrorHandler,
   Observable,
+  Pager,
   SeriesImageForm,
   SeriesImageService,
   Sermon,

src/app/services/pager.ts

@@ -0,0 +1,44 @@
+import { PageEvent }            from '@angular/material'
+import { FirebaseDatabase }     from './firebase.service';
+import { Observable, Observer } from './observable';
+
+export class Pager<T> {
+
+  itemsPerPage: number = 25;
+  currentPage: number = 0;
+
+  private items: T[];
+  private observer: Observer<T[]>
+
+  constructor(private source: Observable<T[]>) {
+    source.subscribe((items) => {
+      this.items = items;
+      this.emit();
+    })
+  }
+
+  get length(): number {
+    return this.items.length;
+  }
+
+  observe(): Observable<T[]> {
+    return Observable.create((observer: Observer<T[]>) => {
+      this.observer = observer;
+      this.emit();
+    });
+  }
+
+  private emit(): void {
+    if (this.observer && this.items) {
+      const min = this.currentPage * this.itemsPerPage;
+      this.observer.next(this.items.slice(min, this.itemsPerPage));
+    }
+  }
+
+  update(event: PageEvent) {
+    this.currentPage = event.pageIndex;
+    this.itemsPerPage = event.pageSize;
+    this.emit();
+  }
+
+}

src/app/services/sermon.service.ts

@@ -1,6 +1,7 @@
 import { Injectable }                     from '@angular/core';
 import { FirebaseService, FirebaseUtils } from './firebase.service';
 import { Observable }                     from './observable';
+import { Pager }                          from './pager';
 import * as moment                        from 'moment';
 import                                         'moment-timezone';
 
@@ -95,6 +96,10 @@ export class SermonService {
       });
   }
 
+  page(): Pager<Sermon> {
+    return new Pager(this.all());
+  }
+
   all(): Observable<Sermon[]> {
     return this.firebase
       .database()