Added Customer Component. Used at OrderShow. #23

dialog for when there are no orders in the db. #23

Formatted dates to human readable. #23

client/src/Utils.js

@@ -1,13 +1,18 @@
-export default function debounce(func, wait) {
-	let timeout = null;
-	return function() {
-		const ctx = this;
-		const args = arguments;
-		const later = function() {
-			timeout = null;
-			func.apply(ctx, args);
+export default class Utils {
+	static debounce(func, wait) {
+		let timeout = null;
+		return function() {
+			const ctx = this;
+			const args = arguments;
+			const later = function() {
+				timeout = null;
+				func.apply(ctx, args);
+			}
+			clearTimeout(timeout);
+			timeout = setTimeout(later, wait || 200);
 		}
-		clearTimeout(timeout);
-		timeout = setTimeout(later, wait || 200);
+	}
+	static dateToHumanReadableString(iso8601) {
+		return new Date(iso8601).toString();
 	}
 }

client/src/components/Customer.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class Customer extends Component {
+	render(){
+		const customer = this.props.customer;
+		return (
+			<div className="pull-right">
+				<dl className="dl-horizontal">
+	  				<dt>Reference</dt>
+	  				<dd>{customer.reference}</dd>
+	  				<dt>Company Name</dt>
+	  				<dd>{customer.company_name}</dd>
+	  				<dt>Address</dt>
+	  				<dd>{customer.address}</dd>
+	  				<dt>Telephone</dt>
+	  				<dd>{customer.telephone}</dd>
+	  				<dt>Email</dt>
+	  				<dd>{customer.email}</dd>
+	  				<dt>Contact Name</dt>
+	  				<dd>{customer.contact_name}</dd>
+	  				<dt>Contact Surname</dt>
+	  				<dd>{customer.contact_surname}</dd>
+				</dl>
+			</div>
+		);
+	}
+}
+
+Customer.propTypes = {
+	customer: PropTypes.object.isRequired,
+};

client/src/components/OrderList.js

@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
-import { Table } from 'react-bootstrap';
+import { Table, Alert } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { RoutesHelper } from '../Routes';
+import Utils from '../Utils.js';
 
 export default class OrderList extends Component {
 	render() {
@@ -18,20 +19,27 @@ export default class OrderList extends Component {
 			return (
 				<tr key={value.id}>
 					<td>{value.id}</td>
-					<td>{value.created_at}</td>
-					<td>{value.updated_at}</td>	
+					<td>{Utils.dateToHumanReadableString(value.created_at)}</td>
+					<td>{Utils.dateToHumanReadableString(value.updated_at)}</td>	
 					<td>
 						<Link to={RoutesHelper.order_path(`${value.id}`)}>Show</Link>
 					</td>
 				</tr>
 			);
 		});
-		return (
+		const table = (
 			<Table responsive hover>
 				<thead>{header}</thead>
 				<tbody>{body}</tbody>
 			</Table>
 		);
+		const dialog = (
+			<Alert bsStyle="info" style={{marginTop: '1em'}}>
+		    	<strong>Eeeeey!</strong> There are no orders yet.
+		  	</Alert>
+  		);
+  		const display = this.props.list.length === 0 ? dialog : table;
+		return display;
 	}
 }
 

client/src/components/OrderShow.js

@@ -1,40 +1,27 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import Customer from './Customer';
+import Utils from '../Utils.js';
 import { Row, Col } from 'react-bootstrap';
 import { Panel } from 'react-bootstrap';
 
 export default class OrderShow extends Component {
 	render() {
 		const title = (<h3>Order {this.props.order.id}</h3>);
 		const order = this.props.order;
-		const customer = this.props.order.customer;
 		return (
 			<Panel header={title} bsStyle="success">
 				<Row>
 					<Col xs={6}>
 						<dl className="dl-horizontal">
-			  				<dt>Created At:</dt>
-			  				<dd>{order.created_at}</dd>
-			  				<dt>Updated At:</dt>
-			  				<dd>{order.updated_at}</dd>
+			  				<dt>Created At</dt>
+			  				<dd>{Utils.dateToHumanReadableString(order.created_at)}</dd>
+			  				<dt>Updated At</dt>
+			  				<dd>{Utils.dateToHumanReadableString(order.updated_at)}</dd>
 						</dl>
 					</Col>
 					<Col xs={6}>
-						<Row>
-							<Col xs={12}>
-								<h3 className="pull-right">Customer</h3>
-							</Col>
-						</Row>
-						<Row>
-							<Col xs={12}>
-								<div className="pull-right">
-									<dl className="dl-horizontal">
-			  							<dt>Reference</dt>
-			  							<dd>{customer.reference}</dd>
-									</dl>
-								</div>
-							</Col>
-						</Row>
+						<Customer customer={this.props.order.customer} />
 					</Col>
 				</Row>
     		</Panel>

client/src/containers/OrderContainer.js

@@ -6,16 +6,16 @@ import FeatureValueService from '../services/FeatureValueService';
 import OrderShow from '../components/OrderShow';
 import Create from '../components/OrderItem/Create';
 import List from '../components/OrderItem/List';
-import debounce from '../Utils';
+import Utils from '../Utils';
 import { Grid, Row, Col } from 'react-bootstrap';
 
 export default class OrderContainer extends Component {
 	constructor(props) {
 		super(props);
 		this.state = { order: null, products:null };
 		this.addOrderItem = this.addOrderItem.bind(this);
-		this.onChangeFeatureValue = debounce(this.onChangeFeatureValue.bind(this), 1000);
-		this.onChangeOrderItemQuantity = debounce(this.onChangeOrderItemQuantity.bind(this), 1000);
+		this.onChangeFeatureValue = Utils.debounce(this.onChangeFeatureValue.bind(this), 1000);
+		this.onChangeOrderItemQuantity = Utils.debounce(this.onChangeOrderItemQuantity.bind(this), 1000);
 	}
 	addOrderItem(product_id) {
 		OrderItemService.create(this.state.order.id, product_id)