import { LiveAnnouncer } from '@angular/cdk/a11y' ; import { Component } from '@angular/core' ; import { Filter , FilterAddEvent , FilterEvent , FilterRemoveAllEvent , FilterRemoveEvent } from '@ux-aspects/ux-aspects' ; import 'chance' ; @ Component ( { selector : 'app' , templateUrl : './app.component.html' , } ) export class AppComponent { filters : Filter [ ] = [ ] ; statusFilters : Filter [ ] = [ { group : 'Status' , title : 'Status' , name : 'Status (All)' , initial : true } , { group : 'Status' , title : 'Active' , name : 'Active' } , { group : 'Status' , title : 'Inactive' , name : 'Inactive' } ] ; authorFilters : Filter [ ] = [ { group : 'Author' , title : 'Author' , name : 'Author (All)' , initial : true , } , { group : 'Author' , title : 'Lily Clarke' , name : 'Lily Clarke' } , { group : 'Author' , title : 'Jesse Bass' , name : 'Jesse Bass' } , { group : 'Author' , title : 'Iva Rogers' , name : 'Iva Rogers' } , { group : 'Author' , title : 'Nina Copeland' , name : 'Nina Copeland' } , { group : 'Author' , title : 'Bradley Mason' , name : 'Bradley Mason' } , { group : 'Author' , title : 'Aaron Scott' , name : 'Aaron Scott' } , { group : 'Author' , title : 'Ethel Collier' , name : 'Ethel Collier' } , { group : 'Author' , title : 'Lois Saunders' , name : 'Lois Saunders' } ] ; typeaheadOptions = { placeholder : 'Find Author' , minCharacters : 1 } ; dataSource : ReadonlyArray < FilterSampleItem > = [ { id : 1 , name : 'Document' , author : 'Lily Clarke' , date : '18 Dec 2016' , completed : 97 , active : chance . bool ( ) } , { id : 2 , name : 'Email' , author : 'Jesse Bass' , date : '22 Dec 2016' , completed : 15 , active : chance . bool ( ) } , { id : 3 , name : 'Email' , author : 'Iva Rogers' , date : '12 Dec 2016' , completed : 20 , active : chance . bool ( ) } , { id : 4 , name : 'Email' , author : 'Nina Copeland' , date : '16 Dec 2016' , completed : 74 , active : chance . bool ( ) } , { id : 5 , name : 'Email' , author : 'Bradley Mason' , date : '17 Dec 2016' , completed : 63 , active : chance . bool ( ) } , { id : 6 , name : 'Document' , author : 'Aaron Scott' , date : '21 Dec 2016' , completed : 21 , active : chance . bool ( ) } , { id : 7 , name : 'Document' , author : 'Lily Clarke' , date : '17 Dec 2016' , completed : 85 , active : chance . bool ( ) } , { id : 8 , name : 'Document' , author : 'Lily Clarke' , date : '17 Dec 2016' , completed : 11 , active : chance . bool ( ) } ] ; documents : ReadonlyArray < FilterSampleItem > = [ ... this . dataSource ] ; constructor ( private _announcer ) { } /** Provide accesibility feedback */ onEvent ( event ) { if ( event instanceof FilterAddEvent ) { this . _announcer . announce ( `Filter ${ event . filter . name } selected.` ) ; } if ( event instanceof FilterRemoveEvent ) { this . _announcer . announce ( `Filter ${ event . filter . name } deselected.` ) ; } if ( event instanceof FilterRemoveAllEvent ) { this . _announcer . announce ( `All filters deselected.` ) ; } } apply ( ) { this . documents = [ ... this . dataSource ] ; this . filters . forEach ( filter => { switch ( filter . group ) { case 'Author' : this . documents = this . documents . filter ( item => item . author === filter . name ) ; break ; case 'Status' : this . documents = this . documents . filter ( item => item . active === ( filter . name === 'Active' ) ) ; break ; } } ) ; } } interface FilterSampleItem { id : number ; name : string ; author : string ; date : string ; completed : number ; active : boolean ; }