Add validation check

packages/data-grid/package.json

@@ -108,4 +108,4 @@
       "\\.(css|less|scss)$": "<rootDir>/src/__mocks__/styleMock.js"
     }
   }
-}
+}

packages/data-grid/src/createFilterBuilder/CreateFilterBuilder.jsx → packages/data-grid/src/FilterBuilder/FilterBuilder.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Button, Form, Card, Icon } from '@puppet/react-components';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import './CreateFilterBuilder.scss';
+import './FilterBuilder.scss';
 
 const propTypes = {
   id: PropTypes.string.isRequired,
@@ -23,7 +23,13 @@ const propTypes = {
       as: PropTypes.elementType,
     }),
   ),
-   /** An Array of operator objects */
+  /** Optional new label added above top field */
+  fieldLabel: PropTypes.string,
+  /** Optional new placeholder added above top field */
+  fieldPlaceholder: PropTypes.string,
+  /** Optional new error text added to the top field */
+  fieldErrorText: PropTypes.string,
+  /** An Array of operator objects */
   operatorOptions: PropTypes.arrayOf(
     PropTypes.shape({
       /** Unique action id */
@@ -40,6 +46,18 @@ const propTypes = {
       as: PropTypes.elementType,
     }),
   ),
+  /** Optional new label added above middle field */
+  operatorLabel: PropTypes.string,
+  /** Optional new placeholder added above middle field */
+  operatorPlaceholder: PropTypes.string,
+  /** Optional new error text added to the bottom field */
+  operatorErrorText: PropTypes.string,
+  /** Optional new label added above bottom field */
+  valueLabel: PropTypes.string,
+  /** Optional new placeholder added above bottom field */
+  valuePlaceholder: PropTypes.string,
+  /** Optional new error text added to the bottom field */
+  valueErrorText: PropTypes.string,
   /** Optional label for main button */
   buttonLabel: PropTypes.string,
   /** Optional label for form submit button */
@@ -81,12 +99,15 @@ const defaultProps = {
   buttonLabel: 'Create filter',
   submitLabel: 'Apply',
   cancelLabel: 'Cancel',
-  fieldLabel: "FIELD",
-  fieldPlaceholder: "Name",
-  operatorLabel: "OPERATOR",
-  operatorPlaceholder: "Contains",
-  valueLabel: "VALUE",
-  valuePlaceholder: "Enter a string or number",
+  fieldLabel: 'FIELD',
+  fieldPlaceholder: 'Select a field',
+  fieldErrorText: 'Please complete this field',
+  operatorLabel: 'OPERATOR',
+  operatorPlaceholder: 'Select an operator',
+  operatorErrorText: 'Please complete this field',
+  valueLabel: 'VALUE',
+  valuePlaceholder: 'Enter a string or number',
+  valueErrorText: 'Please complete this field',
   type: 'secondary',
   innerFocus: false,
   weight: 'bold',
@@ -98,10 +119,16 @@ const defaultProps = {
   style: {},
 };
 
-class CreateFilterBuilder extends Component {
+class FilterBuilder extends Component {
   constructor(props) {
     super(props);
-    this.state = { open: false, menuStyle: {} };
+    this.state = {
+      open: false,
+      values: { field: '', operator: '', value: '' },
+      fieldError: false,
+      operatorError: false,
+      valueError: false,
+    };
 
     this.open = this.open.bind(this);
     this.close = this.close.bind(this);
@@ -111,6 +138,8 @@ class CreateFilterBuilder extends Component {
     this.closeAndFocusButton = this.closeAndFocusButton.bind(this);
     this.onBlur = this.onBlur.bind(this);
     this.onApply = this.onApply.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.validateFields = this.validateFields.bind(this);
   }
 
   onClickButton(e) {
@@ -124,11 +153,23 @@ class CreateFilterBuilder extends Component {
     }
   }
 
+  onChange(_, newObj) {
+    this.setState({ values: newObj });
+  }
+
   onApply(value) {
     const { onSubmit } = this.props;
-    console.log("called")
-    onSubmit(value)
-    this.close();
+    const hasError = this.validateFields(value);
+    if (!hasError) {
+      onSubmit(value);
+      this.setState({
+        values: { field: '', operator: '', value: '' },
+        fieldError: false,
+        operatorError: false,
+        valueError: false,
+      });
+      this.close();
+    }
   }
 
   onBlur(e) {
@@ -137,6 +178,30 @@ class CreateFilterBuilder extends Component {
     }
   }
 
+  validateFields(valuesObj) {
+    let hasError = false;
+    const { field, operator, value } = valuesObj;
+    if (field === '') {
+      this.setState({ fieldError: true });
+      hasError = true;
+    } else {
+      this.setState({ fieldError: false });
+    }
+    if (operator === '') {
+      this.setState({ operatorError: true });
+      hasError = true;
+    } else {
+      this.setState({ operatorError: false });
+    }
+    if (value === '') {
+      this.setState({ valueError: true });
+      hasError = true;
+    } else {
+      this.setState({ valueError: false });
+    }
+    return hasError;
+  }
+
   closeAndFocusButton() {
     this.close();
     this.focusButton();
@@ -148,6 +213,12 @@ class CreateFilterBuilder extends Component {
 
   close() {
     this.setState({ open: false });
+    this.setState({
+      values: { field: '', operator: '', value: '' },
+      fieldError: false,
+      operatorError: false,
+      valueError: false,
+    });
   }
 
   focusMenu() {
@@ -161,18 +232,21 @@ class CreateFilterBuilder extends Component {
   }
 
   render() {
-    const { open } = this.state;
+    const { open, values, fieldError, operatorError, valueError } = this.state;
     const {
       id,
       buttonLabel,
       submitLabel,
       cancelLabel,
       fieldLabel,
       fieldPlaceholder,
+      fieldErrorText,
       operatorLabel,
       operatorPlaceholder,
+      operatorErrorText,
       valueLabel,
       valuePlaceholder,
+      valueErrorText,
       type,
       innerFocus,
       icon,
@@ -225,28 +299,31 @@ class CreateFilterBuilder extends Component {
             submitLabel={submitLabel}
             cancelLabel={cancelLabel}
             onCancel={this.close}
+            values={values}
+            onChange={this.onChange}
           >
             <Form.Field
               type="select"
               name="field"
-              autoComplete="Name"
               label={fieldLabel}
               placeholder={fieldPlaceholder}
               options={fieldOptions}
+              error={fieldError && fieldErrorText}
             />
             <Form.Field
               type="select"
               name="operator"
-              autoComplete="lastname"
               label={operatorLabel}
               placeholder={operatorPlaceholder}
               options={operatorOptions}
+              error={operatorError && operatorErrorText}
             />
             <Form.Field
               type="text"
               name="value"
               label={valueLabel}
               placeholder={valuePlaceholder}
+              error={valueError && valueErrorText}
             />
           </Form>
         </Card>
@@ -255,7 +332,7 @@ class CreateFilterBuilder extends Component {
   }
 }
 
-CreateFilterBuilder.propTypes = propTypes;
-CreateFilterBuilder.defaultProps = defaultProps;
+FilterBuilder.propTypes = propTypes;
+FilterBuilder.defaultProps = defaultProps;
 
-export default CreateFilterBuilder;
+export default FilterBuilder;

packages/data-grid/src/createFilterBuilder/CreateFilterBuilder.md → packages/data-grid/src/FilterBuilder/FilterBuilder.md

@@ -1,20 +1,23 @@
-### Create Filter Builder
+### Filter Builder
 
 ```jsx
   const fieldOptions = [
     { value: 'field1', label: 'TableColumn 1' },
     { value: 'field2', label: 'TableColumn 2' },
     { value: 'field3', label: 'TableColumn 3' },
   ];
-  const operatorOptions = [ { value: 'equals', label: 'Equals' },
+  const operatorOptions = [ 
+    { value: 'equals', label: 'Equals' },
+    { value: 'doesNotEquals', label: 'Does Not Equals' },
     { value: 'contains', label: 'Contains' },
+    { value: 'doesNotContains', label: 'Does Not Contains' },
     ];
 
     const onSubmit = (values) => {
         console.log('submitted :', values)
     };
 
-  <CreateFilterBuilder  
+  <FilterBuilder  
       fieldOptions={fieldOptions}
       operatorOptions={operatorOptions}
       onSubmit={onSubmit}

packages/data-grid/src/FilterBuilder/index.js

@@ -0,0 +1,3 @@
+import FilterBuilder from './FilterBuilder';
+
+export default FilterBuilder;