Merge pull request #217 from af83/5502-remove-search-from-selects

Don't use Ajax in JP selector in VJs editor. Refs #5502 

13 files changed, 151 insertions, 43 deletions

diff --git a/app/controllers/vehicle_journeys_controller.rb b/app/controllers/vehicle_journeys_controller.rb
index 887131557..8a0c41cc2 100644
--- a/app/controllers/vehicle_journeys_controller.rb
+++ b/app/controllers/vehicle_journeys_controller.rb
@@ -48,6 +48,7 @@ class VehicleJourneysController < ChouetteController
         @vehicle_journeys = @vehicle_journeys.includes({stop_points: :stop_area})
       end
       format.html do
+        load_missions
         @stop_points_list = []
         @stop_points_list = route.stop_points.includes(:stop_area).map do |sp|
           {
@@ -174,6 +175,30 @@ class VehicleJourneysController < ChouetteController
   end
 
   private
+  def load_missions
+    @all_missions = route.journey_patterns.count > 10 ? [] : route.journey_patterns.map do |item|
+      {
+        id: item.id,
+        "data-item": {
+          id: item.id,
+          name: item.name,
+          published_name: item.published_name,
+          object_id: item.objectid,
+          short_id: item.get_objectid.short_id,
+          stop_area_short_descriptions: item.stop_areas.map do |stop|
+            {
+              stop_area_short_description: {
+                id: stop.id,
+                name: stop.name,
+                object_id: item.objectid
+              }
+            }
+          end
+        }.to_json,
+        text: "<strong>" + item.published_name + " - " + item.get_objectid.short_id + "</strong><br/><small>" + item.registration_number + "</small>"
+      }
+    end
+  end
   def vehicle_journey_params
     params.require(:vehicle_journey).permit(
       { footnote_ids: [] },
diff --git a/app/javascript/packs/vehicle_journeys/index.js b/app/javascript/packs/vehicle_journeys/index.js
index 53c5d5417..ab28371fe 100644
--- a/app/javascript/packs/vehicle_journeys/index.js
+++ b/app/javascript/packs/vehicle_journeys/index.js
@@ -70,7 +70,8 @@ var initialState = {
     type: '',
     modalProps: {},
     confirmModal: {}
-  }
+  },
+  missions: window.all_missions
 }
 
 if (window.jpOrigin){
diff --git a/app/javascript/vehicle_journeys/actions/index.js b/app/javascript/vehicle_journeys/actions/index.js
index 40c8006f1..9aa426237 100644
--- a/app/javascript/vehicle_journeys/actions/index.js
+++ b/app/javascript/vehicle_journeys/actions/index.js
@@ -57,6 +57,7 @@ const actions = {
     selectedItem: {
       id: selectedJP.id,
       objectid: selectedJP.object_id,
+      short_id: selectedJP.short_id,
       name: selectedJP.name,
       published_name: selectedJP.published_name,
       stop_areas: selectedJP.stop_area_short_descriptions
diff --git a/app/javascript/vehicle_journeys/components/Filters.js b/app/javascript/vehicle_journeys/components/Filters.js
index b6c255c53..2bd912e3e 100644
--- a/app/javascript/vehicle_journeys/components/Filters.js
+++ b/app/javascript/vehicle_journeys/components/Filters.js
@@ -5,7 +5,7 @@ import MissionSelect2 from'./tools/select2s/MissionSelect2'
 import VJSelect2 from'./tools/select2s/VJSelect2'
 import TimetableSelect2 from'./tools/select2s/TimetableSelect2'
 
-export default function Filters({filters, pagination, onFilter, onResetFilters, onUpdateStartTimeFilter, onUpdateEndTimeFilter, onToggleWithoutSchedule, onToggleWithoutTimeTable, onSelect2Timetable, onSelect2JourneyPattern, onSelect2VehicleJourney}) {
+export default function Filters({filters, pagination, missions, onFilter, onResetFilters, onUpdateStartTimeFilter, onUpdateEndTimeFilter, onToggleWithoutSchedule, onToggleWithoutTimeTable, onSelect2Timetable, onSelect2JourneyPattern, onSelect2VehicleJourney}) {
   return (
     <div className='row'>
       <div className='col-lg-12'>
@@ -26,6 +26,7 @@ export default function Filters({filters, pagination, onFilter, onResetFilters,
                 onSelect2JourneyPattern={onSelect2JourneyPattern}
                 filters={filters}
                 isFilter={true}
+                values={missions}
                 />
             </div>
 
diff --git a/app/javascript/vehicle_journeys/components/tools/CreateModal.js b/app/javascript/vehicle_journeys/components/tools/CreateModal.js
index 61012d199..4601d1690 100644
--- a/app/javascript/vehicle_journeys/components/tools/CreateModal.js
+++ b/app/javascript/vehicle_journeys/components/tools/CreateModal.js
@@ -11,7 +11,7 @@ export default class CreateModal extends Component {
 
   handleSubmit() {
     if (actions.validateFields(...this.refs, $('.vjCreateSelectJP')[0]) && this.props.modal.modalProps.selectedJPModal) {
-      this.props.onAddVehicleJourney(this.refs, this.props.modal.modalProps.selectedJPModal, this.props.stopPointsList, this.props.modal.modalProps.selectedCompany)
+      this.props.onAddVehicleJourney(this.refs, this.props.modal.modalProps.selectedJPModal, this.props.stopPointsList, this.props.modal.modalProps.vehicleJourney.company)
       this.props.onModalClose()
       $('#NewVehicleJourneyModal').modal('hide')
     }
@@ -73,6 +73,7 @@ export default class CreateModal extends Component {
                               <MissionSelect2
                                 selection={this.props.modal.modalProps}
                                 onSelect2JourneyPattern={this.props.onSelect2JourneyPattern}
+                                values={this.props.missions}
                                 isFilter={false}
                               />
                             </div>
@@ -130,5 +131,6 @@ CreateModal.propTypes = {
   onModalClose: PropTypes.func.isRequired,
   onAddVehicleJourney: PropTypes.func.isRequired,
   onSelect2JourneyPattern: PropTypes.func.isRequired,
-  disabled: PropTypes.bool.isRequired
+  disabled: PropTypes.bool.isRequired,
+  missions: PropTypes.array.isRequired
 }
diff --git a/app/javascript/vehicle_journeys/components/tools/select2s/MissionSelect2.js b/app/javascript/vehicle_journeys/components/tools/select2s/MissionSelect2.js
index 2a06df77e..7ab85a1ea 100644
--- a/app/javascript/vehicle_journeys/components/tools/select2s/MissionSelect2.js
+++ b/app/javascript/vehicle_journeys/components/tools/select2s/MissionSelect2.js
@@ -12,50 +12,114 @@ let path = window.location.pathname.split('/', 7).join('/')
 export default class BSelect4 extends Component {
   constructor(props) {
     super(props)
+    this.onSelect = this.onSelect.bind(this)
+  }
+
+  useAjax(){
+    return this.props.values == undefined || this.props.values.length == 0
+  }
+
+  value(){
+    let val = undefined
+    if(this.props.isFilter) {
+      val = this.props.filters.query.journeyPattern
+    }
+    else{
+      if(this.props.selection.selectedJPModal){
+        val = this.props.selection.selectedJPModal
+      }
+    }
+    if(this.useAjax()){
+      val = val.published_name
+    }
+    else{
+      if(val){
+        val = val.id
+      }
+    }
+    return val
+  }
+
+  data(){
+    if(!this.useAjax()){
+      let values = [{}]
+      values.push(...this.props.values)
+      return values
+    }
+    if(this.props.isFilter){
+      return [this.props.filters.query.journeyPattern.published_name]
+    }
+
+    return (this.props.selection.selectedJPModal) ? [this.props.selection.selectedJPModal.published_name] : undefined
+  }
+
+  onSelect(e){
+    if(this.useAjax()){
+      this.props.onSelect2JourneyPattern(e)
+    }
+    else{
+      let data = JSON.parse(e.currentTarget.selectedOptions[0].dataset.item)
+
+      this.props.onSelect2JourneyPattern({params:
+        {
+          data: _.assign({}, e.params.data, data)
+        }
+      })
+    }
+  }
+
+  options(){
+    let options = {
+      theme: 'bootstrap',
+      width: '100%',
+      escapeMarkup: function (markup) { return markup; },
+      templateResult: formatRepo,
+      placeholder: 'Filtrer par code, nom ou OID de mission...',
+      language: require('./fr'),
+      allowClear: false,
+      escapeMarkup: function (markup) { return markup; },
+    }
+    if(this.useAjax()){
+      options = _.assign({}, options, {
+        ajax: {
+          url: origin + path + '/journey_patterns_collection.json',
+          dataType: 'json',
+          delay: '500',
+          data: function(params) {
+            return {
+              q: { published_name_or_objectid_or_registration_number_cont: params.term},
+            };
+          },
+          processResults: function(data, params) {
+            return {
+              results: data.map(
+                item => _.assign(
+                  {},
+                  item,
+                  { text: "<strong>" + item.published_name + " - " + item.short_id + "</strong><br/><small>" + item.registration_number + "</small>" }
+                )
+              )
+            };
+          },
+          cache: true
+        },
+        minimumInputLength: 1
+      })
+    }
+    return options
   }
 
   render() {
     return (
       <Select2
-        data={(this.props.isFilter) ? [this.props.filters.query.journeyPattern.published_name] : ((this.props.selection.selectedJPModal) ? [this.props.selection.selectedJPModal.published_name] : undefined)}
-        value={(this.props.isFilter) ? this.props.filters.query.journeyPattern.published_name : ((this.props.selection.selectedJPModal) ? this.props.selection.selectedJPModal.published_name : undefined) }
-        onSelect={(e) => this.props.onSelect2JourneyPattern(e)}
+        data={this.data()}
+        value={this.value()}
+        onSelect={this.onSelect}
         multiple={false}
         ref='journey_pattern_id'
         className={!this.props.isFilter ? "vjCreateSelectJP" : null}
         required={!this.props.isFilter}
-        options={{
-          allowClear: false,
-          theme: 'bootstrap',
-          placeholder: 'Filtrer par code, nom ou OID de mission...',
-          language: require('./fr'),
-          width: '100%',
-          ajax: {
-            url: origin + path + '/journey_patterns_collection.json',
-            dataType: 'json',
-            delay: '500',
-            data: function(params) {
-              return {
-                q: { published_name_or_objectid_or_registration_number_cont: params.term},
-              };
-            },
-            processResults: function(data, params) {
-              return {
-                results: data.map(
-                  item => _.assign(
-                    {},
-                    item,
-                    { text: "<strong>" + item.published_name + " - " + item.short_id + "</strong><br/><small>" + item.registration_number + "</small>" }
-                  )
-                )
-              };
-            },
-            cache: true
-          },
-          minimumInputLength: 1,
-          escapeMarkup: function (markup) { return markup; },
-          templateResult: formatRepo
-        }}
+        options={this.options()}
       />
     )
   }
@@ -63,4 +127,4 @@ export default class BSelect4 extends Component {
 
 const formatRepo = (props) => {
   if(props.text) return props.text
-}
\ No newline at end of file
+}
diff --git a/app/javascript/vehicle_journeys/containers/Filters.js b/app/javascript/vehicle_journeys/containers/Filters.js
index bec3527f4..a41c599f7 100644
--- a/app/javascript/vehicle_journeys/containers/Filters.js
+++ b/app/javascript/vehicle_journeys/containers/Filters.js
@@ -5,7 +5,8 @@ import Filters from '../components/Filters'
 const mapStateToProps = (state) => {
   return {
     filters: state.filters,
-    pagination: state.pagination
+    pagination: state.pagination,
+    missions: state.missions,
   }
 }
 
diff --git a/app/javascript/vehicle_journeys/containers/tools/AddVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/AddVehicleJourney.js
index 5da0bd3e9..0f4a0ea7d 100644
--- a/app/javascript/vehicle_journeys/containers/tools/AddVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/containers/tools/AddVehicleJourney.js
@@ -9,6 +9,7 @@ const mapStateToProps = (state, ownProps) => {
     vehicleJourneys: state.vehicleJourneys,
     status: state.status,
     stopPointsList: state.stopPointsList,
+    missions: state.missions,
   }
 }
 
diff --git a/app/javascript/vehicle_journeys/reducers/index.js b/app/javascript/vehicle_journeys/reducers/index.js
index bb24aa185..862c864ae 100644
--- a/app/javascript/vehicle_journeys/reducers/index.js
+++ b/app/javascript/vehicle_journeys/reducers/index.js
@@ -6,6 +6,7 @@ import status from './status'
 import filters from './filters'
 import editMode from './editMode'
 import stopPointsList from './stopPointsList'
+import missions from './missions'
 
 const vehicleJourneysApp = combineReducers({
   vehicleJourneys,
@@ -14,7 +15,8 @@ const vehicleJourneysApp = combineReducers({
   status,
   filters,
   editMode,
-  stopPointsList
+  stopPointsList,
+  missions
 })
 
 export default vehicleJourneysApp
diff --git a/app/javascript/vehicle_journeys/reducers/missions.js b/app/javascript/vehicle_journeys/reducers/missions.js
new file mode 100644
index 000000000..7c1a355c7
--- /dev/null
+++ b/app/javascript/vehicle_journeys/reducers/missions.js
@@ -0,0 +1,6 @@
+export default function missions(state = [], action) {
+  switch (action.type) {
+    default:
+      return state
+  }
+}
diff --git a/app/javascript/vehicle_journeys/reducers/modal.js b/app/javascript/vehicle_journeys/reducers/modal.js
index eae3314e8..c2556303d 100644
--- a/app/javascript/vehicle_journeys/reducers/modal.js
+++ b/app/javascript/vehicle_journeys/reducers/modal.js
@@ -152,7 +152,8 @@ export default function modal(state = {}, action) {
           name: window.jpOrigin.name,
           published_name: window.jpOrigin.published_name,
           objectid: window.jpOrigin.objectid,
-          stop_areas: stopAreas
+          stop_areas: stopAreas,
+          missions: state.missions
         }
       }
       return {
diff --git a/app/views/vehicle_journeys/index.html.slim b/app/views/vehicle_journeys/index.html.slim
index ebcac8197..66e90d839 100644
--- a/app/views/vehicle_journeys/index.html.slim
+++ b/app/views/vehicle_journeys/index.html.slim
@@ -26,6 +26,7 @@
   | window.line_footnotes = #{raw @footnotes};
   | window.perms = #{raw @perms};
   | window.features = #{raw @features};
+  | window.all_missions = #{(@all_missions.to_json).html_safe};
   | window.I18n = #{(I18n.backend.send(:translations).to_json).html_safe};
 
 = javascript_pack_tag 'vehicle_journeys/index.js'
diff --git a/spec/javascript/vehicle_journeys/actions_spec.js b/spec/javascript/vehicle_journeys/actions_spec.js
index 2f1daf0da..9515b57f2 100644
--- a/spec/javascript/vehicle_journeys/actions_spec.js
+++ b/spec/javascript/vehicle_journeys/actions_spec.js
@@ -42,6 +42,7 @@ describe('when using select2 to pick a journey pattern', () => {
     let selectedJP = {
       id: 1,
       object_id: 2,
+      short_id: 2,
       name: 'test',
       published_name: 'test',
       stop_area_short_descriptions: ['test']
@@ -51,6 +52,7 @@ describe('when using select2 to pick a journey pattern', () => {
       selectedItem:{
         id: selectedJP.id,
         objectid: selectedJP.object_id,
+        short_id: selectedJP.object_id,
         name: selectedJP.name,
         published_name: selectedJP.published_name,
         stop_areas: selectedJP.stop_area_short_descriptions