OEUI-235: Render action buttons for each draft item (#169)

app/js/components/Draft.jsx

@@ -2,17 +2,54 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import shortid from 'shortid';
+import constants from '../utils/constants';
+import IconButton from './button/IconButton';
 
 export class Draft extends PureComponent {
   renderDraftList = () => {
     const { draftOrders } = this.props;
     return draftOrders.map((order) => {
+      const isPanel = !!order.set;
+      const draftType = !isPanel ? 'single' : 'panel';
       const orderName = order.display || order.drugName;
+      const iconClass = classNames(
+        'scale',
+        {
+          'i-gray': order.urgency === constants.ROUTINE || typeof order.urgency === 'undefined',
+          'i-red': order.urgency === constants.STAT,
+        },
+      );
+
       return (
         <li className="draft-list small-font" key={shortid.generate()}>
+          <span className="order-status">{!order.action ? 'NEW' : order.action}</span>
           <span className="draft-name">{orderName.toLowerCase()}</span>
           <div className="action-btn-wrapper">
-            {/* The action are to be dynamically set */}
+            <span className="action-btn">
+              { order.type !== 'drugorder' ?
+                <IconButton
+                  iconClass={iconClass}
+                  iconTitle="Urgency"
+                  onClick={() => {}}
+                  icon="&#x25B2;"
+                  id="draft-toggle-btn icon-btn-anchor"
+                /> :
+                <IconButton
+                  iconClass="icon-pencil"
+                  iconTitle="EDIT"
+                  onClick={() => {}}
+                  id="draft-toggle-btn icon-btn-anchor"
+                />
+              }
+            </span>
+            <span className="action-btn right">
+              <IconButton
+                iconClass="icon-remove"
+                iconTitle="Discard"
+                id="draft-discard-btn"
+                onClick={() => {}}
+              />
+            </span>
           </div>
         </li>);
     });

app/js/components/button/IconButton.jsx

@@ -7,12 +7,16 @@ class IconButton extends PureComponent {
     iconTitle: PropTypes.string,
     onClick: PropTypes.func.isRequired,
     dataContext: PropTypes.object,
+    icon: PropTypes.string,
+    id: PropTypes.string,
   }
 
   static defaultProps = {
     iconClass: '',
     iconTitle: '',
     dataContext: {},
+    icon: null,
+    id: '',
   }
 
   handleClick = (event) => {
@@ -21,12 +25,13 @@ class IconButton extends PureComponent {
     this.props.onClick(this.props.dataContext);
   }
   render() {
-    const { iconClass, iconTitle } = this.props;
-
+    const {
+      id, iconClass, iconTitle, icon,
+    } = this.props;
     return (
       <span>
-        <a id="icon-btn-anchor" href="#" onClick={this.handleClick}>
-          <i className={`${iconClass} scale`} title={iconTitle} />
+        <a id={`${id}`} href="#" onClick={this.handleClick}>
+          <i className={`${iconClass} scale`} title={iconTitle}>{icon && icon}</i>
         </a>
       </span>
     );

app/js/components/orderEntry/OrderEntryPage.jsx

@@ -240,7 +240,7 @@ OrderEntryPage.propTypes = {
   fetchPatientNote: PropTypes.func.isRequired,
   setSelectedOrder: PropTypes.func.isRequired,
   currentOrderType: PropTypes.object,
-  draftLabOrders: PropTypes.array.isRequired,
+  draftLabOrders: PropTypes.object.isRequired,
   draftDrugOrders: PropTypes.arrayOf(PropTypes.any).isRequired,
 };
 

app/js/components/orderEntry/styles.scss

@@ -231,9 +231,18 @@
       -webkit-transition: all 200ms ease-in-out;
       -moz-transition: all 200ms ease-in-out;
     }
-  }
-  .draft-name {
-    text-transform: capitalize;
+
+    .order-status{
+      font-size: .7em;
+      margin-right: 10px;
+    }
+
+    .draft-name {
+      text-transform: capitalize;
+      font-size: .9em;
+      flex-basis: 130px;
+      font-weight: bolder;
+    }
   }
 
   /* Icon styles */

tests/components/Draft.test.jsx

@@ -6,7 +6,7 @@ let mountedComponent;
 
 props = {
   draftOrders: [
-    { uuid: 6, display: 'hermatocrite' }
+    { uuid: 6, display: 'hermatocrite', set: true, type: 'laborder' }
   ],
   handleSubmit: jest.fn(),
   handleDraftDiscard: jest.fn(),
@@ -29,6 +29,12 @@ describe('Component: Draft', () => {
     expect(component).toMatchSnapshot();
   });
 
+  it('should display the action buttons', () => {
+    const component = getComponent();
+    const actionButton = component.find('.action-btn');
+    expect(actionButton.length).toEqual(2);
+  });
+
   it('Should be able to display drug data to the list', () => {
     const component = getComponent();
     component.setProps({ draftOrders: [
@@ -43,7 +49,7 @@ describe('Component: Draft', () => {
     const component = getComponent();
     component.setProps({ draftOrders: [
       { uuid: 6, drugName: 'paracetamol' },
-      { uuid: 7, display: 'hermatology' }
+      { uuid: 7, display: 'hermatology', action: 'NEW', type: 'drugorder'}
     ]});
     const discardButton = component.find('#draft-discard-all');
     discardButton.simulate('click', {});

tests/components/button/IconButton.test.jsx

@@ -17,6 +17,8 @@ describe('Component: IconButton', () => {
       iconClass: 'icon-remove',
       iconTitle: 'Header',
       onClick: jest.fn(),
+      id:'icon-btn-anchor',
+      icon: '▲'
     };
     mountedComponent = undefined;
   });