Merge pull request #19 from czikarito/display_products_on_frontend

Crud for products

Author: tb

app/resources/product_resource.rb

@@ -1,3 +1,5 @@
 class ProductResource < JSONAPI::Resource
-  attributes :product_name
+  attributes :product_name, :created_at
+
+  paginator :paged
 end

client/src/api/normalize.js

@@ -57,7 +57,18 @@ const serializers = {
       },
     }),
   },
-
+  products: {
+    serializer: new Serializer('products', {
+      keyForAttribute: 'camelCase',
+      attributes: [
+        'productName',
+        'createdAt'
+      ],
+    }),
+    deserializer: new Deserializer({
+      keyForAttribute: 'camelCase',
+    }),
+  },
   customers: {
     serializer: new Serializer('customers', {
       keyForAttribute: 'camelCase',
@@ -69,7 +80,6 @@ const serializers = {
       keyForAttribute: 'camelCase'
     }),
   },
-
   roles: {
     serializer: new Serializer('roles', {
       keyForAttribute: 'camelCase',

client/src/components/App.js

@@ -44,6 +44,9 @@ export class App extends Component {
                   userIsAdmin && <NavLink href="/#/users">Users</NavLink>
                 }
               </NavItem>
+              <NavItem>
+                <NavLink href="/#/products">Products</NavLink>
+              </NavItem>
             </Nav>
             <Nav navbar className="ml-auto">
               <NavDropdown isOpen={this.state.isOpen} toggle={this.toggle}>

client/src/components/Products/ProductEdit.js

@@ -0,0 +1,46 @@
+import React, { Component, PropTypes } from 'react';
+import { push } from 'react-router-redux';
+import { connect } from 'react-redux';
+
+import { ErrorAlert, Loading, EditHeader } from '../UI';
+import { withResource } from '../../hocs';
+import ProductForm from './ProductForm';
+import { getMany, fetchList } from '../../store/api';
+
+export class ProductEdit extends Component {
+  componentWillMount() {
+    const { params, fetchResource } = this.props;
+
+    if (params.id) {
+      fetchResource({ id: params.id });
+    }
+  }
+
+  render() {
+    const { isNew, error, loading, resource, onSubmit } = this.props;
+
+    if (error) {
+      return (<ErrorAlert {...error} />);
+    }
+
+    if (loading) {
+      return (<Loading />);
+    }
+
+    return (
+      <div>
+        <EditHeader {...this.props}>{ isNew ? 'New Product' : resource.productName }</EditHeader>
+        <ProductForm initialValues={resource} onSubmit={onSubmit}></ProductForm>
+      </div>
+    );
+  }
+}
+
+
+export const mapDispatchToProps = dispatch => ({
+  redirectToIndex: () => dispatch(push('/products')),
+});
+
+export default connect(null, mapDispatchToProps)(
+  withResource('products')(ProductEdit),
+);

client/src/components/Products/ProductForm.js

@@ -0,0 +1,39 @@
+import React, { Component, PropTypes } from 'react';
+import { isEmpty } from 'lodash';
+import { Field, reduxForm } from 'redux-form';
+import { Button, Form } from 'reactstrap';
+
+import { InputField, MultiselectField, required } from '../../forms';
+
+class ProductForm extends Component {
+  render() {
+    const { handleSubmit, pristine, reset, submitting } = this.props;
+
+    return (
+      <Form onSubmit={handleSubmit}>
+        <div>
+          <Field
+            name="productName"
+            label="Name"
+            component={InputField}
+          />
+        </div>
+        <div>
+          <Button disabled={pristine || submitting} color="primary">Submit</Button>
+          <Button disabled={pristine || submitting} onClick={reset}>Undo Changes</Button>
+        </div>
+      </Form>
+    );
+  }
+}
+
+const validate = (values) => {
+  const errors = required(values, 'productName');
+  return errors;
+};
+
+export default reduxForm({
+  enableReinitialize: true,
+  form: 'product',
+  validate,
+})(ProductForm);

client/src/components/Products/ProductList.js

@@ -0,0 +1,42 @@
+import React, { Component, PropTypes } from 'react';
+import { Link } from 'react-router';
+import { find, keyBy } from 'lodash';
+
+import { ListTable } from '../UI';
+import { withResourceList } from '../../hocs';
+import { Button } from 'reactstrap';
+
+const formatDate = date => (new Date(date)).toLocaleString();
+
+export class ProductList extends Component {
+  componentWillMount() {
+    const { resourceList } = this.props;
+    this.props.fetchResourceList({ sort: '-createdAt', ...resourceList.params });
+  }
+
+  render() {
+    const columns = [
+      {
+        attribute: 'productName',
+        header: 'Name',
+        rowRender: product => <Link to={`/products/${product.id}`}>{product.productName}</Link>,
+        sortable: true,
+      },
+      {
+        attribute: 'createdAt',
+        header: 'Created At',
+        rowRender: product => formatDate(product.createdAt),
+        sortable: true,
+      }
+    ];
+
+    return (
+      <div>
+        <Button tag={Link} to={'/products/new'}>New Product</Button>
+        <ListTable {...this.props} columns={columns} />
+      </div>
+    );
+  }
+}
+
+export default withResourceList('products')(ProductList);

client/src/components/Products/index.js

@@ -0,0 +1,2 @@
+export ProductList from './ProductList';
+export ProductEdit from './ProductEdit';

client/src/components/Routes.js

@@ -12,6 +12,7 @@ import { CategoryList } from './Categories';
 import { UserList, UserEdit } from './Users';
 import { CustomerList, CustomerEdit } from './Customers';
 import { Login } from './Auth';
+import { ProductList, ProductEdit } from './Products';
 
 const UserIsAuthenticated = UserAuthWrapper({ authSelector: getUser });
 const UserIsAdmin = UserAuthWrapper({
@@ -37,6 +38,9 @@ export class Routes extends PureComponent {
           <Route path="/categories" component={CategoryList}/>
           <Route path="/users" component={UserIsAdmin(UserList)}/>
           <Route path="/users/:id" component={UserIsAdmin(UserEdit)}/>
+          <Route path="/products" component={ProductList}/>
+          <Route path="/products/new" component={ProductEdit}/>
+          <Route path="/products/:id" component={ProductEdit}/>
           <Route path="/customers" component={UserIsAdmin(CustomerList)}/>
           <Route path="/customers/new" component={UserIsAdmin(CustomerEdit)}/>
           <Route path="/customers/:id" component={UserIsAdmin(CustomerEdit)}/>

config/routes.rb

@@ -3,11 +3,11 @@
   jsonapi_resources :categories
   jsonapi_resources :comments
   jsonapi_resources :posts
-  jsonapi_resources :products
   jsonapi_resources :users
   jsonapi_resources :roles
   jsonapi_resources :employees
   jsonapi_resources :orders
   jsonapi_resources :customers
   jsonapi_resources :suppliers
+  jsonapi_resources :products
 end