Refs #3151: Add updatePeriodForm for select change in period form

Signed-off-by: Thomas Shawarma Haddad <thomas.haddad@af83.com>

5 files changed, 30 insertions, 16 deletions

diff --git a/app/assets/javascripts/es6_browserified/time_tables/actions/index.js b/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
index 5f19dd711..9723327ff 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
@@ -74,6 +74,12 @@ const actions = {
   closePeriodForm: () => ({
     type: 'CLOSE_PERIOD_FORM'
   }),
+  updatePeriodForm: (val, group, selectType) => ({
+    type: 'UPDATE_PERIOD_FORM',
+    val,
+    group,
+    selectType
+  }),
   monthName(strDate) {
     let monthList = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"]
     var date = new Date(strDate)
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodForm.js b/app/assets/javascripts/es6_browserified/time_tables/components/PeriodForm.js
index d53ccbd06..c450a39c5 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodForm.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/PeriodForm.js
@@ -5,7 +5,7 @@ let monthsArray = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juill
 const makeDaysOptions = (daySelected) => {
   let arr = []
   for(let i = 1; i < 32; i++) {
-    arr.push(<option key={i} selected={(i == daySelected) ? 'selected' : ''}>{i}</option>)
+    arr.push(<option key={i}>{i}</option>)
   }
   return arr
 }
@@ -13,7 +13,7 @@ const makeDaysOptions = (daySelected) => {
 const makeMonthsOptions = (monthSelected) => {
   let arr = []
   for(let i = 1; i < 13; i++) {
-    arr.push(<option key={i} selected={(i == monthSelected) ? 'selected' : ''}>{monthsArray[i - 1]}</option>)
+    arr.push(<option key={i}>{monthsArray[i - 1]}</option>)
   }
   return arr
 }
@@ -22,36 +22,36 @@ const makeYearsOptions = (yearSelected) => {
   let arr = []
   let startYear = new Date().getFullYear() - 3
   for(let i = startYear; i <= startYear + 6; i++) {
-    arr.push(<option key={i} selected={(i == yearSelected) ? 'selected' : ''}>{i}</option>)
+    arr.push(<option key={i}>{i}</option>)
   }
   return arr
 }
 
-const PeriodForm = ({modal, timetable, onOpenAddPeriodForm, onClosePeriodForm}) => (
+const PeriodForm = ({modal, timetable, onOpenAddPeriodForm, onClosePeriodForm, onUpdatePeriodForm}) => (
   <div>
     {modal.modalProps.active &&
       <div className="form-group date filter_menu-item">
         <label className="date required control-label" >Du <abbr title="Champ requis">*</abbr></label>
         <div className="form-inline">
-          <select value={modal.modalProps.begin.day} id="q_validity_period_begin_gteq_3i" className="date required form-control">
+          <select value={modal.modalProps.begin.day} onChange={(e) => onUpdatePeriodForm(e.currentTarget.value, 'begin', 'day')} id="q_validity_period_begin_gteq_3i" className="date required form-control">
             {makeDaysOptions(modal.modalProps.begin.day)}
           </select>
-          <select id="q_validity_period_begin_gteq_2i" className="date required form-control">
+          <select value={modal.modalProps.begin.month} onChange={(e) => onUpdatePeriodForm(e.currentTarget.value, 'begin', 'month')} id="q_validity_period_begin_gteq_2i" className="date required form-control">
             {makeMonthsOptions(modal.modalProps.begin.month)}
           </select>
-          <select id="q_validity_period_begin_gteq_1i" className="date required form-control">
+          <select value={modal.modalProps.begin.year} onChange={(e) => onUpdatePeriodForm(e.currentTarget.value, 'begin', 'year')} id="q_validity_period_begin_gteq_1i" className="date required form-control">
             {makeYearsOptions(modal.modalProps.begin.year)}
           </select>
         </div>
         <label className="date required control-label" >Au <abbr title="Champ requis">*</abbr></label>
         <div className="form-inline">
-          <select value={modal.modalProps.end.day} id="q_validity_period_end_gteq_3i" className="date required form-control">
+          <select value={modal.modalProps.end.day} onChange={(e) => onUpdatePeriodForm(e.currentTarget.value, 'end', 'day')} id="q_validity_period_end_gteq_3i" className="date required form-control">
             {makeDaysOptions(modal.modalProps.end.day)}
           </select>
-          <select id="q_validity_period_end_gteq_2i" className="date required form-control">
+          <select value={modal.modalProps.end.month} onChange={(e) => onUpdatePeriodForm(e.currentTarget.value, 'end', 'month')} id="q_validity_period_end_gteq_2i" className="date required form-control">
             {makeMonthsOptions(modal.modalProps.end.month)}
           </select>
-          <select id="q_validity_period_end_gteq_1i" className="date required form-control">
+          <select value={modal.modalProps.end.year} onChange={(e) => onUpdatePeriodForm(e.currentTarget.value, 'end', 'year')} id="q_validity_period_end_gteq_1i" className="date required form-control">
             {makeYearsOptions(modal.modalProps.end.year)}
           </select>
         </div>
@@ -79,6 +79,7 @@ PeriodForm.propTypes = {
   modal: PropTypes.object.isRequired,
   onOpenAddPeriodForm: PropTypes.func.isRequired,
   onClosePeriodForm: PropTypes.func.isRequired,
+  onUpdatePeriodForm: PropTypes.func.isRequired,
   timetable: PropTypes.object.isRequired
 }
 
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/PeriodForm.js b/app/assets/javascripts/es6_browserified/time_tables/containers/PeriodForm.js
index eab82414b..0a785c680 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/PeriodForm.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/containers/PeriodForm.js
@@ -16,6 +16,9 @@ const mapDispatchToProps = (dispatch) => {
     },
     onClosePeriodForm: () => {
       dispatch(actions.closePeriodForm())
+    },
+    onUpdatePeriodForm: (val, group, selectType) => {
+      dispatch(actions.updatePeriodForm(val, group, selectType))
     }
   }
 }
diff --git a/app/assets/javascripts/es6_browserified/time_tables/index.js b/app/assets/javascripts/es6_browserified/time_tables/index.js
index 1e6f08e1c..b5af45628 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/index.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/index.js
@@ -40,14 +40,14 @@ var initialState = {
     modalProps: {
       active: false,
       begin: {
-        day: '',
-        month: '',
-        year: ''
+        day: '1',
+        month: '1',
+        year: String(new Date().getFullYear())
       },
       end: {
-        day: '',
-        month: '',
-        year: ''
+        day: '1',
+        month: '1',
+        year: String(new Date().getFullYear())
       }
     },
     confirmModal: {}
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/modal.js b/app/assets/javascripts/es6_browserified/time_tables/reducers/modal.js
index 571b849f5..cb4219c1f 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/modal.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/reducers/modal.js
@@ -14,6 +14,10 @@ const modal = (state = {}, action) => {
     case 'OPEN_ADD_PERIOD_FORM':
       newModalProps = _.assign({}, state.modalProps, {active: true})
       return _.assign({}, state, {modalProps: newModalProps})
+    case 'UPDATE_PERIOD_FORM':
+      newModalProps = JSON.parse(JSON.stringify(state.modalProps))
+      newModalProps[action.group][action.selectType] = action.val
+      return _.assign({}, state, {modalProps: newModalProps})
     default:
       return state
   }