2 files changed, 35 insertions, 9 deletions
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>