Refs #2521: Add edit modal for vj medatatas (only comment editable)

Signed-off-by: Thomas Shawarma Haddad <thomas.haddad@af83.com>

6 files changed, 172 insertions, 0 deletions

diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
index a80a96925..027092e21 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
@@ -36,6 +36,10 @@ const actions = {
   openCreateModal : () => ({
     type : 'CREATE_VEHICLEJOURNEY_MODAL'
   }),
+  openEditModal : (vehicleJourney) => ({
+    type : 'EDIT_VEHICLEJOURNEY_MODAL',
+    vehicleJourney
+  }),
   openShiftModal : () => ({
     type : 'SHIFT_VEHICLEJOURNEY_MODAL'
   }),
@@ -50,6 +54,10 @@ const actions = {
     type: 'ADD_VEHICLEJOURNEY',
     data
   }),
+  editVehicleJourney : (data) => ({
+    type: 'EDIT_VEHICLEJOURNEY',
+    data
+  }),
   shiftVehicleJourney : (data) => ({
     type: 'SHIFT_VEHICLEJOURNEY',
     data
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
index e0df0f843..f8021e235 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
@@ -8,6 +8,7 @@ var AddVehicleJourney = require('../containers/tools/AddVehicleJourney')
 var DeleteVehicleJourneys = require('../containers/tools/DeleteVehicleJourneys')
 var ShiftVehicleJourney = require('../containers/tools/ShiftVehicleJourney')
 var DuplicateVehicleJourney = require('../containers/tools/DuplicateVehicleJourney')
+var EditVehicleJourney = require('../containers/tools/EditVehicleJourney')
 
 const App = () => (
   <div>
@@ -19,6 +20,7 @@ const App = () => (
         <DeleteVehicleJourneys />
         <ShiftVehicleJourney />
         <DuplicateVehicleJourney />
+        <EditVehicleJourney />
       </div>
     </div>
     <VehicleJourneysList />
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/EditVehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/EditVehicleJourney.js
new file mode 100644
index 000000000..4fe32948f
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/EditVehicleJourney.js
@@ -0,0 +1,114 @@
+var React = require('react')
+var Component = require('react').Component
+var PropTypes = require('react').PropTypes
+var actions = require('../../actions')
+
+class EditVehicleJourney extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  handleSubmit() {
+    if(actions.validateFields(this.refs) == true) {
+      this.props.onEditVehicleJourney(this.refs)
+      this.props.onModalClose()
+      $('#EditVehicleJourneyModal').modal('hide')
+    }
+  }
+
+  render() {
+    if(this.props.status.isFetching == true) {
+      return false
+    }
+    if(this.props.status.fetchSuccess == true) {
+      return (
+        <div  className='pull-left'>
+          <button
+            disabled= {(actions.getSelected(this.props.vehicleJourneys).length == 1) ? false : true}
+            type='button'
+            className='btn btn-primary btn-sm'
+            data-toggle='modal'
+            data-target='#EditVehicleJourneyModal'
+            onClick={() => this.props.onOpenEditModal(actions.getSelected(this.props.vehicleJourneys)[0])}
+            >
+            <span className='fa fa-pencil'></span>
+            </button>
+
+            <div className={ 'modal fade ' + ((this.props.modal.type == 'duplicate') ? 'in' : '') } id='EditVehicleJourneyModal'>
+              <div className='modal-dialog'>
+                <div className='modal-content'>
+                  <div className='modal-header clearfix'>
+                    <h4>Informations</h4>
+                  </div>
+
+                  {(this.props.modal.type == 'edit') && (
+                    <form>
+                      <div className='modal-body'>
+                        <div className='form-group'>
+                          <label className='control-label is-required'>Nom</label>
+                          <input
+                            type='text'
+                            ref='comment'
+                            className='form-control'
+                            defaultValue={this.props.modal.modalProps.vehicleJourney.comment}
+                            onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                            required
+                            />
+                        </div>
+
+                        <div className='row'>
+                          <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                            <p>Mission
+                              <span> {this.props.modal.modalProps.vehicleJourney.journey_pattern_id}</span>
+                            </p>
+                          </div>
+                        </div>
+                        <div className='row'>
+                          <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                            NUMERO DE TRAIN??
+                          </div>
+                        </div>
+                        <div className='row'>
+                          <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                            TRANSPORTEUR??
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className='modal-footer'>
+                        <button
+                          className='btn btn-default'
+                          data-dismiss='modal'
+                          type='button'
+                          onClick={this.props.onModalClose}
+                          >
+                          Annuler
+                        </button>
+                        <button
+                          className='btn btn-danger'
+                          type='button'
+                          onClick={this.handleSubmit.bind(this)}
+                          >
+                          Valider
+                        </button>
+                      </div>
+                    </form>
+                  )}
+
+                </div>
+              </div>
+            </div>
+          </div>
+        )
+    } else {
+      return false
+    }
+  }
+}
+
+EditVehicleJourney.propTypes = {
+  onOpenEditModal: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+}
+
+module.exports = EditVehicleJourney
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/EditVehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/EditVehicleJourney.js
new file mode 100644
index 000000000..7b7ebc8e1
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/EditVehicleJourney.js
@@ -0,0 +1,29 @@
+var connect = require('react-redux').connect
+var EditComponent = require('../../components/tools/EditVehicleJourney')
+var actions = require('../../actions')
+
+const mapStateToProps = (state) => {
+  return {
+    modal: state.modal,
+    vehicleJourneys: state.vehicleJourneys,
+    status: state.status
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onModalClose: () =>{
+      dispatch(actions.closeModal())
+    },
+    onOpenEditModal: (vj) =>{
+      dispatch(actions.openEditModal(vj))
+    },
+    onEditVehicleJourney: (data) =>{
+      dispatch(actions.editVehicleJourney(data))
+    }
+  }
+}
+
+const EditVehicleJourney = connect(mapStateToProps, mapDispatchToProps)(EditComponent)
+
+module.exports = EditVehicleJourney
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/modal.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/modal.js
index 62870e27d..8f0ca57b2 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/modal.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/modal.js
@@ -8,6 +8,15 @@ const modal = (state = {}, action) => {
           callback: action.callback,
         }
       })
+    case 'EDIT_VEHICLEJOURNEY_MODAL':
+      console.log(action.vj)
+      return {
+        type: 'edit',
+        modalProps: {
+          vehicleJourney: action.vehicleJourney
+        },
+        confirmModal: {}
+      }
     case 'CREATE_VEHICLEJOURNEY_MODAL':
       return {
         type: 'create',
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js
index dc4bcf8a5..008f14605 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js
@@ -93,6 +93,16 @@ const vehicleJourneys = (state = [], action) => {
         vehicleJourney(state, action),
         ...state
       ]
+    case 'EDIT_VEHICLEJOURNEY':
+      return state.map((vj, i) => {
+        if (vj.selected){
+          return Object.assign({}, vj, {
+            comment: action.data.comment.value,
+          })
+        }else{
+          return vj
+        }
+      })
     case 'SHIFT_VEHICLEJOURNEY':
       return state.map((vj, i) => {
         if (vj.selected){