import { Component } from '@angular/core' ; import { BlogsEditService } from '../blog-edit.service' ; import { OverlayModalService } from '../../../../../services/ux/overlay-modal' ; import { CaptchaModalComponent } from '../../../../captcha/captcha-modal/captcha-modal.component' ; import { BehaviorSubject , Subscription } from 'rxjs' ; import { Captcha } from '../../../../captcha/captcha.component' ; import { FormToastService } from '../../../../../common/services/form-toast.service' ; export type BlogsBottomBarContainerType = 'tags' | 'meta' | 'monetize' | '' ; /**
 * Base bottom bar component for blogs v2
 * Includes the popup drawer and logic.
 */ @ Component ( { selector : 'm-blogEditor__bottomBar' , templateUrl : './bottom-bar.component.html' , styleUrls : [ './bottom-bar.component.ng.scss' ] , } ) export class BlogEditorBottomBarComponent { /**
     * Currently active drawer tab.
     */ public readonly activeTab$ : BehaviorSubject < BlogsBottomBarContainerType > = new BehaviorSubject < BlogsBottomBarContainerType > ( '' ) ; /**
     * Tags subscription
     */ tagsSubscription : Subscription ; /**
     * Tags subscription
     */ monetizeSubscription : Subscription ; constructor ( public service , private toast , private overlay ) { } ngOnInit ( ) { this . tagsSubscription = this . service . tags$ . subscribe ( ( ) => { if ( this . activeTab$ . value === 'tags' ) { this . activeTab$ . next ( '' ) ; } } ) ; this . monetizeSubscription = this . service . monetize$ . subscribe ( ( ) => { if ( this . activeTab$ . value === 'monetize' ) { this . activeTab$ . next ( '' ) ; } } ) ; } ngOnDestory ( ) { this . tagsSubscription . unsubscribe ( ) ; this . monetizeSubscription . unsubscribe ( ) ; } param { boolean } draft returns { Promise < void > } async save ( draft = false ) { if ( ! ( await this . validate ( ) ) ) { return ; } const modal = this . overlay . create ( CaptchaModalComponent , { } , { class : 'm-captcha--modal-wrapper' , onComplete : ( captcha ) : void => { this . service . captcha$ . next ( captcha ) ; this . service . save ( draft ) ; } , } ) ; modal . present ( ) ; } returns { Promise < boolean > } private async validate ( ) { if ( ! this . service . content$ . getValue ( ) ) { this . showToastError ( 'error:no-description' ) ; return false ; } if ( ! this . service . title$ . getValue ( ) ) { this . showToastError ( 'error:no-title' ) ; return false ; } if ( ! this . service . banner$ . getValue ( ) ) { this . showToastError ( 'error:no-banner' ) ; return false ; } return true ; } param { string } showToastError ( error ) { const errorDisplays = { 'error:no-title' : 'You must provide a title' , 'error:no-description' : 'Your blog must have content' , 'error:no-banner' : 'You must upload a banner' , 'error:gateway-timeout' : 'Gateway Time-out' , } ; this . toast . error ( errorDisplays [ error ] || error ) ; } param { BlogsBottomBarContainerType } toggleActiveTab ( tab = '' ) { const current = this . activeTab$ . getValue ( ) ; if ( tab === current ) { this . activeTab$ . next ( '' ) ; return ; } this . activeTab$ . next ( tab ) ; } }