From 0079238842263768b88b0fa0fd977824b49eabd5 Mon Sep 17 00:00:00 2001
From: cedricnjanga
Date: Sun, 29 Oct 2017 00:45:10 +0200
Subject: Refs #4795

Show the tools buttons even if editMode = false
The only buttons activated (if a vj is selected) are info, timetable and notes

We then change the behaviour of the modals depending ont the context (editMode or note)
---
 app/assets/stylesheets/components/_modals.sass     |   5 +
 .../vehicle_journeys/components/Tools.js           |  53 ++++---
 .../vehicle_journeys/components/VehicleJourney.js  |  28 ++--
 .../components/tools/CreateModal.js                |   6 +-
 .../components/tools/DeleteVehicleJourneys.js      |   6 +-
 .../components/tools/DuplicateVehicleJourney.js    |   7 +-
 .../components/tools/EditVehicleJourney.js         |  38 ++---
 .../components/tools/NotesEditVehicleJourney.js    | 154 +++++++++++----------
 .../components/tools/ShiftVehicleJourney.js        |   5 +-
 .../tools/TimetablesEditVehicleJourney.js          |  85 +++++++-----
 .../components/tools/select2s/CompanySelect2.js    |   3 +-
 .../containers/tools/AddVehicleJourney.js          |   4 +-
 .../containers/tools/DeleteVehicleJourneys.js      |   6 +-
 .../containers/tools/DuplicateVehicleJourney.js    |   3 +-
 .../containers/tools/EditVehicleJourney.js         |   7 +-
 .../containers/tools/NotesEditVehicleJourney.js    |   7 +-
 .../containers/tools/ShiftVehicleJourney.js        |   4 +-
 .../tools/TimetablesEditVehicleJourney.js          |   5 +-
 18 files changed, 237 insertions(+), 189 deletions(-)

diff --git a/app/assets/stylesheets/components/_modals.sass b/app/assets/stylesheets/components/_modals.sass
index 2db4fe955..e52a2e125 100644
--- a/app/assets/stylesheets/components/_modals.sass
+++ b/app/assets/stylesheets/components/_modals.sass
@@ -38,6 +38,11 @@ $modalW: 600px
 
       .modal-title
         font-size: $h2-size
+        display: inline-block
+
+      .modal-close
+        text-align: right
+        display: inline-block
 
     .modal-body
       padding: 15px 30px
diff --git a/app/javascript/vehicle_journeys/components/Tools.js b/app/javascript/vehicle_journeys/components/Tools.js
index a717408b9..7621dfc10 100644
--- a/app/javascript/vehicle_journeys/components/Tools.js
+++ b/app/javascript/vehicle_journeys/components/Tools.js
@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react'
+import React, { PropTypes, Component } from 'react'
 import actions from '../actions'
 import AddVehicleJourney from '../containers/tools/AddVehicleJourney'
 import DeleteVehicleJourneys from '../containers/tools/DeleteVehicleJourneys'
@@ -8,28 +8,37 @@ import EditVehicleJourney from '../containers/tools/EditVehicleJourney'
 import NotesEditVehicleJourney from '../containers/tools/NotesEditVehicleJourney'
 import TimetablesEditVehicleJourney from '../containers/tools/TimetablesEditVehicleJourney'
 
-export default function Tools({vehicleJourneys, onCancelSelection, filters: {policy}, editMode}) {
-  return (
-    <div>
-      {
-        (policy['vehicle_journeys.create'] && policy['vehicle_journeys.update'] && policy['vehicle_journeys.destroy'] && editMode) &&
-        <div className='select_toolbox'>
-          <ul>
-            <AddVehicleJourney />
-            <DuplicateVehicleJourney />
-            <ShiftVehicleJourney />
-            <EditVehicleJourney />
-            <TimetablesEditVehicleJourney />
-            <NotesEditVehicleJourney />
-            <DeleteVehicleJourneys />
-          </ul>
 
-          <span className='info-msg'>{actions.getSelected(vehicleJourneys).length} course(s) sélectionnée(s)</span>
-          <button className='btn btn-xs btn-link pull-right' onClick={onCancelSelection}>Annuler la sélection</button>
-        </div>
-      }
-    </div>
-  )
+export default class Tools extends Component {
+  constructor(props) {
+    super(props)
+    this.hasPolicy = this.hasPolicy.bind(this)
+  }
+
+  hasPolicy(key) {
+    // Check if the user has the policy to disable or not the action
+    return this.props.filters.policy[`vehicle_journeys.${key}`] 
+  }
+
+  render() {
+    let { vehicleJourneys, onCancelSelection, editMode } = this.props
+    return (
+      <div className='select_toolbox'>
+        <ul>
+          <AddVehicleJourney disabled={this.hasPolicy("create") && !editMode} />
+          <DuplicateVehicleJourney disabled={this.hasPolicy("create") && this.hasPolicy("update") && !editMode}/>
+          <ShiftVehicleJourney disabled={this.hasPolicy("update") && !editMode}/>
+          <EditVehicleJourney disabled={!this.hasPolicy("update")}/>
+          <TimetablesEditVehicleJourney disabled={!this.hasPolicy("update")}/>
+          <NotesEditVehicleJourney disabled={!this.hasPolicy("update")}/>
+          <DeleteVehicleJourneys disabled={this.hasPolicy("destroy") && !editMode}/>
+        </ul>
+
+        <span className='info-msg'>{actions.getSelected(vehicleJourneys).length} course(s) sélectionnée(s)</span>
+        <button className='btn btn-xs btn-link pull-right' onClick={onCancelSelection}>Annuler la sélection</button>
+      </div>
+    )
+  }
 }
 
 Tools.propTypes = {
diff --git a/app/javascript/vehicle_journeys/components/VehicleJourney.js b/app/javascript/vehicle_journeys/components/VehicleJourney.js
index 91f8a8eee..13f8eced2 100644
--- a/app/javascript/vehicle_journeys/components/VehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/VehicleJourney.js
@@ -57,22 +57,18 @@ export default class VehicleJourney extends Component {
             )}
             {time_tables.length > 3 && <span className='vj_tt'> + {time_tables.length - 3}</span>}
           </div>
-
-          {(this.props.filters.policy['vehicle_journeys.update'] == true && this.props.editMode) &&
-            <div className={(this.props.value.deletable ? 'disabled ' : '') + 'checkbox'}>
-              <input
-                id={this.props.index}
-                name={this.props.index}
-                style={{display: 'none'}}
-                onChange={(e) => this.props.onSelectVehicleJourney(this.props.index)}
-                type='checkbox'
-                disabled={this.props.value.deletable}
-                checked={this.props.value.selected}
-              ></input>
-              <label htmlFor={this.props.index}></label>
-            </div>
-        }
-
+          <div className={(this.props.value.deletable ? 'disabled ' : '') + 'checkbox'}>
+            <input
+              id={this.props.index}
+              name={this.props.index}
+              style={{display: 'none'}}
+              onChange={(e) => this.props.onSelectVehicleJourney(this.props.index)}
+              type='checkbox'
+              disabled={this.props.value.deletable}
+              checked={this.props.value.selected}
+            ></input>
+            <label htmlFor={this.props.index}></label>
+          </div>
         </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/CreateModal.js b/app/javascript/vehicle_journeys/components/tools/CreateModal.js
index 5b5e2f849..2bffebdf6 100644
--- a/app/javascript/vehicle_journeys/components/tools/CreateModal.js
+++ b/app/javascript/vehicle_journeys/components/tools/CreateModal.js
@@ -25,7 +25,7 @@ export default class CreateModal extends Component {
         <li className='st_action'>
           <button
             type='button'
-            disabled={((this.props.filters.policy['vehicle_journeys.update'] == true) ? '' : 'disabled')}
+            disabled={(this.props.disabled) }
             data-toggle='modal'
             data-target='#NewVehicleJourneyModal'
             onClick={this.props.onOpenCreateModal}
@@ -39,6 +39,7 @@ export default class CreateModal extends Component {
                 <div className='modal-content'>
                   <div className='modal-header'>
                     <h4 className='modal-title'>Ajouter une course</h4>
+                    <span type="button" className="close modal-close" data-dismiss="modal">&times;</span>
                   </div>
 
                   {(this.props.modal.type == 'create') && (
@@ -127,5 +128,6 @@ CreateModal.propTypes = {
   onOpenCreateModal: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired,
   onAddVehicleJourney: PropTypes.func.isRequired,
-  onSelect2JourneyPattern: PropTypes.func.isRequired
+  onSelect2JourneyPattern: PropTypes.func.isRequired,
+  disabled: PropTypes.bool.isRequired
 }
\ No newline at end of file
diff --git a/app/javascript/vehicle_journeys/components/tools/DeleteVehicleJourneys.js b/app/javascript/vehicle_journeys/components/tools/DeleteVehicleJourneys.js
index 0a1dedd3c..fc13ae964 100644
--- a/app/javascript/vehicle_journeys/components/tools/DeleteVehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/components/tools/DeleteVehicleJourneys.js
@@ -1,12 +1,12 @@
 import React, { PropTypes } from 'react'
 import actions from '../../actions'
 
-export default function DeleteVehicleJourneys({onDeleteVehicleJourneys, vehicleJourneys, filters}) {
+export default function DeleteVehicleJourneys({onDeleteVehicleJourneys, vehicleJourneys, disabled}) {
   return (
     <li className='st_action'>
       <button
         type='button'
-        disabled={(actions.getSelected(vehicleJourneys).length > 0 && filters.policy['vehicle_journeys.destroy']) ? '' : 'disabled'}
+        disabled={(actions.getSelected(vehicleJourneys).length == 0 || disabled)}
         onClick={e => {
           e.preventDefault()
           onDeleteVehicleJourneys()
@@ -22,5 +22,5 @@ export default function DeleteVehicleJourneys({onDeleteVehicleJourneys, vehicleJ
 DeleteVehicleJourneys.propTypes = {
   onDeleteVehicleJourneys: PropTypes.func.isRequired,
   vehicleJourneys: PropTypes.array.isRequired,
-  filters: PropTypes.object.isRequired
+  disabled: PropTypes.bool.isRequired
 }
\ No newline at end of file
diff --git a/app/javascript/vehicle_journeys/components/tools/DuplicateVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/DuplicateVehicleJourney.js
index 6cce3eaad..8083defb9 100644
--- a/app/javascript/vehicle_journeys/components/tools/DuplicateVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/DuplicateVehicleJourney.js
@@ -73,12 +73,12 @@ export default class DuplicateVehicleJourney extends Component {
     if(this.props.status.isFetching == true) {
       return false
     }
-    if(this.props.status.fetchSuccess == true && actions.getSelected(this.props.vehicleJourneys).length > 0) {
+    if(this.props.status.fetchSuccess == true) {
       return (
         <li  className='st_action'>
           <button
             type='button'
-            disabled={((actions.getSelected(this.props.vehicleJourneys).length >= 1 && this.props.filters.policy['vehicle_journeys.update']) ? '' : 'disabled')}
+            disabled={(actions.getSelected(this.props.vehicleJourneys).length == 0 || this.props.disabled)}
             data-toggle='modal'
             data-target='#DuplicateVehicleJourneyModal'
             onClick={this.props.onOpenDuplicateModal}
@@ -94,6 +94,7 @@ export default class DuplicateVehicleJourney extends Component {
                     <h4 className='modal-title'>
                       Dupliquer { actions.getSelected(this.props.vehicleJourneys).length > 1 ? 'plusieurs courses' : 'une course' }
                     </h4>
+                    <span type="button" className="close modal-close" data-dismiss="modal">&times;</span>
                   </div>
 
                   {(this.props.modal.type == 'duplicate') && (
@@ -204,5 +205,5 @@ export default class DuplicateVehicleJourney extends Component {
 DuplicateVehicleJourney.propTypes = {
   onOpenDuplicateModal: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired,
-  filters: PropTypes.object.isRequired
+  disabled: PropTypes.bool.isRequired
 }
\ No newline at end of file
diff --git a/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
index 3a4a57024..7ad3cf510 100644
--- a/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
@@ -32,7 +32,7 @@ export default class EditVehicleJourney extends Component {
         <li className='st_action'>
           <button
             type='button'
-            disabled={(actions.getSelected(this.props.vehicleJourneys).length == 1 && this.props.filters.policy['vehicle_journeys.update']) ? '' : 'disabled'}
+            disabled={(actions.getSelected(this.props.vehicleJourneys).length != 1 || this.props.disabled)}
             data-toggle='modal'
             data-target='#EditVehicleJourneyModal'
             onClick={() => this.props.onOpenEditModal(actions.getSelected(this.props.vehicleJourneys)[0])}
@@ -46,6 +46,7 @@ export default class EditVehicleJourney extends Component {
                 <div className='modal-content'>
                   <div className='modal-header'>
                     <h4 className='modal-title'>Informations</h4>
+                    <span type="button" className="close modal-close" data-dismiss="modal">&times;</span>
                   </div>
 
                   {(this.props.modal.type == 'edit') && (
@@ -59,6 +60,7 @@ 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)}
                                 />
@@ -85,6 +87,7 @@ 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)}
                               />
@@ -94,6 +97,7 @@ export default class EditVehicleJourney extends Component {
                             <div className='form-group'>
                               <label className='control-label'>Transporteur</label>
                               <CompanySelect2
+                                editMode={this.props.editMode}
                                 company = {this.props.modal.modalProps.vehicleJourney.company}
                                 onSelect2Company = {(e) => this.props.onSelect2Company(e)}
                                 onUnselect2Company = {() => this.props.onUnselect2Company()}
@@ -127,24 +131,26 @@ export default class EditVehicleJourney extends Component {
                           </div>
                         </div>
                       </div>
-
-                      <div className='modal-footer'>
-                        <button
-                          className='btn btn-link'
-                          data-dismiss='modal'
-                          type='button'
-                          onClick={this.props.onModalClose}
+                      {
+                        this.props.editMode && 
+                        <div className='modal-footer'>
+                          <button
+                            className='btn btn-link'
+                            data-dismiss='modal'
+                            type='button'
+                            onClick={this.props.onModalClose}
                           >
-                          Annuler
+                            Annuler
                         </button>
-                        <button
-                          className='btn btn-primary'
-                          type='button'
-                          onClick={this.handleSubmit.bind(this)}
+                          <button
+                            className='btn btn-primary'
+                            type='button'
+                            onClick={this.handleSubmit.bind(this)}
                           >
-                          Valider
+                            Valider
                         </button>
-                      </div>
+                        </div>
+                      }     
                     </form>
                   )}
 
@@ -163,5 +169,5 @@ export default class EditVehicleJourney extends Component {
 EditVehicleJourney.propTypes = {
   onOpenEditModal: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired,
-  filters: PropTypes.object.isRequired
+  disabled: PropTypes.bool.isRequired
 }
\ No newline at end of file
diff --git a/app/javascript/vehicle_journeys/components/tools/NotesEditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/NotesEditVehicleJourney.js
index 1958faf5f..de97bc403 100644
--- a/app/javascript/vehicle_journeys/components/tools/NotesEditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/NotesEditVehicleJourney.js
@@ -13,21 +13,25 @@ export default class NotesEditVehicleJourney extends Component {
     $('#NotesEditVehicleJourneyModal').modal('hide')
   }
 
-  renderFootnoteButton(lf, vjArray){
-    let footnote_id = undefined
-    vjArray.forEach((f) => {
-      if(f.id == lf.id){
-        footnote_id = f.id
-      }
-    })
+  footnotes() {
+    let { footnotes } = this.props.modal.modalProps.vehicleJourney
+    let fnIds = footnotes.map(fn => fn.id)
+    return {
+      associated: footnotes,
+      to_associate: window.line_footnotes.filter(fn => !fnIds.includes(fn.id)) 
+    }
+  }
+
+  renderFootnoteButton(lf) {
+    if (!this.props.editMode) return false
 
-    if(footnote_id){
+    if (this.footnotes().associated.includes(lf)) {
       return <button
         type='button'
         className='btn btn-outline-danger btn-xs'
         onClick={() => this.props.onToggleFootnoteModal(lf, false)}
       ><span className="fa fa-trash"></span> Retirer</button>
-    }else{
+    } else {
       return <button
         type='button'
         className='btn btn-outline-primary btn-xs'
@@ -36,28 +40,64 @@ export default class NotesEditVehicleJourney extends Component {
     }
   }
 
-  filterFN() {
-    return _.filter(window.line_footnotes, (lf, i) => {
-      let bool = true
-      _.map(this.props.modal.modalProps.vehicleJourney.footnotes, (f, j) => {
-        if(lf.id === f.id) {
-          bool = false
-        }
-      })
-      return bool
-    })
+  renderAssociatedFN() {
+    if (this.footnotes().associated.length == 0) {
+      return <h3>Aucune note associée</h3>
+    } else {
+      return (
+        <div>
+          <h3>Notes associées :</h3>
+          {this.footnotes().associated.map((lf, i) =>
+            <div
+              key={i}
+              className='panel panel-default'
+            >
+              <div className='panel-heading'>
+                <h4 className='panel-title clearfix'>
+                  <div className='pull-left' style={{ paddingTop: '3px' }}>{lf.code}</div>
+                  <div className='pull-right'>{this.renderFootnoteButton(lf, this.props.modal.modalProps.vehicleJourney.footnotes)}</div>
+                </h4>
+              </div>
+              <div className='panel-body'><p>{lf.label}</p></div>
+            </div>
+          )}
+        </div>
+      )
+    }
+  }
+
+  renderToAssociateFN() {
+    if (window.line_footnotes.length == 0) return <h3>La ligne ne possède pas de notes</h3>
+
+    if (this.footnotes().to_associate.length == 0) return false
+    
+    return (
+      <div>
+        <h3 className='mt-lg'>Sélectionnez les notes à associer à cette course :</h3>
+        {this.footnotes().to_associate.map((lf, i) =>
+          <div key={i} className='panel panel-default'>
+            <div className='panel-heading'>
+              <h4 className='panel-title clearfix'>
+                <div className='pull-left' style={{ paddingTop: '3px' }}>{lf.code}</div>
+                <div className='pull-right'>{this.renderFootnoteButton(lf)}</div>
+              </h4>
+            </div>
+            <div className='panel-body'><p>{lf.label}</p></div>
+          </div>
+        )}
+      </div>
+    ) 
   }
 
   render() {
-    if(this.props.status.isFetching == true) {
-      return false
-    }
-    if(this.props.status.fetchSuccess == true) {
+    if (this.props.status.isFetching == true) return false
+
+    if (this.props.status.fetchSuccess == true) {
       return (
         <li className='st_action'>
           <button
             type='button'
-            disabled={(actions.getSelected(this.props.vehicleJourneys).length == 1 && this.props.filters.policy['vehicle_journeys.update']) ? '' : 'disabled'}
+            disabled={(actions.getSelected(this.props.vehicleJourneys).length != 1 || this.props.disabled)}
             data-toggle='modal'
             data-target='#NotesEditVehicleJourneyModal'
             onClick={() => this.props.onOpenNotesEditModal(actions.getSelected(this.props.vehicleJourneys)[0])}
@@ -71,61 +111,35 @@ export default class NotesEditVehicleJourney extends Component {
                 <div className='modal-content'>
                   <div className='modal-header'>
                     <h4 className='modal-title'>Notes</h4>
+                    <span type="button" className="close modal-close" data-dismiss="modal">&times;</span>
                   </div>
 
                   {(this.props.modal.type == 'notes_edit') && (
                     <form>
                       <div className='modal-body'>
-                        <h3>Notes associées</h3>
-                        {(this.props.modal.modalProps.vehicleJourney.footnotes).map((lf, i) =>
-                          <div
-                            key={i}
-                            className='panel panel-default'
-                          >
-                            <div className='panel-heading'>
-                              <h4 className='panel-title clearfix'>
-                                <div className='pull-left' style={{paddingTop: '3px'}}>{lf.code}</div>
-                                <div className='pull-right'>{this.renderFootnoteButton(lf, this.props.modal.modalProps.vehicleJourney.footnotes)}</div>
-                              </h4>
-                            </div>
-                            <div className='panel-body'><p>{lf.label}</p></div>
-                          </div>
-                        )}
-
-                        <h3 className='mt-lg'>Sélectionnez les notes à associer à cette course :</h3>
-                        {this.filterFN().map((lf, i) =>
-                          <div
-                            key={i}
-                            className='panel panel-default'
-                          >
-                            <div className='panel-heading'>
-                              <h4 className='panel-title clearfix'>
-                                <div className='pull-left' style={{paddingTop: '3px'}}>{lf.code}</div>
-                                <div className='pull-right'>{this.renderFootnoteButton(lf, this.props.modal.modalProps.vehicleJourney.footnotes)}</div>
-                              </h4>
-                            </div>
-                            <div className='panel-body'><p>{lf.label}</p></div>
-                          </div>
-                        )}
+                        {this.renderAssociatedFN()}
+                        {this.props.editMode && this.renderToAssociateFN()}
                       </div>
-
-                      <div className='modal-footer'>
-                        <button
-                          className='btn btn-link'
-                          data-dismiss='modal'
-                          type='button'
-                          onClick={this.props.onModalClose}
+                      {
+                        this.props.editMode &&
+                        <div className='modal-footer'>
+                          <button
+                            className='btn btn-link'
+                            data-dismiss='modal'
+                            type='button'
+                            onClick={this.props.onModalClose}
                           >
-                          Annuler
+                            Annuler
                         </button>
-                        <button
-                          className='btn btn-primary'
-                          type='button'
-                          onClick={this.handleSubmit.bind(this)}
+                          <button
+                            className='btn btn-primary'
+                            type='button'
+                            onClick={this.handleSubmit.bind(this)}
                           >
-                          Valider
+                            Valider
                         </button>
-                      </div>
+                        </div>
+                      }
                     </form>
                   )}
 
@@ -146,5 +160,5 @@ NotesEditVehicleJourney.propTypes = {
   onModalClose: PropTypes.func.isRequired,
   onToggleFootnoteModal: PropTypes.func.isRequired,
   onNotesEditVehicleJourney: PropTypes.func.isRequired,
-  filters: PropTypes.object.isRequired
+  disabled: PropTypes.bool.isRequired
 }
\ No newline at end of file
diff --git a/app/javascript/vehicle_journeys/components/tools/ShiftVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/ShiftVehicleJourney.js
index c1e2de779..175106ac5 100644
--- a/app/javascript/vehicle_journeys/components/tools/ShiftVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/ShiftVehicleJourney.js
@@ -34,7 +34,7 @@ export default class ShiftVehicleJourney extends Component {
         <li className='st_action'>
           <button
             type='button'
-            disabled={(actions.getSelected(this.props.vehicleJourneys).length == 1 && this.props.filters.policy['vehicle_journeys.update']) ? '' : 'disabled'}
+            disabled={(actions.getSelected(this.props.vehicleJourneys).length > 1 || this.props.disabled)}
             data-toggle='modal'
             data-target='#ShiftVehicleJourneyModal'
             onClick={this.props.onOpenShiftModal}
@@ -51,6 +51,7 @@ export default class ShiftVehicleJourney extends Component {
                     {(this.props.modal.type == 'shift') && (
                       <em>Mettre à jour les horaires de la course {actions.humanOID(actions.getSelected(this.props.vehicleJourneys)[0].objectid)}</em>
                     )}
+                    <span type="button" className="close modal-close" data-dismiss="modal">&times;</span>
                   </div>
 
                   {(this.props.modal.type == 'shift') && (
@@ -110,5 +111,5 @@ export default class ShiftVehicleJourney extends Component {
 ShiftVehicleJourney.propTypes = {
   onOpenShiftModal: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired,
-  filters: PropTypes.object.isRequired
+  disabled: PropTypes.bool.isRequired
 }
\ No newline at end of file
diff --git a/app/javascript/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js
index 1b93222f6..fef3cdcc9 100644
--- a/app/javascript/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js
@@ -29,7 +29,7 @@ export default class TimetablesEditVehicleJourney extends Component {
         <li className='st_action'>
           <button
             type='button'
-            disabled={(actions.getSelected(this.props.vehicleJourneys).length > 0 && this.props.filters.policy['vehicle_journeys.update']) ? '' : 'disabled'}
+            disabled={(actions.getSelected(this.props.vehicleJourneys).length != 1 || this.props.disabled)}
             data-toggle='modal'
             data-target='#CalendarsEditVehicleJourneyModal'
             onClick={() => this.props.onOpenCalendarsEditModal(actions.getSelected(this.props.vehicleJourneys))}
@@ -43,6 +43,7 @@ export default class TimetablesEditVehicleJourney extends Component {
                 <div className='modal-content'>
                   <div className='modal-header'>
                     <h4 className='modal-title'>Calendriers associés</h4>
+                    <span type="button" className="close modal-close" data-dismiss="modal">&times;</span>
                   </div>
 
                   {(this.props.modal.type == 'calendars_edit') && (
@@ -65,54 +66,62 @@ export default class TimetablesEditVehicleJourney extends Component {
                                 <div className='nested-fields' key={i}>
                                   <div className='wrapper'>
                                     <div> <a href={this.timeTableURL(tt)} target="_blank">{tt.comment}</a> </div>
-                                    <div>
-                                      <a
-                                        href='#'
-                                        title='Supprimer'
-                                        className='fa fa-trash remove_fields'
-                                        style={{height: 'auto', lineHeight: 'normal'}}
-                                        onClick={(e) => {
-                                          e.preventDefault()
-                                          this.props.onDeleteCalendarModal(tt)
-                                        }}
+                                    {
+                                      this.props.editMode && 
+                                      <div>
+                                        <a
+                                          href='#'
+                                          title='Supprimer'
+                                          className='fa fa-trash remove_fields'
+                                          style={{ height: 'auto', lineHeight: 'normal' }}
+                                          onClick={(e) => {
+                                            e.preventDefault()
+                                            this.props.onDeleteCalendarModal(tt)
+                                          }}
                                         ></a>
-                                    </div>
+                                      </div>
+                                    }
                                   </div>
                                 </div>
                               )}
-                              <div className='nested-fields'>
-                                <div className='wrapper'>
-                                  <div>
-                                    <TimetableSelect2
-                                      onSelect2Timetable={this.props.onSelect2Timetable}
-                                      chunkURL={'/autocomplete_time_tables.json'}
-                                      isFilter={false}
-                                    />
+                              {
+                                this.props.editMode && 
+                                <div className='nested-fields'>
+                                  <div className='wrapper'>
+                                    <div>
+                                      <TimetableSelect2
+                                        onSelect2Timetable={this.props.onSelect2Timetable}
+                                        chunkURL={'/autocomplete_time_tables.json'}
+                                        isFilter={false}
+                                      />
+                                    </div>
                                   </div>
                                 </div>
-                              </div>
+                              }
                             </div>
                           </div>
                         </div>
                       </div>
-
-                      <div className='modal-footer'>
-                        <button
-                          className='btn btn-link'
-                          data-dismiss='modal'
-                          type='button'
-                          onClick={this.props.onModalClose}
+                      {
+                        this.props.editMode && 
+                        <div className='modal-footer'>
+                          <button
+                            className='btn btn-link'
+                            data-dismiss='modal'
+                            type='button'
+                            onClick={this.props.onModalClose}
                           >
-                          Annuler
-                        </button>
-                        <button
-                          className='btn btn-primary'
-                          type='button'
-                          onClick={this.handleSubmit}
+                            Annuler
+                          </button>
+                          <button
+                            className='btn btn-primary'
+                            type='button'
+                            onClick={this.handleSubmit}
                           >
-                          Valider
-                        </button>
-                      </div>
+                            Valider
+                          </button>
+                        </div>
+                      }
                     </form>
                   )}
 
@@ -134,5 +143,5 @@ TimetablesEditVehicleJourney.propTypes = {
   onTimetablesEditVehicleJourney: PropTypes.func.isRequired,
   onDeleteCalendarModal: PropTypes.func.isRequired,
   onSelect2Timetable: PropTypes.func.isRequired,
-  filters: PropTypes.object.isRequired
+  disabled: PropTypes.bool.isRequired
 }
\ No newline at end of file
diff --git a/app/javascript/vehicle_journeys/components/tools/select2s/CompanySelect2.js b/app/javascript/vehicle_journeys/components/tools/select2s/CompanySelect2.js
index 07f87d891..0697e9141 100644
--- a/app/javascript/vehicle_journeys/components/tools/select2s/CompanySelect2.js
+++ b/app/javascript/vehicle_journeys/components/tools/select2s/CompanySelect2.js
@@ -21,10 +21,11 @@ export default class BSelect4 extends Component {
         value={(this.props.company) ? this.props.company.name : undefined}
         onSelect={(e) => this.props.onSelect2Company(e) }
         onUnselect={() => this.props.onUnselect2Company()}
+        disabled={!this.props.editMode}
         multiple={false}
         ref='company_id'
         options={{
-          allowClear: true,
+          allowClear: this.props.editMode,
           theme: 'bootstrap',
           width: '100%',
           placeholder: 'Filtrer par transporteur...',
diff --git a/app/javascript/vehicle_journeys/containers/tools/AddVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/AddVehicleJourney.js
index b3f777448..5da0bd3e9 100644
--- a/app/javascript/vehicle_journeys/containers/tools/AddVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/containers/tools/AddVehicleJourney.js
@@ -2,13 +2,13 @@ import actions from '../../actions'
 import { connect } from 'react-redux'
 import CreateModal from '../../components/tools/CreateModal'
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state, ownProps) => {
   return {
+    disabled: ownProps.disabled,
     modal: state.modal,
     vehicleJourneys: state.vehicleJourneys,
     status: state.status,
     stopPointsList: state.stopPointsList,
-    filters: state.filters
   }
 }
 
diff --git a/app/javascript/vehicle_journeys/containers/tools/DeleteVehicleJourneys.js b/app/javascript/vehicle_journeys/containers/tools/DeleteVehicleJourneys.js
index d7d315da4..95f2eb506 100644
--- a/app/javascript/vehicle_journeys/containers/tools/DeleteVehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/containers/tools/DeleteVehicleJourneys.js
@@ -2,10 +2,10 @@ import actions from '../../actions'
 import { connect } from 'react-redux'
 import DeleteVJComponent from '../../components/tools/DeleteVehicleJourneys'
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state, ownProps) => {
   return {
-    vehicleJourneys: state.vehicleJourneys,
-    filters: state.filters
+    disabled: ownProps.disabled,
+    vehicleJourneys: state.vehicleJourneys
   }
 }
 
diff --git a/app/javascript/vehicle_journeys/containers/tools/DuplicateVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/DuplicateVehicleJourney.js
index e9ca88040..7b23a06dc 100644
--- a/app/javascript/vehicle_journeys/containers/tools/DuplicateVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/containers/tools/DuplicateVehicleJourney.js
@@ -2,8 +2,9 @@ import actions from '../../actions'
 import { connect } from 'react-redux'
 import DuplicateVJComponent from '../../components/tools/DuplicateVehicleJourney'
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state, ownProps) => {
   return {
+    disabled: ownProps.disabled,
     modal: state.modal,
     vehicleJourneys: state.vehicleJourneys,
     status: state.status,
diff --git a/app/javascript/vehicle_journeys/containers/tools/EditVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/EditVehicleJourney.js
index 2d480aa0c..c2eabcc10 100644
--- a/app/javascript/vehicle_journeys/containers/tools/EditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/containers/tools/EditVehicleJourney.js
@@ -2,12 +2,13 @@ import actions from '../../actions'
 import { connect } from 'react-redux'
 import EditComponent from '../../components/tools/EditVehicleJourney'
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state, ownProps) => {
   return {
+    editMode: state.editMode,
+    disabled: ownProps.disabled,
     modal: state.modal,
     vehicleJourneys: state.vehicleJourneys,
-    status: state.status,
-    filters: state.filters
+    status: state.status
   }
 }
 
diff --git a/app/javascript/vehicle_journeys/containers/tools/NotesEditVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/NotesEditVehicleJourney.js
index 5a96ff273..6290ae3bf 100644
--- a/app/javascript/vehicle_journeys/containers/tools/NotesEditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/containers/tools/NotesEditVehicleJourney.js
@@ -2,12 +2,13 @@ import actions from '../../actions'
 import { connect } from 'react-redux'
 import NotesEditComponent from '../../components/tools/NotesEditVehicleJourney'
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state, ownProps) => {
   return {
+    editMode: state.editMode,
+    disabled: ownProps.disabled,
     modal: state.modal,
     vehicleJourneys: state.vehicleJourneys,
-    status: state.status,
-    filters: state.filters
+    status: state.status
   }
 }
 
diff --git a/app/javascript/vehicle_journeys/containers/tools/ShiftVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/ShiftVehicleJourney.js
index a4b4fbe39..abd7dd145 100644
--- a/app/javascript/vehicle_journeys/containers/tools/ShiftVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/containers/tools/ShiftVehicleJourney.js
@@ -2,12 +2,12 @@ import actions from '../../actions'
 import { connect } from 'react-redux'
 import ShiftVJComponent from '../../components/tools/ShiftVehicleJourney'
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state, ownProps) => {
   return {
     modal: state.modal,
     vehicleJourneys: state.vehicleJourneys,
     status: state.status,
-    filters: state.filters
+    disabled: ownProps.disabled
   }
 }
 
diff --git a/app/javascript/vehicle_journeys/containers/tools/TimetablesEditVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/TimetablesEditVehicleJourney.js
index 62150a06e..b4ba9d068 100644
--- a/app/javascript/vehicle_journeys/containers/tools/TimetablesEditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/containers/tools/TimetablesEditVehicleJourney.js
@@ -2,12 +2,13 @@ import actions from '../../actions'
 import { connect } from 'react-redux'
 import TimetablesEditComponent from '../../components/tools/TimetablesEditVehicleJourney'
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state, ownProps) => {
   return {
+    editMode: state.editMode,
     modal: state.modal,
     vehicleJourneys: state.vehicleJourneys,
     status: state.status,
-    filters: state.filters
+    disabled: ownProps.disabled
   }
 }
 
-- 
cgit v1.2.3