merge button for editorial workflow
This commit is contained in:
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
@ -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);
|
||||
|
Reference in New Issue
Block a user