From cb0564d4d7d35c8a43e166b68d8c7dc94341fc9d Mon Sep 17 00:00:00 2001 From: Zog Date: Thu, 11 Jan 2018 14:37:14 +0100 Subject: Refs #5551 @1.5h; Implement Custom fields edition RBD: implement the same in the creation modal --- .../components/tools/EditVehicleJourney.js | 22 ++++++++++++++++++++-- .../vehicle_journeys/reducers/vehicleJourneys.js | 7 +++++++ 2 files changed, 27 insertions(+), 2 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js index 08d74baba..b46857d19 100644 --- a/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js +++ b/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js @@ -2,10 +2,12 @@ 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' export default class EditVehicleJourney extends Component { constructor(props) { super(props) + this.custom_fields = {} } handleSubmit() { @@ -15,8 +17,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') } @@ -140,6 +142,22 @@ export default class EditVehicleJourney extends Component { defaultValue={this.props.modal.modalProps.vehicleJourney.checksum} /> + {_.map(this.props.modal.modalProps.vehicleJourney.custom_fields, (cf, code) => +
+ + { + 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 } + /> +
+ )} { diff --git a/app/javascript/vehicle_journeys/reducers/vehicleJourneys.js b/app/javascript/vehicle_journeys/reducers/vehicleJourneys.js index 0549c7adc..4ed85316f 100644 --- a/app/javascript/vehicle_journeys/reducers/vehicleJourneys.js +++ b/app/javascript/vehicle_journeys/reducers/vehicleJourneys.js @@ -144,10 +144,17 @@ export default function vehicleJourneys(state = [], action) { case 'EDIT_VEHICLEJOURNEY': return state.map((vj, i) => { if (vj.selected){ + let custom_fields = _.assign({}, vj.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}) + }) return _.assign({}, vj, { company: action.selectedCompany, published_journey_name: action.data.published_journey_name.value, published_journey_identifier: action.data.published_journey_identifier.value, + custom_fields: custom_fields, }) }else{ return vj -- cgit v1.2.3 From ed0faeaaa7bddc135c7b55f6d12fd09a739afacc Mon Sep 17 00:00:00 2001 From: Zog Date: Thu, 11 Jan 2018 15:42:37 +0100 Subject: Refs #5551 @0.5h; Implement the custom fields in the creation modal And Refactor the component in the process --- app/javascript/packs/vehicle_journeys/index.js | 3 +- .../components/tools/CreateModal.js | 9 +++- .../components/tools/CustomFieldsInputs.js | 50 ++++++++++++++++++++++ .../components/tools/EditVehicleJourney.js | 27 ++++-------- .../containers/tools/AddVehicleJourney.js | 1 + .../vehicle_journeys/reducers/custom_fields.js | 6 +++ app/javascript/vehicle_journeys/reducers/index.js | 4 +- .../vehicle_journeys/reducers/vehicleJourneys.js | 7 +-- 8 files changed, 83 insertions(+), 24 deletions(-) create mode 100644 app/javascript/vehicle_journeys/components/tools/CustomFieldsInputs.js create mode 100644 app/javascript/vehicle_journeys/reducers/custom_fields.js (limited to 'app/javascript') 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 { /> + this.custom_fields[code]["value"] = value} + disabled={false} + /> { this.props.modal.modalProps.selectedJPModal && this.props.modal.modalProps.selectedJPModal.full_schedule &&
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( + { + 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 ( +
+ {_.map(this.props.values, (cf, code) => +
+
+ + {this[cf.field_type + "Input"](cf)} +
+
+ )} +
+ ) + } +} + +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} />
- {_.map(this.props.modal.modalProps.vehicleJourney.custom_fields, (cf, code) => -
- - { - 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 } - /> -
- )} - +
+ this.custom_fields[code] = value} + disabled={!this.props.editMode} + /> +
+ { this.props.editMode &&
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}) }) -- cgit v1.2.3 From dab42556bd956aa07fa2e423e85a647c166b9e0e Mon Sep 17 00:00:00 2001 From: Zog Date: Thu, 11 Jan 2018 21:09:50 +0100 Subject: Refs #5551; Fix bug when the user reopens the modal --- .../vehicle_journeys/components/tools/CustomFieldsInputs.js | 2 +- .../vehicle_journeys/components/tools/EditVehicleJourney.js | 6 ++++-- app/javascript/vehicle_journeys/reducers/vehicleJourneys.js | 7 +------ 3 files changed, 6 insertions(+), 9 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/vehicle_journeys/components/tools/CustomFieldsInputs.js b/app/javascript/vehicle_journeys/components/tools/CustomFieldsInputs.js index eb8eb7080..90d72a801 100644 --- a/app/javascript/vehicle_journeys/components/tools/CustomFieldsInputs.js +++ b/app/javascript/vehicle_journeys/components/tools/CustomFieldsInputs.js @@ -16,7 +16,7 @@ export default class CustomFieldsInputs extends Component { })} ref={'custom_fields.' + cf.code} className='form-control' - value={cf.value} + defaultValue={cf.value} disabled={this.props.disabled} options={{ theme: 'bootstrap', diff --git a/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js index 1ac161485..2893422f8 100644 --- a/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js +++ b/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js @@ -7,7 +7,6 @@ import CustomFieldsInputs from './CustomFieldsInputs' export default class EditVehicleJourney extends Component { constructor(props) { super(props) - this.custom_fields = {} } handleSubmit() { @@ -29,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 (
    • diff --git a/app/javascript/vehicle_journeys/reducers/vehicleJourneys.js b/app/javascript/vehicle_journeys/reducers/vehicleJourneys.js index 8d68ad2db..62b846d9a 100644 --- a/app/javascript/vehicle_journeys/reducers/vehicleJourneys.js +++ b/app/javascript/vehicle_journeys/reducers/vehicleJourneys.js @@ -146,16 +146,11 @@ export default function vehicleJourneys(state = [], action) { case 'EDIT_VEHICLEJOURNEY': return state.map((vj, i) => { if (vj.selected){ - let custom_fields = _.assign({}, action.data.custom_fields) - _.each(custom_fields, (cf, code) => { - let value = action.data.custom_fields[code] - custom_fields[code] = _.assign({}, custom_fields[code], {value}) - }) return _.assign({}, vj, { company: action.selectedCompany, published_journey_name: action.data.published_journey_name.value, published_journey_identifier: action.data.published_journey_identifier.value, - custom_fields: custom_fields, + custom_fields: action.data.custom_fields, }) }else{ return vj -- cgit v1.2.3