import { DataSource } from '@angular/cdk/collections' ; import { InFaxDatabase } from './infax-database.component' ; import { Transmission } from '../transmission/transmission' ; import { CdkTableModule } from '@angular/cdk/table' ; import { MatTableModule } from '@angular/material/table' ; import { MatSort , MatPaginator } from '@angular/material' ; import { BehaviorSubject } from 'rxjs/BehaviorSubject' ; import { MatSortHeaderIntl } from '@angular/material' ; import 'rxjs/add/operator/startWith' ; import 'rxjs/add/observable/merge' ; import 'rxjs/add/operator/toPromise' ; import 'rxjs/add/operator/map' ; import { Observable } from 'rxjs/Rx' ; export class InFaxDataSource extends DataSource < Transmission > { _filterChange = new BehaviorSubject ( '' ) ; get filter ( ) : string { return this . _filterChange . value ; } set filter ( filter ) { this . _filterChange . next ( filter ) ; } filteredData : Transmission [ ] = [ ] ; renderedData : Transmission [ ] = [ ] ; constructor ( private infaxDatabase , private _sort , private _paginator ) { super ( ) ; this . _filterChange . subscribe ( ( ) => this . _paginator . pageIndex = 0 ) ; } connect ( ) { const displayDataChanges = [ this . infaxDatabase . dataChange , this . _sort . sortChange , this . _filterChange , this . _paginator . page , ] ; return Observable . merge ( ... displayDataChanges ) . map ( ( ) => { this . filteredData = this . infaxDatabase . data . slice ( ) . filter ( ( item ) => { let searchStr = ( item . contact_phone ) . toLowerCase ( ) ; return searchStr . indexOf ( this . filter . toLowerCase ( ) ) != - 1 ; } ) ; const sortedData = this . getSortedData ( this . filteredData . slice ( ) ) ; const startIndex = this . _paginator . pageIndex * this . _paginator . pageSize ; this . renderedData = sortedData . splice ( startIndex , this . _paginator . pageSize ) ; return this . renderedData ; } ) ; } disconnect ( ) { } getSortedData ( data ) { if ( ! this . _sort . active || this . _sort . direction === '' ) { return data ; } return data . sort ( ( a , b ) => { let propertyA = '' ; let propertyB = '' ; switch ( this . _sort . active ) { case 'ID' : [ propertyA , propertyB ] = [ a . transmission_id , b . transmission_id ] ; break ; case 'phone' : [ propertyA , propertyB ] = [ a . contact_phone , b . contact_phone ] ; break ; case 'Timestamp' : [ propertyA , propertyB ] = [ a . last_run , b . last_run ] ; break ; case 'status' : [ propertyA , propertyB ] = [ a . status , b . status ] ; break ; } const valueA = isNaN ( + propertyA ) ? propertyA : + propertyA ; const valueB = isNaN ( + propertyB ) ? propertyB : + propertyB ; return ( valueA < valueB ? - 1 : 1 ) * ( this . _sort . direction === 'asc' ? 1 : - 1 ) ; } ) ; } }