Refs #2648: updating save component, moving button as layout sayed

9 files changed, 171 insertions, 38 deletions

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 9a1ceb546..59a578672 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
@@ -35,14 +35,17 @@ const JourneyPattern = (props) => {
           key={ i }
           className='td'
           >
-          <input
-            onChange = {(e) => props.onCheckboxChange(e)}
-            type='checkbox'
-            id={stopPoint.id}
-            checked={stopPoint.checked}
-            disabled={props.value.deletable ? 'disabled' : ''}
-            >
-          </input>
+          <span className='has_radio'>
+            <input
+              onChange = {(e) => props.onCheckboxChange(e)}
+              type='checkbox'
+              id={stopPoint.id}
+              checked={stopPoint.checked}
+              disabled={props.value.deletable ? 'disabled' : ''}
+              >
+            </input>
+            <span className='radio-label'></span>
+          </span>
         </div>
       )}
     </div>
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 c30ad76d6..9091e67cb 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(this.props.status.isFetching == false){
+    if(prevProps.status.isFetching == true){
       $('.table-2entries').each(function() {
         var refH = []
         var refCol = []
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/SaveJourneyPattern.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/SaveJourneyPattern.js
new file mode 100644
index 000000000..9da1af311
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/SaveJourneyPattern.js
@@ -0,0 +1,55 @@
+var React = require('react')
+var Component = require('react').Component
+var PropTypes = require('react').PropTypes
+var actions = require('../actions')
+
+class SaveJourneyPattern extends Component{
+  constructor(props){
+    super(props)
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if(prevProps.status.isFetching == true){
+      if($('.page-action').children('.formSubmitr').length > 0) {
+        $('.page-action').children('.formSubmitr').remove();
+      }
+      $('.formSubmitr').appendTo('.page-action');
+    }
+  }
+
+  render() {
+    if(this.props.status.isFetching == true) {
+      return false
+    }
+    if(this.props.status.fetchSuccess == true) {
+      return (
+        <div className='row mt-md'>
+          <div className='col-lg-12 text-right'>
+            <form className='jp_collection formSubmitr ml-xs' onSubmit={e => {e.preventDefault()}}>
+              <button
+                className='btn btn-default'
+                type='submit'
+                onClick={e => {
+                  e.preventDefault()
+                  actions.submitJourneyPattern(this.props.dispatch, this.props.journeyPatterns)
+                }}
+                >
+                Enregistrer
+              </button>
+            </form>
+          </div>
+        </div>
+      )
+    } else {
+      return false
+    }
+  }
+}
+
+SaveJourneyPattern.propTypes = {
+  journeyPatterns: PropTypes.array.isRequired,
+  status: PropTypes.object.isRequired,
+  page: PropTypes.number.isRequired
+}
+
+module.exports = SaveJourneyPattern
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/SaveJourneyPattern.js b/app/assets/javascripts/es6_browserified/journey_patterns/containers/SaveJourneyPattern.js
index 24ccdcd5a..33442c5a0 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/SaveJourneyPattern.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/SaveJourneyPattern.js
@@ -1,34 +1,7 @@
 var React = require('react')
 var connect = require('react-redux').connect
 var actions = require('../actions')
-
-let SaveJourneyPattern = ({ dispatch, journeyPatterns, page, status }) => {
-  if(status.isFetching == true) {
-    return false
-  }
-  if(status.fetchSuccess == true) {
-    return (
-      <div className='row mt-md'>
-        <div className='col-lg-12 text-right'>
-          <form className='jp_collection_submitr' onSubmit={e => {e.preventDefault()}}>
-            <button
-              className='btn btn-danger'
-              type='submit'
-              onClick={e => {
-                e.preventDefault()
-                actions.submitJourneyPattern(dispatch, journeyPatterns)
-              }}
-              >
-              Enregistrer
-            </button>
-          </form>
-        </div>
-      </div>
-    )
-  } else {
-    return false
-  }
-}
+var SaveJourneyPatternComponent = require('../components/SaveJourneyPattern')
 
 const mapStateToProps = (state) => {
   return {
@@ -38,6 +11,6 @@ const mapStateToProps = (state) => {
   }
 }
 
-SaveJourneyPattern = connect(mapStateToProps)(SaveJourneyPattern)
+const SaveJourneyPattern = connect(mapStateToProps)(SaveJourneyPatternComponent)
 
 module.exports = SaveJourneyPattern
diff --git a/app/assets/stylesheets/application.sass b/app/assets/stylesheets/application.sass
index 99e5b41bf..c2cee88c9 100644
--- a/app/assets/stylesheets/application.sass
+++ b/app/assets/stylesheets/application.sass
@@ -12,3 +12,4 @@
 
 @import 'components/*'
 @import 'modules/routes_stopoints'
+@import 'modules/jp_collection'
diff --git a/app/assets/stylesheets/base/_utilities.sass b/app/assets/stylesheets/base/_utilities.sass
index 4d68d2567..44477e862 100644
--- a/app/assets/stylesheets/base/_utilities.sass
+++ b/app/assets/stylesheets/base/_utilities.sass
@@ -20,6 +20,24 @@
 .mb-lg
   margin-bottom: 40px
 
+.ml-xs
+  margin-left: 10px
+.ml-sm
+  margin-left: 15px
+.ml-md
+  margin-left: 20px
+.ml-lg
+  margin-left: 40px
+
+.mr-xs
+  margin-right: 10px
+.mr-sm
+  margin-right: 15px
+.mr-md
+  margin-right: 20px
+.mr-lg
+  margin-right: 40px
+
 @for $i from 5 through 100
   .w#{$i}
     width: $i * 1%
diff --git a/app/assets/stylesheets/components/_forms.sass b/app/assets/stylesheets/components/_forms.sass
index f4894c46a..984b3097d 100644
--- a/app/assets/stylesheets/components/_forms.sass
+++ b/app/assets/stylesheets/components/_forms.sass
@@ -138,6 +138,40 @@ $cbx-size: 20px
     &[type='checkbox']:checked + label:before
       background-color: $blue
 
+// Radio
+.has_radio
+  position: relative
+  display: block
+  height: $cbx-size
+  width: $cbx-size
+  margin: 0 auto
+
+  > input[type='checkbox']
+    &:not(:checked), &:checked
+      position: absolute
+      z-index: 5
+      margin: 0
+      left: 0
+      top: 0
+      height: $cbx-size
+      width: $cbx-size
+      opacity: 0
+      cursor: pointer
+
+      + .radio-label
+        display: inline-block
+        position: relative
+        height: $cbx-size
+        width: $cbx-size
+        margin: 0
+        background-color: #fff
+        border: 2px solid $blue
+        border-radius: 50%
+        // cursor: pointer
+
+    &:checked + .radio-label
+      background-color: $blue
+
 // Switch
 .has_switch
   &.form-group
diff --git a/app/assets/stylesheets/components/_tables.sass b/app/assets/stylesheets/components/_tables.sass
index a7144ed9a..5080cb53f 100644
--- a/app/assets/stylesheets/components/_tables.sass
+++ b/app/assets/stylesheets/components/_tables.sass
@@ -153,3 +153,8 @@
 
       &:first-child
         border-left: none
+
+      .td
+        > .has_radio
+          top: 50%
+          margin-top: -10px
diff --git a/app/assets/stylesheets/modules/_jp_collection.sass b/app/assets/stylesheets/modules/_jp_collection.sass
new file mode 100644
index 000000000..a7aa5a0dc
--- /dev/null
+++ b/app/assets/stylesheets/modules/_jp_collection.sass
@@ -0,0 +1,44 @@
+//-----------------//
+//  JP Collection  //
+//-----------------//
+
+#journey_patterns
+  .table-2entries
+    .t2e-head
+      > .td
+        position: relative
+        padding-left: 25px
+
+        &:before
+          content: ''
+          display: block
+          width: 10px
+          height: 10px
+          background-color: #fff
+          border: 2px solid $blue
+          border-radius: 50%
+          position: absolute
+          z-index: 5
+          left: 5px
+          top: 50%
+          margin-top: -5px
+
+        &:after
+          content: ''
+          display: block
+          width: 4px
+          margin: 0 3px
+          background-color: rgba($grey, 0.5)
+          position: absolute
+          z-index: 3
+          top: 0
+          left: 5px
+          bottom: 0
+
+        &:last-child
+          &:after
+            bottom: 50%
+
+        &:nth-child(2)
+          &:after
+            top: 50%