import * as React from 'react' ; import { connect } from 'react-redux' ; import { Dispatch } from 'redux' ; import { IDesk } from 'superdesk-api' ; import { ISetItem , IStorageDestinationItem , SET_STATE } from '../../interfaces' ; import { IApplicationState } from '../../store' ; import { superdeskApi } from '../../apis' ; import { editSet , confirmBeforeDeletingSet , closeSetContentPanel } from '../../store/sets/actions' ; import { getSelectedSet , getSelectedSetStorageDestination , getSelectedSetCount } from '../../store/sets/selectors' ; import { getDesksAllowedSets } from '../../store/workspace/selectors' ; import { FormLabel , Label } from 'superdesk-ui-framework/react' ; import { FormRow , PanelContent , PanelContentBlock , PanelContentBlockInner , PanelHeader , PanelTools , Text , } from '../../ui' ; import { IPanelTools } from '../../ui/PanelTools' ; import { getHumanReadableFileSize } from '../../utils/ui' ; import { VersionUserDateLines } from '../common/versionUserDateLines' ; interface IProps { set ? : ISetItem ; storageDestination ? : IStorageDestinationItem ; count ? : number ; allowedDesksForSet : Dictionary < ISetItem [ '_id' ] , Array < IDesk [ '_id' ] > > ; onEdit ( set ) : void ; onDelete ( set ) : void ; onClose ( ) : void ; } interface IState { deskNames : Array < IDesk [ 'name' ] > ; } const mapStateToProps = ( state ) => ( { set : getSelectedSet ( state ) , storageDestination : getSelectedSetStorageDestination ( state ) , count : getSelectedSetCount ( state ) , allowedDesksForSet : getDesksAllowedSets ( state ) , } ) ; const mapDispatchToProps = ( dispatch ) => ( { onEdit : ( set ) => dispatch ( editSet ( set . _id ) ) , onDelete : ( set ) => dispatch < any > ( confirmBeforeDeletingSet ( set ) ) , onClose : ( ) => dispatch ( closeSetContentPanel ( ) ) , } ) ; export class SetPreviewPanelComponent extends React . Component < IProps , IState > { constructor ( props ) { super ( props ) ; this . state = { deskNames : [ ] } ; } componentDidMount ( ) { this . reloadDeskNames ( ) ; } reloadDeskNames ( ) { if ( this . props . set ?. _id == null || ! this . props . allowedDesksForSet [ this . props . set . _id ] ?. length ) { this . setState ( { deskNames : [ ] } ) ; } else { superdeskApi . dataApi . query < IDesk > ( 'desks' , 1 , { field : '_id' , direction : 'ascending' } , { _id : { $in : this . props . allowedDesksForSet [ this . props . set . _id ] , } , } ) . then ( ( response ) => { this . setState ( { deskNames : response . _items . map ( ( desk ) => desk . name ) } ) ; } ) ; } } render ( ) { const { gettext } = superdeskApi . localization ; const { set , storageDestination , count } = this . props ; if ( set ?. _id == null ) { return null ; } let topTools = [ { title : gettext ( 'Edit' ) , icon : 'pencil' , onClick : ( ) => this . props . onEdit ( set ) , ariaValue : 'edit' , } , { title : gettext ( 'Close' ) , icon : 'close-small' , onClick : this . props . onClose , ariaValue : 'close' , } ] ; if ( set . state === SET_STATE . DRAFT || ( set . state === SET_STATE . DISABLED && ! count ) ) { topTools = [ { title : gettext ( 'Delete' ) , icon : 'trash' , onClick : ( ) => this . props . onDelete ( set ) , ariaValue : 'delete' , } , ... topTools , ] ; } return ( < React . Fragment > < PanelHeader borderB = { true } title = { gettext ( 'Set Details' ) } > < PanelTools tools = { topTools } /> < /PanelHeader> < PanelContent > < PanelContentBlock flex = { true } > < PanelContentBlockInner grow = { true } > < VersionUserDateLines item = { set } /> < /PanelContentBlockInner> < /PanelContentBlock> < PanelContentBlock className = "sd-padding-t--0" > < PanelContentBlockInner grow = { true } > < FormRow > < FormLabel text = { gettext ( 'Name' ) } style = "light" / > < Text > { set . name } < /Text> < /FormRow> < FormRow > < FormLabel text = { gettext ( 'Description' ) } style = "light" / > < Text > { set . description } < /Text> < /FormRow> < FormRow > < FormLabel text = { gettext ( 'Max Asset Size' ) } style = "light" / > < Text > { getHumanReadableFileSize ( set . maximum_asset_size || 0 ) } < /Text> < /FormRow> < FormRow > < FormLabel text = { gettext ( 'Storage Destination' ) } style = "light" / > < Text > { storageDestination ?. _id } < /Text> < /FormRow> < FormRow > < FormLabel text = { gettext ( 'Storage Provider' ) } style = "light" / > < Text > { storageDestination ?. provider } < /Text> < /FormRow> < FormRow > < FormLabel text = { gettext ( 'Allowed Desks' ) } style = "light" / > { this . state . deskNames . map ( ( deskName ) => ( < Label key = { deskName } text = { deskName } style = "translucent" size = "large" / > ) ) } < /FormRow> < /PanelContentBlockInner> < /PanelContentBlock> < /PanelContent> < /React.Fragment>); } } export const SetPreviewPanel = connect ( mapStateToProps , mapDispatchToProps ) ( SetPreviewPanelComponent ) ;