import * as React from 'react' ; import { Dispatch , Store } from 'redux' ; import { connect } from 'react-redux' ; import { ASSET_ACTIONS , ASSET_LIST_STYLE , IAssetCallback , IAssetItem , IAssetSearchParams , LIST_ACTION , ASSET_CONTENT_PANEL_STATE , } from '../interfaces' ; import { IApplicationState } from '../store' ; import { samsApi , superdeskApi } from '../apis' ; import { loadNextAssetsPage , previewAsset , queryAssetsFromCurrentSearch , setAssetListStyle , updateAssetSearchParamsAndListItems , updateAssetSearchParamsAndListItemsFromURL , updateSelectedAssetIds , onEditAsset , deleteAssets , forceUnlockAsset , updateMultipleSelectedAssetIds , } from '../store/assets/actions' ; import { getAssetListStyle , getAssetListTotal , getAssetSearchParams , getAssetSearchResults , getSelectedAssetId , getSelectedAssetIds , getSelectedAssetItems , getSetContentPanelState , } from '../store/assets/selectors' ; import { toggleFilterPanelState } from '../store/workspace/actions' ; import { isFilterPanelOpen } from '../store/workspace/selectors' ; import { getSets } from '../store/sets/selectors' ; import { PanelContent } from '../ui' ; import { SamsApp } from './samsApp' ; import { PageLayout } from '../containers/PageLayout' ; import { AssetListPanel } from '../components/assets/assetListPanel' ; import { AssetFilterPanel } from '../components/assets/assetFilterPanel' ; import { WorkspaceSubnav } from '../components/workspaceSubnav' ; import { AssetPreviewPanel } from '../components/assets/assetPreviewPanel' ; import { AssetEditorPanel } from '../components/assets/assetEditorPanel' ; import { showImagePreviewModal } from '../components/assets/assetImagePreviewFullScreen' ; interface IProps { assets : Array < IAssetItem > ; totalAssets : number ; listStyle : ASSET_LIST_STYLE ; searchParams : IAssetSearchParams ; asset ? : IAssetItem ; selectedAssetId : string | undefined ; selectedAssetIds : Array < string > ; filterPanelOpen : boolean ; deleteAsset ( asset ) : void ; loadNextPage ( ) : Promise < void > ; previewAsset ( asset ) : void ; onEditAsset ( asset ) : void ; updateSelectedAssetIds ( asset ) : void ; updateMultipleSelectedAssetIds ( asset ) : void ; setListStyle ( style ) : void ; queryAssetsFromCurrentSearch ( listStyle ) : void ; updateAssetSearchParamsAndListItems ( params , listAction ) : void ; toggleFilterPanel ( ) : void ; forceUnlockAsset ( asset ) : void ; selectedAssets : Array < IAssetItem > ; contentPanelState : ASSET_CONTENT_PANEL_STATE ; } interface IState { nextPageLoading : boolean ; } const mapStateToProps = ( state ) => ( { assets : getAssetSearchResults ( state ) , totalAssets : getAssetListTotal ( state ) , listStyle : getAssetListStyle ( state ) , searchParams : getAssetSearchParams ( state ) , filterPanelOpen : isFilterPanelOpen ( state ) , selectedAssetId : getSelectedAssetId ( state ) , selectedAssetIds : getSelectedAssetIds ( state ) , selectedAssets : getSelectedAssetItems ( state ) , contentPanelState : getSetContentPanelState ( state ) , } ) ; const mapDispatchToProps = ( dispatch ) => ( { loadNextPage : ( ) => dispatch < any > ( loadNextAssetsPage ( ) ) , setListStyle : ( style ) => dispatch ( setAssetListStyle ( style ) ) , queryAssetsFromCurrentSearch : ( listAction ? ) => dispatch < any > ( queryAssetsFromCurrentSearch ( listAction ) ) , updateAssetSearchParamsAndListItems : ( params , listAction ) => dispatch < any > ( updateAssetSearchParamsAndListItems ( params , listAction ) ) , toggleFilterPanel : ( ) => dispatch < any > ( toggleFilterPanelState ( ) ) , previewAsset : ( asset ) => dispatch ( previewAsset ( asset . _id ) ) , updateSelectedAssetIds : ( asset ) => dispatch ( updateSelectedAssetIds ( asset . _id ) ) , updateMultipleSelectedAssetIds : ( asset ) => dispatch ( updateMultipleSelectedAssetIds ( asset . _id ) ) , onEditAsset : ( asset ) => dispatch < any > ( onEditAsset ( asset ) ) , deleteAsset : ( asset ) => dispatch < any > ( deleteAssets ( asset ) ) , forceUnlockAsset : ( asset ) => dispatch < any > ( forceUnlockAsset ( asset ) ) , } ) ; export function downloadAssetBinary ( asset ) { samsApi . assets . getAssetBinary ( asset ) ; } export class SamsWorkspaceApp extends React . PureComponent { onStoreInit ( store ) { return ! getSets ( store . getState ( ) ) . length ? Promise . resolve ( ) : store . dispatch < any > ( updateAssetSearchParamsAndListItemsFromURL ( LIST_ACTION . REPLACE ) ) . catch ( ( ) => { return Promise . resolve ( ) ; } ) ; } render ( ) { return ( < SamsApp onStoreInit = { this . onStoreInit } > < SamsWorkspace /> < /SamsApp>); } } export class SamsWorkspaceComponent extends React . Component < IProps , IState > { constructor ( props ) { super ( props ) ; this . state = { nextPageLoading : false , } ; this . onScroll = this . onScroll . bind ( this ) ; this . toggleListStyle = this . toggleListStyle . bind ( this ) ; this . onDownloadSingleAssetCompressedBinary = this . onDownloadSingleAssetCompressedBinary . bind ( this ) ; this . onUpdateSelectedAssetIds = this . onUpdateSelectedAssetIds . bind ( this ) ; this . onUpdateMultipleSelectedAssetIds = this . onUpdateMultipleSelectedAssetIds . bind ( this ) ; this . onDeleteAsset = this . onDeleteAsset . bind ( this ) ; this . onEditAsset = this . onEditAsset . bind ( this ) ; this . onAssetImagePreview = this . onAssetImagePreview . bind ( this ) ; } onDeleteAsset ( asset ) { this . props . deleteAsset ( asset ) ; } onEditAsset ( asset ) { this . props . onEditAsset ( asset ) ; } onDownloadSingleAssetCompressedBinary ( asset ) { downloadAssetBinary ( asset ) ; } onUpdateSelectedAssetIds ( asset ) { this . props . updateSelectedAssetIds ( asset ) ; } onUpdateMultipleSelectedAssetIds ( asset ) { this . props . updateMultipleSelectedAssetIds ( asset ) ; } onAssetImagePreview ( asset ) { showImagePreviewModal ( asset ! ) ; } onScroll ( event ) { const node = event . currentTarget ; if ( node != null && this . state . nextPageLoading === false && this . props . totalAssets > this . props . assets . length && node . scrollTop + node . offsetHeight + 200 >= node . scrollHeight ) { this . setState ( { nextPageLoading : true } ) ; this . props . loadNextPage ( ) . finally ( ( ) => { this . setState ( { nextPageLoading : false } ) ; } ) ; } } toggleListStyle ( ) { this . props . setListStyle ( this . props . listStyle === ASSET_LIST_STYLE . GRID ? ASSET_LIST_STYLE . LIST : ASSET_LIST_STYLE . GRID ) ; this . props . queryAssetsFromCurrentSearch ( LIST_ACTION . REPLACE ) ; } getContentPanelComponent ( ) { if ( this . props . contentPanelState === ASSET_CONTENT_PANEL_STATE . PREVIEW ) { return AssetPreviewPanel ; } else if ( this . props . contentPanelState === ASSET_CONTENT_PANEL_STATE . CREATE || this . props . contentPanelState === ASSET_CONTENT_PANEL_STATE . EDIT ) { return AssetEditorPanel ; } return null ; } render ( ) { const ContentPanel = this . getContentPanelComponent ( ) ; const actions = [ { action : ASSET_ACTIONS . EDIT , onSelect : this . onEditAsset , } , { action : ASSET_ACTIONS . DOWNLOAD , onSelect : this . onDownloadSingleAssetCompressedBinary , } , { action : ASSET_ACTIONS . PREVIEW , onSelect : this . props . previewAsset , } , { action : ASSET_ACTIONS . DELETE , onSelect : this . onDeleteAsset , } , { action : ASSET_ACTIONS . VIEW_FULL_SCREEN , onSelect : this . onAssetImagePreview , } , ] ; if ( superdeskApi . privileges . hasPrivilege ( 'sams_manage_assets' ) ) { actions . push ( { action : ASSET_ACTIONS . FORCE_UNLOCK , onSelect : this . props . forceUnlockAsset , } ) ; } return ( < div className = "sd-page" > < PageLayout header = { ( < WorkspaceSubnav />)} leftPanelOpen={this.props.filterPanelOpen} leftPanel={(this.props.filterPanelOpen === false ? (<div / > ) : ( < AssetFilterPanel searchParams = { this . props . searchParams } closeFilterPanel = { this . props . toggleFilterPanel } updateAssetSearchParamsAndListItems = { this . props . updateAssetSearchParamsAndListItems } / > ) ) } rightPanelOpen = { ContentPanel != null } rightPanel = { ContentPanel == null ? ( < div />) : (<PanelContent> < ContentPanel key = { this . props . selectedAssetId } / > < /PanelContent>)} mainClassName="sd-padding--2" mainProps={{ onScroll: this.onScroll }} main={(<AssetListPanel assets={this.props.assets} listStyle={this.props.listStyle} selectedItems={this.props.selectedAssetId == null ? [ ] : [ this . props . selectedAssetId ] } onItemClicked = { this . props . previewAsset } onItemDoubleClicked = { this . onEditAsset } selectedAssetIds = { this . props . selectedAssetIds } updateSelectedAssetIds = { this . onUpdateSelectedAssetIds } updateMultipleSelectedAssetIds = { this . onUpdateMultipleSelectedAssetIds } actions = { actions } / > ) } /> < /div>); } } export const SamsWorkspace = connect ( mapStateToProps , mapDispatchToProps ) ( SamsWorkspaceComponent ) ;