From a0592079dd01b7bc37da91606243de446847ba28 Mon Sep 17 00:00:00 2001
From: Zog
Date: Mon, 16 Apr 2018 10:40:23 +0200
Subject: Refs #6551; Add CustomFields to JourneyPatterns

---
 app/javascript/helpers/CustomFieldsInputs.js       | 76 ++++++++++++++++++++++
 .../journey_patterns/components/CreateModal.js     | 10 ++-
 .../journey_patterns/components/EditModal.js       | 34 +++++++---
 .../containers/AddJourneyPattern.js                |  3 +-
 .../journey_patterns/containers/Modal.js           |  3 +-
 app/javascript/journey_patterns/reducers/index.js  |  3 +-
 .../journey_patterns/reducers/journeyPatterns.js   |  3 +-
 app/javascript/packs/journey_patterns/index.js     |  3 +-
 .../components/tools/CreateModal.js                |  2 +-
 .../components/tools/CustomFieldsInputs.js         | 63 ------------------
 .../components/tools/EditVehicleJourney.js         |  2 +-
 11 files changed, 123 insertions(+), 79 deletions(-)
 create mode 100644 app/javascript/helpers/CustomFieldsInputs.js
 delete mode 100644 app/javascript/vehicle_journeys/components/tools/CustomFieldsInputs.js

(limited to 'app/javascript')

diff --git a/app/javascript/helpers/CustomFieldsInputs.js b/app/javascript/helpers/CustomFieldsInputs.js
new file mode 100644
index 000000000..abc8097d5
--- /dev/null
+++ b/app/javascript/helpers/CustomFieldsInputs.js
@@ -0,0 +1,76 @@
+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) }
+      />
+    )
+  }
+
+  stringInput(cf){
+    return(
+      <input
+        type='text'
+        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()} }
+        />
+    )
+  }
+
+  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()} }
+        />
+    )
+  }
+
+  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/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/CustomFieldsInputs.js b/app/javascript/vehicle_journeys/components/tools/CustomFieldsInputs.js
deleted file mode 100644
index 827c36b76..000000000
--- a/app/javascript/vehicle_journeys/components/tools/CustomFieldsInputs.js
+++ /dev/null
@@ -1,63 +0,0 @@
-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) }
-      />
-    )
-  }
-
-  stringInput(cf){
-    return(
-      <input
-        type='text'
-        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) }
-        />
-    )
-  }
-
-  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 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) {
-- 
cgit v1.2.3