Refs #2521: Add Tools Wrapper and CANCEL_SELECTION action

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

11 files changed, 98 insertions, 21 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 04fb26fa3..166705f4a 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
@@ -71,6 +71,9 @@ const actions = {
     type : 'SELECT_VEHICLEJOURNEY',
     index
   }),
+  cancelSelection : () => ({
+    type: 'CANCEL_SELECTION'
+  }),
   addVehicleJourney : (data) => ({
     type: 'ADD_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 1e28f937c..adf9ef3c8 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
@@ -4,28 +4,14 @@ var Navigate = require('../containers/Navigate')
 var FiltersList = require('../containers/FiltersList')
 var SaveVehicleJourneys = require('../containers/SaveVehicleJourneys')
 var ConfirmModal = require('../containers/ConfirmModal')
-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')
-var NotesEditVehicleJourney = require('../containers/tools/NotesEditVehicleJourney')
-var CalendarsEditVehicleJourney = require('../containers/tools/CalendarsEditVehicleJourney')
+var Tools = require('../containers/Tools')
 
 const App = () => (
   <div>
     <div className='clearfix' style={{ marginBottom: 10 }}>
       <FiltersList />
       <Navigate />
-      <div className='list-inline clearfix'>
-        <AddVehicleJourney />
-        <DeleteVehicleJourneys />
-        <ShiftVehicleJourney />
-        <DuplicateVehicleJourney />
-        <EditVehicleJourney />
-        <NotesEditVehicleJourney />
-        <CalendarsEditVehicleJourney />
-      </div>
+      <Tools />
     </div>
     <VehicleJourneysList />
     <SaveVehicleJourneys />
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Tools.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Tools.js
new file mode 100644
index 000000000..e3db42075
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Tools.js
@@ -0,0 +1,41 @@
+var React = require('react')
+var PropTypes = require('react').PropTypes
+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')
+var NotesEditVehicleJourney = require('../containers/tools/NotesEditVehicleJourney')
+var CalendarsEditVehicleJourney = require('../containers/tools/CalendarsEditVehicleJourney')
+var actions = require('../actions')
+
+const Tools = ({vehicleJourneys, onCancelSelection}) => {
+  return (
+    <div>
+      <h4>Sélectionner une ou plusieurs courses (en colonne)</h4>
+      <div className='list-inline clearfix'>
+        <AddVehicleJourney />
+        <DuplicateVehicleJourney />
+        <ShiftVehicleJourney />
+        <EditVehicleJourney />
+        <CalendarsEditVehicleJourney />
+        <NotesEditVehicleJourney />
+        <DeleteVehicleJourneys />
+      </div>
+      <div>
+      <span>{actions.getSelected(vehicleJourneys).length} course(s) sélectionnée(s)</span>
+      <br/>
+      <button
+        onClick={onCancelSelection}
+      ><span className='fa fa-times'>Annuler la sélection</span></button>
+      </div>
+    </div>
+  )
+}
+
+Tools.propTypes = {
+  vehicleJourneys : PropTypes.array.isRequired,
+  onCancelSelection: PropTypes.func.isRequired
+}
+
+module.exports = Tools
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js
index 49de64c54..d620936b4 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js
@@ -30,8 +30,8 @@ class CreateModal extends Component {
             data-target='#NewVehicleJourneyModal'
             onClick={this.props.onOpenCreateModal}
             >
-            <span className='fa fa-plus'></span> Ajouter une mission
-            </button>
+            <span className='fa fa-plus'></span>
+          </button>
 
             <div className={ 'modal fade ' + ((this.props.modal.type == 'create') ? 'in' : '') } id='NewVehicleJourneyModal'>
               <div className='modal-dialog'>
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/NotesEditVehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/NotesEditVehicleJourney.js
index 8190042e5..b0addfa71 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/NotesEditVehicleJourney.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/NotesEditVehicleJourney.js
@@ -52,7 +52,7 @@ class NotesEditVehicleJourney extends Component {
             data-target='#NotesEditVehicleJourneyModal'
             onClick={() => this.props.onOpenNotesEditModal(actions.getSelected(this.props.vehicleJourneys)[0])}
             >
-            <span className='fa fa-paw'></span>
+            <span className='fa fa-flag-o'></span>
             </button>
 
             <div className={ 'modal fade ' + ((this.props.modal.type == 'duplicate') ? 'in' : '') } id='NotesEditVehicleJourneyModal'>
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Modal.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Modal.js
index 13190b041..bb89ba92a 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Modal.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Modal.js
@@ -6,7 +6,7 @@ var actions = require('../actions')
 const mapStateToProps = (state) => {
   return {
     modal: state.modal,
-    journeyPattern: state.journeyPattern
+    vehicleJourneys: state.vehicleJourneys
   }
 }
 
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Tools.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Tools.js
new file mode 100644
index 000000000..35f492c98
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Tools.js
@@ -0,0 +1,21 @@
+var connect = require('react-redux').connect
+var ToolsComponent = require('../components/Tools')
+var actions = require('../actions')
+
+const mapStateToProps = (state) => {
+  return {
+    vehicleJourneys: state.vehicleJourneys
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onCancelSelection: () => {
+      dispatch(actions.cancelSelection())
+    }
+  }
+}
+
+const Tools = connect(mapStateToProps, mapDispatchToProps)(ToolsComponent)
+
+module.exports = Tools
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 903677e5f..ce6c89379 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js
@@ -4,6 +4,8 @@ const vehicleJourney= (state = {}, action) => {
   switch (action.type) {
     case 'SELECT_VEHICLEJOURNEY':
       return Object.assign({}, state, {selected: !state.selected})
+    case 'CANCEL_SELECTION':
+      return Object.assign({}, state, {selected: false})
     case 'ADD_VEHICLEJOURNEY':
       let pristineVjas = JSON.parse(JSON.stringify(state[0].vehicle_journey_at_stops))
       pristineVjas.map((vj) =>{
@@ -174,6 +176,10 @@ const vehicleJourneys = (state = [], action) => {
           return vj
         }
       })
+    case 'CANCEL_SELECTION':
+      return state.map((vj) => {
+        return vehicleJourney(vj, action)
+      })
     case 'UPDATE_TIME':
       return state.map((vj, i) =>{
         if (i == action.index){
diff --git a/app/views/api/v1/stop_areas/short_description.rabl b/app/views/api/v1/stop_areas/short_description.rabl
index fb0213510..b0fa4f4f7 100644
--- a/app/views/api/v1/stop_areas/short_description.rabl
+++ b/app/views/api/v1/stop_areas/short_description.rabl
@@ -1,7 +1,7 @@
 object @stop_area
 extends "api/v1/trident_objects/short_description"
 
-[ :id, :name, :area_type, :longitude, :latitude, :long_lat_type].each do |attr|
+[ :id, :city_name, :name, :area_type, :longitude, :latitude, :long_lat_type].each do |attr|
     attributes attr, :unless => lambda { |m| m.send( attr).nil?}
 end
 node(:parent_object_id) do |stop_area|
diff --git a/spec/javascripts/vehicle_journeys/actions_spec.js b/spec/javascripts/vehicle_journeys/actions_spec.js
index f602a8c89..593e1b092 100644
--- a/spec/javascripts/vehicle_journeys/actions_spec.js
+++ b/spec/javascripts/vehicle_journeys/actions_spec.js
@@ -91,6 +91,15 @@ describe('when checking a vehicleJourney', () => {
     expect(actions.selectVehicleJourney(index)).toEqual(expectedAction)
   })
 })
+describe('when clicking on cancel selection button', () => {
+  it('should create an action to cancel whole selection', () => {
+    const index = 1
+    const expectedAction = {
+      type: 'CANCEL_SELECTION'
+    }
+    expect(actions.cancelSelection()).toEqual(expectedAction)
+  })
+})
 describe('when clicking on delete button', () => {
   it('should create an action to delete vj', () => {
     const expectedAction = {
diff --git a/spec/javascripts/vehicle_journeys/reducers/vehicle_journeys_spec.js b/spec/javascripts/vehicle_journeys/reducers/vehicle_journeys_spec.js
index ac4c299c9..422cd1461 100644
--- a/spec/javascripts/vehicle_journeys/reducers/vehicle_journeys_spec.js
+++ b/spec/javascripts/vehicle_journeys/reducers/vehicle_journeys_spec.js
@@ -153,6 +153,17 @@ describe('vehicleJourneys reducer', () => {
     ).toEqual([state[0], newVJ])
   })
 
+  it('should handle CANCEL_SELECTION', () => {
+    const index = 1
+    const newVJ = Object.assign({}, state[0], {selected: false})
+    expect(
+      vjReducer(state, {
+        type: 'CANCEL_SELECTION',
+        index
+      })
+    ).toEqual([newVJ, state[1]])
+  })
+
   it('should handle DELETE_VEHICLEJOURNEYS', () => {
     const newVJ = Object.assign({}, state[0], {deletable: true})
     expect(