Refs #3776: adding first-step error system to JP

4 files changed, 95 insertions, 59 deletions

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 43c40a4d5..18ed5f889 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
@@ -43,75 +43,79 @@ class JourneyPattern extends Component{
     )
   }
 
+  getErrors(errors) {
+    let err = Object.keys(errors).map((key, index) => {
+      return (
+        <li key={index} style={{listStyleType: 'disc'}}>
+          <strong>{key}</strong> { errors[key] }
+        </li>
+      )
+    })
+
+    return (
+      <ul className="alert alert-danger">{err}</ul>
+    )
+  }
+
   render() {
     this.previousCity = undefined
 
     return (
-      <div className={'t2e-item' + (this.props.value.deletable ? ' disabled' : '') + (this.props.value.object_id ? '' : ' to_record')}>
+      <div className={'t2e-item' + (this.props.value.deletable ? ' disabled' : '') + (this.props.value.object_id ? '' : ' to_record') + (this.props.value.errors ? ' has-error': '')}>
         {/* Errors */}
-        {(this.props.value.errors) && (
-          <ul className='alert alert-danger small' style={{paddingLeft: 30}}>
-            {Object.keys(this.props.value.errors).map(function(key, i) {
-              return (
-                <li key={i} style={{listStyleType: 'disc'}}>
-                  <strong>'{key}'</strong> {this.props.value.errors[key]}
-                  </li>
-                )
-              })}
-            </ul>
-          )}
+        {/* this.props.value.errors ? this.getErrors(this.props.value.errors) : '' */}
 
-          <div className='th'>
-            <div className='strong mb-xs'>{this.props.value.object_id ? actions.humanOID(this.props.value.object_id) : '-'}</div>
-            <div>{this.props.value.registration_number}</div>
-            <div>{actions.getChecked(this.props.value.stop_points).length} arrêt(s)</div>
+        <div className='th'>
+          <div className='strong mb-xs'>{this.props.value.object_id ? actions.humanOID(this.props.value.object_id) : '-'}</div>
+          <div>{this.props.value.registration_number}</div>
+          <div>{actions.getChecked(this.props.value.stop_points).length} arrêt(s)</div>
 
-            <div className={this.props.value.deletable ? 'btn-group disabled' : 'btn-group'}>
-              <div
-                className={this.props.value.deletable ? 'btn dropdown-toggle disabled' : 'btn dropdown-toggle'}
-                data-toggle='dropdown'
-                >
-                <span className='fa fa-cog'></span>
-              </div>
-              <ul className='dropdown-menu'>
-                <li className={(this.props.value.deletable || this.props.status.policy['journey_patterns.edit'] == false) ? 'disabled' : ''}>
-                  <button
-                    type='button'
-                    onClick={this.props.onOpenEditModal}
-                    data-toggle='modal'
-                    data-target='#JourneyPatternModal'
-                    >
-                    Editer
+          <div className={this.props.value.deletable ? 'btn-group disabled' : 'btn-group'}>
+            <div
+              className={this.props.value.deletable ? 'btn dropdown-toggle disabled' : 'btn dropdown-toggle'}
+              data-toggle='dropdown'
+              >
+              <span className='fa fa-cog'></span>
+            </div>
+            <ul className='dropdown-menu'>
+              <li className={(this.props.value.deletable || this.props.status.policy['journey_patterns.edit'] == false) ? 'disabled' : ''}>
+                <button
+                  type='button'
+                  onClick={this.props.onOpenEditModal}
+                  data-toggle='modal'
+                  data-target='#JourneyPatternModal'
+                  >
+                  Editer
+                </button>
+              </li>
+              <li className={this.props.value.object_id ? '' : 'disabled'}>
+                {this.vehicleJourneyURL(this.props.value.object_id)}
+              </li>
+              <li className={'delete-action' + ((this.props.status.policy['journey_patterns.edit'] == false)? ' disabled' : '')}>
+                <button
+                  type='button'
+                  disabled={(this.props.status.policy['journey_patterns.edit'] == false)? 'disabled' : ''}
+                  onClick={(e) => {
+                    e.preventDefault()
+                    this.props.onDeleteJourneyPattern(this.props.index)}
+                  }
+                  >
+                    <span className='fa fa-trash'></span>Supprimer
                   </button>
                 </li>
-                <li className={this.props.value.object_id ? '' : 'disabled'}>
-                  {this.vehicleJourneyURL(this.props.value.object_id)}
-                </li>
-                <li className={'delete-action' + ((this.props.status.policy['journey_patterns.edit'] == false)? ' disabled' : '')}>
-                  <button
-                    type='button'
-                    disabled={(this.props.status.policy['journey_patterns.edit'] == false)? 'disabled' : ''}
-                    onClick={(e) => {
-                      e.preventDefault()
-                      this.props.onDeleteJourneyPattern(this.props.index)}
-                    }
-                    >
-                      <span className='fa fa-trash'></span>Supprimer
-                    </button>
-                  </li>
-                </ul>
-              </div>
+              </ul>
             </div>
-
-            {this.props.value.stop_points.map((stopPoint, i) =>{
-              return (
-                <div key={i} className='td'>
-                  {this.cityNameChecker(stopPoint)}
-                </div>
-              )
-            })}
           </div>
-        )
+
+          {this.props.value.stop_points.map((stopPoint, i) =>{
+            return (
+              <div key={i} className='td'>
+                {this.cityNameChecker(stopPoint)}
+              </div>
+            )
+          })}
+        </div>
+      )
   }
 }
 
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/status.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/status.js
index 6241777da..d7ef12d0b 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/status.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/status.js
@@ -9,6 +9,8 @@ const status = (state = {}, action) => {
       return _.assign({}, state, {isFetching: true})
     case 'RECEIVE_JOURNEY_PATTERNS':
       return _.assign({}, state, {fetchSuccess: true, isFetching: false})
+    case 'RECEIVE_ERRORS':
+      return _.assign({}, state, {isFetching: false})
     default:
       return state
   }
diff --git a/app/assets/stylesheets/components/_tables.sass b/app/assets/stylesheets/components/_tables.sass
index 20679a3ba..b991e7b8d 100644
--- a/app/assets/stylesheets/components/_tables.sass
+++ b/app/assets/stylesheets/components/_tables.sass
@@ -296,7 +296,7 @@
         border-right: 1px solid rgba($grey, 0.5)
 
       .th
-        > div
+        > div:not(.btn-group)
           min-height: 19px
 
         > *:first-child
diff --git a/app/assets/stylesheets/modules/_jp_collection.sass b/app/assets/stylesheets/modules/_jp_collection.sass
index c109fc71a..f579cf87b 100644
--- a/app/assets/stylesheets/modules/_jp_collection.sass
+++ b/app/assets/stylesheets/modules/_jp_collection.sass
@@ -98,3 +98,33 @@
         left: -23px
         top: 50%
         margin-top: -8px
+
+  // Errors
+  .table-2entries .t2e-item-list
+    .t2e-item
+      position: relative
+
+      .th .vj_tt
+        display: inline-block
+        vertical-align: top
+
+        + .vj_tt
+          margin-left: 5px
+
+      &.has-error
+        &:before
+          content: ''
+          position: absolute
+          top: 0
+          left: 0
+          right: 0
+          bottom: 0
+          border: 2px solid $red
+
+        > .th
+          > div:first-child, > div:first-child + div
+            color: $red
+
+        // Reset default behaviour
+        .form-control
+          border-color: #ccc