Merge pull request #18 from tnoworyta/tgn-north-customers

North customers crud

Author: tb

app/models/customer.rb

@@ -1,2 +1,3 @@
 class Customer < ApplicationRecord
+  scope :company_name_contains, -> (value) { where('company_name ILIKE ?', "%#{value.join}%") }
 end

app/resources/customer_resource.rb

@@ -1,12 +1,17 @@
 class CustomerResource < JSONAPI::Resource
+  extend ModelFilter
   attributes :company_name,
-             :contact_name
-             :contact_title
-             :address
-             :city
-             :region
-             :postal_code
-             :country
-             :phone
-             :fax
+             :contact_name,
+             :contact_title,
+             :address,
+             :city,
+             :region,
+             :postal_code,
+             :country,
+             :phone,
+             :fax,
+             :created_at
+
+  paginator :paged
+  model_filters :company_name_contains
 end

client/src/api/normalize.js

@@ -58,6 +58,18 @@ const serializers = {
     }),
   },
 
+  customers: {
+    serializer: new Serializer('customers', {
+      keyForAttribute: 'camelCase',
+      attributes: [
+        'companyName'
+      ],
+    }),
+    deserializer: new Deserializer({
+      keyForAttribute: 'camelCase'
+    }),
+  },
+
   roles: {
     serializer: new Serializer('roles', {
       keyForAttribute: 'camelCase',

client/src/components/App.js

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

client/src/components/Customers/CustomerEdit.js

@@ -0,0 +1,48 @@
+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 CustomerForm from './CustomerForm';
+import { getMany, fetchList } from '../../store/api';
+
+export class CustomerEdit 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 Customer' : resource.company_name }</EditHeader>
+        <CustomerForm initialValues={resource} onSubmit={onSubmit}></CustomerForm>
+      </div>
+    );
+  }
+}
+
+export const mapStateToProps = (state, props) => ({
+  roles: getMany(state)
+});
+
+export const mapDispatchToProps = dispatch => ({
+  redirectToIndex: () => dispatch(push('/customers'))
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(
+  withResource('customers')(CustomerEdit),
+);

client/src/components/Customers/CustomerForm.js

@@ -0,0 +1,88 @@
+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 CustomerForm extends Component {
+  render() {
+    const { handleSubmit, pristine, reset, submitting } = this.props;
+
+    return (
+      <Form onSubmit={handleSubmit}>
+        <div>
+          <Field
+            name="companyName"
+            label="Company name"
+            component={InputField}
+          />
+          <Field
+            name="contactName"
+            label="Contact name"
+            component={InputField}
+          />
+          <Field
+            name="contactTitle"
+            label="Contact title"
+            component={InputField}
+          />
+          <Field
+            name="address"
+            label="Address"
+            component={InputField}
+          />
+          <Field
+            name="city"
+            label="City"
+            component={InputField}
+          />
+          <Field
+            name="Region"
+            label="Region"
+            component={InputField}
+          />
+
+          <Field
+            name="postalCode"
+            label="Postal code"
+            component={InputField}
+          />
+
+          <Field
+            name="country"
+            label="Country"
+            component={InputField}
+          />
+
+          <Field
+            name="phone"
+            label="Phone"
+            component={InputField}
+          />
+
+          <Field
+            name="fax"
+            label="Fax"
+            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, 'email');
+  return errors;
+};
+
+export default reduxForm({
+  enableReinitialize: true,
+  form: 'customer',
+  validate,
+})(CustomerForm);

client/src/components/Customers/CustomerList.js

@@ -0,0 +1,59 @@
+import React, { Component, PropTypes } from 'react';
+import { Link } from 'react-router';
+import { find, keyBy } from 'lodash';
+import { Button } from 'reactstrap';
+
+import { ListTable } from '../UI';
+import { withResourceList } from '../../hocs';
+import CustomerListFilter from './CustomerListFilter';
+
+const formatDate = date => (new Date(date)).toLocaleString();
+
+export class CustomerList extends Component {
+  componentWillMount() {
+    const { resourceList } = this.props;
+    this.props.fetchResourceList({ sort: '-companyName', ...resourceList.params });
+  }
+
+  render() {
+    const { onFilter } = this.props;
+    const columns = [
+      {
+        attribute: 'companyName',
+        header: 'Company Name',
+        rowRender: customer => <Link to={`/customers/${customer.id}`}>{customer.companyName}</Link>,
+        sortable: true,
+      },
+      {
+        attribute: 'contactName',
+        header: 'Contact Name',
+        rowRender: customer => <Link to={`/customers/${customer.id}`}>{customer.contactName}</Link>,
+        sortable: true,
+      },
+      {
+        attribute: 'createdAt',
+        header: 'Created At',
+        rowRender: customer => formatDate(customer.confirmedAt),
+        sortable: true,
+      }
+    ];
+
+    return (
+      <div>
+        <Button tag={Link} to={'/customers/new'}>New Customer</Button>
+
+        <CustomerListFilter
+          onSubmit={onFilter}>
+        </CustomerListFilter>
+
+        <ListTable {...this.props} columns={columns} />
+      </div>
+    );
+  }
+}
+
+export const mapStateToProps = state => ({
+  filter: get(state, 'form.customerListFilter.values') || {}
+});
+
+export default withResourceList('customers')(CustomerList);

client/src/components/Customers/CustomerListFilter.js

@@ -0,0 +1,35 @@
+import React, { Component, PropTypes } from 'react';
+import { isEmpty } from 'lodash';
+import { Field, reduxForm } from 'redux-form';
+import { Form, Row, Col } from 'reactstrap';
+
+import { InputField, SelectField } from '../../forms';
+
+class CustomerListFilter extends Component {
+  render() {
+    const { handleSubmit, onSubmit } = this.props;
+
+    const submitOnChange = () => setTimeout(() => handleSubmit(onSubmit)(), 0);
+
+
+    return (
+      <Form onSubmit={handleSubmit}>
+        <Row>
+          <Col md={8}>
+            <Field
+              name="company_name_contains"
+              label="Company Name Contains"
+              component={InputField}
+              onChange={submitOnChange}
+            />
+          </Col>
+        </Row>
+      </Form>
+    );
+  }
+}
+
+export default reduxForm({
+  form: 'customerListFilter',
+  destroyOnUnmount: false,
+})(CustomerListFilter);

client/src/components/Customers/index.js

@@ -0,0 +1,2 @@
+export CustomerList from './CustomerList';
+export CustomerEdit from './CustomerEdit';

client/src/components/Routes.js

@@ -10,6 +10,7 @@ import Dashboard from './Dashboard';
 import { PostList, PostEdit } from './Posts';
 import { CategoryList } from './Categories';
 import { UserList, UserEdit } from './Users';
+import { CustomerList, CustomerEdit } from './Customers';
 import { Login } from './Auth';
 
 const UserIsAuthenticated = UserAuthWrapper({ authSelector: getUser });
@@ -36,6 +37,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="/customers" component={UserIsAdmin(CustomerList)}/>
+          <Route path="/customers/new" component={UserIsAdmin(CustomerEdit)}/>
+          <Route path="/customers/:id" component={UserIsAdmin(CustomerEdit)}/>
         </Route>
         <Route path="/login" component={Login}/>
       </Router>