Refs #4792

UX changes on JourneyPattern view

- add the possibility to view JP infos in show mode

4 files changed, 46 insertions, 27 deletions

diff --git a/app/javascript/journey_patterns/actions/index.js b/app/javascript/journey_patterns/actions/index.js
index 0c1cb5f5c..8bea5a990 100644
--- a/app/javascript/journey_patterns/actions/index.js
+++ b/app/javascript/journey_patterns/actions/index.js
@@ -90,7 +90,10 @@ const actions = {
   resetValidation: (target) => {
     $(target).parent().removeClass('has-error').children('.help-block').remove()
   },
-  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
+  },
   validateFields : (fields) => {
     const test = []
 
diff --git a/app/javascript/journey_patterns/components/EditModal.js b/app/javascript/journey_patterns/components/EditModal.js
index 699f89b85..e7ce24aa1 100644
--- a/app/javascript/journey_patterns/components/EditModal.js
+++ b/app/javascript/journey_patterns/components/EditModal.js
@@ -13,6 +13,19 @@ export default class EditModal extends Component {
     }
   }
 
+  renderModalTitle() {
+    if (this.props.editMode) {
+      return (
+        <h4 className='modal-title'>
+          Editer la mission
+          {this.props.modal.type == 'edit' && <em> "{this.props.modal.modalProps.journeyPattern.name}"</em>}
+        </h4>
+      )
+    } else {
+      return <h4 className='modal-title'> Informations </h4>
+    }
+  }
+
   render() {
     return (
       <div className={ 'modal fade ' + ((this.props.modal.type == 'edit') ? 'in' : '') } id='JourneyPatternModal'>
@@ -20,12 +33,8 @@ export default class EditModal extends Component {
           <div className='modal-dialog'>
             <div className='modal-content'>
               <div className='modal-header'>
-                <h4 className='modal-title'>
-                  Editer la mission
-                  {(this.props.modal.type == 'edit') && (
-                    <em> "{this.props.modal.modalProps.journeyPattern.name}"</em>
-                  )}
-                </h4>
+                {this.renderModalTitle()}
+                <span type="button" className="close modal-close" data-dismiss="modal">&times;</span>
               </div>
 
               {(this.props.modal.type == 'edit') && (
@@ -37,6 +46,7 @@ export default class EditModal extends Component {
                         type='text'
                         ref='name'
                         className='form-control'
+                        disabled={!this.props.editMode}
                         id={this.props.modal.modalProps.index}
                         defaultValue={this.props.modal.modalProps.journeyPattern.name}
                         onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
@@ -52,6 +62,7 @@ export default class EditModal extends Component {
                             type='text'
                             ref='published_name'
                             className='form-control'
+                            disabled={!this.props.editMode}
                             id={this.props.modal.modalProps.index}
                             defaultValue={this.props.modal.modalProps.journeyPattern.published_name}
                             onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
@@ -66,6 +77,7 @@ export default class EditModal extends Component {
                             type='text'
                             ref='registration_number'
                             className='form-control'
+                            disabled={!this.props.editMode}
                             id={this.props.modal.modalProps.index}
                             defaultValue={this.props.modal.modalProps.journeyPattern.registration_number}
                             onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
@@ -74,24 +86,26 @@ export default class EditModal 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
-                    </button>
-                    <button
-                      className='btn btn-primary'
-                      type='button'
-                      onClick={this.handleSubmit.bind(this)}
+                        Annuler
+                      </button>
+                      <button
+                        className='btn btn-primary'
+                        type='button'
+                        onClick={this.handleSubmit.bind(this)}
                       >
-                      Valider
-                    </button>
-                  </div>
+                        Valider
+                      </button>
+                    </div>
+                  }
                 </form>
               )}
             </div>
diff --git a/app/javascript/journey_patterns/components/JourneyPattern.js b/app/javascript/journey_patterns/components/JourneyPattern.js
index dde73a957..34d102c5d 100644
--- a/app/javascript/journey_patterns/components/JourneyPattern.js
+++ b/app/javascript/journey_patterns/components/JourneyPattern.js
@@ -56,7 +56,7 @@ export default class JourneyPattern extends Component{
   }
 
   isDisabled(action) {
-    return !this.props.status.policy[`journey_patterns.${action}`] && !this.props.editMode
+    return !this.props.status.policy[`journey_patterns.${action}`]
   }
 
   render() {
@@ -88,16 +88,17 @@ export default class JourneyPattern extends Component{
                   data-toggle='modal'
                   data-target='#JourneyPatternModal'
                   >
-                  Editer
+                  {this.props.editMode ? 'Editer' : 'Consulter'}
                 </button>
               </li>
               <li className={this.props.value.object_id ? '' : 'disabled'}>
                 {this.vehicleJourneyURL(this.props.value.object_id)}
               </li>
-              <li className={'delete-action' + (this.isDisabled('destroy') ? ' disabled' : '')}>
+              <li className={'delete-action' + (this.isDisabled('destroy') || !this.props.editMode ? ' disabled' : '')}>
                 <button
                   type='button'
-                  disabled={this.isDisabled('destroy') ? 'disabled' : ''}
+                  className="disabled"
+                  disabled={this.isDisabled('destroy') || !this.props.editMode}
                   onClick={(e) => {
                     e.preventDefault()
                     this.props.onDeleteJourneyPattern(this.props.index)}
diff --git a/app/javascript/journey_patterns/containers/Modal.js b/app/javascript/journey_patterns/containers/Modal.js
index ace71a857..33ee8583c 100644
--- a/app/javascript/journey_patterns/containers/Modal.js
+++ b/app/javascript/journey_patterns/containers/Modal.js
@@ -5,6 +5,7 @@ import CreateModal from '../components/CreateModal'
 
 const mapStateToProps = (state) => {
   return {
+    editMode: state.editMode,
     modal: state.modal,
     journeyPattern: state.journeyPattern
   }