merge button for editorial workflow

This commit is contained in:
Cássio Zen
2016-09-14 18:25:45 -03:00
parent 91846cdbc5
commit 71b5b0bde9
9 changed files with 121 additions and 40 deletions

View File

@ -26,7 +26,7 @@
width: 100% !important;
margin: 7px 0;
& h1 {
& h2 {
font-size: 17px;
& small {
font-weight: normal;
@ -38,6 +38,11 @@
font-size: 12px;
margin-top: 5px;
}
& button {
margin: 10px 10px 0 0;
float: right;
}
}

View File

@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import moment from 'moment';
import { Card } from './UI';
import { Link } from 'react-router';
import { statusDescriptions } from '../constants/publishModes';
import { status, statusDescriptions } from '../constants/publishModes';
import styles from './UnpublishedListing.css';
const CARD = 'card';
@ -22,56 +22,52 @@ function Column({ connectDropTarget, status, isOver, children }) {
</div>
);
}
const columnTargetSpec = {
drop(props, monitor) {
const slug = monitor.getItem().slug;
const collection = monitor.getItem().collection;
const oldStatus = monitor.getItem().currentStatus;
const oldStatus = monitor.getItem().ownStatus;
props.onChangeStatus(collection, slug, oldStatus, props.status);
}
};
function columnCollect(connect, monitor) {
return {
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver()
};
}
Column = DropTarget(CARD, columnTargetSpec, columnCollect)(Column);
/*
* Card DropTarget Component
*/
function EntryCard({ connectDragSource, children }) {
function EntryCard({ slug, collection, ownStatus, onRequestPublish, connectDragSource, children }) {
return connectDragSource(
<div>
<Card className={styles.card}>
{children}
{(ownStatus === status.last()) &&
<button onClick={onRequestPublish}>Publish now</button>
}
</Card>
</div>
);
}
const cardDragSpec = {
beginDrag(props) {
return {
slug: props.slug,
collection: props.collection,
currentStatus: props.status
ownStatus: props.ownStatus
};
}
};
function cardCollect(connect, monitor) {
return {
connectDragSource: connect.dragSource()
};
}
EntryCard = DragSource(CARD, cardDragSpec, cardCollect)(EntryCard);
/*
@ -81,6 +77,14 @@ class UnpublishedListing extends React.Component {
constructor(props) {
super(props);
this.renderColumns = this.renderColumns.bind(this);
this.requestPublish = this.requestPublish.bind(this);
}
requestPublish(collection, slug, ownStatus) {
if (ownStatus !== status.last()) return;
if (window.confirm('Are you sure you want to publish this entry?')) {
this.props.handlePublish(collection, slug, ownStatus);
}
}
renderColumns(entries, column) {
@ -103,14 +107,18 @@ class UnpublishedListing extends React.Component {
const author = entry.getIn(['data', 'author'], entry.getIn(['metaData', 'user']));
const timeStamp = moment(entry.getIn(['metaData', 'timeStamp'])).format('llll');
const link = `/editorialworkflow/${entry.getIn(['metaData', 'collection'])}/${entry.getIn(['metaData', 'status'])}/${entry.get('slug')}`;
const slug = entry.get('slug');
const status = entry.getIn(['metaData', 'status']);
const collection = entry.getIn(['metaData', 'collection']);
return (
<EntryCard
key={entry.get('slug')}
slug={entry.get('slug')}
status={entry.getIn(['metaData', 'status'])}
collection={entry.getIn(['metaData', 'collection'])}
key={slug}
slug={slug}
ownStatus={status}
collection={collection}
onRequestPublish={this.requestPublish.bind(this, collection, slug, status)} // eslint-disable-line
>
<h1><Link to={link}>{entry.getIn(['data', 'title'])}</Link> <small>by {author}</small></h1>
<h2><Link to={link}>{entry.getIn(['data', 'title'])}</Link> <small>by {author}</small></h2>
<p>Last updated: {timeStamp} by {entry.getIn(['metaData', 'user'])}</p>
</EntryCard>
);
@ -122,7 +130,6 @@ class UnpublishedListing extends React.Component {
render() {
const columns = this.renderColumns(this.props.entries);
return (
<div className={styles.clear}>
<h1>Editorial Workflow</h1>
@ -137,6 +144,7 @@ class UnpublishedListing extends React.Component {
UnpublishedListing.propTypes = {
entries: ImmutablePropTypes.orderedMap,
handleChangeStatus: PropTypes.func.isRequired,
handlePublish: PropTypes.func.isRequired,
};
export default DragDropContext(HTML5Backend)(UnpublishedListing);