Refs #6551; Add CustomFields to JourneyPatterns6551-add_custom_field_values_to_journey_patterns

10 files changed, 62 insertions, 18 deletions

diff --git a/app/javascript/vehicle_journeys/components/tools/CustomFieldsInputs.js b/app/javascript/helpers/CustomFieldsInputs.js
index 827c36b76..abc8097d5 100644
--- a/app/javascript/vehicle_journeys/components/tools/CustomFieldsInputs.js
+++ b/app/javascript/helpers/CustomFieldsInputs.js
@@ -34,8 +34,21 @@ export default class CustomFieldsInputs extends Component {
         ref={'custom_fields.' + cf.code}
         className='form-control'
         disabled={this.props.disabled}
-        defaultValue={cf.value}
-        onChange={(e) => this.props.onUpdate(cf.code, e.target.value) }
+        value={cf.value}
+        onChange={(e) => {this.props.onUpdate(cf.code, e.target.value); this.forceUpdate()} }
+        />
+    )
+  }
+
+  integerInput(cf){
+    return(
+      <input
+        type='number'
+        ref={'custom_fields.' + cf.code}
+        className='form-control'
+        disabled={this.props.disabled}
+        value={cf.value}
+        onChange={(e) => {this.props.onUpdate(cf.code, e.target.value); this.forceUpdate()} }
         />
     )
   }
diff --git a/app/javascript/journey_patterns/components/CreateModal.js b/app/javascript/journey_patterns/components/CreateModal.js
index 946c13d9c..51f6f6c1b 100644
--- a/app/javascript/journey_patterns/components/CreateModal.js
+++ b/app/javascript/journey_patterns/components/CreateModal.js
@@ -1,15 +1,17 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import actions from '../actions'
+import CustomFieldsInputs from '../../helpers/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) == true) {
-      this.props.onAddJourneyPattern(this.refs)
+      this.props.onAddJourneyPattern(_.assign({}, this.refs, {custom_fields: this.custom_fields}))
       this.props.onModalClose()
       $('#NewJourneyPatternModal').modal('hide')
     }
@@ -78,8 +80,14 @@ 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}
+                              />
                             </div>
                           </div>
+
                           <div className='modal-footer'>
                             <button
                               className='btn btn-link'
diff --git a/app/javascript/journey_patterns/components/EditModal.js b/app/javascript/journey_patterns/components/EditModal.js
index 1960849fb..a23a57f96 100644
--- a/app/javascript/journey_patterns/components/EditModal.js
+++ b/app/javascript/journey_patterns/components/EditModal.js
@@ -1,19 +1,27 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import actions from '../actions'
+import CustomFieldsInputs from '../../helpers/CustomFieldsInputs'
 
 export default class EditModal extends Component {
   constructor(props) {
     super(props)
+    this.updateValue = this.updateValue.bind(this)
   }
 
   handleSubmit() {
     if(actions.validateFields(this.refs) == true) {
-      this.props.saveModal(this.props.modal.modalProps.index, this.refs)
+      this.props.saveModal(this.props.modal.modalProps.index, _.assign({}, this.refs, {custom_fields: this.custom_fields}))
       $('#JourneyPatternModal').modal('hide')
     }
   }
 
+  updateValue(attribute, e) {
+    actions.resetValidation(e.currentTarget)
+    this.props.modal.modalProps.journeyPattern[attribute] = e.target.value
+    this.forceUpdate()
+  }
+
   renderModalTitle() {
     if (this.props.editMode) {
       return (
@@ -28,6 +36,9 @@ export default class EditModal extends Component {
   }
 
   render() {
+    if(this.props.modal.modalProps.journeyPattern){
+      this.custom_fields = _.assign({}, this.props.modal.modalProps.journeyPattern.custom_fields)
+    }
     return (
       <div className={ 'modal fade ' + ((this.props.modal.type == 'edit') ? 'in' : '') } id='JourneyPatternModal'>
         <div className='modal-container'>
@@ -48,8 +59,8 @@ export default class EditModal extends Component {
                         className='form-control'
                         disabled={!this.props.editMode}
                         id={this.props.modal.modalProps.index}
-                        defaultValue={this.props.modal.modalProps.journeyPattern.name}
-                        onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                        value={this.props.modal.modalProps.journeyPattern.name}
+                        onChange={(e) => this.updateValue('name', e)}
                         required
                         />
                     </div>
@@ -64,8 +75,8 @@ export default class EditModal extends Component {
                             className='form-control'
                             disabled={!this.props.editMode}
                             id={this.props.modal.modalProps.index}
-                            defaultValue={this.props.modal.modalProps.journeyPattern.published_name}
-                            onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                            value={this.props.modal.modalProps.journeyPattern.published_name}
+                            onChange={(e) => this.updateValue('published_name', e)}
                             required
                             />
                         </div>
@@ -79,12 +90,19 @@ export default class EditModal extends Component {
                             className='form-control'
                             disabled={!this.props.editMode}
                             id={this.props.modal.modalProps.index}
-                            defaultValue={this.props.modal.modalProps.journeyPattern.registration_number}
-                            onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                            value={this.props.modal.modalProps.journeyPattern.registration_number}
+                            onChange={(e) => this.updateValue('registration_number', e)}
                             />
                         </div>
                       </div>
                     </div>
+                    <div className='row'>
+                      <CustomFieldsInputs
+                        values={this.props.modal.modalProps.journeyPattern.custom_fields}
+                        onUpdate={(code, value) => this.custom_fields[code]["value"] = value}
+                        disabled={!this.props.editMode}
+                      />
+                    </div>
                     <div>
                       <label className='control-label'>{I18n.attribute_name('journey_pattern', 'checksum')}</label>
                         <input
@@ -92,7 +110,7 @@ export default class EditModal extends Component {
                         ref='checksum'
                         className='form-control'
                         disabled='disabled'
-                        defaultValue={this.props.modal.modalProps.journeyPattern.checksum}
+                        value={this.props.modal.modalProps.journeyPattern.checksum}
                         />
                     </div>
                   </div>
diff --git a/app/javascript/journey_patterns/containers/AddJourneyPattern.js b/app/javascript/journey_patterns/containers/AddJourneyPattern.js
index b093fd111..9e85afd5e 100644
--- a/app/javascript/journey_patterns/containers/AddJourneyPattern.js
+++ b/app/javascript/journey_patterns/containers/AddJourneyPattern.js
@@ -7,7 +7,8 @@ const mapStateToProps = (state) => {
     modal: state.modal,
     journeyPatterns: state.journeyPatterns,
     editMode: state.editMode,
-    status: state.status
+    status: state.status,
+    custom_fields: state.custom_fields
   }
 }
 
diff --git a/app/javascript/journey_patterns/containers/Modal.js b/app/javascript/journey_patterns/containers/Modal.js
index 33ee8583c..fc04843e4 100644
--- a/app/javascript/journey_patterns/containers/Modal.js
+++ b/app/javascript/journey_patterns/containers/Modal.js
@@ -7,7 +7,8 @@ const mapStateToProps = (state) => {
   return {
     editMode: state.editMode,
     modal: state.modal,
-    journeyPattern: state.journeyPattern
+    journeyPattern: state.journeyPattern,
+    custom_fields: state.custom_fields,
   }
 }
 
diff --git a/app/javascript/journey_patterns/reducers/index.js b/app/javascript/journey_patterns/reducers/index.js
index 2ffaf86d4..d3a1d29a2 100644
--- a/app/javascript/journey_patterns/reducers/index.js
+++ b/app/javascript/journey_patterns/reducers/index.js
@@ -12,7 +12,8 @@ const journeyPatternsApp = combineReducers({
   journeyPatterns,
   pagination,
   stopPointsList,
-  modal
+  modal,
+  custom_fields: (state = [], action) => state
 })
 
 export default journeyPatternsApp
diff --git a/app/javascript/journey_patterns/reducers/journeyPatterns.js b/app/javascript/journey_patterns/reducers/journeyPatterns.js
index b046f2b38..1a6a27da6 100644
--- a/app/javascript/journey_patterns/reducers/journeyPatterns.js
+++ b/app/javascript/journey_patterns/reducers/journeyPatterns.js
@@ -103,7 +103,8 @@ export default function journeyPatterns (state = [], action)  {
           return _.assign({}, j, {
             name: action.data.name.value,
             published_name: action.data.published_name.value,
-            registration_number: action.data.registration_number.value
+            registration_number: action.data.registration_number.value,
+            custom_fields: action.data.custom_fields,
           })
         } else {
           return j
diff --git a/app/javascript/packs/journey_patterns/index.js b/app/javascript/packs/journey_patterns/index.js
index 075eea13a..bd7df2634 100644
--- a/app/javascript/packs/journey_patterns/index.js
+++ b/app/javascript/packs/journey_patterns/index.js
@@ -34,7 +34,8 @@ var initialState = {
     type: '',
     modalProps: {},
     confirmModal: {}
-  }
+  },
+  custom_fields: window.custom_fields
 }
 // const loggerMiddleware = createLogger()
 
diff --git a/app/javascript/vehicle_journeys/components/tools/CreateModal.js b/app/javascript/vehicle_journeys/components/tools/CreateModal.js
index f49b51f08..1d470cd43 100644
--- a/app/javascript/vehicle_journeys/components/tools/CreateModal.js
+++ b/app/javascript/vehicle_journeys/components/tools/CreateModal.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import actions from '../../actions'
 import MissionSelect2 from './select2s/MissionSelect2'
 import CompanySelect2 from './select2s/CompanySelect2'
-import CustomFieldsInputs from './CustomFieldsInputs'
+import CustomFieldsInputs from '../../../helpers/CustomFieldsInputs'
 
 export default class CreateModal extends Component {
   constructor(props) {
diff --git a/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
index e4e266c79..60d982845 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 CustomFieldsInputs from './CustomFieldsInputs'
+import CustomFieldsInputs from '../../../helpers/CustomFieldsInputs'
 
 export default class EditVehicleJourney extends Component {
   constructor(props) {