From 76d1787b32e28e4dbb3664e2bad99366781fdcd2 Mon Sep 17 00:00:00 2001
From: cedricnjanga
Date: Mon, 30 Oct 2017 11:23:56 +0100
Subject: Refs #4792

UX changes on JourneyPattern view

- add the possibility to view JP infos in show mode
---
 .../journey_patterns/components/EditModal.js       | 58 ++++++++++++++--------
 .../journey_patterns/components/JourneyPattern.js  |  9 ++--
 2 files changed, 41 insertions(+), 26 deletions(-)

(limited to 'app/javascript/journey_patterns/components')

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)}
-- 
cgit v1.2.3