Refs #5437 @0.5h; Propagate behaviour to the JourneyPatterns editor

8 files changed, 296 insertions, 25 deletions

diff --git a/app/controllers/journey_patterns_collections_controller.rb b/app/controllers/journey_patterns_collections_controller.rb
index 4c698bb89..b37ac6cd0 100644
--- a/app/controllers/journey_patterns_collections_controller.rb
+++ b/app/controllers/journey_patterns_collections_controller.rb
@@ -36,12 +36,14 @@ class JourneyPatternsCollectionsController < ChouetteController
             :id => sp.stop_area.id,
             :route_id => sp.try(:route_id),
             :object_id => sp.try(:objectid),
+            :stop_area_object_id => sp.stop_area.try(:objectid),
             :position => sp.try(:position),
             :for_boarding => sp.try(:for_boarding),
             :for_alighting => sp.try(:for_alighting),
             :name => sp.stop_area.try(:name),
             :zip_code => sp.stop_area.try(:zip_code),
             :city_name => sp.stop_area.try(:city_name),
+            :country_name => sp.stop_area.try(:country_name),
             :comment => sp.stop_area.try(:comment),
             :area_type => sp.stop_area.try(:area_type),
             :registration_number => sp.stop_area.try(:registration_number),
diff --git a/app/javascript/journey_patterns/components/JourneyPattern.js b/app/javascript/journey_patterns/components/JourneyPattern.js
index 52641c94e..47fb6882d 100644
--- a/app/javascript/journey_patterns/components/JourneyPattern.js
+++ b/app/javascript/journey_patterns/components/JourneyPattern.js
@@ -33,13 +33,7 @@ export default class JourneyPattern extends Component{
   }
 
   cityNameChecker(sp) {
-    let bool = false
-
-    if(sp.city_name != this.previousCity){
-      bool = true
-      this.previousCity = sp.city_name
-    }
-    return bool
+    return this.props.journeyPatterns.showHeader(sp.object_id)
   }
 
   spNode(sp, headlined){
@@ -190,5 +184,6 @@ JourneyPattern.propTypes = {
   index: PropTypes.number,
   onCheckboxChange: PropTypes.func.isRequired,
   onOpenEditModal: PropTypes.func.isRequired,
-  onDeleteJourneyPattern: PropTypes.func.isRequired
+  onDeleteJourneyPattern: PropTypes.func.isRequired,
+  journeyPatterns: PropTypes.object.isRequired
 }
diff --git a/app/javascript/journey_patterns/components/JourneyPatterns.js b/app/javascript/journey_patterns/components/JourneyPatterns.js
index 67315346d..c261b408a 100644
--- a/app/javascript/journey_patterns/components/JourneyPatterns.js
+++ b/app/javascript/journey_patterns/components/JourneyPatterns.js
@@ -7,11 +7,13 @@ import JourneyPattern from './JourneyPattern'
 export default class JourneyPatterns extends Component {
   constructor(props){
     super(props)
-    this.previousCity = undefined
+    this.stopPointsIds = _.map(this.props.stopPointsList, (sp)=>{return sp.stop_area_object_id})
   }
+
   componentDidMount() {
     this.props.onLoadFirstPage()
   }
+
   componentDidUpdate(prevProps, prevState) {
     if(this.props.status.isFetching == false){
       $('.table-2entries').each(function() {
@@ -55,20 +57,26 @@ export default class JourneyPatterns extends Component {
     }
   }
 
-  hasFeature(key) {
-    return this.props.status.features[key]
+  showHeader(object_id) {
+    let showHeadline = false
+    let headline = ""
+    let attribute_to_check = this.hasFeature('long_distance_routes') ? "country_code" : "city_name"
+    let index = this.stopPointsIds.indexOf(object_id)
+    let sp = this.props.stopPointsList[index]
+    let previousBreakpoint = this.props.stopPointsList[index - 1]
+    if(index == 0 || (sp[attribute_to_check] != previousBreakpoint[attribute_to_check])){
+      showHeadline = true
+      headline = this.hasFeature('long_distance_routes') ? sp.country_name : sp.city_name
+    }
+    return showHeadline ? headline : ""
   }
 
-  cityNameChecker(sp) {
-    let bool = false
-    if(sp.city_name != this.previousCity){
-      bool = true
-      this.previousCity = sp.city_name
-    }
+  stopPointHeader(sp) {
+    let showHeadline = this.showHeader(sp.stop_area_object_id)
     return (
       <div
-        className={(bool) ? 'headlined' : ''}
-        data-headline={(bool) ? sp.city_name : ''}
+        className={(showHeadline) ? 'headlined' : ''}
+        data-headline={showHeadline}
         title={sp.city_name + ' (' + sp.zip_code +')'}
       >
         <span><span>{sp.name}</span></span>
@@ -76,6 +84,10 @@ export default class JourneyPatterns extends Component {
     )
   }
 
+  hasFeature(key) {
+    return this.props.status.features[key]
+  }
+
   render() {
     this.previousCity = undefined
 
@@ -121,7 +133,7 @@ export default class JourneyPatterns extends Component {
                 {this.props.stopPointsList.map((sp, i) =>{
                   return (
                     <div key={i} className={'td' + (this.hasFeature('costs_in_journey_patterns') ? ' with-costs' : '')}>
-                      {this.cityNameChecker(sp)}
+                      {this.stopPointHeader(sp)}
                     </div>
                   )
                 })}
@@ -139,6 +151,7 @@ export default class JourneyPatterns extends Component {
                       onUpdateJourneyPatternCosts={(costs) => this.props.onUpdateJourneyPatternCosts(index, costs)}
                       status= {this.props.status}
                       editMode= {this.props.editMode}
+                      journeyPatterns= {this}
                       />
                   )}
                 </div>
diff --git a/app/javascript/vehicle_journeys/components/VehicleJourneys.js b/app/javascript/vehicle_journeys/components/VehicleJourneys.js
index 5a7f13028..3f5a51093 100644
--- a/app/javascript/vehicle_journeys/components/VehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/components/VehicleJourneys.js
@@ -67,11 +67,11 @@ export default class VehicleJourneys extends Component {
     let index = this.stopPointsIds.indexOf(object_id)
     let sp = this.props.stopPointsList[index]
     let previousBreakpoint = this.props.stopPointsList[index - 1]
-    if(previousBreakpoint && (sp[attribute_to_check] != previousBreakpoint[attribute_to_check])){
+    if(index == 0 || (sp[attribute_to_check] != previousBreakpoint[attribute_to_check])){
       showHeadline = true
       headline = this.hasFeature('long_distance_routes') ? sp.country_name : sp.city_name
     }
-    return showHeadline ? headline : null
+    return showHeadline ? headline : ""
   }
 
   stopPointHeader(sp) {
diff --git a/spec/javascript/journey_patterns/components/JourneyPatterns_spec.js b/spec/javascript/journey_patterns/components/JourneyPatterns_spec.js
new file mode 100644
index 000000000..0c852deff
--- /dev/null
+++ b/spec/javascript/journey_patterns/components/JourneyPatterns_spec.js
@@ -0,0 +1,77 @@
+import React, { Component } from 'react'
+import JourneyPatterns from '../../../../app/javascript/journey_patterns/components/JourneyPatterns'
+import renderer from 'react-test-renderer'
+
+describe('stopPointHeader', () => {
+  set('features', () => {
+    return {}
+  })
+  set('component', () => {
+    let props = {
+      status: {
+        features: features
+      },
+      onCheckboxChange: ()=>{},
+      onLoadFirstPage: ()=>{},
+      onOpenEditModal: ()=>{},
+      stopPointsList: [stop_point, same_city_stop_point, other_country_stop_point],
+      journeyPatterns: []
+    }
+    let list = renderer.create(
+      <JourneyPatterns
+        status={props.status}
+        journeyPatterns={props.journeyPatterns}
+        stopPointsList={props.stopPointsList}
+        onCheckboxChange={props.onCheckboxChange}
+        onLoadFirstPage={props.onLoadFirstPage}
+        onOpenEditModal={props.onOpenEditModal}
+      />
+    ).toJSON()
+
+    return list
+  })
+
+  set('stop_point', () => {
+    return {
+      name: "Stop point",
+      city_name: "City Name",
+      zip_code: "12345",
+      country_code: "FR",
+      country_name: "france",
+      object_id: "sp-FR"
+    }
+  })
+
+  set('same_city_stop_point', () => {
+    return {
+      name: "Antother stop point",
+      city_name: stop_point.city_name,
+      zip_code: stop_point.zip_code,
+      country_code: stop_point.country_code,
+      country_name: stop_point.country_name,
+      object_id: stop_point.object_id + "-2"
+    }
+  })
+
+  set('other_country_stop_point', () => {
+    return {
+      name: "Antother stop point",
+      city_name: "New York",
+      zip_code: "232323",
+      country_code: "US",
+      country_name: "USA",
+      object_id: "sp-USA"
+    }
+  })
+  it('should display the city name', () => {
+    expect(component).toMatchSnapshot()
+  })
+  context('with the "long_distance_routes" feature', () => {
+    set('features', () => {
+      return { long_distance_routes: true }
+    })
+    it('should display the country name', () => {
+      expect(component).toMatchSnapshot()
+    })
+  })
+})
diff --git a/spec/javascript/journey_patterns/components/__snapshots__/JourneyPatterns_spec.js.snap b/spec/javascript/journey_patterns/components/__snapshots__/JourneyPatterns_spec.js.snap
new file mode 100644
index 000000000..90b8cb656
--- /dev/null
+++ b/spec/javascript/journey_patterns/components/__snapshots__/JourneyPatterns_spec.js.snap
@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`stopPointHeader should display the city name 1`] = `
+<div
+  className="row"
+>
+  <div
+    className="col-lg-12"
+  >
+    <div
+      className="table table-2entries mt-sm mb-sm no_result"
+    >
+      <div
+        className="t2e-head w20"
+      >
+        <div
+          className="th"
+        >
+          <div
+            className="strong mb-xs"
+          >
+            ID Mission
+          </div>
+          <div>
+            Code mission
+          </div>
+          <div>
+            Nb arrêts
+          </div>
+        </div>
+        <div
+          className="td"
+        >
+          <div
+            className="headlined"
+            data-headline="City Name"
+            title="City Name (12345)"
+          >
+            <span>
+              <span>
+                Stop point
+              </span>
+            </span>
+          </div>
+        </div>
+        <div
+          className="td"
+        >
+          <div
+            className="headlined"
+            data-headline="City Name"
+            title="City Name (12345)"
+          >
+            <span>
+              <span>
+                Antother stop point
+              </span>
+            </span>
+          </div>
+        </div>
+        <div
+          className="td"
+        >
+          <div
+            className="headlined"
+            data-headline="City Name"
+            title="New York (232323)"
+          >
+            <span>
+              <span>
+                Antother stop point
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        className="t2e-item-list w80"
+      >
+        <div />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`stopPointHeader with the "long_distance_routes" feature should display the country name 1`] = `
+<div
+  className="row"
+>
+  <div
+    className="col-lg-12"
+  >
+    <div
+      className="table table-2entries mt-sm mb-sm no_result"
+    >
+      <div
+        className="t2e-head w20"
+      >
+        <div
+          className="th"
+        >
+          <div
+            className="strong mb-xs"
+          >
+            ID Mission
+          </div>
+          <div>
+            Code mission
+          </div>
+          <div>
+            Nb arrêts
+          </div>
+        </div>
+        <div
+          className="td"
+        >
+          <div
+            className="headlined"
+            data-headline="france"
+            title="City Name (12345)"
+          >
+            <span>
+              <span>
+                Stop point
+              </span>
+            </span>
+          </div>
+        </div>
+        <div
+          className="td"
+        >
+          <div
+            className="headlined"
+            data-headline="france"
+            title="City Name (12345)"
+          >
+            <span>
+              <span>
+                Antother stop point
+              </span>
+            </span>
+          </div>
+        </div>
+        <div
+          className="td"
+        >
+          <div
+            className="headlined"
+            data-headline="france"
+            title="New York (232323)"
+          >
+            <span>
+              <span>
+                Antother stop point
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        className="t2e-item-list w80"
+      >
+        <div />
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/spec/javascript/vehicle_journeys/components/VehicleJourneys_spec.js b/spec/javascript/vehicle_journeys/components/VehicleJourneys_spec.js
index 17e9579d2..87151c64b 100644
--- a/spec/javascript/vehicle_journeys/components/VehicleJourneys_spec.js
+++ b/spec/javascript/vehicle_journeys/components/VehicleJourneys_spec.js
@@ -40,7 +40,8 @@ describe('stopPointHeader', () => {
       city_name: "City Name",
       zip_code: "12345",
       country_code: "FR",
-      country_name: "france"
+      country_name: "france",
+      object_id: "sp-FR"
     }
   })
 
@@ -50,7 +51,8 @@ describe('stopPointHeader', () => {
       city_name: stop_point.city_name,
       zip_code: stop_point.zip_code,
       country_code: stop_point.country_code,
-      country_name: stop_point.country_name
+      country_name: stop_point.country_name,
+      object_id: stop_point.object_id + "-2"
     }
   })
 
@@ -60,7 +62,8 @@ describe('stopPointHeader', () => {
       city_name: "New York",
       zip_code: "232323",
       country_code: "US",
-      country_name: "USA"
+      country_name: "USA",
+      object_id: "sp-USA"
     }
   })
   it('should display the city name', () => {
diff --git a/spec/javascript/vehicle_journeys/components/__snapshots__/VehicleJourneys_spec.js.snap b/spec/javascript/vehicle_journeys/components/__snapshots__/VehicleJourneys_spec.js.snap
index 0af57e586..703f727d7 100644
--- a/spec/javascript/vehicle_journeys/components/__snapshots__/VehicleJourneys_spec.js.snap
+++ b/spec/javascript/vehicle_journeys/components/__snapshots__/VehicleJourneys_spec.js.snap
@@ -22,9 +22,15 @@ exports[`stopPointHeader should display the city name 1`] = `
             ID course
           </div>
           <div>
+            Nom course
+          </div>
+          <div>
             ID mission
           </div>
           <div>
+            Transporteur
+          </div>
+          <div>
             Calendriers
           </div>
         </div>
@@ -106,9 +112,15 @@ exports[`stopPointHeader with the "long_distance_routes" feature should display
             ID course
           </div>
           <div>
+            Nom course
+          </div>
+          <div>
             ID mission
           </div>
           <div>
+            Transporteur
+          </div>
+          <div>
             Calendriers
           </div>
         </div>