Fix disabled links on vj

9 files changed, 33 insertions, 31 deletions

diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
index 8b5aa2e89..a37b9f1d8 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
@@ -90,7 +90,7 @@ class JourneyPattern extends Component{
                 <li className={'delete-action' + ((this.props.status.policy['journey_patterns.edit'] == false)? ' disabled' : '')}>
                   <button
                     type='button'
-                    disabled={(this.props.status.policy['journey_patterns.edit'] == false)? ' disabled' : ''}
+                    disabled={(this.props.status.policy['journey_patterns.edit'] == false)? 'disabled' : ''}
                     onClick={(e) => {
                       e.preventDefault()
                       this.props.onDeleteJourneyPattern(this.props.index)}
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CalendarsEditVehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CalendarsEditVehicleJourney.js
index 19a5af869..e32c873e6 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CalendarsEditVehicleJourney.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CalendarsEditVehicleJourney.js
@@ -22,15 +22,15 @@ class CalendarsEditVehicleJourney extends Component {
     if(this.props.status.fetchSuccess == true) {
       return (
         <li className='st_action'>
-          <a
-            href='#'
-            className={(actions.getSelected(this.props.vehicleJourneys).length > 0 && this.props.filters.policy['vehicle_journeys.edit']) ? '' : 'disabled'}
+          <button
+            type='button'
+            disabled={(actions.getSelected(this.props.vehicleJourneys).length > 0 && this.props.filters.policy['vehicle_journeys.edit']) ? '' : 'disabled'}
             data-toggle='modal'
             data-target='#CalendarsEditVehicleJourneyModal'
             onClick={() => this.props.onOpenCalendarsEditModal(actions.getSelected(this.props.vehicleJourneys))}
           >
             <span className='fa fa-calendar'></span>
-          </a>
+          </button>
 
           <div className={ 'modal fade ' + ((this.props.modal.type == 'duplicate') ? 'in' : '') } id='CalendarsEditVehicleJourneyModal'>
             <div className='modal-container'>
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 1eba37a90..1273921e7 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
@@ -25,15 +25,15 @@ class CreateModal extends Component {
     if(this.props.status.fetchSuccess == true) {
       return (
         <li className='st_action'>
-          <a
-            href='#'
-            className={((this.props.filters.policy['vehicle_journeys.edit'] == true) ? '' : 'disabled')}
+          <button
+            type='button'
+            disabled={((this.props.filters.policy['vehicle_journeys.edit'] == true) ? '' : 'disabled')}
             data-toggle='modal'
             data-target='#NewVehicleJourneyModal'
             onClick={this.props.onOpenCreateModal}
           >
             <span className='fa fa-plus'></span>
-          </a>
+          </button>
 
           <div className={ 'modal fade ' + ((this.props.modal.type == 'create') ? 'in' : '') } id='NewVehicleJourneyModal'>
             <div className='modal-container'>
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DeleteVehicleJourneys.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DeleteVehicleJourneys.js
index e2425cc22..c98b794a8 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DeleteVehicleJourneys.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DeleteVehicleJourneys.js
@@ -5,9 +5,9 @@ var actions = require('../../actions')
 const DeleteVehicleJourneys = ({onDeleteVehicleJourneys, vehicleJourneys, filters}) => {
   return (
     <li className='st_action'>
-      <a
-        href='#'
-        className={(actions.getSelected(vehicleJourneys).length > 0 && filters.policy['vehicle_journeys.destroy']) ? '' : 'disabled'}
+      <button
+        type='button'
+        disabled={(actions.getSelected(vehicleJourneys).length > 0 && filters.policy['vehicle_journeys.destroy']) ? '' : 'disabled'}
         onClick={e => {
           e.preventDefault()
           onDeleteVehicleJourneys()
@@ -15,7 +15,7 @@ const DeleteVehicleJourneys = ({onDeleteVehicleJourneys, vehicleJourneys, filter
         title='Supprimer'
       >
         <span className='fa fa-trash'></span>
-      </a>
+      </button>
     </li>
   )
 }
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DuplicateVehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DuplicateVehicleJourney.js
index b0cb1c850..7fc625f6a 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DuplicateVehicleJourney.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DuplicateVehicleJourney.js
@@ -23,15 +23,15 @@ class DuplicateVehicleJourney extends Component {
     if(this.props.status.fetchSuccess == true) {
       return (
         <li  className='st_action'>
-          <a
-            href='#'
-            className={((actions.getSelected(this.props.vehicleJourneys).length == 1 && this.props.filters.policy['vehicle_journeys.edit']) ? '' : 'disabled')}
+          <button
+            type='button'
+            disabled={((actions.getSelected(this.props.vehicleJourneys).length == 1 && this.props.filters.policy['vehicle_journeys.edit']) ? '' : 'disabled')}
             data-toggle='modal'
             data-target='#DuplicateVehicleJourneyModal'
             onClick={this.props.onOpenDuplicateModal}
           >
             <span className='fa fa-files-o'></span>
-          </a>
+          </button>
 
           <div className={ 'modal fade ' + ((this.props.modal.type == 'duplicate') ? 'in' : '') } id='DuplicateVehicleJourneyModal'>
             <div className='modal-container'>
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
index f7726dad9..12814bad1 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/EditVehicleJourney.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/EditVehicleJourney.js
@@ -24,15 +24,15 @@ class EditVehicleJourney extends Component {
     if(this.props.status.fetchSuccess == true) {
       return (
         <li className='st_action'>
-          <a
-            href='#'
-            className={(actions.getSelected(this.props.vehicleJourneys).length == 1 && this.props.filters.policy['vehicle_journeys.edit']) ? '' : 'disabled'}
+          <button
+            type='button'
+            disabled={(actions.getSelected(this.props.vehicleJourneys).length == 1 && this.props.filters.policy['vehicle_journeys.edit']) ? '' : 'disabled'}
             data-toggle='modal'
             data-target='#EditVehicleJourneyModal'
             onClick={() => this.props.onOpenEditModal(actions.getSelected(this.props.vehicleJourneys)[0])}
           >
             <span className='fa fa-info'></span>
-          </a>
+          </button>
 
           <div className={ 'modal fade ' + ((this.props.modal.type == 'duplicate') ? 'in' : '') } id='EditVehicleJourneyModal'>
             <div className='modal-container'>
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 7c5df3333..ca8b2ec7d 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
@@ -44,15 +44,15 @@ class NotesEditVehicleJourney extends Component {
     if(this.props.status.fetchSuccess == true) {
       return (
         <li className='st_action'>
-          <a
-            href='#'
-            className={(actions.getSelected(this.props.vehicleJourneys).length == 1 && this.props.filters.policy['vehicle_journeys.edit']) ? '' : 'disabled'}
+          <button
+            type='button'
+            disabled={(actions.getSelected(this.props.vehicleJourneys).length == 1 && this.props.filters.policy['vehicle_journeys.edit']) ? '' : 'disabled'}
             data-toggle='modal'
             data-target='#NotesEditVehicleJourneyModal'
             onClick={() => this.props.onOpenNotesEditModal(actions.getSelected(this.props.vehicleJourneys)[0])}
           >
             <span className='fa fa-sticky-note'></span>
-          </a>
+          </button>
 
           <div className={ 'modal fade ' + ((this.props.modal.type == 'duplicate') ? 'in' : '') } id='NotesEditVehicleJourneyModal'>
             <div className='modal-container'>
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/ShiftVehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/ShiftVehicleJourney.js
index a373ed1e5..af1b29de1 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/ShiftVehicleJourney.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/ShiftVehicleJourney.js
@@ -23,15 +23,15 @@ class ShiftVehicleJourney extends Component {
     if(this.props.status.fetchSuccess == true) {
       return (
         <li className='st_action'>
-          <a
-            href='#'
-            className={(actions.getSelected(this.props.vehicleJourneys).length == 1 && this.props.filters.policy['vehicle_journeys.edit']) ? '' : 'disabled'}
+          <button
+            type='button'
+            disabled={(actions.getSelected(this.props.vehicleJourneys).length == 1 && this.props.filters.policy['vehicle_journeys.edit']) ? '' : 'disabled'}
             data-toggle='modal'
             data-target='#ShiftVehicleJourneyModal'
             onClick={this.props.onOpenShiftModal}
           >
             <span className='sb sb-update-vj'></span>
-          </a>
+          </button>
 
           <div className={ 'modal fade ' + ((this.props.modal.type == 'shift') ? 'in' : '') } id='ShiftVehicleJourneyModal'>
             <div className='modal-container'>
diff --git a/app/assets/stylesheets/components/_tables.sass b/app/assets/stylesheets/components/_tables.sass
index ade9bacf4..d366b2122 100644
--- a/app/assets/stylesheets/components/_tables.sass
+++ b/app/assets/stylesheets/components/_tables.sass
@@ -118,13 +118,15 @@
       height: 35px
       margin: 5px
 
-      > a
+      > a, > button
         display: block
         height: 35px
+        width: 100%
         text-align: center
         line-height: 35px
         border-radius: 50%
         background-color: $blue
+        border: none
         color: #fff
 
         &:focus
@@ -139,7 +141,7 @@
           &:hover
             background-color: darken($red, 5%)
 
-        &.disabled
+        &.disabled, &:disabled
           &, &[title='Supprimer'], &:hover, &:focus
             background-color: rgba($grey, 0.3)
             cursor: not-allowed