import { Component , OnDestroy } from '@angular/core' ; import { Breadcrumb , HelpCenterItem , HelpCenterService , PageHeaderIconMenu } from '@ux-aspects/ux-aspects' ; import 'chance' ; import { Subscription } from 'rxjs' ; @ Component ( { selector : 'app' , templateUrl : './app.component.html' , styleUrls : [ './app.component.css' ] } ) export class AppComponent implements OnDestroy { repositories : HelpCenterTableData [ ] = [ ] ; crumbs : Breadcrumb [ ] = [ { title : 'Overview' } ] ; loading : boolean = false ; menus : PageHeaderIconMenu [ ] = [ { icon : 'help' , dropdown : [ ] } ] ; refreshHelpCenterItem : HelpCenterItem = { icon : 'refresh' , title : 'Refresh Repositories' , select : this . loadData . bind ( this ) } ; private _helpCenter$ : Subscription ; constructor ( private _helpCenterService ) { this . _helpCenter$ = this . _helpCenterService . items . subscribe ( items => this . menus [ 0 ] . dropdown = items ) ; this . loadData ( ) ; } loadData ( ) { this . repositories = [ ] ; this . loading = true ; let types = [ 'File System' , 'Exchange' , 'Other' ] ; setTimeout ( ( ) => { for ( let idx = 0 ; idx < 5 ; idx ++ ) { this . repositories . push ( { name : `Repository ${ chance . integer ( { min : 1 , max : 100 } ) }` , type : types [ chance . integer ( { min : 0 , max : 2 } ) ] , items : chance . integer ( { min : 0 , max : 1000000 } ) , location : chance . country ( { full : true } ) , size : chance . floating ( { fixed : 1 , min : 1 , max : 20 } ) } ) ; } this . loading = false ; } , 2000 ) ; } ngOnDestroy ( ) { this . _helpCenter$ . unsubscribe ( ) ; } } interface HelpCenterTableData { name : string ; type : string ; location : string ; items : number ; size : number ; }