Refs #3151: Add open / close period form for tt

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

6 files changed, 145 insertions, 1 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 d54f1ba06..5f19dd711 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
@@ -68,6 +68,12 @@ const actions = {
     index,
     dayTypes
   }),
+  openAddPeriodForm: () => ({
+    type: 'OPEN_ADD_PERIOD_FORM'
+  }),
+  closePeriodForm: () => ({
+    type: 'CLOSE_PERIOD_FORM'
+  }),
   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
new file mode 100644
index 000000000..d53ccbd06
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/PeriodForm.js
@@ -0,0 +1,85 @@
+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 makeDaysOptions = (daySelected) => {
+  let arr = []
+  for(let i = 1; i < 32; i++) {
+    arr.push(<option key={i} selected={(i == daySelected) ? 'selected' : ''}>{i}</option>)
+  }
+  return arr
+}
+
+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>)
+  }
+  return arr
+}
+
+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>)
+  }
+  return arr
+}
+
+const PeriodForm = ({modal, timetable, onOpenAddPeriodForm, onClosePeriodForm}) => (
+  <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">
+            {makeDaysOptions(modal.modalProps.begin.day)}
+          </select>
+          <select 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">
+            {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">
+            {makeDaysOptions(modal.modalProps.end.day)}
+          </select>
+          <select 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">
+            {makeYearsOptions(modal.modalProps.end.year)}
+          </select>
+        </div>
+        <div>
+          <button
+            onClick={onClosePeriodForm}
+          >
+          Annuler
+          </button>
+          <button>Valider</button>
+        </div>
+      </div>
+    }
+    {!modal.modalProps.active &&
+      <button
+        onClick={onOpenAddPeriodForm}
+      >
+        Ajouter une période
+      </button>
+    }
+  </div>
+)
+
+PeriodForm.propTypes = {
+  modal: PropTypes.object.isRequired,
+  onOpenAddPeriodForm: PropTypes.func.isRequired,
+  onClosePeriodForm: PropTypes.func.isRequired,
+  timetable: PropTypes.object.isRequired
+}
+
+module.exports = PeriodForm
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/App.js b/app/assets/javascripts/es6_browserified/time_tables/containers/App.js
index 2d51e91fe..fede03aec 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/App.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/containers/App.js
@@ -5,6 +5,7 @@ var actions = require('../actions')
 var Metas = require('./Metas')
 var Timetable = require('./Timetable')
 var Navigate = require('./Navigate')
+var PeriodForm = require('./PeriodForm')
 
 class App extends Component {
   componentDidMount(){
@@ -17,6 +18,7 @@ class App extends Component {
         <Metas />
         <Navigate />
         <Timetable />
+        <PeriodForm />
       </div>
     )
   }
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/PeriodForm.js b/app/assets/javascripts/es6_browserified/time_tables/containers/PeriodForm.js
new file mode 100644
index 000000000..eab82414b
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/containers/PeriodForm.js
@@ -0,0 +1,25 @@
+var connect = require('react-redux').connect
+var PeriodFormComponent = require('../components/PeriodForm')
+var actions = require('../actions')
+
+const mapStateToProps = (state) => {
+  return {
+    modal: state.modal,
+    timetable: state.timetable
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onOpenAddPeriodForm: () => {
+      dispatch(actions.openAddPeriodForm())
+    },
+    onClosePeriodForm: () => {
+      dispatch(actions.closePeriodForm())
+    }
+  }
+}
+
+const PeriodForm = connect(mapStateToProps, mapDispatchToProps)(PeriodFormComponent)
+
+module.exports = PeriodForm
diff --git a/app/assets/javascripts/es6_browserified/time_tables/index.js b/app/assets/javascripts/es6_browserified/time_tables/index.js
index 7b279d9f9..1e6f08e1c 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/index.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/index.js
@@ -37,7 +37,19 @@ var initialState = {
   },
   modal: {
     type: '',
-    modalProps: {},
+    modalProps: {
+      active: false,
+      begin: {
+        day: '',
+        month: '',
+        year: ''
+      },
+      end: {
+        day: '',
+        month: '',
+        year: ''
+      }
+    },
     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 e011164c5..571b849f5 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/modal.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/reducers/modal.js
@@ -1,5 +1,19 @@
+var _ = require('lodash')
+let newModalProps = {}
+
 const modal = (state = {}, action) => {
   switch (action.type) {
+    case 'CLOSE_PERIOD_FORM':
+      let emptyDate = {
+        begin: '',
+        month: '',
+        year: ''
+      }
+      newModalProps = _.assign({}, state.modalProps, {active: false, begin: emptyDate, end: emptyDate})
+      return _.assign({}, state, {modalProps: newModalProps})
+    case 'OPEN_ADD_PERIOD_FORM':
+      newModalProps = _.assign({}, state.modalProps, {active: true})
+      return _.assign({}, state, {modalProps: newModalProps})
     default:
       return state
   }