orders list and new order form

Author: kantorm

client/src/api/normalize.js

@@ -69,6 +69,28 @@ const serializers = {
       keyForAttribute: 'camelCase',
     }),
   },
+
+  orders: {
+    serializer: new Serializer('orders', {
+      keyForAttribute: 'camelCase',
+      attributes: [
+        'orderDate',
+        'requiredDate',
+        'shippedDate',
+        'shipVia',
+        'freight',
+        'shipName',
+        'shipAddress',
+        'shipCity',
+        'shipRegion',
+        'shipPostalCode',
+        'shipCountry',
+      ],
+    }),
+    deserializer: new Deserializer({
+      keyForAttribute: 'camelCase',
+    }),
+  },
 };
 
 export const normalize = (type, data) => {

client/src/components/App.js

@@ -38,6 +38,9 @@ export class App extends Component {
               <NavItem>
                 <NavLink href="/#/categories">Categories</NavLink>
               </NavItem>
+              <NavItem>
+                <NavLink href="/#/orders">Orders</NavLink>
+              </NavItem>
               <NavItem>
                 {
                   userIsAdmin && <NavLink href="/#/users">Users</NavLink>

client/src/components/Orders/OrderEdit.js

@@ -0,0 +1,53 @@
+import React, { Component, PropTypes } from 'react';
+import { push } from 'react-router-redux';
+import { connect } from 'react-redux';
+import { get, find, omit } from 'lodash';
+
+import { ErrorAlert, Loading, EditHeader } from '../UI';
+import { withResource } from '../../hocs';
+import OrderForm from './OrderForm';
+import {
+  fetchList,
+  getMany,
+} from '../../store/api';
+
+export class OrderEdit extends Component {
+  componentWillMount() {
+    const { params, fetchResource } = this.props;
+
+    if (params.id) {
+      fetchResource({ id: params.id });
+    }
+  }
+
+  render() {
+    const { isNew, error, loading, resource, onSubmit, orders } = this.props;
+
+    if (error) {
+      return (<ErrorAlert {...error} />);
+    }
+
+    if (loading) {
+      return (<Loading/>);
+    }
+
+    return (
+      <div>
+        <EditHeader {...this.props}>{ isNew ? 'New Order' : resource.title }</EditHeader>
+        <OrderForm initialValues={resource} isNew={isNew} onSubmit={onSubmit} />
+      </div>
+    );
+  }
+}
+
+export const mapStateToProps = (state, props) => ({
+  categories: getMany(state, 'orders'),
+});
+
+export const mapDispatchToProps = dispatch => ({
+  redirectToIndex: () => dispatch(push('/orders')),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(
+  withResource('orders')(OrderEdit),
+);

client/src/components/Orders/OrderForm.js

@@ -0,0 +1,73 @@
+import React, { Component, PropTypes } from 'react';
+import { isEmpty } from 'lodash';
+import { Field, reduxForm } from 'redux-form';
+import { Button, Form, Col, Row } from 'reactstrap';
+
+import { InputField, required } from '../../forms';
+
+class OrderForm extends Component {
+  render() {
+    const { handleSubmit, onSubmit, onDelete, reset, isNew, submitSucceeded } = this.props;
+
+    if (isNew && submitSucceeded) {
+      setTimeout(() => reset());
+    }
+
+    const submitOnChange = () => {
+      if (!isNew) {
+        setTimeout(() => handleSubmit(onSubmit)(), 0);
+      }
+    };
+
+    return (
+      <Form onSubmit={handleSubmit}>
+        <Row>
+          <Col xs="10" sm="8" md="6">
+            <Field
+              name="orderDate"
+              label="Order date"
+              component={InputField}
+              onChange={submitOnChange}
+            />
+            <Field
+              name="shippedDate"
+              label="Shipped date"
+              component={InputField}
+              onChange={submitOnChange}
+            />
+            <Field
+              name="shipAddress"
+              label="Ship address"
+              component={InputField}
+              onChange={submitOnChange}
+            />
+            <Field
+              name="shipCity"
+              label="Ship city"
+              component={InputField}
+              onChange={submitOnChange}
+            />
+            <Field
+              name="shipRegion"
+              label="Ship region"
+              component={InputField}
+              onChange={submitOnChange}
+            />
+          </Col>
+          <Col xs="2">
+          {
+            isNew
+              ? <Button color="success">+</Button>
+              : <Button color="danger" onClick={onDelete}>X</Button>
+          }
+          </Col>
+        </Row>
+      </Form>
+    );
+  }
+}
+
+export default reduxForm({
+  enableReinitialize: true,
+  form: 'order',
+})(OrderForm);

client/src/components/Orders/OrderList.js

@@ -0,0 +1,74 @@
+import React, { Component, PropTypes } from 'react';
+import { Link } from 'react-router';
+import { connect } from 'react-redux';
+import { get, find, keyBy } from 'lodash';
+import { Button } from 'reactstrap';
+
+import { fetchList, getMap, getMany } from '../../store/api';
+import { withResourceList } from '../../hocs';
+import { ListHeader, ListTable } from '../UI';
+
+const formatDate = date => (new Date(date)).toLocaleString();
+
+export class OrderList extends Component {
+  componentWillMount() {
+    const {resourceList} = this.props;
+    this.props.fetchResourceList({sort: '-orderDate', ...resourceList.params});
+  }
+
+render() {
+    const { resourceList, onFilter, categories } = this.props;
+    const columns = [
+      {
+        attribute: 'order_date',
+        header: 'Order date',
+        minWidth: '50px',
+        rowRender: order => formatDate(order.orderDate),
+      },
+      {
+        attribute: 'shippedDate',
+        header: 'Shipped date',
+        rowRender: order => formatDate(order.shippedDate),
+        sortable: true,
+      },
+      {
+        attribute: 'shipAddress',
+        header: 'Ship address',
+        rowRender: order => order.shipAddress,
+        sortable: true,
+      },
+      {
+        attribute: 'shipCity',
+        header: 'Ship city',
+        rowRender: order => order.shipCity,
+        sortable: true,
+      },
+      {
+        attribute: 'shipRegion',
+        header: 'Ship region',
+        rowRender: order => order.shipRegion,
+        sortable: true,
+      },
+    ];
+
+    return (
+      <div>
+        <Button tag={Link} to={'/orders/new'}>New Order</Button>
+        <ListTable {...this.props} columns={columns} />
+      </div>
+    );
+  }
+}
+
+export const mapStateToProps = state => ({
+  ordersById: getMap(state, 'orders'),
+  orders: getMany(state, 'orders'),
+});
+
+export const mapDispatchToProps = dispatch => ({
+  fetchOrders: () => dispatch(fetchList('orders', { page: { size: 999 } })),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(
+  withResourceList('orders')(OrderList),
+);

client/src/components/Orders/index.js

@@ -0,0 +1,2 @@
+export OrderList from './OrderList';
+export OrderEdit from './OrderEdit';

client/src/components/Routes.js

@@ -9,6 +9,7 @@ import { PostList, PostEdit } from './Posts';
 import { CategoryList, CategoryEdit } from './Categories';
 import { UserList, UserEdit } from './Users';
 import { Login } from './Auth';
+import { OrderList, OrderEdit } from './Orders';
 
 const UserIsAuthenticated = UserAuthWrapper({ authSelector: getUser });
 const UserIsAdmin = UserAuthWrapper({
@@ -28,6 +29,9 @@ export class Routes extends PureComponent {
       <Router history={history}>
         <Route path="/" component={UserIsAuthenticated(App)}>
           <IndexRoute component={Dashboard}/>
+          <Route path="/orders" component={OrderList}/>
+          <Route path="/orders/new" component={OrderEdit}/>
+          <Route path="/orders/:id" component={OrderEdit}/>
           <Route path="/posts" component={PostList}/>
           <Route path="/posts/new" component={PostEdit}/>
           <Route path="/posts/:id" component={PostEdit}/>