AddCompany form rules.

+ Fix redpelicans#13 redpelicans#14 redpelicans#15.

Author: Matthias LECONTE

src/client/components/Companies/Add.js

@@ -4,7 +4,6 @@ import { Row, Col, Form, Select, Button, Input, AutoComplete, Switch } from 'ant
 import { Link, Prompt } from 'react-router-dom';
 import styled from 'styled-components';
 import Avatar from '../Avatar';
-import colors from '../../utils/colors';
 import fields from '../../forms/companies';
 
 const FormItem = Form.Item;
@@ -109,8 +108,10 @@ class AddCompany extends React.Component {
                   style={{ width: '60px' }}
                   onChange={this.handleColorChange}
                 >
-                  {R.map(c =>
-                    <Option value={c} key={c}><Color color={c} /></Option>)(colors)}
+                  { R.map(c =>
+                    <Option value={c} key={c}>
+                      <Color color={c} />
+                    </Option>)(color.domainValues) }
                 </Select>
               )}
             </FormItem>
@@ -129,10 +130,11 @@ class AddCompany extends React.Component {
           <Col sm={4}>
             <FormItem label={type.label}>
               {getFieldDecorator(type.label, type)(
-                <Select>
-                  <Option value="client">Client</Option>
-                  <Option value="partner">Partner</Option>
-                  <Option value="tenant">Tenant</Option>
+                <Select style={{ textTransform: 'capitalize' }}>
+                  { R.map(({ key, value }) =>
+                    <Option value={key} key={key}>
+                      {value}
+                    </Option>)(type.domainValues) }
                 </Select>
               )}
             </FormItem>

src/client/forms/companies.js

@@ -1,30 +1,41 @@
-import { randomColor } from '../utils/colors';
+import colors, { randomColor } from '../utils/colors';
 
 const fields = {
   type: {
     label: 'Type',
     rules: [
-      { required: true, message: 'Required' },
+      { required: true },
+      { type: 'enum', enum: ['client', 'tenant', 'partner'] },
     ],
     initialValue: 'client',
+    domainValues: [
+      { key: 'client', value: 'Client' },
+      { key: 'partner', value: 'Partner' },
+      { key: 'tenant', value: 'Tenant' },
+    ],
+    validateTrigger: 'onBlur',
   },
 
   name: {
     label: 'Name',
     rules: [
-       { required: true, message: 'Required' },
+       { required: true },
+       { whitespace: true },
+       { min: 3, max: 30 },
        { pattern: /^[a-zA-Z0-9 ]*$/, message: 'Unauthorized character' },
-       { pattern: /^.{3,30}$/, message: 'Length should be between 3 and 30 chars.' },
     ],
+    validateTrigger: 'onBlur',
   },
 
   color: {
     label: 'Color',
     rules: [
-      { required: true, message: 'Required' },
-      { pattern: /^#[a-zA-Z0-9]{6}$/, message: 'Invalid color' },
+      { required: true },
+      { type: 'enum', enum: colors },
     ],
     initialValue: randomColor(),
+    domainValues: colors,
+    validateTrigger: 'onBlur',
   },
 
   preferred: {
@@ -35,30 +46,58 @@ const fields = {
 
   website: {
     label: 'Website',
+    rules: [
+      { type: 'url' },
+    ],
+    validateTrigger: 'onBlur',
   },
 
   street: {
     label: 'Street',
+    rule: [
+      { whitespace: true },
+    ],
+    validateTrigger: 'onBlur',
   },
 
   zipcode: {
     label: 'Zip Code',
+    rule: [
+      { whitespace: true },
+    ],
+    validateTrigger: 'onBlur',
   },
 
   city: {
     label: 'City',
+    rule: [
+      { whitespace: true },
+    ],
+    validateTrigger: 'onBlur',
   },
 
   country: {
     label: 'Country',
+    rule: [
+      { whitespace: true },
+    ],
+    validateTrigger: 'onBlur',
   },
 
   tags: {
     label: 'Tags',
+    rule: [
+      { whitespace: true },
+    ],
+    validateTrigger: 'onBlur',
   },
 
   notes: {
     label: 'Notes',
+    rule: [
+      { whitespace: true },
+    ],
+    validateTrigger: 'onBlur',
   },
 
 };