Add the possibility to add included days in a period

10 files changed, 134 insertions, 53 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 61667f5ab..7a1ba10ff 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
@@ -112,14 +112,26 @@ const actions = {
     metas,
     timetableInDates
   }),
-  includeDateInPeriod: (index, dayTypes, date) => ({
-    type: 'INCLUDE_DATE_IN_PERIOD',
+  addIncludedDate: (index, dayTypes, date) => ({
+    type: 'ADD_INCLUDED_DATE',
     index,
     dayTypes,
     date
   }),
-  excludeDateFromPeriod: (index, dayTypes, date) => ({
-    type: 'EXCLUDE_DATE_FROM_PERIOD',
+  removeIncludedDate: (index, dayTypes, date) => ({
+    type: 'REMOVE_INCLUDED_DATE',
+    index,
+    dayTypes,
+    date
+  }),
+  addExcludedDate: (index, dayTypes, date) => ({
+    type: 'ADD_EXCLUDED_DATE',
+    index,
+    dayTypes,
+    date
+  }),
+  removeExcludedDate: (index, dayTypes, date) => ({
+    type: 'REMOVE_EXCLUDED_DATE',
     index,
     dayTypes,
     date
@@ -187,12 +199,20 @@ const actions = {
       let bool = isInPeriod(state.current_month[i])
       return _.assign({}, state.current_month[i], {
         in_periods: bool,
-        include_date: bool ? false : state.current_month[i].include_date,
+        // include_date: bool ? false : state.current_month[i].include_date,
         excluded_date: !bool ? false : state.current_month[i].excluded_date
       })
     })
     return improvedCM
   },
+  updateExcludedDates: (period_start, period_end, dates) => {
+    // We remove excluded dates which was in the updated/deleted period
+    let begin = new Date(period_start)
+    let end = new Date(period_end)
+
+    return _.reject(dates, d => new Date(d.date) >= begin && new Date(d.date) <= end && d.in_out == false)
+
+  },
   checkConfirmModal: (event, callback, stateChanged, dispatch, metas, timetable) => {
     if(stateChanged){
       const error = actions.errorModalKey(timetable.time_table_periods, metas.day_types)
@@ -209,7 +229,7 @@ const actions = {
   formatDate: (props) => {
     return props.year + '-' + props.month + '-' + props.day
   },
-  checkErrorsInPeriods: (start, end, index, periods, days) => {
+  checkErrorsInPeriods: (start, end, index, periods) => {
     let error = ''
     start = new Date(start)
     end = new Date(end)
@@ -221,13 +241,13 @@ const actions = {
     })
     return error
   },
-  checkErrorsInDates: (start, end, in_days) => {
+  checkErrorsInDates: (start, end, in_days, dayTypes) => {
     let error = ''
     start = new Date(start)
     end = new Date(end)
 
     _.each(in_days, ({date}) => {
-      if (start <= new Date(date) && end >= new Date(date)) {
+      if (start <= new Date(date) && end >= new Date(date) && dayTypes[new Date(date).getDay()]) {
         error = 'Une période ne peut chevaucher une date dans un calendrier'
       }
     })
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/ExceptionsInDay.js b/app/assets/javascripts/es6_browserified/time_tables/components/ExceptionsInDay.js
index 4879e537f..80c2e4b7a 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/ExceptionsInDay.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/ExceptionsInDay.js
@@ -8,6 +8,15 @@ class ExceptionsInDay extends Component {
     super(props)
   }
 
+  handleClick() {
+    const {index, day, metas: {day_types} } = this.props
+    if (day.in_periods && day_types[day.wday]) {
+      day.excluded_date ? this.props.onRemoveExcludedDate(index, day_types, day.date) : this.props.onAddExcludedDate(index, day_types, day.date)
+    } else {
+      day.include_date ? this.props.onRemoveIncludedDate(index, day_types, day.date) : this.props.onAddIncludedDate(index, day_types, day.date)
+    }
+  }
+
   render() {
     {/* display add or remove link, only if true in daytypes */}
       {/* display add or remove link, according to context (presence in period, or not) */}
@@ -20,14 +29,14 @@ class ExceptionsInDay extends Component {
               data-actiontype='remove'
               onClick={(e) => {
                 $(e.currentTarget).toggleClass('active')
-                this.props.onExcludeDateFromPeriod(this.props.index, this.props.metas.day_types, this.props.currentDate)
+                this.handleClick()
               }}
             >
               <span className='fa fa-times'></span>
             </button>
           </div>
         )
-      } else if(this.props.value.current_month[this.props.index].in_periods == false) {
+      } else {
         return (
           <div className='td'>
             <button
@@ -36,20 +45,21 @@ class ExceptionsInDay extends Component {
               data-actiontype='add'
               onClick={(e) => {
                 $(e.currentTarget).toggleClass('active')
-                this.props.onIncludeDateInPeriod(this.props.index, this.props.metas.day_types, this.props.currentDate)
+                this.handleClick()
               }}
             >
               <span className='fa fa-plus'></span>
             </button>
           </div>
         )
-      } else if(this.props.value.current_month[this.props.index].in_periods == true && this.props.blueDaytype == false){
-        return (
-          <div className='td'></div>
-        )
-      } else{
-        return false
-      }
+      // } else if(this.props.value.current_month[this.props.index].in_periods == true && this.props.blueDaytype == false){
+      //   return (
+      //     <div className='td'></div>
+      //   )
+      // } else{
+      //   return false
+      // }
+    }
   }
 }
 
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 ca44d3a07..f56509b99 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodsInDay.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/PeriodsInDay.js
@@ -35,7 +35,7 @@ class PeriodsInDay extends Component {
   render() {
     return (
       <div
-        className={this.isIn(this.props.currentDate)}
+        className={this.isIn(this.props.currentDate) + (this.props.metas.day_types[this.props.day.wday] || !this.props.day.in_periods ? '' : ' out_from_daytypes')}
       >
         {this.props.value.map((p, i) => {
           if(!p.deleted){
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 3af1a11a4..a613549c3 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
@@ -60,13 +60,14 @@ class Timetable extends Component{
                 {this.props.timetable.current_month.map((d, i) =>
                   <div
                     key={i}
-                    className={'td-group' + (this.props.metas.day_types[d.wday] || !d.in_periods ? '' : ' out_from_daytypes') + (d.wday == 0 ? ' last_wday' : '')}
+                    className={'td-group'+ (d.wday == 0 ? ' last_wday' : '')}
                   >
                     {/* day_types */}
-                    <div className="td"></div>
+                    <div className={"td" + (this.props.metas.day_types[d.wday] || !d.in_periods ? '' : ' out_from_daytypes') }></div>
 
                     {/* periods */}
                     <PeriodsInDay
+                      day={d}
                       index={i}
                       value={this.props.timetable.time_table_periods}
                       currentDate={this.currentDate(this.props.timetable.current_periode_range, d.mday)}
@@ -77,11 +78,16 @@ class Timetable extends Component{
 
                     {/* exceptions */}
                     <ExceptionsInDay
+                      day={d}
                       index={i}
                       value={this.props.timetable}
                       currentDate={d.date}
                       metas={this.props.metas}
                       blueDaytype={this.props.metas.day_types[d.wday]}
+                      onAddIncludedDate={this.props.onAddIncludedDate}
+                      onRemoveIncludedDate={this.props.onRemoveIncludedDate}
+                      onAddExcludedDate={this.props.onAddExcludedDate}
+                      onRemoveExcludedDate={this.props.onRemoveExcludedDate}
                       onExcludeDateFromPeriod={this.props.onExcludeDateFromPeriod}
                       onIncludeDateInPeriod={this.props.onIncludeDateInPeriod}
                     />
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 639a1e2ab..a37e99982 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/Timetable.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/containers/Timetable.js
@@ -15,6 +15,18 @@ const mapDispatchToProps = (dispatch) => {
     onDeletePeriod: (index, dayTypes) =>{
       dispatch(actions.deletePeriod(index, dayTypes))
     },
+    onAddIncludedDate: (index, dayTypes, date) => {
+      dispatch(actions.addIncludedDate(index, dayTypes, date))
+    },
+    onRemoveIncludedDate: (index, dayTypes, date) => {
+      dispatch(actions.removeIncludedDate(index, dayTypes, date))
+    },
+    onAddExcludedDate: (index, dayTypes, date) => {
+      dispatch(actions.addExcludedDate(index, dayTypes, date))
+    },
+    onRemoveExcludedDate: (index, dayTypes, date) => {
+      dispatch(actions.removeExcludedDate(index, dayTypes, date))
+    },
     onExcludeDateFromPeriod: (index, dayTypes, date) => {
       dispatch(actions.excludeDateFromPeriod(index, dayTypes, date))
     },
diff --git a/app/assets/javascripts/es6_browserified/time_tables/index.js b/app/assets/javascripts/es6_browserified/time_tables/index.js
index a91747991..9873f5532 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/index.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/index.js
@@ -6,10 +6,10 @@ var timeTablesApp = require('./reducers')
 var App = require('./containers/App')
 
 // logger, DO NOT REMOVE
-// var applyMiddleware = require('redux').applyMiddleware
-// var createLogger = require('redux-logger')
-// var thunkMiddleware = require('redux-thunk').default
-// var promise = require('redux-promise')
+var applyMiddleware = require('redux').applyMiddleware
+var createLogger = require('redux-logger')
+var thunkMiddleware = require('redux-thunk').default
+var promise = require('redux-promise')
 
 var initialState = {
   status: {
@@ -58,12 +58,12 @@ var initialState = {
     confirmModal: {}
   }
 }
-// const loggerMiddleware = createLogger()
+const loggerMiddleware = createLogger()
 
 let store = createStore(
   timeTablesApp,
   initialState,
-  // applyMiddleware(thunkMiddleware, promise, loggerMiddleware)
+  applyMiddleware(thunkMiddleware, promise, loggerMiddleware)
 )
 
 render(
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/metas.js b/app/assets/javascripts/es6_browserified/time_tables/reducers/metas.js
index 2ce084efd..ab5ed3d91 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/metas.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/reducers/metas.js
@@ -15,8 +15,10 @@ const metas = (state = {}, action) => {
     case 'RECEIVE_MONTH':
       let dt = (typeof state.day_types === 'string') ? actions.strToArrayDayTypes(state.day_types) : state.day_types
       return _.assign({}, state, {day_types: dt})
-    case 'INCLUDE_DATE_IN_PERIOD':
-    case 'EXCLUDE_DATE_FROM_PERIOD':
+    case 'ADD_INCLUDED_DATE':
+    case 'REMOVE_INCLUDED_DATE':
+    case 'ADD_EXCLUDED_DATE':
+    case 'REMOVE_EXCLUDED_DATE':
     case 'DELETE_PERIOD':
     case 'VALIDATE_PERIOD_FORM':
       return _.assign({}, state, {calendar: null})
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 3fe4e43a2..3329aa56f 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/modal.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/reducers/modal.js
@@ -66,7 +66,7 @@ const modal = (state = {}, action) => {
       let newPeriods = JSON.parse(JSON.stringify(action.timeTablePeriods))
       let newDays = JSON.parse(JSON.stringify(action.timetableInDates))
       let error = actions.checkErrorsInPeriods(period_start, period_end, action.modalProps.index, newPeriods)
-      if (error == '') error = actions.checkErrorsInDates(period_start, period_end, newDays)
+      if (error == '') error = actions.checkErrorsInDates(period_start, period_end, newDays, action.metas.day_types)
       newModalProps.error = error
       newModalProps.active = (error == '') ? false : true
       return _.assign({}, state, {modalProps: newModalProps})
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/pagination.js b/app/assets/javascripts/es6_browserified/time_tables/reducers/pagination.js
index 45fec6b5f..f38b124d9 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/pagination.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/reducers/pagination.js
@@ -20,8 +20,10 @@ const pagination = (state = {}, action) => {
     case 'CHANGE_PAGE':
       toggleOnConfirmModal()
       return _.assign({}, state, {currentPage : action.page, stateChanged: false})
-    case 'INCLUDE_DATE_IN_PERIOD':
-    case 'EXCLUDE_DATE_FROM_PERIOD':
+    case 'ADD_INCLUDED_DATE':
+    case 'REMOVE_INCLUDED_DATE':
+    case 'ADD_EXCLUDED_DATE':
+    case 'REMOVE_EXCLUDED_DATE':
     case 'DELETE_PERIOD':
     case 'VALIDATE_PERIOD_FORM':
     case 'UPDATE_COMMENT':
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/timetable.js b/app/assets/javascripts/es6_browserified/time_tables/reducers/timetable.js
index 64db1ccc1..cbdf8fa60 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/timetable.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/reducers/timetable.js
@@ -1,7 +1,9 @@
 const _ = require('lodash')
 var actions = require('../actions')
 let newState = {}
+let newPeriods = []
 let newDates = []
+let newCM = []
 
 const timetable = (state = {}, action) => {
   switch (action.type) {
@@ -11,7 +13,7 @@ const timetable = (state = {}, action) => {
         current_periode_range: action.json.current_periode_range,
         periode_range: action.json.periode_range,
         time_table_periods: action.json.time_table_periods,
-        time_table_dates: action.json.time_table_dates
+        time_table_dates: _.sortBy(action.json.time_table_dates, ['date'])
       })
       return _.assign({}, fetchedState, {current_month: actions.updateSynthesis(fetchedState, actions.strToArrayDayTypes(action.json.day_types))})
     case 'RECEIVE_MONTH':
@@ -31,33 +33,55 @@ const timetable = (state = {}, action) => {
       actions.fetchTimeTables(action.dispatch, action.page)
       return _.assign({}, state, {current_periode_range: action.page})
     case 'DELETE_PERIOD':
-      let ttperiods = state.time_table_periods.map((period, i) =>{
+      newPeriods = state.time_table_periods.map((period, i) =>{
         if(i == action.index){
           period.deleted = true
         }
         return period
       })
-      newState = _.assign({}, state, {time_table_periods : ttperiods})
+      let deletedPeriod = state.time_table_periods[action.index]
+      newDates = actions.updateExcludedDates(deletedPeriod.period_start, deletedPeriod.period_end, state.time_table_dates)
+      newState = _.assign({}, state, {time_table_periods : newPeriods, time_table_dates: newDates})
       return _.assign({}, newState, {current_month: actions.updateSynthesis(newState, action.dayTypes)})
-    case 'INCLUDE_DATE_IN_PERIOD':
-      newDates = actions.checkIfTTHasDate(state.time_table_dates, {date: action.date, in_out: true})
-      let newCMi = state.current_month.map((d, i) => {
-        if(i == action.index){
-          d.include_date = !d.include_date
+    case 'ADD_INCLUDED_DATE':
+      newDates = state.time_table_dates.concat({date: action.date, in_out: true})
+      newCM = state.current_month.map((d, i) => {
+        if (i == action.index){
+          d.include_date = true
         }
         return d
       })
-      newState = _.assign({}, state, {current_month: newCMi, time_table_dates: newDates})
+      newState = _.assign({}, state, {current_month: newCM, time_table_dates: newDates})
       return _.assign({}, newState, {current_month: actions.updateSynthesis(newState, action.dayTypes)})
-    case 'EXCLUDE_DATE_FROM_PERIOD':
-      newDates = actions.checkIfTTHasDate(state.time_table_dates, {date: action.date, in_out: false})
-      let newCMe = state.current_month.map((d, i) => {
-        if(i == action.index){
-          d.excluded_date = !d.excluded_date
+    case 'REMOVE_INCLUDED_DATE':
+      newDates = _.reject(state.time_table_dates, ['date', action.date])
+      newCM = state.current_month.map((d, i) => {
+        if (i == action.index){
+          d.include_date = false
+        }
+        return d
+      })
+      newState = _.assign({}, state, {current_month: newCM, time_table_dates: newDates})
+      return _.assign({}, newState, {current_month: actions.updateSynthesis(newState, action.dayTypes)})
+    case 'ADD_EXCLUDED_DATE':
+      newDates = state.time_table_dates.concat({date: action.date, in_out: false})
+      newCM = state.current_month.map((d, i) => {
+        if (i == action.index){
+          d.excluded_date = true
+        }
+        return d
+      })
+      newState = _.assign({}, state, {current_month: newCM, time_table_dates: newDates})
+      return _.assign({}, newState, {current_month: actions.updateSynthesis(newState, action.dayTypes)})
+    case 'REMOVE_EXCLUDED_DATE':
+      newDates = _.reject(state.time_table_dates, ['date', action.date])
+      newCM = state.current_month.map((d, i) => {
+        if (i == action.index){
+          d.excluded_date = false
         }
         return d
       })
-      newState = _.assign({}, state, {current_month: newCMe, time_table_dates: newDates})
+      newState = _.assign({}, state, {current_month: newCM, time_table_dates: newDates})
       return _.assign({}, newState, {current_month: actions.updateSynthesis(newState, action.dayTypes)})
     case 'UPDATE_CURRENT_MONTH_FROM_DAYTYPES':
       return _.assign({}, state, {current_month: actions.updateSynthesis(state, action.dayTypes)})
@@ -67,17 +91,20 @@ const timetable = (state = {}, action) => {
       if(new Date(period_end) <= new Date(period_start)){
         return state
       }
-      let newPeriods = JSON.parse(JSON.stringify(action.timeTablePeriods))
-      let newDays = JSON.parse(JSON.stringify(action.timetableInDates))
+      newPeriods = JSON.parse(JSON.stringify(action.timeTablePeriods))
+      let inDates = JSON.parse(JSON.stringify(action.timetableInDates))
       let error = actions.checkErrorsInPeriods(period_start, period_end, action.modalProps.index, newPeriods)
-      if (error == '') error = actions.checkErrorsInDates(period_start, period_end, newDays)
+      if (error == '') error = actions.checkErrorsInDates(period_start, period_end, inDates, action.metas.day_types)
 
       if(error != ''){
         return state
       }
+      let updatePeriod
       if (action.modalProps.index !== false){
-        newPeriods[action.modalProps.index].period_start = period_start
-        newPeriods[action.modalProps.index].period_end = period_end
+        updatePeriod = state.time_table_periods[action.modalProps.index]
+        updatePeriod.period_start = period_start
+        updatePeriod.period_end = period_end
+        newDates = actions.updateExcludedDates(updatePeriod.period_start, updatePeriod.period_end, state.time_table_dates)
       }else{
         let newPeriod = {
           period_start: period_start,
@@ -85,7 +112,9 @@ const timetable = (state = {}, action) => {
         }
         newPeriods.push(newPeriod)
       }
-      newState =_.assign({}, state, {time_table_periods: newPeriods})
+      
+      newDates = newDates || state.time_table_dates
+      newState =_.assign({}, state, {time_table_periods: newPeriods, time_table_dates: newDates})
       return _.assign({}, newState, {current_month: actions.updateSynthesis(newState, action.metas.day_types)})
 
     default: