merge button for editorial workflow

src/components/UnpublishedListing.css

@@ -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;
+  }
 }
 
 

src/components/UnpublishedListing.js

@@ -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);