diff --git a/client/src/Utils.js b/client/src/Utils.js
index 0552428..9bd9918 100644
--- a/client/src/Utils.js
+++ b/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();
}
}
\ No newline at end of file
diff --git a/client/src/components/Customer.js b/client/src/components/Customer.js
new file mode 100644
index 0000000..ee42da1
--- /dev/null
+++ b/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 (
+
+
+ - Reference
+ - {customer.reference}
+ - Company Name
+ - {customer.company_name}
+ - Address
+ - {customer.address}
+ - Telephone
+ - {customer.telephone}
+ - Email
+ - {customer.email}
+ - Contact Name
+ - {customer.contact_name}
+ - Contact Surname
+ - {customer.contact_surname}
+
+
+ );
+ }
+}
+
+Customer.propTypes = {
+ customer: PropTypes.object.isRequired,
+};
\ No newline at end of file
diff --git a/client/src/components/OrderList.js b/client/src/components/OrderList.js
index 0cbbd33..475f503 100644
--- a/client/src/components/OrderList.js
+++ b/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 (
{value.id} |
- {value.created_at} |
- {value.updated_at} |
+ {Utils.dateToHumanReadableString(value.created_at)} |
+ {Utils.dateToHumanReadableString(value.updated_at)} |
Show
|
);
});
- return (
+ const table = (
);
+ const dialog = (
+
+ Eeeeey! There are no orders yet.
+
+ );
+ const display = this.props.list.length === 0 ? dialog : table;
+ return display;
}
}
diff --git a/client/src/components/OrderShow.js b/client/src/components/OrderShow.js
index a0a249a..da6831c 100644
--- a/client/src/components/OrderShow.js
+++ b/client/src/components/OrderShow.js
@@ -1,5 +1,7 @@
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';
@@ -7,34 +9,19 @@ export default class OrderShow extends Component {
render() {
const title = (Order {this.props.order.id}
);
const order = this.props.order;
- const customer = this.props.order.customer;
return (
- - Created At:
- - {order.created_at}
- - Updated At:
- - {order.updated_at}
+ - Created At
+ - {Utils.dateToHumanReadableString(order.created_at)}
+ - Updated At
+ - {Utils.dateToHumanReadableString(order.updated_at)}
-
-
- Customer
-
-
-
-
-
-
- - Reference
- - {customer.reference}
-
-
-
-
+
diff --git a/client/src/containers/OrderContainer.js b/client/src/containers/OrderContainer.js
index 775abb8..34c1d79 100644
--- a/client/src/containers/OrderContainer.js
+++ b/client/src/containers/OrderContainer.js
@@ -6,7 +6,7 @@ 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 {
@@ -14,8 +14,8 @@ export default class OrderContainer extends Component {
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)