import { Component , HostListener , Input , OnChanges , OnDestroy , OnInit } from '@angular/core' ; import { MinimalNodeEntity , MinimalNodeEntryEntity , SiteEntry } from '@alfresco/js-api' ; import { ContentActionRef , SidebarTabRef } from '@alfresco/adf-extensions' ; import { Store } from '@ngrx/store' ; import { SetInfoDrawerStateAction , ToggleInfoDrawerAction , infoDrawerPreview } from '@alfresco/aca-shared/store' ; import { AppExtensionService } from '../../services/app.extension.service' ; import { ContentApiService } from '../../services/content-api.service' ; import { takeUntil } from 'rxjs/operators' ; import { Subject } from 'rxjs' ; import { ThemePalette } from '@angular/material/core' ; @ Component ( { selector : 'aca-info-drawer' , templateUrl : './info-drawer.component.html' } ) export class InfoDrawerComponent implements OnChanges , OnInit , OnDestroy { @ Input ( ) nodeId : string ; @ Input ( ) node : MinimalNodeEntity ; isLoading = false ; displayNode : MinimalNodeEntryEntity | SiteEntry ; tabs : Array < SidebarTabRef > = [ ] ; actions : Array < ContentActionRef > = [ ] ; onDestroy$ = new Subject < boolean > ( ) ; preventFromClosing = false ; @ HostListener ( 'keydown.escape' ) onEscapeKeyboardEvent ( ) { this . close ( ) ; } constructor ( private store , private contentApi , private extensions ) { } ngOnInit ( ) { this . tabs = this . extensions . getSidebarTabs ( ) ; this . extensions . getAllowedSidebarActions ( ) . pipe ( takeUntil ( this . onDestroy$ ) ) . subscribe ( ( actions ) => { this . actions = actions ; } ) ; this . store . select ( infoDrawerPreview ) . pipe ( takeUntil ( this . onDestroy$ ) ) . subscribe ( ( isInfoDrawerPreviewOpened ) => { this . preventFromClosing = isInfoDrawerPreviewOpened ; } ) ; } ngOnDestroy ( ) { this . onDestroy$ . next ( true ) ; this . onDestroy$ . complete ( ) ; if ( ! this . preventFromClosing ) { this . store . dispatch ( new SetInfoDrawerStateAction ( false ) ) ; } } ngOnChanges ( ) { if ( this . node ) { if ( this . node [ 'isLibrary' ] ) { return this . setDisplayNode ( this . node ) ; } const entry = this . node . entry ; const id = entry . nodeId || entry . id ; return this . loadNodeInfo ( id ) ; } } trackByActionId ( _ , action ) { return action . id ; } getEntryColor ( entry ) { return entry ?. color ; } private close ( ) { this . store . dispatch ( new ToggleInfoDrawerAction ( ) ) ; } private loadNodeInfo ( nodeId ) { if ( nodeId ) { this . isLoading = true ; this . contentApi . getNodeInfo ( nodeId ) . subscribe ( ( entity ) => { this . setDisplayNode ( entity ) ; this . isLoading = false ; } , ( ) => ( this . isLoading = false ) ) ; } } private setDisplayNode ( node ) { this . displayNode = node ; } }