application/components/content/content-toolbar.js
import React from 'react';
import {browserHistory, Link} from 'react-router';
import BaseView from './../base-view';
import IconButton from 'material-ui/IconButton';
import FlatButton from 'material-ui/FlatButton';
import Paper from 'material-ui/Paper';
import FontIcon from 'material-ui/FontIcon';
import {List, ListItem} from 'material-ui/List';
import Subheader from 'material-ui/Subheader';
import Divider from 'material-ui/Divider';
import Checkbox from 'material-ui/Checkbox';
import IconFilter from 'material-ui/svg-icons/content/filter-list';
import IconClose from 'material-ui/svg-icons/navigation/close';
import IconReload from 'material-ui/svg-icons/navigation/refresh';
import IconCheck from 'material-ui/svg-icons/navigation/check';
import {connect} from 'react-redux';
import ReduxPaginator from './../common/redux-paginator';
import {Row, Col} from './../flexbox';
import {ENTER_KEY} from './../../util/key-codes';
import {
contentViewUpdate
} from './../../redux/actions/content-view-actions';
import ContentManager from '../../managers/content-manager';
import request from './../../util/request';
class ContentToolbar extends BaseView {
constructor(props) {
super(props);
this.state = {
isOpen: false
};
}
handleKeyDown(e) {
const val = e.target.value;
if (e.keyCode !== ENTER_KEY) {
return;
}
const {dispatch} = this.props;
dispatch(contentViewUpdate({keywords: val, page: 1}))
.then(() => ContentManager.fetchFromView());
}
handleSearchReset() {
const {dispatch} = this.props;
this.quickSearch.value = '';
dispatch(contentViewUpdate({keywords: false, page: 1}))
.then(() => ContentManager.fetchFromView());
}
handleToggle(e) {
this.setState({'isOpen': !this.state.isOpen});
}
onCheckClick(what, id, e) {
const {dispatch} = this.props;
let newState = {};
newState[what] = id;
dispatch(contentViewUpdate(newState))
.then(() => ContentManager.fetchFromView());
}
handleMediaType(type, e) {
const {dispatch} = this.props;
dispatch(contentViewUpdate({mediatype: type, page: 1}))
.then(() => ContentManager.fetchFromView());
}
onFlipClick(url, e) {
const {dispatch} = this.props;
dispatch(contentViewUpdate({flip: !this.props.contentView.flip}))
.then(() => ContentManager.fetchFromView());
}
//grid and flip probably can be combined
onGridClick(url, e) {
const {dispatch} = this.props;
dispatch(contentViewUpdate({grid: !this.props.contentView.grid}))
.then(() => ContentManager.fetchFromView());
}
// hacky, but alignments are a bear
gotoToolbarLink(url, e) {
browserHistory.push(url);
}
render() {
const this_url = request.getPath();
const mediaFilterTypes = [
{
'label': 'Audio',
'filter': 'audio'
},
{
'label': 'Gallery',
'filter': 'gallery'
},
{
'label': 'Image',
'filter': 'image'
},
{
'label': 'PDF',
'filter': 'pdf'
},
{
'label': 'Video',
'filter': 'video'
}
];
return (
<div>
<Paper className='toolbar'>
<Row middle='xs'>
<Col xs={3} autoBox={false}>
<div className="box toolbar-search-wrap">
<FontIcon className='mui-icons'>search</FontIcon>
<input
ref={quickSearch => this.quickSearch = quickSearch}
className="search"
type="text"
placeholder="Quick Search"
onKeyDown={this.handleKeyDown.bind(this)}
defaultValue={this.props.contentView.keywords}
/>
<FontIcon className='mui-icons clear-search' onClick={this.handleSearchReset.bind(this)}>close</FontIcon>
</div>
</Col>
<Col xs={4}>
<FlatButton
onClick={this.handleToggle.bind(this)}
label='Filter'
primary={this.props.contentView.filtersOn ? true : false}
icon={<IconFilter />}
/>
{
this.props.contentView.type == 'media'
? (
<FlatButton
onClick={this.onGridClick.bind(this, this_url + '?')}
label={this.props.contentView.grid ? 'List View' : 'Grid View'}
icon={<FontIcon className='mui-icons'>{this.props.contentView.grid ? 'list' : 'view_module'}</FontIcon>}
/>
)
: ''
}
<FlatButton
onClick={this.props.onRefresh}
icon={<IconReload />}
style={{minWidth:0}}
/>
{
this.props.contentView.type == 'post'
? (
<FlatButton
onClick={this.gotoToolbarLink.bind(this, '/ceo/blog')}
label='View Blogs'
>
</FlatButton>
)
: ''
}
{
this.props.contentView.filtersOn
? (
<FlatButton
style={{minWidth: 0}}
onClick={this.props.onReset}
icon={<IconClose />}
primary={true}
/>
)
: ''
}
</Col>
<Col xs={5} end='xs'>
{<ReduxPaginator
pagination={this.props.content.pagination}
onPaginate={this.props.onPaginate}
/>}
</Col>
</Row>
<div className={'toolbar-dropdown ' + (this.state.isOpen ? 'open' : 'closed')}>
<Row top='xs'>
{
this.props.workflows.items
? (
<Col xs={3} className='dropdown-box'>
<List>
<Subheader>Web Workflow</Subheader>
<ListItem
primaryText="All"
leftCheckbox={
!this.props.contentView.workflow
? (<Checkbox checked={true} />)
: (<Checkbox checked={false} onClick={this.onCheckClick.bind(this, 'workflow', false)} />)
}
/>
{this.props.workflows.filters.contentOnly.map((id, i) => {
const item = this.props.workflows.items.find((workflow) => {
return workflow.get('uuid') == id;
})
return (
<ListItem
key={i}
primaryText={item.get('name')}
leftCheckbox={
this.props.contentView.workflow == item.get('id')
? (
<Checkbox
checked={true}
onClick={this.onCheckClick.bind(this, 'workflow', false)}
/>
) : (
<Checkbox
checked={false}
onClick={this.onCheckClick.bind(this, 'workflow', item.get('id'))}
/>
)
}
/>
);
})}
</List>
</Col>
)
: ''
}
<Col xs={3} className='dropdown-box'>
<List>
<Subheader>Status</Subheader>
<ListItem
primaryText="All"
leftCheckbox={
!this.props.contentView.status
? (<Checkbox checked={true} />)
: (<Checkbox checked={false} onClick={this.onCheckClick.bind(this, 'status', false)} />)
}
/>
{['Draft', 'Scheduled', 'Published'].map((item, i) => {
return (
<ListItem
key={i}
primaryText={item}
leftCheckbox={
this.props.contentView.status == item.toLowerCase()
? (
<Checkbox
checked={true}
onClick={this.onCheckClick.bind(this, 'status', false)}
/>
) : (
<Checkbox
checked={false}
onClick={this.onCheckClick.bind(this, 'status', item.toLowerCase())}
/>
)
}
/>
);
})}
</List>
</Col>
<Col xs={3} className='dropdown-box'>
<List>
<Subheader>
Sort By <FontIcon
onClick={this.onFlipClick.bind(this)}
className='mui-icons' style={{verticalAlign:'middle', cursor:'pointer'}}>
{ this.props.contentView.flip ? 'arrow_drop_down' : 'arrow_drop_up'}
</FontIcon>
</Subheader>
{
[{
name: 'Modified',
token: 'modified_at'
},
{
name: 'Created',
token: 'created_at'
},
{
name: 'Weight',
token: 'weight'
},
{
name: 'Title',
token: 'title'
},
{
name: 'Slug',
token: 'slug'
}].map((item, i) => {
return (
<ListItem
key={i}
primaryText={item.name}
leftCheckbox={
this.props.contentView.sorter == item.token
? (
<Checkbox
checked={true}
onClick={this.onCheckClick.bind(this, 'sorter', false)}
/>
) : (
<Checkbox
checked={false}
onClick={this.onCheckClick.bind(this, 'sorter', item.token)}
/>
)
}
/>
);
})}
</List>
</Col>
</Row>
</div>
</Paper>
{
this.props.contentView.type == 'media'
? (
<Paper className="toolbar">
<Row middle='xs'>
<Col xs={12}>
<FlatButton
label='Type'
disabled={true}
/>
<FlatButton
label='All'
primary={!this.props.contentView.mediatype ? true : false}
onClick={this.handleMediaType.bind(this, '')}
/>
{mediaFilterTypes.map((type, i) => {
return (
<FlatButton
label={type.label}
primary={this.props.contentView.mediatype == type.filter ? true : false}
onClick={this.handleMediaType.bind(this, type.filter)}
/>
)
})}
</Col>
</Row>
</Paper>
)
:''
}
</div>
);
}
}
const mapStateToProps = (state) => {
return {
content: state.content,
workflows: state.workflows,
contentView: state.contentView
};
}
export default connect(mapStateToProps)(ContentToolbar);