Refs #2522: Add vehicleJourney via modal, and put it first (not select2 yet for mission_id)

Signed-off-by: Thomas Shawarma Haddad <thomas.haddad@af83.com>

8 files changed, 219 insertions, 0 deletions

diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
index 817dbb81c..56ed1ef07 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
@@ -33,10 +33,44 @@ const actions = {
       return callback
     }
   },
+  openCreateModal : () => ({
+    type : 'CREATE_VEHICLEJOURNEY_MODAL'
+  }),
+  addVehicleJourney : (data) => ({
+    type: 'ADD_VEHICLEJOURNEY',
+    data,
+  }),
   openConfirmModal : (callback) => ({
     type : 'OPEN_CONFIRM_MODAL',
     callback
   }),
+  closeModal : () => ({
+    type : 'CLOSE_MODAL'
+  }),
+  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
+    }
+  },
   toggleArrivals : () => ({
     type: 'TOGGLE_ARRIVALS',
   }),
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
index 7368d4de3..99c88930a 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
@@ -4,12 +4,14 @@ var Navigate = require('../containers/Navigate')
 var FiltersList = require('../containers/FiltersList')
 var SaveVehicleJourneys = require('../containers/SaveVehicleJourneys')
 var ConfirmModal = require('../containers/ConfirmModal')
+var AddVehicleJourney = require('../containers/AddVehicleJourney')
 
 const App = () => (
   <div>
     <div className='clearfix' style={{ marginBottom: 10 }}>
       <FiltersList />
       <Navigate />
+      <AddVehicleJourney />
     </div>
     <VehicleJourneysList />
     <SaveVehicleJourneys />
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/CreateModal.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/CreateModal.js
new file mode 100644
index 000000000..34b1a3afc
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/CreateModal.js
@@ -0,0 +1,109 @@
+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() {
+    if(actions.validateFields(this.refs) == true) {
+      this.props.onAddVehicleJourney(this.refs)
+      $('#NewVehicleJourneyModal').modal('hide')
+    }
+  }
+
+  render() {
+    if(this.props.status.isFetching == true) {
+      return false
+    }
+    if(this.props.status.fetchSuccess == true) {
+      return (
+        <div className='pull-right'>
+          <button
+            type='button'
+            className='btn btn-primary btn-sm'
+            data-toggle='modal'
+            data-target='#NewVehicleJourneyModal'
+            onClick={this.props.onOpenCreateModal}
+            >
+            <span className='fa fa-plus'></span> Ajouter une mission
+            </button>
+
+            <div className={ 'modal fade ' + ((this.props.modal.type == 'create') ? 'in' : '') } id='NewVehicleJourneyModal'>
+              <div className='modal-dialog'>
+                <div className='modal-content'>
+                  <div className='modal-header clearfix'>
+                    <h4>Ajouter une mission</h4>
+                  </div>
+
+                  {(this.props.modal.type == 'create') && (
+                    <form>
+                      <div className='modal-body'>
+                        <div className='form-group'>
+                          <label className='control-label is-required'>Nom de la course</label>
+                          <input
+                            type='text'
+                            ref='comment'
+                            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 className='control-label is-required'>ID de la mission</label>
+                              <input
+                                type='text'
+                                ref='journey_pattern_id'
+                                className='form-control'
+                                onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                                required
+                                />
+                            </div>
+                          </div>
+                        </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>
+          </div>
+        )
+    } else {
+      return false
+    }
+  }
+}
+
+CreateModal.propTypes = {
+  index: PropTypes.number,
+  modal: PropTypes.object.isRequired,
+  status: PropTypes.object.isRequired,
+  onOpenCreateModal: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onAddVehicleJourney: PropTypes.func.isRequired
+}
+
+module.exports = CreateModal
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/AddVehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/AddVehicleJourney.js
new file mode 100644
index 000000000..a0ff923bf
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/AddVehicleJourney.js
@@ -0,0 +1,29 @@
+var actions = require('../actions')
+var connect = require('react-redux').connect
+var CreateModal = require('../components/CreateModal')
+
+const mapStateToProps = (state) => {
+  return {
+    modal: state.modal,
+    vehicleJourneys: state.vehicleJourneys,
+    status: state.status
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onModalClose: () =>{
+      dispatch(actions.closeModal())
+    },
+    onAddVehicleJourney: (data) =>{
+      dispatch(actions.addVehicleJourney(data))
+    },
+    onOpenCreateModal: () =>{
+      dispatch(actions.openCreateModal())
+    }
+  }
+}
+
+const AddVehicleJourney = connect(mapStateToProps, mapDispatchToProps)(CreateModal)
+
+module.exports = AddVehicleJourney
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Modal.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Modal.js
new file mode 100644
index 000000000..13190b041
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Modal.js
@@ -0,0 +1,23 @@
+var connect = require('react-redux').connect
+var EditModal = require('../components/EditModal')
+var CreateModal = require('../components/CreateModal')
+var actions = require('../actions')
+
+const mapStateToProps = (state) => {
+  return {
+    modal: state.modal,
+    journeyPattern: state.journeyPattern
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onModalClose: () =>{
+      dispatch(actions.closeModal())
+    }
+  }
+}
+
+const ModalContainer = connect(mapStateToProps, mapDispatchToProps)(CreateModal)
+
+module.exports = ModalContainer
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/modal.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/modal.js
index bc9d448fe..127b69686 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/modal.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/modal.js
@@ -8,6 +8,12 @@ const modal = (state = {}, action) => {
           callback: action.callback,
         }
       })
+    case 'CREATE_VEHICLEJOURNEY_MODAL':
+      return {
+        type: 'create',
+        modalProps: {},
+        confirmModal: {}
+      }
     case 'CLOSE_MODAL':
       return {
         type: '',
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/pagination.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/pagination.js
index 4ac2a4586..c9bcec6de 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/pagination.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/pagination.js
@@ -12,6 +12,7 @@ const pagination = (state = {}, action) => {
         return Object.assign({}, state, {page : action.pagination.page + 1, stateChanged: false})
       }
       return state
+    case 'ADD_VEHICLEJOURNEY':
     case 'UPDATE_TIME':
       toggleOnConfirmModal('modal')
       return Object.assign({}, state, {stateChanged: true})
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js
index b48ac33b3..ccf1efea1 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js
@@ -2,6 +2,16 @@ var actions = require("../actions")
 
 const vehicleJourney= (state = {}, action) => {
   switch (action.type) {
+    case 'ADD_VEHICLEJOURNEY':
+      return {
+        journey_pattern_id: parseInt(action.data.journey_pattern_id.value),
+        comment: action.data.comment.value,
+        objectid: '',
+        footnotes: [],
+        time_tables: [],
+        vehicle_journey_at_stops: [],
+        deletable: false
+      }
     case 'UPDATE_TIME':
       let vj, vjas, vjasArray, newSchedule
       vjasArray = state.vehicle_journey_at_stops.map((vjas, i) =>{
@@ -45,6 +55,11 @@ const vehicleJourneys = (state = [], action) => {
         actions.fetchVehicleJourneys(action.dispatch, action.pagination.page, action.nextPage)
       }
       return state
+    case 'ADD_VEHICLEJOURNEY':
+      return [
+        vehicleJourney(state, action),
+        ...state
+      ]
     case 'UPDATE_TIME':
       return state.map((vj, i) =>{
         if (i == action.index){