Merge pull request #227 from af83/5551-handle-custom-fields-in-vjs-editor

5551 Handle custom fields in VJs editor

8 files changed, 88 insertions, 7 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..90d72a801
--- /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'
+        defaultValue={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 08d74baba..2893422f8 100644
--- a/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import actions from '../../actions'
 import CompanySelect2 from './select2s/CompanySelect2'
+import CustomFieldsInputs from './CustomFieldsInputs'
 
 export default class EditVehicleJourney extends Component {
   constructor(props) {
@@ -15,8 +16,8 @@ export default class EditVehicleJourney extends Component {
         company = this.props.modal.modalProps.selectedCompany
       } else if (typeof this.props.modal.modalProps.vehicleJourney.company === "object") {
         company = this.props.modal.modalProps.vehicleJourney.company
-      } 
-      this.props.onEditVehicleJourney(this.refs, company)
+      }
+      this.props.onEditVehicleJourney(_.assign({}, this.refs, {custom_fields: this.custom_fields}), company)
       this.props.onModalClose()
       $('#EditVehicleJourneyModal').modal('hide')
     }
@@ -27,6 +28,9 @@ export default class EditVehicleJourney extends Component {
       return false
     }
     if(this.props.status.fetchSuccess == true) {
+      if(this.props.modal.modalProps.vehicleJourney){
+        this.custom_fields = _.assign({}, this.props.modal.modalProps.vehicleJourney.custom_fields)
+      }
       return (
         <li className='st_action'>
           <button
@@ -140,8 +144,15 @@ export default class EditVehicleJourney extends Component {
                             defaultValue={this.props.modal.modalProps.vehicleJourney.checksum}
                             />
                         </div>
-
+                        <div className='row'>
+                          <CustomFieldsInputs
+                            values={this.props.modal.modalProps.vehicleJourney.custom_fields}
+                            onUpdate={(code, value) => this.custom_fields[code]["value"] = 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 0549c7adc..62b846d9a 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':
@@ -148,6 +150,7 @@ export default function vehicleJourneys(state = [], action) {
             company: action.selectedCompany,
             published_journey_name: action.data.published_journey_name.value,
             published_journey_identifier: action.data.published_journey_identifier.value,
+            custom_fields: action.data.custom_fields,
           })
         }else{
           return vj