import { Component , ElementRef , OnInit , ViewChild } from '@angular/core' ; import { DataService } from './services/data.service' ; import { HttpClient } from '@angular/common/http' ; import { MatDialog } from '@angular/material/dialog' ; import { MatPaginator } from '@angular/material/paginator' ; import { MatSort } from '@angular/material/sort' ; import { Issue } from './models/issue' ; import { DataSource } from '@angular/cdk/collections' ; import { AddDialogComponent } from './dialogs/add/add.dialog.component' ; import { EditDialogComponent } from './dialogs/edit/edit.dialog.component' ; import { DeleteDialogComponent } from './dialogs/delete/delete.dialog.component' ; import { BehaviorSubject , fromEvent , merge , Observable } from 'rxjs' ; import { map } from 'rxjs/operators' ; @ Component ( { selector : 'app-root' , templateUrl : './app.component.html' , styleUrls : [ './app.component.css' ] } ) export class AppComponent implements OnInit { displayedColumns = [ 'id' , 'title' , 'state' , 'url' , 'created_at' , 'updated_at' , 'actions' ] ; exampleDatabase : DataService | null ; dataSource : ExampleDataSource | null ; index : number ; id : number ; constructor ( public httpClient , public dialog , public dataService ) { } @ ViewChild ( MatPaginator , { static : true } ) paginator : MatPaginator ; @ ViewChild ( MatSort , { static : true } ) sort : MatSort ; @ ViewChild ( 'filter' , { static : true } ) filter : ElementRef ; ngOnInit ( ) { this . loadData ( ) ; } refresh ( ) { this . loadData ( ) ; } addNew ( ) { const dialogRef = this . dialog . open ( AddDialogComponent , { data : { issue : Issue } } ) ; dialogRef . afterClosed ( ) . subscribe ( result => { if ( result === 1 ) { this . exampleDatabase . dataChange . value . push ( this . dataService . getDialogData ( ) ) ; this . refreshTable ( ) ; } } ) ; } startEdit ( i , id , title , state , url , created_at , updated_at ) { this . id = id ; this . index = i ; console . log ( this . index ) ; const dialogRef = this . dialog . open ( EditDialogComponent , { data : { id : id , title : title , state : state , url : url , created_at : created_at , updated_at : updated_at } } ) ; dialogRef . afterClosed ( ) . subscribe ( result => { if ( result === 1 ) { const foundIndex = this . exampleDatabase . dataChange . value . findIndex ( x => x . id === this . id ) ; this . exampleDatabase . dataChange . value [ foundIndex ] = this . dataService . getDialogData ( ) ; this . refreshTable ( ) ; } } ) ; } deleteItem ( i , id , title , state , url ) { this . index = i ; this . id = id ; const dialogRef = this . dialog . open ( DeleteDialogComponent , { data : { id : id , title : title , state : state , url : url } } ) ; dialogRef . afterClosed ( ) . subscribe ( result => { if ( result === 1 ) { const foundIndex = this . exampleDatabase . dataChange . value . findIndex ( x => x . id === this . id ) ; this . exampleDatabase . dataChange . value . splice ( foundIndex , 1 ) ; this . refreshTable ( ) ; } } ) ; } private refreshTable ( ) { this . paginator . _changePageSize ( this . paginator . pageSize ) ; } public loadData ( ) { this . exampleDatabase = new DataService ( this . httpClient ) ; this . dataSource = new ExampleDataSource ( this . exampleDatabase , this . paginator , this . sort ) ; fromEvent ( this . filter . nativeElement , 'keyup' ) . subscribe ( ( ) => { if ( ! this . dataSource ) { return ; } this . dataSource . filter = this . filter . nativeElement . value ; } ) ; } } export class ExampleDataSource extends DataSource < Issue > { _filterChange = new BehaviorSubject ( '' ) ; get filter ( ) : string { return this . _filterChange . value ; } set filter ( filter ) { this . _filterChange . next ( filter ) ; } filteredData : Issue [ ] = [ ] ; renderedData : Issue [ ] = [ ] ; constructor ( public _exampleDatabase , public _paginator , public _sort ) { super ( ) ; this . _filterChange . subscribe ( ( ) => this . _paginator . pageIndex = 0 ) ; } /** Connect function called by the table to retrieve one stream containing the data to render. */ connect ( ) { const displayDataChanges = [ this . _exampleDatabase . dataChange , this . _sort . sortChange , this . _filterChange , this . _paginator . page ] ; this . _exampleDatabase . getAllIssues ( ) ; return merge ( ... displayDataChanges ) . pipe ( map ( ( ) => { this . filteredData = this . _exampleDatabase . data . slice ( ) . filter ( ( issue ) => { const searchStr = ( issue . id + issue . title + issue . url + issue . created_at ) . toLowerCase ( ) ; return searchStr . indexOf ( this . filter . toLowerCase ( ) ) !== - 1 ; } ) ; const sortedData = this . sortData ( this . filteredData . slice ( ) ) ; const startIndex = this . _paginator . pageIndex * this . _paginator . pageSize ; this . renderedData = sortedData . splice ( startIndex , this . _paginator . pageSize ) ; return this . renderedData ; } ) ) ; } disconnect ( ) { } /** Returns a sorted copy of the database data. */ sortData ( 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 . id , b . id ] ; break ; case 'title' : [ propertyA , propertyB ] = [ a . title , b . title ] ; break ; case 'state' : [ propertyA , propertyB ] = [ a . state , b . state ] ; break ; case 'url' : [ propertyA , propertyB ] = [ a . url , b . url ] ; break ; case 'created_at' : [ propertyA , propertyB ] = [ a . created_at , b . created_at ] ; break ; case 'updated_at' : [ propertyA , propertyB ] = [ a . updated_at , b . updated_at ] ; break ; } const valueA = isNaN ( + propertyA ) ? propertyA : + propertyA ; const valueB = isNaN ( + propertyB ) ? propertyB : + propertyB ; return ( valueA < valueB ? - 1 : 1 ) * ( this . _sort . direction === 'asc' ? 1 : - 1 ) ; } ) ; } }