Refs: #4601 Fix bug to keep the routes stop points if validation dont pass

- Added functions to itineraries/form_helper to handle empty fields and modifiy input regarding the user input
- Update the stop point checker to not add the error span each time the user hit the form's submit button

3 files changed, 61 insertions, 22 deletions

diff --git a/app/assets/javascripts/es6_browserified/itineraries/form_helper.js b/app/assets/javascripts/es6_browserified/itineraries/form_helper.js
index 0baba27ef..f682e39c0 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/form_helper.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/form_helper.js
@@ -1,11 +1,55 @@
-const addInput = (name, value, index) => {
-  let form = document.querySelector('form')
-  let input = document.createElement('input')
-  let formatedName = 'route[stop_points_attributes]['+ index.toString()+']['+name+']'
-  input.setAttribute('type', 'hidden')
-  input.setAttribute('name', formatedName)
-  input.setAttribute('value', value)
-  form.appendChild(input)
+const formHelper = {
+  addInput: (name, value, index) => {
+    let form = document.querySelector('form')
+    let input = document.createElement('input')
+    let formatedName = `route[stop_points_attributes][${index.toString()}][${name}]`
+    input.setAttribute('type', 'hidden')
+    input.setAttribute('name', formatedName)
+    input.setAttribute('value', value)
+    form.appendChild(input)
+  }, 
+  addError: (ids) => {
+    ids.forEach((id) => {
+      if (!$(id).parents('.form-group').hasClass('has-error')) {
+        $(id).parents('.form-group').addClass('has-error')
+        $(id).parent().append(`<span class='help-block small'>${'doit être rempli(e)'}</span>`)
+      }
+    }) 
+  },
+  cleanInputs: (ids) => {
+    ids.forEach((id) =>{
+      $(id).parents('.form-group').removeClass('has-error')
+      $(id).siblings('span').remove()
+    })
+  },
+  handleForm: (...ids) => {
+    let filledInputs = []
+    let blankInputs = []
+    ids.forEach(id => {
+      $(id).val() == "" ? blankInputs.push(id) : filledInputs.push(id)
+    })
+    
+    if (filledInputs.length > 0) formHelper.cleanInputs(filledInputs)
+    if (blankInputs.length > 0) formHelper.addError(blankInputs)  
+  },
+  handleStopPoints: (event, state) => {
+    if (state.stopPoints.length >= 2) {
+      state.stopPoints.map((stopPoint, i) => {
+        formHelper.addInput('id', stopPoint.stoppoint_id ? stopPoint.stoppoint_id : '', i)
+        formHelper.addInput('stop_area_id', stopPoint.stoparea_id, i)
+        formHelper.addInput('position', i, i)
+        formHelper.addInput('for_boarding', stopPoint.for_boarding, i)
+        formHelper.addInput('for_alighting', stopPoint.for_alighting, i)
+      })
+    if ($('.alert.alert-danger').length > 0) $('.alert.alert-danger').remove()
+    } else {
+      event.preventDefault()
+      let msg = "L'itinéraire doit comporter au moins deux arrêts"
+      if ($('.alert.alert-danger').length == 0) {
+        $('#stop_points').find('.subform').after(`<div class='alert alert-danger'><span class='fa fa-lg fa-exclamation-circle'></span><span>" ${msg} "</span></div>`)
+      }
+    }
+  }
 }
 
-module.exports = addInput
+module.exports = formHelper
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/itineraries/index.js b/app/assets/javascripts/es6_browserified/itineraries/index.js
index ad32b9519..bb06126f7 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/index.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/index.js
@@ -4,7 +4,7 @@ var Provider = require('react-redux').Provider
 var createStore = require('redux').createStore
 var reducers = require('./reducers')
 var App = require('./components/App')
-var addInput = require('./form_helper')
+var { handleForm, handleStopPoints } = require('./form_helper')
 let datas = JSON.parse(decodeURIComponent(window.itinerary_stop))
 
 // logger, DO NOT REMOVE
@@ -67,17 +67,12 @@ render(
 document.querySelector('input[name=commit]').addEventListener('click', (event)=>{
   let state = store.getState()
 
-  if(state.stopPoints.length >= 2) {
-    state.stopPoints.map((stopPoint, i) => {
-      addInput('id', stopPoint.stoppoint_id ? stopPoint.stoppoint_id : '', i)
-      addInput('stop_area_id',stopPoint.stoparea_id, i)
-      addInput('position',i, i)
-      addInput('for_boarding',stopPoint.for_boarding, i)
-      addInput('for_alighting',stopPoint.for_alighting, i)
-    })
-  } else {
+  let name = $("#route_name").val()
+  let publicName = $("#route_published_name").val()
+  if (name == "" || publicName == "") {
     event.preventDefault()
-    let msg = "L'itinéraire doit comporter au moins deux arrêts"
-    $('#stop_points').find('.subform').after("<div class='alert alert-danger'><span class='fa fa-lg fa-exclamation-circle'></span><span>" + msg + "</span></div>")
+    handleForm("#route_name", "#route_published_name")
   }
+    
+  handleStopPoints(event, state)
 })
diff --git a/app/assets/javascripts/es6_browserified/itineraries/reducers/stopPoints.js b/app/assets/javascripts/es6_browserified/itineraries/reducers/stopPoints.js
index a3b8accb3..f3a26b8d7 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/reducers/stopPoints.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/reducers/stopPoints.js
@@ -1,5 +1,5 @@
 var _ = require('lodash')
-var addInput = require('../form_helper')
+var { addInput } = require('../form_helper')
 
 const stopPoint = (state = {}, action, length) => {
   switch (action.type) {