import { Component , ViewEncapsulation , OnDestroy } from '@angular/core' ; import { take , filter } from 'rxjs/operators' ; import { SelectionEvent } from '@progress/kendo-angular-grid' ; import { DialogService , DialogCloseResult } from '@progress/kendo-angular-dialog' ; import { SortDescriptor } from '@progress/kendo-data-query' ; import { StockDataService } from 'src/app/services/stock-data.service' ; import { Stock } from 'src/app/models/stock' ; import { Subscription } from 'rxjs' ; @ Component ( { selector : 'app-stock-list' , templateUrl : './stock-list.component.html' , styleUrls : [ './stock-list.component.scss' ] , encapsulation : ViewEncapsulation . None } ) export class StockListComponent implements OnDestroy { public selectedRows : Array < string > = [ ] ; public uncategorizedSymbols : Array < string > ; public sort : SortDescriptor [ ] = [ ] ; public gridView : Stock [ ] = [ ] ; private confirmRemoveStockSubscription : Subscription | undefined ; constructor ( public stockDataService , private dialogService ) { this . stockDataService . getDataStream ( ) . subscribe ( data => this . gridView = data ) ; if ( this . gridView && this . gridView . length ) { this . stockDataService . selectedStock = this . gridView [ 0 ] ; this . selectedRows = [ this . gridView [ 0 ] . symbol ] ; } this . uncategorizedSymbols = this . stockDataService . getUncategorizedSymbols ( ) ; } public ngOnDestroy ( ) { if ( this . confirmRemoveStockSubscription ) { this . confirmRemoveStockSubscription . unsubscribe ( ) ; } } public sortChange ( sort ) { this . sort = sort ; this . stockDataService . query ( this . sort ) ; } public addStockToPortfolio ( symbol ) { this . stockDataService . addToPortfolio ( symbol ) ; this . uncategorizedSymbols = this . stockDataService . getUncategorizedSymbols ( ) ; this . sort = [ ] ; } public removeStockFromPortfolio ( ) { if ( ! ( this . selectedRows && this . selectedRows . length ) ) { return ; } if ( this . confirmRemoveStockSubscription ) { this . confirmRemoveStockSubscription . unsubscribe ( ) ; } this . confirmRemoveStockSubscription = this . dialogService . open ( { title : 'Confirm delete' , content : `Are you sure you want to delete ${ this . selectedRows [ 0 ] }?` , actions : [ { text : 'Cancel' } , { text : 'Confirm' , primary : true } ] , width : 500 , height : 245 , actionsLayout : 'normal' } ) . result . pipe ( take ( 1 ) , filter ( result => ! ( result instanceof DialogCloseResult || result . text === 'Cancel' ) ) ) . subscribe ( ( ) => { const symbol = this . selectedRows [ 0 ] ; this . stockDataService . removeFromPortfolio ( symbol ) ; this . selectedRows = [ ] ; this . uncategorizedSymbols = this . stockDataService . getUncategorizedSymbols ( ) ; this . sort = [ ] ; } ) ; } public handleSelectionChange ( event ) { if ( ! ( event . selectedRows && event . selectedRows . length ) ) { this . selectedRows = [ this . stockDataService . selectedStock . symbol ] ; return ; } this . stockDataService . selectedStock = event . selectedRows [ 0 ] . dataItem ; } }