Refs #3151: Add openEditFormPeriod

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

8 files changed, 41 insertions, 11 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 81d76cefa..0970e400d 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
@@ -71,6 +71,10 @@ const actions = {
   openAddPeriodForm: () => ({
     type: 'OPEN_ADD_PERIOD_FORM'
   }),
+  openEditPeriodForm: (period) => ({
+    type: 'OPEN_EDIT_PERIOD_FORM',
+    period
+  }),
   closePeriodForm: () => ({
     type: 'CLOSE_PERIOD_FORM'
   }),
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 c450a39c5..274429af8 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodForm.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/PeriodForm.js
@@ -2,10 +2,14 @@ var React = require('react')
 var PropTypes = require('react').PropTypes
 let monthsArray = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
 
+const formatNumber = (val) => {
+  return ("0" + val).slice(-2)
+}
+
 const makeDaysOptions = (daySelected) => {
   let arr = []
   for(let i = 1; i < 32; i++) {
-    arr.push(<option key={i}>{i}</option>)
+    arr.push(<option value={formatNumber(i)} key={i}>{formatNumber(i)}</option>)
   }
   return arr
 }
@@ -13,7 +17,7 @@ const makeDaysOptions = (daySelected) => {
 const makeMonthsOptions = (monthSelected) => {
   let arr = []
   for(let i = 1; i < 13; i++) {
-    arr.push(<option key={i}>{monthsArray[i - 1]}</option>)
+    arr.push(<option value={formatNumber(i)} key={i}>{monthsArray[i - 1]}</option>)
   }
   return arr
 }
@@ -33,10 +37,10 @@ const PeriodForm = ({modal, timetable, onOpenAddPeriodForm, onClosePeriodForm, o
       <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} onChange={(e) => onUpdatePeriodForm(e.currentTarget.value, 'begin', 'day')} id="q_validity_period_begin_gteq_3i" className="date required form-control">
+          <select value={formatNumber(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 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">
+          <select value={formatNumber(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 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">
@@ -45,10 +49,10 @@ const PeriodForm = ({modal, timetable, onOpenAddPeriodForm, onClosePeriodForm, o
         </div>
         <label className="date required control-label" >Au <abbr title="Champ requis">*</abbr></label>
         <div className="form-inline">
-          <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">
+          <select value={formatNumber(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 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">
+          <select value={formatNumber(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 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">
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodManager.js b/app/assets/javascripts/es6_browserified/time_tables/components/PeriodManager.js
index 0511734ba..bbda6b201 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodManager.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/PeriodManager.js
@@ -35,6 +35,7 @@ class PeriodManager extends Component {
             <li>
               <button
                 type='button'
+                onClick={() => this.props.onOpenEditPeriodForm(this.props.value)}
               >
                 Modifier
               </button>
@@ -57,7 +58,8 @@ class PeriodManager extends Component {
 
 PeriodManager.propTypes = {
   value: PropTypes.object.isRequired,
-  onDeletePeriod: PropTypes.func.isRequired
+  onDeletePeriod: PropTypes.func.isRequired,
+  onOpenEditPeriodForm: PropTypes.func.isRequired
 }
 
 module.exports = PeriodManager
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodsInDay.js b/app/assets/javascripts/es6_browserified/time_tables/components/PeriodsInDay.js
index 59409fc7d..93a8fe433 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodsInDay.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/PeriodsInDay.js
@@ -51,6 +51,7 @@ class PeriodsInDay extends Component {
                     index={i}
                     value={p}
                     onDeletePeriod={this.props.onDeletePeriod}
+                    onOpenEditPeriodForm={this.props.onOpenEditPeriodForm}
                     metas={this.props.metas}
                   />
                 )
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js b/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
index 4812578fc..65aae0e11 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
@@ -66,6 +66,7 @@ class Timetable extends Component{
                         value={this.props.timetable.time_table_periods}
                         currentDate={this.currentDate(this.props.timetable.current_periode_range, d.mday)}
                         onDeletePeriod={this.props.onDeletePeriod}
+                        onOpenEditPeriodForm={this.props.onOpenEditPeriodForm}
                         metas={this.props.metas}
                       />
 
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/Timetable.js b/app/assets/javascripts/es6_browserified/time_tables/containers/Timetable.js
index f4259b0e9..a5d3aa555 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/Timetable.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/containers/Timetable.js
@@ -20,6 +20,9 @@ const mapDispatchToProps = (dispatch) => {
     },
     onIncludeDateInPeriod: (index, day, dayTypes) => {
       dispatch(actions.includeDateInPeriod(index, day, dayTypes))
+    },
+    onOpenEditPeriodForm: (period) => {
+      dispatch(actions.openEditPeriodForm(period))
     }
   }
 }
diff --git a/app/assets/javascripts/es6_browserified/time_tables/index.js b/app/assets/javascripts/es6_browserified/time_tables/index.js
index b5af45628..69b7fdd7c 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/index.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/index.js
@@ -40,13 +40,13 @@ var initialState = {
     modalProps: {
       active: false,
       begin: {
-        day: '1',
-        month: '1',
+        day: '01',
+        month: '01',
         year: String(new Date().getFullYear())
       },
       end: {
-        day: '1',
-        month: '1',
+        day: '01',
+        month: '01',
         year: String(new Date().getFullYear())
       }
     },
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 cb4219c1f..a41f79d82 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/modal.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/reducers/modal.js
@@ -11,6 +11,21 @@ const modal = (state = {}, action) => {
       }
       newModalProps = _.assign({}, state.modalProps, {active: false, begin: emptyDate, end: emptyDate})
       return _.assign({}, state, {modalProps: newModalProps})
+    case 'OPEN_EDIT_PERIOD_FORM':
+      let period_start = action.period.period_start.split('-')
+      let period_end = action.period.period_end.split('-')
+      newModalProps = JSON.parse(JSON.stringify(state.modalProps))
+
+      newModalProps.begin.year = period_start[0]
+      newModalProps.begin.month = period_start[1]
+      newModalProps.begin.day = period_start[2]
+
+      newModalProps.end.year = period_end[0]
+      newModalProps.end.month = period_end[1]
+      newModalProps.end.day = period_end[2]
+
+      newModalProps.active = true
+      return _.assign({}, state, {modalProps: newModalProps})
     case 'OPEN_ADD_PERIOD_FORM':
       newModalProps = _.assign({}, state.modalProps, {active: true})
       return _.assign({}, state, {modalProps: newModalProps})