Refs #5825 @1h; Fix info window behaviour on VJs editor

6 files changed, 86 insertions, 15 deletions

diff --git a/app/javascript/vehicle_journeys/actions/index.js b/app/javascript/vehicle_journeys/actions/index.js
index 74a333b53..bb4ccf417 100644
--- a/app/javascript/vehicle_journeys/actions/index.js
+++ b/app/javascript/vehicle_journeys/actions/index.js
@@ -69,6 +69,10 @@ const actions = {
     type : 'EDIT_VEHICLEJOURNEY_MODAL',
     vehicleJourney
   }),
+  openInfoModal : (vehicleJourney) => ({
+    type : 'INFO_VEHICLEJOURNEY_MODAL',
+    vehicleJourney
+  }),
   openNotesEditModal : (vehicleJourney) => ({
     type : 'EDIT_NOTES_VEHICLEJOURNEY_MODAL',
     vehicleJourney
diff --git a/app/javascript/vehicle_journeys/components/VehicleJourney.js b/app/javascript/vehicle_journeys/components/VehicleJourney.js
index e7d4b5b30..99a458f50 100644
--- a/app/javascript/vehicle_journeys/components/VehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/VehicleJourney.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import actions from '../actions'
 import EditVehicleJourney from '../containers/tools/EditVehicleJourney'
+import VehicleJourneyInfoButton from '../containers/tools/VehicleJourneyInfoButton'
 
 export default class VehicleJourney extends Component {
   constructor(props) {
@@ -60,7 +61,7 @@ export default class VehicleJourney extends Component {
         <div
           className='th'
           onClick={(e) =>
-            ($(e.target).parents("a").length == 0) && this.props.onSelectVehicleJourney(this.props.index)
+            !this.props.disabled && ($(e.target).parents("a").length == 0) && this.props.onSelectVehicleJourney(this.props.index)
           }
           >
           <div className='strong mb-xs'>{this.props.value.short_id || '-'}</div>
@@ -93,7 +94,7 @@ export default class VehicleJourney extends Component {
             ></input>
             <label htmlFor={this.props.index}></label>
           </div>}
-          {this.props.disabled && <EditVehicleJourney disabled={false} vehicleJourney={this.props.value} />}
+          {this.props.disabled && <VehicleJourneyInfoButton vehicleJourney={this.props.value} />}
         </div>
         {this.props.value.vehicle_journey_at_stops.map((vj, i) =>
           <div key={i} className='td text-center'>
diff --git a/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
index f814c0459..f6a0e3c61 100644
--- a/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
@@ -7,6 +7,7 @@ import CustomFieldsInputs from './CustomFieldsInputs'
 export default class EditVehicleJourney extends Component {
   constructor(props) {
     super(props)
+    this.updateValue = this.updateValue.bind(this)
   }
 
   handleSubmit() {
@@ -23,8 +24,14 @@ export default class EditVehicleJourney extends Component {
     }
   }
 
-  getSelected() {
-    return this.props.vehicleJourney ? [this.props.vehicleJourney] : actions.getSelected(this.props.vehicleJourneys)
+  updateValue(attribute, e) {
+    this.props.modal.modalProps.vehicleJourney[attribute] = e.target.value
+    actions.resetValidation(e.currentTarget)
+    this.forceUpdate()
+  }
+
+  editMode() {
+    return !this.props.modal.modalProps.info && this.props.editMode
   }
 
   render() {
@@ -39,10 +46,10 @@ export default class EditVehicleJourney extends Component {
         <li className='st_action'>
           <button
             type='button'
-            disabled={(this.getSelected().length != 1 || this.props.disabled)}
+            disabled={(actions.getSelected(this.props.vehicleJourneys).length != 1 || this.props.disabled)}
             data-toggle='modal'
             data-target='#EditVehicleJourneyModal'
-            onClick={() => this.props.onOpenEditModal(this.getSelected()[0])}
+            onClick={() => this.props.onOpenEditModal(actions.getSelected(this.props.vehicleJourneys)[0])}
           >
             <span className='fa fa-info'></span>
           </button>
@@ -67,9 +74,9 @@ export default class EditVehicleJourney extends Component {
                                   type='text'
                                   ref='published_journey_name'
                                   className='form-control'
-                                  disabled={!this.props.editMode}
-                                  defaultValue={this.props.modal.modalProps.vehicleJourney.published_journey_name}
-                                  onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                                  disabled={!this.editMode()}
+                                  value={this.props.modal.modalProps.vehicleJourney.published_journey_name}
+                                  onChange={(e) => this.updateValue('published_journey_name', e)}
                                   />
                               </div>
                             </div>
@@ -94,9 +101,9 @@ export default class EditVehicleJourney extends Component {
                                 type='text'
                                 ref='published_journey_identifier'
                                 className='form-control'
-                                disabled={!this.props.editMode}
-                                defaultValue={this.props.modal.modalProps.vehicleJourney.published_journey_identifier}
-                                onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                                disabled={!this.editMode()}
+                                value={this.props.modal.modalProps.vehicleJourney.published_journey_identifier}
+                                onChange={(e) => this.updateValue('published_journey_identifier', e)}
                               />
                             </div>
                           </div>
@@ -105,7 +112,7 @@ export default class EditVehicleJourney extends Component {
                               <label className='control-label'>Transporteur</label>
                               <CompanySelect2
                                 editModal={this.props.modal.type == "edit"}
-                                editMode={this.props.editMode}
+                                editMode={this.editMode()}
                                 company = {this.props.modal.modalProps.vehicleJourney.company}
                                 onSelect2Company = {(e) => this.props.onSelect2Company(e)}
                                 onUnselect2Company = {() => this.props.onUnselect2Company()}
@@ -152,13 +159,13 @@ export default class EditVehicleJourney extends Component {
                           <CustomFieldsInputs
                             values={this.props.modal.modalProps.vehicleJourney.custom_fields}
                             onUpdate={(code, value) => this.custom_fields[code]["value"] = value}
-                            disabled={!this.props.editMode}
+                            disabled={!this.editMode()}
                           />
                         </div>
                       </div>
 
                       {
-                        this.props.editMode &&
+                        this.editMode() &&
                         <div className='modal-footer'>
                           <button
                             className='btn btn-link'
diff --git a/app/javascript/vehicle_journeys/components/tools/VehicleJourneyInfoButton.js b/app/javascript/vehicle_journeys/components/tools/VehicleJourneyInfoButton.js
new file mode 100644
index 000000000..a63a1d701
--- /dev/null
+++ b/app/javascript/vehicle_journeys/components/tools/VehicleJourneyInfoButton.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import actions from '../../actions'
+
+export default class VehicleJourneyInfoButton extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+
+  render() {
+    return (
+      <li className='st_action'>
+        <button
+          type='button'
+          data-toggle='modal'
+          data-target='#EditVehicleJourneyModal'
+          onClick={() => this.props.onOpenEditModal(this.props.vehicleJourney)}
+        >
+          <span className='fa fa-info'></span>
+        </button>
+      </li>
+    )
+  }
+}
+
+VehicleJourneyInfoButton.propTypes = {
+  onOpenEditModal: PropTypes.func.isRequired,
+  vehicleJourney: PropTypes.object.isRequired,
+}
diff --git a/app/javascript/vehicle_journeys/containers/tools/VehicleJourneyInfoButton.js b/app/javascript/vehicle_journeys/containers/tools/VehicleJourneyInfoButton.js
new file mode 100644
index 000000000..19010c312
--- /dev/null
+++ b/app/javascript/vehicle_journeys/containers/tools/VehicleJourneyInfoButton.js
@@ -0,0 +1,20 @@
+import actions from '../../actions'
+import { connect } from 'react-redux'
+import VehicleJourneyInfoButtonComponent from '../../components/tools/VehicleJourneyInfoButton'
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onOpenEditModal: (vj) =>{
+      dispatch(actions.openInfoModal(vj))
+    },
+  }
+}
+
+const VehicleJourneyInfoButton = connect(mapStateToProps, mapDispatchToProps)(VehicleJourneyInfoButtonComponent)
+
+export default VehicleJourneyInfoButton
diff --git a/app/javascript/vehicle_journeys/reducers/modal.js b/app/javascript/vehicle_journeys/reducers/modal.js
index fb7e16547..bcfc6ea0b 100644
--- a/app/javascript/vehicle_journeys/reducers/modal.js
+++ b/app/javascript/vehicle_journeys/reducers/modal.js
@@ -37,6 +37,15 @@ export default function modal(state = {}, action) {
         },
         confirmModal: {}
       }
+    case 'INFO_VEHICLEJOURNEY_MODAL':
+      return {
+        type: 'edit',
+        modalProps: {
+          vehicleJourney: action.vehicleJourney,
+          info: true
+        },
+        confirmModal: {}
+      }
     case 'EDIT_CALENDARS_VEHICLEJOURNEY_MODAL':
       vehicleJourneysModal = JSON.parse(JSON.stringify(action.vehicleJourneys))
       let uniqTimetables = []