dealing with validations on jp collections

4 files changed, 131 insertions, 74 deletions

diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js b/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
index 4031f9bf1..05929cc3c 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
@@ -67,10 +67,34 @@ const actions = {
     type: 'SAVE_PAGE',
     dispatch
   }),
-  updateTotalCount: (diff) =>({
+  updateTotalCount: (diff) => ({
     type: 'UPDATE_TOTAL_COUNT',
     diff
   }),
+  resetValidation: (target) => {
+    $(target).parent().removeClass('has-error').children('.help-block').remove()
+  },
+  validateFields : (fields) => {
+    const test = []
+
+    Object.keys(fields).map(function(key) {
+      test.push(fields[key].validity.valid)
+    })
+    if(test.indexOf(false) >= 0) {
+      // Form is invalid
+      test.map(function(item, i) {
+        if(item == false) {
+          const k = Object.keys(fields)[i]
+          $(fields[k]).parent().addClass('has-error').children('.help-block').remove()
+          $(fields[k]).parent().append("<span class='small help-block'>" + fields[k].validationMessage + "</span>")
+        }
+      })
+      return false
+    } else {
+      // Form is valid
+      return true
+    }
+  },
   submitJourneyPattern : (dispatch, state, next) => {
     let urlJSON = window.location.pathname + ".json"
     let req = new Request(urlJSON, {
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js
index 2c75dd808..b0e812dab 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js
@@ -1,14 +1,18 @@
 var React = require('react')
 var Component = require('react').Component
 var PropTypes = require('react').PropTypes
+var actions = require('../actions')
 
 class CreateModal extends Component {
   constructor(props) {
     super(props)
   }
-  handleSubmit(e) {
-    e.preventDefault()
-    this.props.onAddJourneyPattern(this.refs)
+
+  handleSubmit() {
+    if(actions.validateFields(this.refs) == true) {
+      this.props.onAddJourneyPattern(this.refs)
+      $('#NewJourneyPatternModal').modal('hide')
+    }
   }
 
   render() {
@@ -31,61 +35,65 @@ class CreateModal extends Component {
                 <h4>Ajouter une mission</h4>
               </div>
 
-              <div className='modal-body'>
-                {(this.props.modal.type == 'create') && (
-                  <form>
+              {(this.props.modal.type == 'create') && (
+                <form>
+                  <div className='modal-body'>
                     <div className='form-group'>
-                      <label>Nom</label>
+                      <label className='control-label'>Nom</label>
                       <input
                         type='text'
                         ref='name'
                         className='form-control'
+                        onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                        required
                         />
                     </div>
                     <div className='row'>
                       <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
                         <div className='form-group'>
-                          <label>Nom public</label>
+                          <label className='control-label'>Nom public</label>
                           <input
                             type='text'
                             ref='published_name'
                             className='form-control'
+                            onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                            required
                           />
                         </div>
                       </div>
                       <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
                         <div className='form-group'>
-                          <label>N° d'enregistrement</label>
+                          <label className='control-label'>N° d'enregistrement</label>
                           <input
                             type='text'
                             ref='registration_number'
                             className='form-control'
+                            onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                            required
                           />
                         </div>
                       </div>
                     </div>
-                  </form>
-                )}
-              </div>
-
-              <div className='modal-footer'>
-                <button
-                  className='btn btn-default'
-                  data-dismiss='modal'
-                  type='button'
-                  onClick={this.props.onModalClose}
-                  >
-                  Annuler
-                </button>
-                <button
-                  className='btn btn-danger'
-                  data-dismiss='modal'
-                  type='button'
-                  onClick={this.handleSubmit.bind(this)}
-                  >
-                  Valider
-                </button>
-              </div>
+                  </div>
+                  <div className='modal-footer'>
+                    <button
+                      className='btn btn-default'
+                      data-dismiss='modal'
+                      type='button'
+                      onClick={this.props.onModalClose}
+                      >
+                      Annuler
+                    </button>
+                    <button
+                      className='btn btn-danger'
+                      type='button'
+                      onClick={this.handleSubmit.bind(this)}
+                      >
+                      Valider
+                    </button>
+                  </div>
+                </form>
+              )}
             </div>
           </div>
         </div>
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
index 55c61f296..3d439b6ab 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
@@ -4,56 +4,71 @@ var PropTypes = require('react').PropTypes
 const JourneyPattern = (props) => {
   return (
     <div className={'list-group-item ' + (props.value.deletable ? 'disabled' : '') + (props.value.object_id ? '' : 'to_record')}>
-      <div style={{display: 'inline-block', verticalAlign: 'top', width: '40%'}}>
-        <p className='jp_name'>
-          <span className={'small ' + (props.value.errors ? 'text-danger' : '')}>
-            <strong>Name: </strong>{props.value.name}
-          </span>
-          <br/>
-          {(props.value.errors) && (
-            <span className='errors small'>
-              {props.value.errors.name.map(function(msg, i){
-                return (
-                  <em key={i} className='text-danger'>{msg}</em>
-                )
-              })}
-            </span>
-          )}
+      {/* Errors */}
+      {(props.value.errors) && (
+        <ul className='alert alert-danger small' style={{paddingLeft: 30}}>
+          {Object.keys(props.value.errors).map(function(key, i) {
+            return (
+              <li key={i} style={{listStyleType: 'disc'}}>
+                <strong>'{key}'</strong> {props.value.errors[key]}
+              </li>
+            )
+          })}
+        </ul>
+      )}
+
+      <div style={{display: 'inline-block', verticalAlign: 'top', width: 'calc(100% - 25px)'}}>
+        {/* Name */}
+        <p className='small'>
+          <strong>Name: </strong>{props.value.name}
+        </p>
+
+        {/* Published name */}
+        <p className='small'>
+          <strong>Published name: </strong>{props.value.published_name}
+        </p>
+
+        {/* Registration number */}
+        <p className='small'>
+          <strong>Registration number: </strong>{props.value.registration_number}
+        </p>
+
+        {/* Object_id */}
+        <p className='small'>
+          <strong>ObjectID: </strong>{props.value.object_id}
         </p>
-      </div>
 
-      <div style={{display: 'inline-block', verticalAlign: 'top', width: '40%'}}>
-        <p className='small'><strong>ObjectID: </strong>{props.value.object_id}</p>
-        <p className='small'><strong>Published name: </strong>{props.value.published_name}</p>
+        {/* Stop points */}
+        <p className='small'>
+          <strong>Stop points: </strong>
+        </p>
+        <ul className='list-group'>
+          {props.value.stop_points.map((stopPoint, i) =>
+            <li
+              key={ i }
+              className='list-group-item clearfix'
+            >
+              <span className='label label-default' style={{marginRight: 5}}>{stopPoint.id}</span>
+              <span>{stopPoint.name}</span>
+              <span className='pull-right'>
+                <input
+                  onChange = {(e) => props.onCheckboxChange(e)}
+                  type='checkbox'
+                  id={stopPoint.id}
+                  checked={stopPoint.checked}
+                  disabled={props.value.deletable ? 'disabled' : ''}
+                ></input>
+              </span>
+            </li>
+          )}
+        </ul>
       </div>
 
-      <div className='clearfix' style={{display: 'inline-block', verticalAlign: 'top', width: '20%'}}>
+      <div className='clearfix' style={{display: 'inline-block', verticalAlign: 'top', width: '25px'}}>
         <button className={(props.value.deletable ? 'disabled' : '') + ' btn btn-xs btn-danger pull-right'} onClick={props.onOpenEditModal} data-toggle='modal' data-target='#JourneyPatternModal'>
           <span className='fa fa-pencil'></span>
         </button>
       </div>
-
-      <p className='small'><strong>Stop points: </strong></p>
-      <ul className='list-group'>
-        {props.value.stop_points.map((stopPoint, i) =>
-          <li
-            key={ i }
-            className='list-group-item clearfix'
-          >
-            <span className='label label-default' style={{marginRight: 5}}>{stopPoint.id}</span>
-            <span>{stopPoint.name}</span>
-            <span className='pull-right'>
-              <input
-                onChange = {(e) => props.onCheckboxChange(e)}
-                type='checkbox'
-                id={stopPoint.id}
-                checked={stopPoint.checked}
-                disabled={props.value.deletable ? 'disabled' : ''}
-              ></input>
-            </span>
-          </li>
-        )}
-      </ul>
     </div>
   )
 }
diff --git a/app/assets/stylesheets/components/_form.sass b/app/assets/stylesheets/components/_form.sass
index d5f4a1eae..26d3a36c8 100644
--- a/app/assets/stylesheets/components/_form.sass
+++ b/app/assets/stylesheets/components/_form.sass
@@ -11,3 +11,13 @@
       // Add custom
       color: #555
       background-color: #f5f5f5
+
+// Validations
+.form-control
+  &:required
+    &:focus:invalid
+      border-color: #d43f3a
+      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #d9534f
+    &:focus:valid
+      border-color: #4cae4c
+      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #5cb85c