Refs #4794

Added some UX changes on VehicleJourney collection route

- truncate the id of the VJ and the JP to 10 characters
- only show the 3 first timetable in the metas of the VJ
- add a link to the time_table#show in the EditTimeTable modal

3 files changed, 16 insertions, 4 deletions

diff --git a/app/javascript/vehicle_journeys/actions/index.js b/app/javascript/vehicle_journeys/actions/index.js
index 8d7c4d7a0..95c739893 100644
--- a/app/javascript/vehicle_journeys/actions/index.js
+++ b/app/javascript/vehicle_journeys/actions/index.js
@@ -269,7 +269,10 @@ const actions = {
     type: 'RECEIVE_TOTAL_COUNT',
     total
   }),
-  humanOID: (oid) => oid.split(':')[2].split("-").pop(),
+  humanOID: (oid) => {
+   let shortOId = oid.split(':')[2].split("-").pop()
+   return shortOId.length > 10 ? `${shortOId.slice(0, 10)}...` : shortOId
+  },
   fetchVehicleJourneys : (dispatch, currentPage, nextPage, queryString) => {
     if(currentPage == undefined){
       currentPage = 1
diff --git a/app/javascript/vehicle_journeys/components/VehicleJourney.js b/app/javascript/vehicle_journeys/components/VehicleJourney.js
index 7a49182ae..91f8a8eee 100644
--- a/app/javascript/vehicle_journeys/components/VehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/VehicleJourney.js
@@ -44,6 +44,7 @@ export default class VehicleJourney extends Component {
 
   render() {
     this.previousCity = undefined
+    let {time_tables} = this.props.value
 
     return (
       <div className={'t2e-item' + (this.props.value.deletable ? ' disabled' : '') + (this.props.value.errors ? ' has-error': '')}>
@@ -51,9 +52,10 @@ export default class VehicleJourney extends Component {
           <div className='strong mb-xs'>{this.props.value.objectid ? actions.humanOID(this.props.value.objectid) : '-'}</div>
           <div>{actions.humanOID(this.props.value.journey_pattern.objectid)}</div>
           <div>
-            {this.props.value.time_tables.map((tt, i)=>
+            {time_tables.slice(0,3).map((tt, i)=>
               <span key={i} className='vj_tt'>{this.timeTableURL(tt)}</span>
             )}
+            {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) &&
diff --git a/app/javascript/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js
index fd2304901..1b93222f6 100644
--- a/app/javascript/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js
@@ -5,6 +5,8 @@ import TimetableSelect2 from './select2s/TimetableSelect2'
 export default class TimetablesEditVehicleJourney extends Component {
   constructor(props) {
     super(props)
+    this.handleSubmit = this.handleSubmit.bind(this)
+    this.timeTableURL = this.timeTableURL.bind(this)
   }
 
   handleSubmit() {
@@ -13,6 +15,11 @@ export default class TimetablesEditVehicleJourney extends Component {
     $('#CalendarsEditVehicleJourneyModal').modal('hide')
   }
 
+  timeTableURL(tt) {
+    let refURL = window.location.pathname.split('/', 3).join('/')
+    return refURL + '/time_tables/' + tt.id
+  }
+
   render() {
     if(this.props.status.isFetching == true) {
       return false
@@ -57,7 +64,7 @@ export default class TimetablesEditVehicleJourney extends Component {
                               {this.props.modal.modalProps.timetables.map((tt, i) =>
                                 <div className='nested-fields' key={i}>
                                   <div className='wrapper'>
-                                    <div>{tt.comment}</div>
+                                    <div> <a href={this.timeTableURL(tt)} target="_blank">{tt.comment}</a> </div>
                                     <div>
                                       <a
                                         href='#'
@@ -101,7 +108,7 @@ export default class TimetablesEditVehicleJourney extends Component {
                         <button
                           className='btn btn-primary'
                           type='button'
-                          onClick={this.handleSubmit.bind(this)}
+                          onClick={this.handleSubmit}
                           >
                           Valider
                         </button>