Refs #5551 @0.5h; Implement the custom fields in the creation modal

And Refactor the component in the process

13 files changed, 118 insertions, 28 deletions

diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index 474277da1..80d194096 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -41,6 +41,11 @@ class ApplicationController < ActionController::Base
   end
   helper_method :current_offer_workbench
 
+  def current_workgroup
+    current_offer_workbench.workgroup
+  end
+  helper_method :current_workgroup
+
   def current_functional_scope
     functional_scope = current_organisation.sso_attributes.try(:[], "functional_scope") if current_organisation
     JSON.parse(functional_scope) if functional_scope
diff --git a/app/controllers/vehicle_journeys_controller.rb b/app/controllers/vehicle_journeys_controller.rb
index 565cccec8..906fd8cd3 100644
--- a/app/controllers/vehicle_journeys_controller.rb
+++ b/app/controllers/vehicle_journeys_controller.rb
@@ -49,6 +49,7 @@ class VehicleJourneysController < ChouetteController
       end
       format.html do
         load_missions
+        load_custom_fields
         @stop_points_list = []
         @stop_points_list = route.stop_points.includes(:stop_area).map do |sp|
           {
@@ -176,6 +177,10 @@ class VehicleJourneysController < ChouetteController
   end
 
   private
+  def load_custom_fields
+    @custom_fields = current_workgroup.custom_fields_definitions
+  end
+
   def load_missions
     @all_missions = route.journey_patterns.count > 10 ? [] : route.journey_patterns.map do |item|
       {
diff --git a/app/javascript/packs/vehicle_journeys/index.js b/app/javascript/packs/vehicle_journeys/index.js
index ab28371fe..aa5738d59 100644
--- a/app/javascript/packs/vehicle_journeys/index.js
+++ b/app/javascript/packs/vehicle_journeys/index.js
@@ -71,7 +71,8 @@ var initialState = {
     modalProps: {},
     confirmModal: {}
   },
-  missions: window.all_missions
+  missions: window.all_missions,
+  custom_fields: window.custom_fields
 }
 
 if (window.jpOrigin){
diff --git a/app/javascript/vehicle_journeys/components/tools/CreateModal.js b/app/javascript/vehicle_journeys/components/tools/CreateModal.js
index 07c684760..90328458b 100644
--- a/app/javascript/vehicle_journeys/components/tools/CreateModal.js
+++ b/app/javascript/vehicle_journeys/components/tools/CreateModal.js
@@ -3,15 +3,17 @@ import PropTypes from 'prop-types'
 import actions from '../../actions'
 import MissionSelect2 from './select2s/MissionSelect2'
 import CompanySelect2 from './select2s/CompanySelect2'
+import CustomFieldsInputs from './CustomFieldsInputs'
 
 export default class CreateModal extends Component {
   constructor(props) {
     super(props)
+    this.custom_fields = _.assign({}, this.props.custom_fields)
   }
 
   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.vehicleJourney && this.props.modal.modalProps.vehicleJourney.company)
+      this.props.onAddVehicleJourney(_.assign({}, this.refs, {custom_fields: this.custom_fields}), this.props.modal.modalProps.selectedJPModal, this.props.stopPointsList, this.props.modal.modalProps.vehicleJourney && this.props.modal.modalProps.vehicleJourney.company)
       this.props.onModalClose()
       $('#NewVehicleJourneyModal').modal('hide')
     }
@@ -89,6 +91,11 @@ export default class CreateModal extends Component {
                                 />
                             </div>
                           </div>
+                          <CustomFieldsInputs
+                            values={this.props.custom_fields}
+                            onUpdate={(code, value) => this.custom_fields[code]["value"] = value}
+                            disabled={false}
+                          />
                           { this.props.modal.modalProps.selectedJPModal && this.props.modal.modalProps.selectedJPModal.full_schedule && <div className='col-lg-6 col-md-6 col-sm-6 col-xs-12'>
                               <div className='form-group'>
                                 <label className='control-label'>Heure de départ</label>
diff --git a/app/javascript/vehicle_journeys/components/tools/CustomFieldsInputs.js b/app/javascript/vehicle_journeys/components/tools/CustomFieldsInputs.js
new file mode 100644
index 000000000..eb8eb7080
--- /dev/null
+++ b/app/javascript/vehicle_journeys/components/tools/CustomFieldsInputs.js
@@ -0,0 +1,50 @@
+import _ from 'lodash'
+import Select2 from 'react-select2-wrapper'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class CustomFieldsInputs extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  listInput(cf){
+    return(
+      <Select2
+        data={_.map(cf.options.list_values, (v, k) => {
+          return {id: k, text: (v.length > 0 ? v : '\u00A0')}
+        })}
+        ref={'custom_fields.' + cf.code}
+        className='form-control'
+        value={cf.value}
+        disabled={this.props.disabled}
+        options={{
+          theme: 'bootstrap',
+          width: '100%'
+        }}
+        onSelect={(e) => this.props.onUpdate(cf.code, e.params.data.id) }
+      />
+    )
+  }
+
+  render() {
+    return (
+      <div>
+        {_.map(this.props.values, (cf, code) =>
+          <div className='col-lg-6 col-md-6 col-sm-6 col-xs-12' key={code}>
+            <div className='form-group'>
+              <label className='control-label'>{cf.name}</label>
+              {this[cf.field_type + "Input"](cf)}
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  }
+}
+
+CustomFieldsInputs.propTypes = {
+  onUpdate: PropTypes.func.isRequired,
+  values: PropTypes.object.isRequired,
+  disabled: PropTypes.bool.isRequired
+}
diff --git a/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
index b46857d19..1ac161485 100644
--- a/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import actions from '../../actions'
 import CompanySelect2 from './select2s/CompanySelect2'
-import Select2 from 'react-select2-wrapper'
+import CustomFieldsInputs from './CustomFieldsInputs'
 
 export default class EditVehicleJourney extends Component {
   constructor(props) {
@@ -142,24 +142,15 @@ export default class EditVehicleJourney extends Component {
                             defaultValue={this.props.modal.modalProps.vehicleJourney.checksum}
                             />
                         </div>
-                        {_.map(this.props.modal.modalProps.vehicleJourney.custom_fields, (cf, code) =>
-                          <div className='form-group' key={code}>
-                            <label className='control-label'>{cf.name}</label>
-                            <Select2
-                              data={_.map(cf.options.list_values, (v, k) => {
-                                return {id: k, text: v}
-                              })}
-                              ref={'custom_fields.' + code}
-                              className='form-control'
-                              value={cf.value}
-                              disabled={!this.props.editMode}
-                              options={{theme: 'bootstrap'}}
-                              onSelect={(e) => this.custom_fields[code] = e.params.data.id }
-                            />
-                          </div>
-                      )}
-
+                        <div className='row'>
+                          <CustomFieldsInputs
+                            values={this.props.modal.modalProps.vehicleJourney.custom_fields}
+                            onUpdate={(code, value) => this.custom_fields[code] = value}
+                            disabled={!this.props.editMode}
+                          />
+                        </div>
                       </div>
+
                       {
                         this.props.editMode &&
                         <div className='modal-footer'>
diff --git a/app/javascript/vehicle_journeys/containers/tools/AddVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/AddVehicleJourney.js
index 0f4a0ea7d..0db7628be 100644
--- a/app/javascript/vehicle_journeys/containers/tools/AddVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/containers/tools/AddVehicleJourney.js
@@ -10,6 +10,7 @@ const mapStateToProps = (state, ownProps) => {
     status: state.status,
     stopPointsList: state.stopPointsList,
     missions: state.missions,
+    custom_fields: state.custom_fields,
   }
 }
 
diff --git a/app/javascript/vehicle_journeys/reducers/custom_fields.js b/app/javascript/vehicle_journeys/reducers/custom_fields.js
new file mode 100644
index 000000000..482fd91cb
--- /dev/null
+++ b/app/javascript/vehicle_journeys/reducers/custom_fields.js
@@ -0,0 +1,6 @@
+export default function custom_fields(state = [], action) {
+  switch (action.type) {
+    default:
+      return state
+  }
+}
diff --git a/app/javascript/vehicle_journeys/reducers/index.js b/app/javascript/vehicle_journeys/reducers/index.js
index 862c864ae..1963f7c6d 100644
--- a/app/javascript/vehicle_journeys/reducers/index.js
+++ b/app/javascript/vehicle_journeys/reducers/index.js
@@ -7,6 +7,7 @@ import filters from './filters'
 import editMode from './editMode'
 import stopPointsList from './stopPointsList'
 import missions from './missions'
+import custom_fields from './custom_fields'
 
 const vehicleJourneysApp = combineReducers({
   vehicleJourneys,
@@ -16,7 +17,8 @@ const vehicleJourneysApp = combineReducers({
   filters,
   editMode,
   stopPointsList,
-  missions
+  missions,
+  custom_fields
 })
 
 export default vehicleJourneysApp
diff --git a/app/javascript/vehicle_journeys/reducers/vehicleJourneys.js b/app/javascript/vehicle_journeys/reducers/vehicleJourneys.js
index 4ed85316f..8d68ad2db 100644
--- a/app/javascript/vehicle_journeys/reducers/vehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/reducers/vehicleJourneys.js
@@ -54,6 +54,7 @@ const vehicleJourney= (state = {}, action, keep) => {
         pristineVjasList.push(newVjas)
 
       })
+
       return {
         company: action.selectedCompany,
         journey_pattern: action.selectedJourneyPattern,
@@ -68,7 +69,8 @@ const vehicleJourney= (state = {}, action, keep) => {
         selected: false,
         deletable: false,
         transport_mode: window.transportMode ? window.transportMode : 'undefined',
-        transport_submode: window.transportSubmode ? window.transportSubmode : 'undefined'
+        transport_submode: window.transportSubmode ? window.transportSubmode : 'undefined',
+        custom_fields: action.data.custom_fields
       }
     case 'DUPLICATE_VEHICLEJOURNEY':
     case 'SHIFT_VEHICLEJOURNEY':
@@ -144,9 +146,8 @@ export default function vehicleJourneys(state = [], action) {
     case 'EDIT_VEHICLEJOURNEY':
       return state.map((vj, i) => {
         if (vj.selected){
-          let custom_fields = _.assign({}, vj.custom_fields)
+          let custom_fields = _.assign({}, action.data.custom_fields)
           _.each(custom_fields, (cf, code) => {
-            console.log(action.data.custom_fields)
             let value = action.data.custom_fields[code]
             custom_fields[code] = _.assign({}, custom_fields[code], {value})
           })
diff --git a/app/models/workgroup.rb b/app/models/workgroup.rb
index 995917fac..511bbfeb0 100644
--- a/app/models/workgroup.rb
+++ b/app/models/workgroup.rb
@@ -11,4 +11,8 @@ class Workgroup < ActiveRecord::Base
   validates_presence_of :stop_area_referential_id
 
   has_many :custom_fields
+
+  def custom_fields_definitions
+    Hash[*custom_fields.map{|cf| [cf.code, cf]}.flatten]
+  end
 end
diff --git a/app/views/vehicle_journeys/index.html.slim b/app/views/vehicle_journeys/index.html.slim
index 66e90d839..f7796b188 100644
--- a/app/views/vehicle_journeys/index.html.slim
+++ b/app/views/vehicle_journeys/index.html.slim
@@ -27,6 +27,7 @@
   | window.perms = #{raw @perms};
   | window.features = #{raw @features};
   | window.all_missions = #{(@all_missions.to_json).html_safe};
+  | window.custom_fields = #{(@custom_fields.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/reducers/vehicleJourneys_spec.js b/spec/javascript/vehicle_journeys/reducers/vehicleJourneys_spec.js
index 44e11aadf..573eebf4f 100644
--- a/spec/javascript/vehicle_journeys/reducers/vehicleJourneys_spec.js
+++ b/spec/javascript/vehicle_journeys/reducers/vehicleJourneys_spec.js
@@ -89,7 +89,12 @@ describe('vehicleJourneys reducer', () => {
     }]
     let fakeData = {
       published_journey_name: {value: 'test'},
-      published_journey_identifier: {value : ''}
+      published_journey_identifier: {value : ''},
+      custom_fields: {
+        foo: {
+          value: 12
+        }
+      }
     }
     let fakeSelectedJourneyPattern = {id: "1"}
     let fakeSelectedCompany = {name: "ALBATRANS"}
@@ -115,7 +120,12 @@ describe('vehicleJourneys reducer', () => {
       selected: false,
       deletable: false,
       transport_mode: 'undefined',
-      transport_submode: 'undefined'
+      transport_submode: 'undefined',
+      custom_fields: {
+        foo: {
+          value: 12
+        }
+      }
     }, ...state])
   })
 
@@ -345,12 +355,18 @@ describe('vehicleJourneys reducer', () => {
   })
 
   it('should handle EDIT_VEHICLEJOURNEY', () => {
+    let custom_fields = {
+      foo: {
+        value: 12
+      }
+    }
     let fakeData = {
       published_journey_name: {value : 'test'},
-      published_journey_identifier: {value: 'test'}
+      published_journey_identifier: {value: 'test'},
+      custom_fields: {foo: 12}
     }
     let fakeSelectedCompany : {name : 'ALBATRANS'}
-    let newVJ = Object.assign({}, state[0], {company: fakeSelectedCompany, published_journey_name: fakeData.published_journey_name.value, published_journey_identifier: fakeData.published_journey_identifier.value})
+    let newVJ = Object.assign({}, state[0], {company: fakeSelectedCompany, published_journey_name: fakeData.published_journey_name.value, published_journey_identifier: fakeData.published_journey_identifier.value, custom_fields})
     expect(
       vjReducer(state, {
         type: 'EDIT_VEHICLEJOURNEY',