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

And Refactor the component in the process

8 files changed, 83 insertions, 24 deletions

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})
           })