import { FirebaseDatabaseService } from './../shared/services/firebase-database.service' ; import { ChangeDetectionStrategy , Component } from '@angular/core' ; import { MatDialog , MatTableDataSource } from '@angular/material' ; import { PageFormComponent } from './page-form/page-form.component' ; import { ActivatedRoute , Router } from '@angular/router' ; import { Observable } from 'rxjs/Observable' ; import { ModalConfirmationComponent } from '../shared/modal-confirmation/modal-confirmation.component' ; @ Component ( { selector : 'pm-pages' , templateUrl : './pages.component.html' , styleUrls : [ './pages.component.scss' ] , changeDetection : ChangeDetectionStrategy . OnPush } ) export class PagesComponent { readonly pages$ = this . db . get ( '/pages' ) ; private readonly params$ = this . ar . queryParams . shareReplay ( ) ; private readonly currentTab$ = this . params$ . map ( a => a . tab ? + a . tab : 0 ) ; readonly view$ = Observable . combineLatest ( this . currentTab$ , this . pages$ , ( currentTab , pages ) => { return { groups : Object . keys ( pages || { } ) . map ( group => { return { table : new MatTableDataSource ( Object . keys ( pages [ group ] || { } ) . map ( slug => { return { ... ( pages [ group ] as any ) [ slug ] , slug , routerLink : `/${ group }/${ slug }` } ; } ) ) , name : group } ; } ) , currentTab } ; } ) ; readonly displayedColumns : ReadonlyArray < any > = [ 'slug' , 'edit' ] ; openDialog ( ) { this . dialog . open ( PageFormComponent , { width : '460px' , position : { top : '30px' } } ) ; } confirmDelete ( ) { return this . dialog . open ( ModalConfirmationComponent , { width : '460px' , position : { top : '30px' } , data : { message : 'Deleting this page will immediately remove it from the database' , title : 'Are you sure?' } } ) ; } delete ( group , slug ) { this . confirmDelete ( ) . afterClosed ( ) . filter ( Boolean ) . flatMap ( ( ) => this . db . getObjectRef ( `/pages/${ group }/${ slug }` ) . remove ( ) ) . take ( 1 ) . subscribe ( succ => { } , err => { } ) ; } updateTabParam ( tab ) { this . router . navigate ( [ this . router . url . split ( '?' ) [ 0 ] ] , { queryParams : { tab } , queryParamsHandling : 'merge' } ) ; } constructor ( private db , private dialog , private ar , private router ) { } trackByGroup ( index , item ) { return index ; } }