import { Component , ElementRef , SkipSelf } from '@angular/core' ; import { Observable , Subscription } from 'rxjs' ; import { DiscoveryFeedsService } from './feeds.service' ; import { FormGroup , FormBuilder } from '@angular/forms' ; const noOp = ( ) => { } ; @ Component ( { selector : 'm-discovery__feedSettings' , templateUrl : './settings.component.html' , } ) export class DiscoveryFeedsSettingsComponent { saving$ : Observable < boolean > = this . service . saving$ ; filter$ : Observable < string > = this . service . filter$ ; subscriptions : Subscription [ ] ; onSaveIntent : ( ) => void = noOp ; form : FormGroup ; readonly periodOptions : { id : string ; label : string ; } [ ] = [ { id : 'relevant' , label : 'Most relevant' } , { id : '12h' , label : '12h' } , { id : '24h' , label : '24h' } , { id : '7d' , label : '7d' } , { id : '30d' , label : '30d' } , { id : '1y' , label : '1y' } , ] ; readonly contentTypes : { id : string ; label : string ; } [ ] = [ { id : 'all' , label : 'All' } , { id : 'blogs' , label : 'Blogs' } , { id : 'images' , label : 'Images' } , { id : 'videos' , label : 'Videos' } , ] ; readonly nsfwOptions : { id : string ; label : string ; selected : boolean ; } [ ] = this . service . nsfwService . reasons . map ( reason => { return { id : reason . value , label : reason . label , selected : reason . selected } ; } ) ; param onSave set opts ( { onSave } ) { this . onSaveIntent = onSave || noOp ; } constructor ( private service , private fb ) { this . form = fb . group ( { period : fb . control ( '' ) , contentType : fb . control ( '' ) , showNsfw : fb . control ( this . nsfwOptions . filter ( reason => reason . selected ) . length > 0 ) , nsfw : fb . array ( this . nsfwOptions . map ( reason => reason . selected ) ) , } ) ; } ngOnInit ( ) { this . subscriptions = [ this . service . period$ . subscribe ( period => { this . form . controls . period . setValue ( period ) ; } ) , this . service . type$ . subscribe ( type => { this . form . controls . contentType . setValue ( type ) ; } ) , this . form . controls . showNsfw . valueChanges . subscribe ( value => { this . form . controls . nsfw . setValue ( this . nsfwOptions . map ( ( ) => value ) ) ; } ) , this . form . controls . nsfw . valueChanges . subscribe ( nsfw => { if ( nsfw . filter ( selected => selected === true ) . length === 0 && this . form . controls . showNsfw . value ) { this . form . controls . showNsfw . setValue ( false ) ; } } ) , ] ; } ngOnDestroy ( ) { for ( const subscription of this . subscriptions ) { subscription . unsubscribe ( ) ; } } async onSave ( e ) { const values = this . form . value ; const nsfwReasons = this . service . nsfwService . reasons . slice ( 0 ) ; for ( let i in values . nsfw ) { nsfwReasons [ i ] . selected = values . nsfw [ i ] ; } this . service . setNsfw ( nsfwReasons ) ; this . service . setPeriod ( values . period ) ; this . service . setType ( values . contentType ) ; this . onSaveIntent ( ) ; } get hasNsfwSelections ( ) : boolean { return ( this . form . controls . nsfw . value . filter ( selected => selected === true ) . length > 0 ) ; } }