Refs #2206: adding new journey pattern recorded in state (saving into db to go)

5 files changed, 66 insertions, 18 deletions

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 53e63d6b6..f22b28fe8 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js
@@ -8,7 +8,7 @@ class CreateModal extends Component {
   }
   handleSubmit(e) {
     e.preventDefault()
-    this.props.saveModal(this.props.modal.modalProps.index, this.refs)
+    this.props.saveModal((this.props.journeyPatterns.length + 1), this.refs)
   }
 
   render() {
@@ -24,15 +24,50 @@ class CreateModal extends Component {
           <span className='fa fa-plus'></span> Ajouter une mission
         </button>
 
-        <div className={ (this.props.modal.create ? 'in' : '') + ' modal fade' } id='NewJourneyPatternModal'>
+        <div className={ 'modal fade ' + (this.props.modal.create ? 'in' : '') } id='NewJourneyPatternModal'>
           <div className='modal-dialog'>
             <div className='modal-content'>
               <div className='modal-header clearfix'>
                 <h4>Ajouter une mission</h4>
               </div>
+
               <div className='modal-body'>
-                le formulaire arrive...
+                {this.props.modal.create && (
+                  <form>
+                    <div className='form-group'>
+                      <label>Nom</label>
+                      <input
+                        type='text'
+                        ref='name'
+                        className='form-control'
+                        />
+                    </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>
+                          <input
+                            type='text'
+                            ref='published_name'
+                            className='form-control'
+                          />
+                        </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>
+                          <input
+                            type='text'
+                            ref='registration_number'
+                            className='form-control'
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </form>
+                )}
               </div>
+
               <div className='modal-footer'>
                 <button
                   className='btn btn-default'
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js
index 7ad46bbc2..560e44a26 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js
@@ -13,7 +13,7 @@ class EditModal extends Component {
 
   render() {
     return (
-      <div className={ (this.props.modal.edit ? 'in' : '') + ' modal fade' } id='JourneyPatternModal'>
+      <div className={ 'modal fade ' + (this.props.modal.edit ? 'in' : '') } id='JourneyPatternModal'>
         <div className='modal-dialog'>
           <div className='modal-content'>
             <div className='modal-header clearfix'>
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 3f94ab5bd..78e2e6d9c 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
@@ -3,7 +3,7 @@ var PropTypes = require('react').PropTypes
 
 const JourneyPattern = (props) => {
   return (
-    <div className={(props.value.deletable ? 'disabled' : '') + ' list-group-item'}>
+    <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='small'><strong>Index: </strong>{props.index}</p>
         <p className='small'><strong>Name: </strong>{props.value.name}</p>
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js
index 737c90307..8bd4c1142 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js
@@ -34,9 +34,9 @@ const journeyPatterns = (state = {}, action) => {
       return state
     case 'UPDATE_CHECKBOX_VALUE':
       return state.map((j, i) =>{
-        if( i == action.index){
+        if(i == action.index) {
           return journeyPattern(j, action)
-        }else{
+        } else {
           return j
         }
       })
@@ -49,17 +49,30 @@ const journeyPatterns = (state = {}, action) => {
         }
       })
     case 'SAVE_MODAL':
-      return state.map((j, i) =>{
-        if(i == action.index) {
-          return Object.assign({}, j, {
-            name: action.data.name.value,
-            published_name: action.data.published_name.value,
-            registration_number: action.data.registration_number.value
-          })
-        } else {
-          return j
+      if(action.index > 12) {
+        // Save new item
+        const newJourneyPattern = {
+          name: action.data.name.value,
+          published_name: action.data.published_name.value,
+          registration_number: action.data.registration_number.value,
+          stop_points: [],
+          deletable: false
         }
-      })
+        return state.concat(newJourneyPattern)
+      } else {
+        // Save existing item
+        return state.map((j, i) =>{
+          if(i == action.index) {
+            return Object.assign({}, j, {
+              name: action.data.name.value,
+              published_name: action.data.published_name.value,
+              registration_number: action.data.registration_number.value
+            })
+          } else {
+            return j
+          }
+        })
+      }
     case 'SAVE_PAGE':
       actions.submitJourneyPattern(action.dispatch, state)
     default:
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/modal.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/modal.js
index 044b1d4e4..16f89be3e 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/modal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/modal.js
@@ -13,7 +13,7 @@ const modal = (state = {}, action) => {
       return {
         create: true,
         edit: false,
-        modalProps: {}
+        modalProps: { index: action.index }
       }
     case 'DELETE_JOURNEYPATTERN':
       return Object.assign({}, state, { edit: false, create: false })