From 072e4f76f1c98dca9b4a85efa87052842d880d07 Mon Sep 17 00:00:00 2001
From: jpl
Date: Tue, 28 Feb 2017 15:03:30 +0100
Subject: Refs #2648: updating jp_collection layout

---
 .../journey_patterns/components/ConfirmModal.js    |  51 +++---
 .../journey_patterns/components/CreateModal.js     | 122 +++++++--------
 .../journey_patterns/components/EditModal.js       | 171 +++++++++------------
 .../journey_patterns/components/JourneyPattern.js  |  42 ++++-
 .../journey_patterns/components/JourneyPatterns.js |   4 +-
 .../containers/JourneyPatternList.js               |   3 +
 .../journey_patterns/containers/Modal.js           |   3 -
 .../journey_patterns/reducers/journeyPatterns.js   |   4 +-
 8 files changed, 207 insertions(+), 193 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js
index d9fbf07f8..5e51f469c 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js
@@ -4,28 +4,35 @@ var PropTypes = require('react').PropTypes
 
 const ConfirmModal = ({dispatch, modal, onModalAccept, onModalCancel, journeyPatterns}) => (
   <div className={ 'modal fade ' + ((modal.type == 'confirm') ? 'in' : '') } id='ConfirmModal'>
-    <div className='modal-dialog'>
-      <div className='modal-content'>
-        <div className='modal-body'>
-          <p> Voulez-vous enregistrer vos modifications avant de changer de page? </p>
-        </div>
-        <div className='modal-footer'>
-          <button
-            className='btn btn-default'
-            data-dismiss='modal'
-            type='button'
-            onClick= {() => {onModalCancel(modal.confirmModal.callback)}}
-            >
-            Ne pas enregistrer
-          </button>
-          <button
-            className='btn btn-danger'
-            data-dismiss='modal'
-            type='button'
-            onClick = {() => {onModalAccept(modal.confirmModal.callback, journeyPatterns)}}
-            >
-            Enregistrer
-          </button>
+    <div className='modal-container'>
+      <div className='modal-dialog'>
+        <div className='modal-content'>
+          <div className='modal-header'>
+            <h4 className='modal-title'>Confirmation</h4>
+          </div>
+          <div className='modal-body'>
+            <div className='mt-md mb-md'>
+              <p>Vous vous apprêtez à changer de page. Voulez-vous enregistrer vos modifications avant cela ?</p>
+            </div>
+          </div>
+          <div className='modal-footer'>
+            <button
+              className='btn btn-link'
+              data-dismiss='modal'
+              type='button'
+              onClick= {() => {onModalCancel(modal.confirmModal.callback)}}
+              >
+              Ne pas enregistrer
+            </button>
+            <button
+              className='btn btn-primary'
+              data-dismiss='modal'
+              type='button'
+              onClick = {() => {onModalAccept(modal.confirmModal.callback, journeyPatterns)}}
+              >
+              Enregistrer
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js
index 0b966d6d9..d9a4df099 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js
@@ -34,71 +34,73 @@ class CreateModal extends Component {
             </button>
 
             <div className={ 'modal fade ' + ((this.props.modal.type == 'create') ? 'in' : '') } id='NewJourneyPatternModal'>
-              <div className='modal-dialog'>
-                <div className='modal-content'>
-                  <div className='modal-header clearfix'>
-                    <h4>Ajouter une mission</h4>
-                  </div>
+              <div className='modal-container'>
+                <div className='modal-dialog'>
+                  <div className='modal-content'>
+                    <div className='modal-header'>
+                      <h4 className='modal-title'>Ajouter une mission</h4>
+                    </div>
 
-                  {(this.props.modal.type == 'create') && (
-                    <form>
-                      <div className='modal-body'>
-                        <div className='form-group'>
-                          <label className='control-label is-required'>Nom</label>
-                          <input
-                            type='text'
-                            ref='name'
-                            className='form-control'
-                            onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
-                            required
-                            />
-                        </div>
-                        <div className='row'>
-                          <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-                            <div className='form-group'>
-                              <label className='control-label is-required'>Nom public</label>
-                              <input
-                                type='text'
-                                ref='published_name'
-                                className='form-control'
-                                onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
-                                required
-                                />
-                            </div>
+                    {(this.props.modal.type == 'create') && (
+                      <form>
+                        <div className='modal-body'>
+                          <div className='form-group'>
+                            <label className='control-label is-required'>Nom</label>
+                            <input
+                              type='text'
+                              ref='name'
+                              className='form-control'
+                              onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                              required
+                              />
                           </div>
-                          <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-                            <div className='form-group'>
-                              <label className='control-label is-required'>N° d'enregistrement</label>
-                              <input
-                                type='text'
-                                ref='registration_number'
-                                className='form-control'
-                                onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
-                                required
-                                />
+                          <div className='row'>
+                            <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                              <div className='form-group'>
+                                <label className='control-label is-required'>Nom public</label>
+                                <input
+                                  type='text'
+                                  ref='published_name'
+                                  className='form-control'
+                                  onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                                  required
+                                  />
+                              </div>
+                            </div>
+                            <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                              <div className='form-group'>
+                                <label className='control-label is-required'>N° d'enregistrement</label>
+                                <input
+                                  type='text'
+                                  ref='registration_number'
+                                  className='form-control'
+                                  onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                                  required
+                                  />
+                              </div>
                             </div>
                           </div>
                         </div>
-                      </div>
-                      <div className='modal-footer'>
-                        <button
-                          className='btn btn-default'
-                          data-dismiss='modal'
-                          type='button'
-                          onClick={this.props.onModalClose}
-                          >
-                          Annuler
-                        </button>
-                        <button
-                          className='btn btn-danger'
-                          type='button'
-                          onClick={this.handleSubmit.bind(this)}
-                          >
-                          Valider
-                        </button>
-                      </div>
-                    </form>
-                  )}
+                        <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)}
+                            >
+                            Valider
+                          </button>
+                        </div>
+                      </form>
+                    )}
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js
index 7d7dd40a4..37f2b5547 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js
@@ -18,110 +18,86 @@ class EditModal extends Component {
   render() {
     return (
       <div className={ 'modal fade ' + ((this.props.modal.type == 'edit') ? 'in' : '') } id='JourneyPatternModal'>
-        <div className='modal-dialog'>
-          <div className='modal-content'>
-            <div className='modal-header clearfix'>
-              <h4 className='pull-left'>
-                Modifier la mission
-                {(this.props.modal.type == 'edit') && (
-                  <em> "{this.props.modal.modalProps.journeyPattern.name}"</em>
-                )}
-              </h4>
-              <div className='btn-group btn-group-sm pull-right'>
-                <button
-                  type='button'
-                  className='btn btn-primary dropdown-toggle'
-                  data-toggle='dropdown'
-                  >
-                  <span className='fa fa-bars'></span>
-                  <span className='caret'></span>
-                </button>
-
-                <ul className='dropdown-menu'>
-                  <li><a href='#'>Horaires des courses</a></li>
-                  <li>
-                    <a
-                      href='#'
-                      data-dismiss='modal'
-                      onClick={(e) => {
-                        e.preventDefault()
-                        this.props.onDeleteJourneyPattern(this.props.modal.modalProps.index)}
-                      }
-                      >
-                      Supprimer la mission
-                    </a>
-                  </li>
-                </ul>
+        <div className='modal-container'>
+          <div className='modal-dialog'>
+            <div className='modal-content'>
+              <div className='modal-header'>
+                <h4 className='modal-title'>
+                  Modifier la mission
+                  {(this.props.modal.type == 'edit') && (
+                    <em> "{this.props.modal.modalProps.journeyPattern.name}"</em>
+                  )}
+                </h4>
               </div>
-            </div>
 
-            {(this.props.modal.type == 'edit') && (
-              <form>
-                <div className='modal-body'>
-                  <div className='form-group'>
-                    <label className='control-label is-required'>Nom</label>
-                    <input
-                      type='text'
-                      ref='name'
-                      className='form-control'
-                      id={this.props.modal.modalProps.index}
-                      defaultValue={this.props.modal.modalProps.journeyPattern.name}
-                      onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
-                      required
-                      />
-                  </div>
+              {(this.props.modal.type == 'edit') && (
+                <form>
+                  <div className='modal-body'>
+                    <div className='form-group'>
+                      <label className='control-label is-required'>Nom</label>
+                      <input
+                        type='text'
+                        ref='name'
+                        className='form-control'
+                        id={this.props.modal.modalProps.index}
+                        defaultValue={this.props.modal.modalProps.journeyPattern.name}
+                        onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                        required
+                        />
+                    </div>
 
-                  <div className='row'>
-                    <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-                      <div className='form-group'>
-                        <label className='control-label is-required'>Nom public</label>
-                        <input
-                          type='text'
-                          ref='published_name'
-                          className='form-control'
-                          id={this.props.modal.modalProps.index}
-                          defaultValue={this.props.modal.modalProps.journeyPattern.published_name}
-                          onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
-                          required
-                          />
+                    <div className='row'>
+                      <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                        <div className='form-group'>
+                          <label className='control-label is-required'>Nom public</label>
+                          <input
+                            type='text'
+                            ref='published_name'
+                            className='form-control'
+                            id={this.props.modal.modalProps.index}
+                            defaultValue={this.props.modal.modalProps.journeyPattern.published_name}
+                            onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                            required
+                            />
+                        </div>
                       </div>
-                    </div>
-                    <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-                      <div className='form-group'>
-                        <label className='control-label is-required'>N° d'enregistrement</label>
-                        <input
-                          type='text'
-                          ref='registration_number'
-                          className='form-control'
-                          id={this.props.modal.modalProps.index}
-                          defaultValue={this.props.modal.modalProps.journeyPattern.registration_number}
-                          onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
-                          required
-                          />
+                      <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                        <div className='form-group'>
+                          <label className='control-label is-required'>N° d'enregistrement</label>
+                          <input
+                            type='text'
+                            ref='registration_number'
+                            className='form-control'
+                            id={this.props.modal.modalProps.index}
+                            defaultValue={this.props.modal.modalProps.journeyPattern.registration_number}
+                            onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                            required
+                            />
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
 
-                <div className='modal-footer'>
-                  <button
-                    className='btn btn-default'
-                    data-dismiss='modal'
-                    type='button'
-                    onClick={this.props.onModalClose}
-                    >
-                    Annuler
-                  </button>
-                  <button
-                    className='btn btn-danger'
-                    type='button'
-                    onClick={this.handleSubmit.bind(this)}
-                    >
-                    Valider
-                  </button>
-                </div>
-              </form>
-            )}
+                  <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)}
+                      >
+                      Valider
+                    </button>
+                  </div>
+                </form>
+              )}
+            </div>
           </div>
         </div>
       </div>
@@ -133,8 +109,7 @@ EditModal.propTypes = {
   index: PropTypes.number,
   modal: PropTypes.object,
   onModalClose: PropTypes.func.isRequired,
-  saveModal: PropTypes.func.isRequired,
-  onDeleteJourneyPattern: PropTypes.func.isRequired
+  saveModal: PropTypes.func.isRequired
 }
 
 module.exports = EditModal
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 554a0038b..9e554b38e 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
@@ -19,14 +19,43 @@ const JourneyPattern = (props) => {
       )}
 
       <div className='th'>
-        <div className='strong mb-xs'>{props.value.object_id}</div>
+        <div className='strong mb-xs'>{props.value.object_id ? props.value.object_id : '-'}</div>
         <div>{props.value.registration_number}</div>
         <div>{actions.getChecked(props.value.stop_points).length} arrêt(s)</div>
 
-        <div className='clearfix' style={{display: 'inline-block', verticalAlign: 'top', width: '25px'}}>
-          <button className={(props.value.deletable ? 'disabled' : '') + ' btn btn-xs btn-danger pull-right'} onClick={props.onOpenEditModal} data-toggle='modal' data-target='#JourneyPatternModal'>
-            <span className='fa fa-pencil'></span>
-          </button>
+        <div className={props.value.deletable ? 'btn-group disabled' : 'btn-group'}>
+          <div
+            className={props.value.deletable ? 'btn dropdown-toggle disabled' : 'btn dropdown-toggle'}
+            data-toggle='dropdown'
+          >
+            <span className='fa fa-cog'></span>
+          </div>
+          <ul className='dropdown-menu'>
+            <li className={props.value.deletable ? 'disabled' : ''}>
+              <a
+                href='#'
+                onClick={props.onOpenEditModal}
+                data-toggle='modal'
+                data-target='#JourneyPatternModal'
+              >
+                Modifier
+              </a>
+            </li>
+            <li>
+              <a href='#'>Horaires des courses</a>
+            </li>
+            <li className='delete-action'>
+              <a
+                href='#'
+                onClick={(e) => {
+                  e.preventDefault()
+                  props.onDeleteJourneyPattern(props.index)}
+                }
+              >
+                <span className='fa fa-trash'></span>Supprimer
+              </a>
+            </li>
+          </ul>
         </div>
       </div>
 
@@ -56,7 +85,8 @@ JourneyPattern.propTypes = {
   value: PropTypes.object,
   index: PropTypes.number,
   onCheckboxChange: PropTypes.func.isRequired,
-  onOpenEditModal: PropTypes.func.isRequired
+  onOpenEditModal: PropTypes.func.isRequired,
+  onDeleteJourneyPattern: PropTypes.func.isRequired
 }
 
 module.exports = JourneyPattern
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js
index 9091e67cb..b82b4eb36 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js
@@ -11,7 +11,7 @@ class JourneyPatterns extends Component{
     this.props.onLoadFirstPage()
   }
   componentDidUpdate(prevProps, prevState) {
-    if(prevProps.status.isFetching == true){
+    if(this.props.status.isFetching == false){
       $('.table-2entries').each(function() {
         var refH = []
         var refCol = []
@@ -44,7 +44,6 @@ class JourneyPatterns extends Component{
           }
         }
 
-        // console.log(refCol);
         $(this).find('.th').css('height', refCol[0]);
 
         for(var nth = 1; nth < refH.length; nth++) {
@@ -92,6 +91,7 @@ class JourneyPatterns extends Component{
                       key={ index }
                       onCheckboxChange= {(e) => this.props.onCheckboxChange(e, index)}
                       onOpenEditModal= {() => this.props.onOpenEditModal(index, journeyPattern)}
+                      onDeleteJourneyPattern={() => this.props.onDeleteJourneyPattern(index)}
                       />
                   )}
                 </div>
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js b/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js
index bace802e5..bc2aaf95b 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js
@@ -21,6 +21,9 @@ const mapDispatchToProps = (dispatch) => {
     },
     onOpenEditModal: (index, journeyPattern) =>{
       dispatch(actions.openEditModal(index, journeyPattern))
+    },
+    onDeleteJourneyPattern: (index) =>{
+      dispatch(actions.deleteJourneyPattern(index))
     }
   }
 }
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js b/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js
index 4b1809fa1..ef6a4a6b1 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js
@@ -17,9 +17,6 @@ const mapDispatchToProps = (dispatch) => {
     },
     saveModal: (index, data) =>{
       dispatch(actions.saveModal(index, data))
-    },
-    onDeleteJourneyPattern: (index) =>{
-      dispatch(actions.deleteJourneyPattern(index))
     }
   }
 }
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js
index 13f1100b3..8c84500c0 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js
@@ -65,8 +65,8 @@ const journeyPatterns = (state = [], action) => {
       })
     case 'ADD_JOURNEYPATTERN':
       return [
-        ...state,
-        journeyPattern(state, action)
+        journeyPattern(state, action),
+        ...state
       ]
     case 'SAVE_MODAL':
       return state.map((j, i) =>{
-- 
cgit v1.2.3