import * as React from 'react' ; import { connect } from 'react-redux' ; import { Dispatch } from 'redux' ; import { cloneDeep } from 'lodash' ; import { IAssetItem } from '../../interfaces' ; import { IApplicationState } from '../../store' ; import { superdeskApi } from '../../apis' ; import { previewAsset , updateAsset , unlockAsset } from '../../store/assets/actions' ; import { getSelectedAsset } from '../../store/assets/selectors' ; import { Button , ButtonGroup } from 'superdesk-ui-framework/react' ; import { PanelHeader , PanelHeaderSlidingToolbar , PanelContentBlock , PanelContentBlockInner , } from '../../ui' ; import { AssetEditor } from './assetEditor' ; import { VersionUserDateLines } from '../common/versionUserDateLines' ; interface IProps { original ? : IAssetItem ; previewAsset ( asset ) : void ; updateAsset ( original , updates ) : Promise < IAssetItem > ; unlockAsset ( asset ) : Promise < IAssetItem > ; } interface IState { updates : Partial < IAssetItem > ; isDirty : boolean ; submitting : boolean ; } const mapStateToProps = ( state ) => ( { original : getSelectedAsset ( state ) , } ) ; const mapDispatchToProps = ( dispatch ) => ( { previewAsset : ( asset ) => dispatch ( previewAsset ( asset . _id ) ) , updateAsset : ( original , updates ) => dispatch < any > ( updateAsset ( original , updates ) ) , unlockAsset : ( asset ) => dispatch < any > ( unlockAsset ( asset ) ) , } ) ; export class AssetEditorPanelComponent extends React . PureComponent < IProps , IState > { constructor ( props ) { super ( props ) ; if ( this . props . original ?. _id == null ) { this . state = { updates : { } , isDirty : true , submitting : false , } ; } else { this . state = { updates : cloneDeep < IAssetItem > ( this . props . original ) , isDirty : false , submitting : false , } ; } this . onChange = this . onChange . bind ( this ) ; this . onSave = this . onSave . bind ( this ) ; this . onCancel = this . onCancel . bind ( this ) ; } onChange < K extends keyof IAssetItem > ( field , value ) { this . setState ( ( prevState ) => ( { updates : { ... prevState . updates , [ field ] : value , } , isDirty : true , } ) ) ; } onSave ( ) { this . setState ( { submitting : true } ) ; if ( this . props . original != null ) { const promise = this . props . updateAsset ( this . props . original , this . state . updates ) ; promise . then ( ( asset ) => { this . props . unlockAsset ( asset ) . then ( ( ) => { this . props . previewAsset ( asset ) ; } ) ; } ) . catch ( ( ) => { this . setState ( { submitting : false } ) ; } ) ; } } onCancel ( ) { this . props . unlockAsset ( this . props . original ! ) . then ( ( ) => { if ( this . props . original != null ) { this . props . previewAsset ( this . props . original ) ; } } ) ; } render ( ) { const { gettext } = superdeskApi . localization ; return ( < React . Fragment > < PanelHeader borderB = { true } > < PanelHeaderSlidingToolbar > < ButtonGroup align = "right" > < Button text = { gettext ( 'Cancel' ) } style = "hollow" onClick = { this . onCancel } disabled = { this . state . submitting } / > < Button text = { gettext ( 'Save' ) } type = "primary" disabled = { ! this . state . isDirty || this . state . submitting } onClick = { this . onSave } / > < /ButtonGroup> < /PanelHeaderSlidingToolbar> < /PanelHeader> { this . props . original == null ? null : ( < PanelContentBlock flex = { true } > < PanelContentBlockInner grow = { true } > < VersionUserDateLines item = { this . props . original } /> < /PanelContentBlockInner> < /PanelContentBlock>)} < PanelContentBlock flex = { true } > < PanelContentBlockInner grow = { true } > < AssetEditor key = { this . props . original ?. _id } asset = { this . props . original ! } onChange = { this . onChange } updates = { this . state . updates } fields = { [ 'name' , 'description' , 'state' , 'tags' , ] } / > < /PanelContentBlockInner> < /PanelContentBlock> < /React.Fragment>); } } export const AssetEditorPanel = connect ( mapStateToProps , mapDispatchToProps ) ( AssetEditorPanelComponent ) ;