Merge pull request #183 from af83/5407-add-purchase-windows-to-vehicle-journeys

Add purchase windows to vehicle journeys. Refs #5407

14 files changed, 381 insertions, 35 deletions

diff --git a/app/javascript/packs/vehicle_journeys/index.js b/app/javascript/packs/vehicle_journeys/index.js
index 38431af1d..53c5d5417 100644
--- a/app/javascript/packs/vehicle_journeys/index.js
+++ b/app/javascript/packs/vehicle_journeys/index.js
@@ -23,6 +23,7 @@ var initialState = {
   filters: {
     selectedJourneyPatterns : selectedJP,
     policy: window.perms,
+    features: window.features,
     toggleArrivals: false,
     queryString: '',
     query: {
@@ -54,7 +55,7 @@ var initialState = {
 
   },
   status: {
-    fetchSuccess: true,
+    fetchSuccess: false,
     isFetching: false
   },
   vehicleJourneys: [],
@@ -99,4 +100,4 @@ render(
     <App />
   </Provider>,
   document.getElementById('vehicle_journeys_wip')
-)
\ No newline at end of file
+)
diff --git a/app/javascript/vehicle_journeys/actions/index.js b/app/javascript/vehicle_journeys/actions/index.js
index d4d824cf5..202c09440 100644
--- a/app/javascript/vehicle_journeys/actions/index.js
+++ b/app/javascript/vehicle_journeys/actions/index.js
@@ -100,6 +100,31 @@ const actions = {
     vehicleJourneys,
     timetables
   }),
+  openPurchaseWindowsEditModal : (vehicleJourneys) => ({
+    type : 'EDIT_PURCHASE_WINDOWS_VEHICLEJOURNEY_MODAL',
+    vehicleJourneys
+  }),
+  selectPurchaseWindowsModal: (selectedWindow) =>({
+    type: 'SELECT_PURCHASE_WINDOW_MODAL',
+    selectedItem:{
+      id: selectedWindow.id,
+      name: selectedWindow.name,
+      color: selectedWindow.color,
+      objectid: selectedWindow.objectid
+    }
+  }),
+  addSelectedPurchaseWindow: () => ({
+    type: 'ADD_SELECTED_PURCHASE_WINDOW'
+  }),
+  deletePurchaseWindowsModal : (purchaseWindow) => ({
+    type : 'DELETE_PURCHASE_WINDOW_MODAL',
+    purchaseWindow
+  }),
+  editVehicleJourneyPurchaseWindows : (vehicleJourneys, purchase_windows) => ({
+    type: 'EDIT_VEHICLEJOURNEYS_PURCHASE_WINDOWS',
+    vehicleJourneys,
+    purchase_windows
+  }),
   openShiftModal : () => ({
     type : 'SHIFT_VEHICLEJOURNEY_MODAL'
   }),
@@ -314,6 +339,7 @@ const actions = {
           let val
           for (val of json.vehicle_journeys){
             var timeTables = []
+            var purchaseWindows = []
             let tt
             for (tt of val.time_tables){
               timeTables.push({
@@ -323,6 +349,14 @@ const actions = {
                 color: tt.color
               })
             }
+            for (tt of val.purchase_windows){
+              purchaseWindows.push({
+                objectid: tt.objectid,
+                name: tt.name,
+                id: tt.id,
+                color: tt.color
+              })
+            }
             let vjasWithDelta = val.vehicle_journey_at_stops.map((vjas, i) => {
               actions.fillEmptyFields(vjas)
               return actions.getDelta(vjas)
@@ -334,6 +368,7 @@ const actions = {
               short_id: val.short_id,
               footnotes: val.footnotes,
               time_tables: timeTables,
+              purchase_windows: purchaseWindows,
               vehicle_journey_at_stops: vjasWithDelta,
               deletable: false,
               selected: false,
diff --git a/app/javascript/vehicle_journeys/components/Filters.js b/app/javascript/vehicle_journeys/components/Filters.js
index db6707520..3bc4f7ff7 100644
--- a/app/javascript/vehicle_journeys/components/Filters.js
+++ b/app/javascript/vehicle_journeys/components/Filters.js
@@ -33,6 +33,7 @@ export default function Filters({filters, pagination, onFilter, onResetFilters,
                 onSelect2Timetable={onSelect2Timetable}
                 hasRoute={true}
                 chunkURL={("/autocomplete_time_tables.json?route_id=" + String(window.route_id))}
+                searchKey={"comment_or_objectid_cont_any"}
                 filters={filters}
                 isFilter={true}
                 />
@@ -165,4 +166,4 @@ Filters.propTypes = {
   onSelect2Timetable: PropTypes.func.isRequired,
   onSelect2JourneyPattern: PropTypes.func.isRequired,
   onSelect2VehicleJourney: PropTypes.func.isRequired
-}
\ No newline at end of file
+}
diff --git a/app/javascript/vehicle_journeys/components/SaveVehicleJourneys.js b/app/javascript/vehicle_journeys/components/SaveVehicleJourneys.js
index e8c27f92e..8bab5baa9 100644
--- a/app/javascript/vehicle_journeys/components/SaveVehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/components/SaveVehicleJourneys.js
@@ -14,16 +14,27 @@ export default class SaveVehicleJourneys extends Component{
         <div className='row mt-md'>
           <div className='col-lg-12 text-right'>
             <form className='vehicle_journeys formSubmitr ml-xs' onSubmit={e => {e.preventDefault()}}>
-              <button
-                className='btn btn-default'
-                type='button'
-                onClick={e => {
-                  e.preventDefault()
-                  this.props.editMode ? this.props.onSubmitVehicleJourneys(this.props.dispatch, this.props.vehicleJourneys) : this.props.onEnterEditMode()
-                }}
-              >
-                {this.props.editMode ? "Valider" : "Editer"}
-              </button>
+              <div className="btn-group sticky-actions">
+                <button
+                  className={'btn ' + (this.props.editMode ? 'btn-success' : 'btn-default') + (this.props.status.fetchSuccess ? '' : ' disabled')}
+                  type='button'
+                  onClick={e => {
+                    e.preventDefault()
+                    this.props.editMode ? this.props.onSubmitVehicleJourneys(this.props.dispatch, this.props.vehicleJourneys) : this.props.onEnterEditMode()
+                  }}
+                >
+                  {this.props.editMode ? "Valider" : "Editer"}
+                </button>
+                {this.props.editMode && <button
+                    className='btn btn-default'
+                    type='button'
+                    onClick={e => {
+                      e.preventDefault()
+                      this.props.onExitEditMode()
+                    }}
+                  > Annuler </button>
+                }
+              </div>
             </form>
           </div>
         </div>
@@ -38,5 +49,6 @@ SaveVehicleJourneys.propTypes = {
   status: PropTypes.object.isRequired,
   filters: PropTypes.object.isRequired,
   onEnterEditMode: PropTypes.func.isRequired,
+  onExitEditMode: PropTypes.func.isRequired,
   onSubmitVehicleJourneys: PropTypes.func.isRequired
-}
\ No newline at end of file
+}
diff --git a/app/javascript/vehicle_journeys/components/Tools.js b/app/javascript/vehicle_journeys/components/Tools.js
index 1ef576529..d6e04f00e 100644
--- a/app/javascript/vehicle_journeys/components/Tools.js
+++ b/app/javascript/vehicle_journeys/components/Tools.js
@@ -7,6 +7,7 @@ import DuplicateVehicleJourney from '../containers/tools/DuplicateVehicleJourney
 import EditVehicleJourney from '../containers/tools/EditVehicleJourney'
 import NotesEditVehicleJourney from '../containers/tools/NotesEditVehicleJourney'
 import TimetablesEditVehicleJourney from '../containers/tools/TimetablesEditVehicleJourney'
+import PurchaseWindowsEditVehicleJourney from '../containers/tools/PurchaseWindowsEditVehicleJourney'
 
 
 export default class Tools extends Component {
@@ -20,18 +21,26 @@ export default class Tools extends Component {
     return this.props.filters.policy[`vehicle_journeys.${key}`]
   }
 
+  hasFeature(key) {
+    // Check if the organisation has the given feature
+    return this.props.filters.features[key]
+  }
+
   render() {
     let { vehicleJourneys, onCancelSelection, editMode } = this.props
     return (
       <div className='select_toolbox'>
         <ul>
-          <AddVehicleJourney disabled={this.hasPolicy("create") && !editMode} />
-          <DuplicateVehicleJourney disabled={this.hasPolicy("create") && this.hasPolicy("update") && !editMode}/>
-          <ShiftVehicleJourney disabled={this.hasPolicy("update") && !editMode}/>
+          <AddVehicleJourney disabled={!this.hasPolicy("create") || !editMode} />
+          <DuplicateVehicleJourney disabled={!this.hasPolicy("create") || !this.hasPolicy("update") || !editMode}/>
+          <ShiftVehicleJourney disabled={!this.hasPolicy("update") || !editMode}/>
           <EditVehicleJourney disabled={!this.hasPolicy("update")}/>
           <TimetablesEditVehicleJourney disabled={!this.hasPolicy("update")}/>
+          { this.hasFeature('purchase_windows') &&
+            <PurchaseWindowsEditVehicleJourney disabled={!this.hasPolicy("update")}/>
+          }
           <NotesEditVehicleJourney disabled={!this.hasPolicy("update")}/>
-          <DeleteVehicleJourneys disabled={this.hasPolicy("destroy") && !editMode}/>
+          <DeleteVehicleJourneys disabled={!this.hasPolicy("destroy") || !editMode}/>
         </ul>
 
         <span className='info-msg'>{actions.getSelected(vehicleJourneys).length} course(s) sélectionnée(s)</span>
diff --git a/app/javascript/vehicle_journeys/components/VehicleJourney.js b/app/javascript/vehicle_journeys/components/VehicleJourney.js
index 2ce257284..1e62444ef 100644
--- a/app/javascript/vehicle_journeys/components/VehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/VehicleJourney.js
@@ -17,6 +17,10 @@ export default class VehicleJourney extends Component {
     return bool
   }
 
+  hasFeature(key) {
+    return this.props.filters.features[key]
+  }
+
   timeTableURL(tt) {
     let refURL = window.location.pathname.split('/', 3).join('/')
     let ttURL = refURL + '/time_tables/' + tt.id
@@ -26,6 +30,15 @@ export default class VehicleJourney extends Component {
     )
   }
 
+  purchaseWindowURL(tt) {
+    let refURL = window.location.pathname.split('/', 3).join('/')
+    let ttURL = refURL + '/purchase_windows/' + tt.id
+
+    return (
+      <a href={ttURL} title='Voir le calendrier commercial'><span className='fa fa-calendar' style={{color: (tt.color ? tt.color : '')}}></span></a>
+    )
+  }
+
   columnHasDelta() {
     let a = []
     this.props.value.vehicle_journey_at_stops.map((vj, i) => {
@@ -44,11 +57,16 @@ export default class VehicleJourney extends Component {
 
   render() {
     this.previousCity = undefined
-    let {time_tables} = this.props.value
+    let {time_tables, purchase_windows} = this.props.value
 
     return (
       <div className={'t2e-item' + (this.props.value.deletable ? ' disabled' : '') + (this.props.value.errors ? ' has-error': '')}>
-        <div className='th'>
+        <div
+          className='th'
+          onClick={(e) =>
+            ($(e.target).parents("a").length == 0) && this.props.editMode && this.props.onSelectVehicleJourney(this.props.index)
+          }
+          >
           <div className='strong mb-xs'>{this.props.value.short_id || '-'}</div>
           <div>{this.props.value.journey_pattern.short_id || '-'}</div>
           <div>
@@ -57,6 +75,14 @@ export default class VehicleJourney extends Component {
             )}
             {time_tables.length > 3 && <span className='vj_tt'> + {time_tables.length - 3}</span>}
           </div>
+          { this.hasFeature('purchase_windows') &&
+            <div>
+              {purchase_windows.slice(0,3).map((tt, i)=>
+                <span key={i} className='vj_tt'>{this.purchaseWindowURL(tt)}</span>
+              )}
+              {purchase_windows.length > 3 && <span className='vj_tt'> + {purchase_windows.length - 3}</span>}
+            </div>
+          }
           <div className={(this.props.value.deletable ? 'disabled ' : '') + 'checkbox'}>
             <input
               id={this.props.index}
diff --git a/app/javascript/vehicle_journeys/components/VehicleJourneys.js b/app/javascript/vehicle_journeys/components/VehicleJourneys.js
index 6bce9766b..e16d03f90 100644
--- a/app/javascript/vehicle_journeys/components/VehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/components/VehicleJourneys.js
@@ -12,6 +12,10 @@ export default class VehicleJourneys extends Component {
     this.props.onLoadFirstPage(this.props.filters)
   }
 
+  hasFeature(key) {
+    return this.props.filters.features[key]
+  }
+
   componentDidUpdate(prevProps, prevState) {
     if(this.props.status.isFetching == false){
       $('.table-2entries').each(function() {
@@ -113,6 +117,7 @@ export default class VehicleJourneys extends Component {
                   <div className='strong mb-xs'>ID course</div>
                   <div>ID mission</div>
                   <div>Calendriers</div>
+                  { this.hasFeature('purchase_windows') && <div>Calendriers Commerciaux</div> }
                 </div>
                 {this.props.stopPointsList.map((sp, i) =>{
                   return (
@@ -132,6 +137,7 @@ export default class VehicleJourneys extends Component {
                       index={index}
                       editMode={this.props.editMode}
                       filters={this.props.filters}
+                      features={this.props.features}
                       onUpdateTime={this.props.onUpdateTime}
                       onSelectVehicleJourney={this.props.onSelectVehicleJourney}
                       />
@@ -153,4 +159,4 @@ VehicleJourneys.propTypes = {
   onLoadFirstPage: PropTypes.func.isRequired,
   onUpdateTime: PropTypes.func.isRequired,
   onSelectVehicleJourney: PropTypes.func.isRequired
-}
\ No newline at end of file
+}
diff --git a/app/javascript/vehicle_journeys/components/tools/PurchaseWindowsEditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/PurchaseWindowsEditVehicleJourney.js
new file mode 100644
index 000000000..d61c7a34b
--- /dev/null
+++ b/app/javascript/vehicle_journeys/components/tools/PurchaseWindowsEditVehicleJourney.js
@@ -0,0 +1,152 @@
+import React, { PropTypes, Component } from 'react'
+import actions from '../../actions'
+import TimetableSelect2 from './select2s/TimetableSelect2'
+
+export default class PurchaseWindowsEditVehicleJourney extends Component {
+  constructor(props) {
+    super(props)
+    this.handleSubmit = this.handleSubmit.bind(this)
+    this.purchaseWindowURL = this.purchaseWindowURL.bind(this)
+  }
+
+  handleSubmit() {
+    this.props.onShoppingWindowsEditVehicleJourney(this.props.modal.modalProps.vehicleJourneys, this.props.modal.modalProps.purchase_windows)
+    this.props.onModalClose()
+    $('#PurchaseWindowsEditVehicleJourneyModal').modal('hide')
+  }
+
+  purchaseWindowURL(tt) {
+    let refURL = window.location.pathname.split('/', 3).join('/')
+    return refURL + '/purchase_windows/' + tt.id
+  }
+
+  render() {
+    if(this.props.status.isFetching == true) {
+      return false
+    }
+    if(this.props.status.fetchSuccess == true) {
+      return (
+        <li className='st_action'>
+          <button
+            type='button'
+            disabled={(actions.getSelected(this.props.vehicleJourneys).length < 1 || this.props.disabled)}
+            data-toggle='modal'
+            data-target='#PurchaseWindowsEditVehicleJourneyModal'
+            onClick={() => this.props.onOpenCalendarsEditModal(actions.getSelected(this.props.vehicleJourneys))}
+            title='Calendriers commerciaux'
+          >
+            <span className='sb sb-purchase_window sb-strong'></span>
+          </button>
+
+          <div className={ 'modal fade ' + ((this.props.modal.type == 'duplicate') ? 'in' : '') } id='PurchaseWindowsEditVehicleJourneyModal'>
+            <div className='modal-container'>
+              <div className='modal-dialog'>
+                <div className='modal-content'>
+                  <div className='modal-header'>
+                    <h4 className='modal-title'>Calendriers commerciaux associés</h4>
+                    <span type="button" className="close modal-close" data-dismiss="modal">&times;</span>
+                  </div>
+
+                  {(this.props.modal.type == 'purchase_windows_edit') && (
+                    <form>
+                      <div className='modal-body'>
+                        <div className='row'>
+                          <div className='col-lg-12'>
+                            <div className='subform'>
+                              <div className='nested-head'>
+                                <div className='wrapper'>
+                                  <div>
+                                    <div className='form-group'>
+                                      <label className='control-label'>{this.props.modal.modalProps.purchase_windows.length == 0 ? "Aucun calendrier commercial associé" : "Calendriers commerciaux associés"}</label>
+                                    </div>
+                                  </div>
+                                  <div></div>
+                                </div>
+                              </div>
+                              {this.props.modal.modalProps.purchase_windows.map((tt, i) =>
+                                <div className='nested-fields' key={i}>
+                                  <div className='wrapper'>
+                                    <div> <a href={this.purchaseWindowURL(tt)} target="_blank">
+                                      <span className="fa fa-circle mr-xs" style={{color: tt.color}}></span>
+                                      {tt.name}
+                                    </a> </div>
+                                    {
+                                      this.props.editMode &&
+                                      <div>
+                                        <a
+                                          href='#'
+                                          title='Supprimer'
+                                          className='fa fa-trash remove_fields'
+                                          style={{ height: 'auto', lineHeight: 'normal' }}
+                                          onClick={(e) => {
+                                            e.preventDefault()
+                                            this.props.onDeleteCalendarModal(tt)
+                                          }}
+                                        ></a>
+                                      </div>
+                                    }
+                                  </div>
+                                </div>
+                              )}
+                              {
+                                this.props.editMode &&
+                                <div className='nested-fields'>
+                                  <div className='wrapper'>
+                                    <div>
+                                      <TimetableSelect2
+                                        onSelect2Timetable={this.props.onSelect2Timetable}
+                                        chunkURL={'/autocomplete_purchase_windows.json'}
+                                        searchKey={"name_or_objectid_cont_any"}
+                                        isFilter={false}
+                                      />
+                                    </div>
+                                  </div>
+                                </div>
+                              }
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      {
+                        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}
+                          >
+                            Valider
+                          </button>
+                        </div>
+                      }
+                    </form>
+                  )}
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </li>
+      )
+    } else {
+      return false
+    }
+  }
+}
+
+PurchaseWindowsEditVehicleJourney.propTypes = {
+  onOpenCalendarsEditModal: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onShoppingWindowsEditVehicleJourney: PropTypes.func.isRequired,
+  onDeleteCalendarModal: PropTypes.func.isRequired,
+  onSelect2Timetable: PropTypes.func.isRequired,
+  disabled: PropTypes.bool.isRequired
+}
diff --git a/app/javascript/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js
index 6629135dd..56f80ebb5 100644
--- a/app/javascript/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js
@@ -33,6 +33,7 @@ export default class TimetablesEditVehicleJourney extends Component {
             data-toggle='modal'
             data-target='#CalendarsEditVehicleJourneyModal'
             onClick={() => this.props.onOpenCalendarsEditModal(actions.getSelected(this.props.vehicleJourneys))}
+            title='Calendriers'
           >
             <span className='fa fa-calendar'></span>
           </button>
@@ -67,7 +68,7 @@ export default class TimetablesEditVehicleJourney extends Component {
                                   <div className='wrapper'>
                                     <div> <a href={this.timeTableURL(tt)} target="_blank">{tt.comment}</a> </div>
                                     {
-                                      this.props.editMode && 
+                                      this.props.editMode &&
                                       <div>
                                         <a
                                           href='#'
@@ -85,13 +86,14 @@ export default class TimetablesEditVehicleJourney extends Component {
                                 </div>
                               )}
                               {
-                                this.props.editMode && 
+                                this.props.editMode &&
                                 <div className='nested-fields'>
                                   <div className='wrapper'>
                                     <div>
                                       <TimetableSelect2
                                         onSelect2Timetable={this.props.onSelect2Timetable}
                                         chunkURL={'/autocomplete_time_tables.json'}
+                                        searchKey={"comment_or_objectid_cont_any"}
                                         isFilter={false}
                                       />
                                     </div>
@@ -103,7 +105,7 @@ export default class TimetablesEditVehicleJourney extends Component {
                         </div>
                       </div>
                       {
-                        this.props.editMode && 
+                        this.props.editMode &&
                         <div className='modal-footer'>
                           <button
                             className='btn btn-link'
@@ -144,4 +146,4 @@ TimetablesEditVehicleJourney.propTypes = {
   onDeleteCalendarModal: PropTypes.func.isRequired,
   onSelect2Timetable: PropTypes.func.isRequired,
   disabled: PropTypes.bool.isRequired
-}
\ No newline at end of file
+}
diff --git a/app/javascript/vehicle_journeys/components/tools/select2s/TimetableSelect2.js b/app/javascript/vehicle_journeys/components/tools/select2s/TimetableSelect2.js
index 19c183839..eb8651be2 100644
--- a/app/javascript/vehicle_journeys/components/tools/select2s/TimetableSelect2.js
+++ b/app/javascript/vehicle_journeys/components/tools/select2s/TimetableSelect2.js
@@ -31,12 +31,10 @@ export default class BSelect4 extends Component {
             url: origin + path + this.props.chunkURL,
             dataType: 'json',
             delay: '500',
-            data: function(params) {
-              return {
-                q: {
-                  comment_or_objectid_cont_any: params.term
-                }
-              };
+            data: (params) => {
+              let q = {}
+              q[this.props.searchKey] = params.term
+              return {q}
             },
             processResults: function(data, params) {
               return {
@@ -44,7 +42,7 @@ export default class BSelect4 extends Component {
                   item => _.assign(
                     {},
                     item,
-                    {text: '<strong>' + "<span class='fa fa-circle' style='color:" + (item.color ? item.color : '#4B4B4B') + "'></span> " + item.comment + ' - ' + item.short_id + '</strong><br/><small>' + (item.day_types ? item.day_types.match(/[A-Z]?[a-z]+/g).join(', ') : "") + '</small>'}
+                    {text: '<strong>' + "<span class='fa fa-circle' style='color:" + (item.color ? item.color : '#4B4B4B') + "'></span> " + (item.comment || item.name) + ' - ' + item.short_id + '</strong><br/><small>' + (item.day_types ? item.day_types.match(/[A-Z]?[a-z]+/g).join(', ') : "") + '</small>'}
                   )
                 )
               };
@@ -62,4 +60,4 @@ export default class BSelect4 extends Component {
 
 const formatRepo = (props) => {
   if(props.text) return props.text
-}
\ No newline at end of file
+}
diff --git a/app/javascript/vehicle_journeys/containers/SaveVehicleJourneys.js b/app/javascript/vehicle_journeys/containers/SaveVehicleJourneys.js
index 18f9e994e..f5f879ed8 100644
--- a/app/javascript/vehicle_journeys/containers/SaveVehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/containers/SaveVehicleJourneys.js
@@ -17,6 +17,10 @@ const mapDispatchToProps = (dispatch) => {
     onEnterEditMode: () => {
       dispatch(actions.enterEditMode())
     },
+    onExitEditMode: () => {
+      dispatch(actions.cancelSelection())
+      dispatch(actions.exitEditMode())
+    },
     onSubmitVehicleJourneys: (next, state) => {
       actions.submitVehicleJourneys(dispatch, state, next)
     }
diff --git a/app/javascript/vehicle_journeys/containers/tools/PurchaseWindowsEditVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/PurchaseWindowsEditVehicleJourney.js
new file mode 100644
index 000000000..3fef44489
--- /dev/null
+++ b/app/javascript/vehicle_journeys/containers/tools/PurchaseWindowsEditVehicleJourney.js
@@ -0,0 +1,38 @@
+import actions from '../../actions'
+import { connect } from 'react-redux'
+import PurchaseWindowsEditVehicleJourneyComponent from '../../components/tools/PurchaseWindowsEditVehicleJourney'
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    editMode: state.editMode,
+    modal: state.modal,
+    vehicleJourneys: state.vehicleJourneys,
+    status: state.status,
+    disabled: ownProps.disabled
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onModalClose: () =>{
+      dispatch(actions.closeModal())
+    },
+    onOpenCalendarsEditModal: (vehicleJourneys) =>{
+      dispatch(actions.openPurchaseWindowsEditModal(vehicleJourneys))
+    },
+    onDeleteCalendarModal: (timetable) => {
+      dispatch(actions.deletePurchaseWindowsModal(timetable))
+    },
+    onShoppingWindowsEditVehicleJourney: (vehicleJourneys, timetables) =>{
+      dispatch(actions.editVehicleJourneyPurchaseWindows(vehicleJourneys, timetables))
+    },
+    onSelect2Timetable: (e) =>{
+      dispatch(actions.selectPurchaseWindowsModal(e.params.data))
+      dispatch(actions.addSelectedPurchaseWindow())
+    }
+  }
+}
+
+const PurchaseWindowsEditVehicleJourney = connect(mapStateToProps, mapDispatchToProps)(PurchaseWindowsEditVehicleJourneyComponent)
+
+export default PurchaseWindowsEditVehicleJourney
diff --git a/app/javascript/vehicle_journeys/reducers/modal.js b/app/javascript/vehicle_journeys/reducers/modal.js
index 57f54a144..862e27e1b 100644
--- a/app/javascript/vehicle_journeys/reducers/modal.js
+++ b/app/javascript/vehicle_journeys/reducers/modal.js
@@ -40,7 +40,6 @@ export default function modal(state = {}, action) {
     case 'EDIT_CALENDARS_VEHICLEJOURNEY_MODAL':
       vehicleJourneysModal = JSON.parse(JSON.stringify(action.vehicleJourneys))
       let uniqTimetables = []
-      let timetable = {}
       vehicleJourneysModal.map((vj, i) => {
         vj.time_tables.map((tt, j) =>{
           if(!(_.find(uniqTimetables, tt))){
@@ -56,6 +55,24 @@ export default function modal(state = {}, action) {
         },
         confirmModal: {}
       }
+    case 'EDIT_PURCHASE_WINDOWS_VEHICLEJOURNEY_MODAL':
+      var vehicleJourneys = JSON.parse(JSON.stringify(action.vehicleJourneys))
+      let uniqPurchaseWindows = []
+      vehicleJourneys.map((vj, i) => {
+        vj.purchase_windows.map((pw, j) =>{
+          if(!(_.find(uniqPurchaseWindows, pw))){
+            uniqPurchaseWindows.push(pw)
+          }
+        })
+      })
+      return {
+        type: 'purchase_windows_edit',
+        modalProps: {
+          vehicleJourneys: vehicleJourneys,
+          purchase_windows: uniqPurchaseWindows
+        },
+        confirmModal: {}
+      }
     case 'SELECT_CP_EDIT_MODAL':
       newModalProps = _.assign({}, state.modalProps, {selectedCompany : action.selectedItem})
       return _.assign({}, state, {modalProps: newModalProps})
@@ -65,6 +82,9 @@ export default function modal(state = {}, action) {
     case 'SELECT_TT_CALENDAR_MODAL':
       newModalProps = _.assign({}, state.modalProps, {selectedTimetable : action.selectedItem})
       return _.assign({}, state, {modalProps: newModalProps})
+    case 'SELECT_PURCHASE_WINDOW_MODAL':
+      newModalProps = _.assign({}, state.modalProps, {selectedPurchaseWindow : action.selectedItem})
+      return _.assign({}, state, {modalProps: newModalProps})
     case 'ADD_SELECTED_TIMETABLE':
       if(state.modalProps.selectedTimetable){
         newModalProps = JSON.parse(JSON.stringify(state.modalProps))
@@ -73,6 +93,14 @@ export default function modal(state = {}, action) {
         }
         return _.assign({}, state, {modalProps: newModalProps})
       }
+    case 'ADD_SELECTED_PURCHASE_WINDOW':
+      if(state.modalProps.selectedPurchaseWindow){
+        newModalProps = JSON.parse(JSON.stringify(state.modalProps))
+        if (!_.find(newModalProps.purchase_windows, newModalProps.selectedPurchaseWindow)){
+          newModalProps.purchase_windows.push(newModalProps.selectedPurchaseWindow)
+        }
+        return _.assign({}, state, {modalProps: newModalProps})
+      }
     case 'DELETE_CALENDAR_MODAL':
       newModalProps = JSON.parse(JSON.stringify(state.modalProps))
       let timetablesModal = state.modalProps.timetables.slice(0)
@@ -92,6 +120,25 @@ export default function modal(state = {}, action) {
       newModalProps.vehicleJourneys = vehicleJourneysModal
       newModalProps.timetables = timetablesModal
       return _.assign({}, state, {modalProps: newModalProps})
+    case 'DELETE_PURCHASE_WINDOW_MODAL':
+        newModalProps = JSON.parse(JSON.stringify(state.modalProps))
+        let purchase_windows = state.modalProps.purchase_windows.slice(0)
+        purchase_windows.map((tt, i) =>{
+          if(tt == action.purchaseWindow){
+            purchase_windows.splice(i, 1)
+          }
+        })
+        vehicleJourneysModal = state.modalProps.vehicleJourneys.slice(0)
+        vehicleJourneysModal.map((vj) =>{
+          vj.purchase_windows.map((tt, i) =>{
+            if (_.isEqual(tt, action.purchaseWindow)){
+              vj.purchase_windows.splice(i, 1)
+            }
+          })
+        })
+        newModalProps.vehicleJourneys = vehicleJourneysModal
+        newModalProps.purchase_windows = purchase_windows
+        return _.assign({}, state, {modalProps: newModalProps})
     case 'CREATE_VEHICLEJOURNEY_MODAL':
       let selectedJP = {}
       if (window.jpOrigin){
@@ -135,4 +182,4 @@ export default function modal(state = {}, action) {
     default:
       return state
   }
-}
\ No newline at end of file
+}
diff --git a/app/javascript/vehicle_journeys/reducers/vehicleJourneys.js b/app/javascript/vehicle_journeys/reducers/vehicleJourneys.js
index 7fed867fa..15d6abe38 100644
--- a/app/javascript/vehicle_journeys/reducers/vehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/reducers/vehicleJourneys.js
@@ -155,6 +155,21 @@ export default function vehicleJourneys(state = [], action) {
           return vj
         }
       })
+      case 'EDIT_VEHICLEJOURNEYS_PURCHASE_WINDOWS':
+        let newWindows = JSON.parse(JSON.stringify(action.purchase_windows))
+        return state.map((vj,i) =>{
+          if(vj.selected){
+            let updatedVJ = _.assign({}, vj)
+            action.vehicleJourneys.map((vjm, j) =>{
+              if(vj.objectid == vjm.objectid){
+                updatedVJ.purchase_windows = newWindows
+              }
+            })
+            return updatedVJ
+          }else{
+            return vj
+          }
+        })
     case 'SHIFT_VEHICLEJOURNEY':
       return state.map((vj, i) => {
         if (vj.selected){