Refs #2522: use Bselect2 to link a jp to a vj

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

6 files changed, 90 insertions, 18 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 d7fc52719..861671e35 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
@@ -36,6 +36,15 @@ const actions = {
   openCreateModal : () => ({
     type : 'CREATE_VEHICLEJOURNEY_MODAL'
   }),
+  selectJPCreateModal : (selectedJP) => ({
+    type : 'SELECT_JP_CREATE_MODAL',
+    selectedItem: {
+      id: selectedJP.id,
+      objectid: selectedJP.object_id,
+      name: selectedJP.name,
+      published_name: selectedJP.published_name
+    }
+  }),
   openEditModal : (vehicleJourney) => ({
     type : 'EDIT_VEHICLEJOURNEY_MODAL',
     vehicleJourney
@@ -74,9 +83,10 @@ const actions = {
   cancelSelection : () => ({
     type: 'CANCEL_SELECTION'
   }),
-  addVehicleJourney : (data) => ({
+  addVehicleJourney : (data, selectedJourneyPattern) => ({
     type: 'ADD_VEHICLEJOURNEY',
-    data
+    data,
+    selectedJourneyPattern
   }),
   editVehicleJourney : (data) => ({
     type: 'EDIT_VEHICLEJOURNEY',
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js
index 7ae3d4a8a..dbac7c392 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js
@@ -2,6 +2,7 @@ var React = require('react')
 var Component = require('react').Component
 var PropTypes = require('react').PropTypes
 var actions = require('../../actions')
+var MissionSelect2 = require('./MissionSelect2')
 
 class CreateModal extends Component {
   constructor(props) {
@@ -9,8 +10,9 @@ class CreateModal extends Component {
   }
 
   handleSubmit() {
-    if(actions.validateFields(this.refs) == true) {
-      this.props.onAddVehicleJourney(this.refs)
+    if(actions.validateFields(this.refs) == true && this.props.modal.modalProps.selectedJPModal) {
+      this.props.onAddVehicleJourney(this.refs, this.props.modal.modalProps.selectedJPModal)
+      this.props.onModalClose()
       $('#NewVehicleJourneyModal').modal('hide')
     }
   }
@@ -57,13 +59,7 @@ class CreateModal extends Component {
                           <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_objectid'
-                                className='form-control'
-                                onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
-                                required
-                                />
+                              <MissionSelect2 onSelectJPModal={this.props.onSelectJPModal} />
                             </div>
                           </div>
                         </div>
@@ -104,7 +100,8 @@ CreateModal.propTypes = {
   status: PropTypes.object.isRequired,
   onOpenCreateModal: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired,
-  onAddVehicleJourney: PropTypes.func.isRequired
+  onAddVehicleJourney: PropTypes.func.isRequired,
+  onSelectJPModal: PropTypes.func.isRequired
 }
 
 module.exports = CreateModal
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/MissionSelect2.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/MissionSelect2.js
new file mode 100644
index 000000000..0ab4475ac
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/MissionSelect2.js
@@ -0,0 +1,62 @@
+var React = require('react')
+var PropTypes = require('react').PropTypes
+var Select2 = require('react-select2')
+
+// get JSON full path
+var origin = window.location.origin
+var path = window.location.pathname.split('/', 7).join('/')
+
+
+class BSelect4 extends React.Component{
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    return (
+      <Select2
+        defaultValue=''
+        onSelect={(e) => this.props.onSelectJPModal(e) }
+        ref='journey_pattern_id'
+        options={{
+          placeholder: 'Nom d\'une mission existante',
+          allowClear: true,
+          language: 'fr', /* Doesn't seem to work... :( */
+          theme: 'bootstrap',
+          width: '100%',
+          ajax: {
+            url: origin + path + '/journey_patterns_collection.json',
+            dataType: 'json',
+            delay: '500',
+            data: function(params) {
+              return {
+                q: {published_name_cont: params.term},
+              };
+            },
+            processResults: function(data, params) {
+
+              return {
+                results: data.map(
+                  item => Object.assign(
+                    {},
+                    item,
+                    {text: item.published_name, complete_jp: item}
+                  )
+                )
+              };
+            },
+            cache: true
+          },
+          minimumInputLength: 3,
+          templateResult: formatRepo
+        }}
+      />
+    )
+  }
+}
+
+const formatRepo = (props) => {
+  if(props.text) return props.text
+}
+
+module.exports = BSelect4
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/AddVehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/AddVehicleJourney.js
index 68490338a..c4c746b81 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/AddVehicleJourney.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/AddVehicleJourney.js
@@ -16,11 +16,14 @@ const mapDispatchToProps = (dispatch) => {
     onModalClose: () =>{
       dispatch(actions.closeModal())
     },
-    onAddVehicleJourney: (data) =>{
-      dispatch(actions.addVehicleJourney(data))
+    onAddVehicleJourney: (data, selectedJourneyPattern) =>{
+      dispatch(actions.addVehicleJourney(data, selectedJourneyPattern))
     },
     onOpenCreateModal: () =>{
       dispatch(actions.openCreateModal())
+    },
+    onSelectJPModal: (e) =>{
+      dispatch(actions.selectJPCreateModal(e.params.data))
     }
   }
 }
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 26a03471b..34c8e2dad 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/modal.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/modal.js
@@ -78,6 +78,9 @@ const modal = (state = {}, action) => {
         modalProps: {},
         confirmModal: {}
       }
+    case 'SELECT_JP_CREATE_MODAL':
+      newModalProps = {selectedJPModal : action.selectedItem}
+      return Object.assign({}, state, {modalProps: newModalProps})
     case 'SHIFT_VEHICLEJOURNEY_MODAL':
       return {
         type: 'shift',
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 c83647bd7..70b8d5479 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js
@@ -16,11 +16,8 @@ const vehicleJourney= (state = {}, action) => {
         vj.delta = 0
         delete vj['stop_area_object_id']
       })
-      let journeyPattern = {
-        objectid: action.data.journey_pattern_objectid.value
-      }
       return {
-        journey_pattern: journeyPattern,
+        journey_pattern: action.selectedJourneyPattern,
         published_journey_name: action.data.published_journey_name.value,
         objectid: '',
         footnotes: [],