Customer filters

Author: tnoworyta

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,4 +1,5 @@
 class CustomerResource < JSONAPI::Resource
+  extend ModelFilter
   attributes :company_name,
              :contact_name,
              :contact_title,
@@ -12,4 +13,5 @@ class CustomerResource < JSONAPI::Resource
              :created_at
 
   paginator :paged
+  model_filters :company_name_contains
 end

client/src/components/Customers/CustomerList.js

@@ -1,9 +1,11 @@
 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();
 
@@ -14,6 +16,7 @@ export class CustomerList extends Component {
   }
 
   render() {
+    const { onFilter } = this.props;
     const columns = [
       {
         attribute: 'companyName',
@@ -36,9 +39,21 @@ export class CustomerList extends Component {
     ];
 
     return (
-      <ListTable {...this.props} columns={columns} />
+      <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/Routes.js

@@ -36,6 +36,7 @@ export class Routes extends PureComponent {
           <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}/>