Refs #5502 @4h; Don't use Ajax in JP selector in VJs editor5502-remove-search-from-selects

When the number of possible values is low (<10), display the values
right away, don't use an Ajax query

3 files changed, 106 insertions, 39 deletions

diff --git a/app/javascript/vehicle_journeys/components/Filters.js b/app/javascript/vehicle_journeys/components/Filters.js
index 3bc4f7ff7..125c27311 100644
--- a/app/javascript/vehicle_journeys/components/Filters.js
+++ b/app/javascript/vehicle_journeys/components/Filters.js
@@ -3,7 +3,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'>
@@ -24,6 +24,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 cd593cdff..c402dcd84 100644
--- a/app/javascript/vehicle_journeys/components/tools/CreateModal.js
+++ b/app/javascript/vehicle_journeys/components/tools/CreateModal.js
@@ -10,7 +10,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')
     }
@@ -72,6 +72,7 @@ export default class CreateModal extends Component {
                               <MissionSelect2
                                 selection={this.props.modal.modalProps}
                                 onSelect2JourneyPattern={this.props.onSelect2JourneyPattern}
+                                values={this.props.missions}
                                 isFilter={false}
                               />
                             </div>
@@ -129,5 +130,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 fa847886c..8ad60daa3 100644
--- a/app/javascript/vehicle_journeys/components/tools/select2s/MissionSelect2.js
+++ b/app/javascript/vehicle_journeys/components/tools/select2s/MissionSelect2.js
@@ -11,50 +11,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()}
       />
     )
   }
@@ -62,4 +126,4 @@ export default class BSelect4 extends Component {
 
 const formatRepo = (props) => {
   if(props.text) return props.text
-}
\ No newline at end of file
+}