Add the possibility to add included days in a period

15 files changed, 300 insertions, 86 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:
diff --git a/app/assets/stylesheets/modules/_timetables.sass b/app/assets/stylesheets/modules/_timetables.sass
index 84f1af043..b06972ef9 100644
--- a/app/assets/stylesheets/modules/_timetables.sass
+++ b/app/assets/stylesheets/modules/_timetables.sass
@@ -85,11 +85,14 @@
         &:not(:last-child) > .td
           border-right: 2px solid $darkgrey
 
-      &.out_from_daytypes
-        background-image: linear-gradient(45deg, rgba($grey, 0.15) 0%, rgba($grey, 0.15) 49%, rgba($grey, 0.5) 50%, rgba($grey, 0.15) 51%, rgba($grey, 0.15) 99%, rgba($grey, 0.15) 100%)
-        background-size: 25px 25px
+      // &.out_from_daytypes
+      //   background-image: linear-gradient(45deg, rgba($grey, 0.15) 0%, rgba($grey, 0.15) 49%, rgba($grey, 0.5) 50%, rgba($grey, 0.15) 51%, rgba($grey, 0.15) 99%, rgba($grey, 0.15) 100%)
+      //   background-size: 25px 25px
 
       > .td
+        &.out_from_daytypes
+          background-image: linear-gradient(45deg, rgba($grey, 0.15) 0%, rgba($grey, 0.15) 49%, rgba($grey, 0.5) 50%, rgba($grey, 0.15) 51%, rgba($grey, 0.15) 99%, rgba($grey, 0.15) 100%)
+          background-size: 25px 25px
         &.in_periods
           background-color: rgba($gold, 0.5)
           border-left-color: rgba($gold, 0.5)
diff --git a/spec/javascripts/time_table/actions_spec.js b/spec/javascripts/time_table/actions_spec.js
index f32e93327..bd6f3b1aa 100644
--- a/spec/javascripts/time_table/actions_spec.js
+++ b/spec/javascripts/time_table/actions_spec.js
@@ -169,28 +169,52 @@ describe('actions', () => {
     expect(actions.validatePeriodForm(modalProps, timeTablePeriods, metas, timetableInDates)).toEqual(expectedAction)
   })
 
-  it('should create an action to include date in period', () => {
+  it('should create an action to add an included date', () => {
     let index = 1
     let date = actions.formatDate(new Date)
     const expectedAction = {
-      type: 'INCLUDE_DATE_IN_PERIOD',
+      type: 'ADD_INCLUDED_DATE',
       index,
       dayTypes,
       date
     }
-    expect(actions.includeDateInPeriod(index, dayTypes, date)).toEqual(expectedAction)
+    expect(actions.addIncludedDate(index, dayTypes, date)).toEqual(expectedAction)
   })
 
-  it('should create an action to exclude date from period', () => {
+  it('should create an action to remove an included dat', () => {
     let index = 1
     let date = actions.formatDate(new Date)
     const expectedAction = {
-      type: 'EXCLUDE_DATE_FROM_PERIOD',
+      type: 'REMOVE_INCLUDED_DATE',
       index,
       dayTypes,
       date
     }
-    expect(actions.excludeDateFromPeriod(index, dayTypes, date)).toEqual(expectedAction)
+    expect(actions.removeIncludedDate(index, dayTypes, date)).toEqual(expectedAction)
+  })
+
+  it('should create an action to add an excluded date in period', () => {
+    let index = 1
+    let date = actions.formatDate(new Date)
+    const expectedAction = {
+      type: 'ADD_EXCLUDED_DATE',
+      index,
+      dayTypes,
+      date
+    }
+    expect(actions.addExcludedDate(index, dayTypes, date)).toEqual(expectedAction)
+  })
+
+  it('should create an action to remove an excluded date from period', () => {
+    let index = 1
+    let date = actions.formatDate(new Date)
+    const expectedAction = {
+      type: 'REMOVE_EXCLUDED_DATE',
+      index,
+      dayTypes,
+      date
+    }
+    expect(actions.removeExcludedDate(index, dayTypes, date)).toEqual(expectedAction)
   })
 
   it('should create an action to open confirm modal', () => {
diff --git a/spec/javascripts/time_table/reducers/modal_spec.js b/spec/javascripts/time_table/reducers/modal_spec.js
index 160f3955f..9e8220a51 100644
--- a/spec/javascripts/time_table/reducers/modal_spec.js
+++ b/spec/javascripts/time_table/reducers/modal_spec.js
@@ -171,12 +171,14 @@ describe('modal reducer', () => {
 
     let ttperiods = []
     let ttdates = []
+    let metas = []
 
     expect(
       modalReducer(state, {
         type: 'VALIDATE_PERIOD_FORM',
         modalProps : modProps,
         timeTablePeriods: ttperiods,
+        metas: metas,
         timetableInDates: ttdates
       })
     ).toEqual(Object.assign({}, state, {modalProps: newModalProps}))
@@ -287,9 +289,12 @@ describe('modal reducer', () => {
       index: false,
       error: ''
     }
-    let ttperiods3 = []
 
+    let ttperiods3 = []
     let ttdates3 = [{date: "2017-08-04", include_date: true}]
+    let metas = {
+      day_types: [true,true,true,true,true,true,true]
+    }
 
     let newModalProps3 = {
       active: true,
@@ -312,7 +317,8 @@ describe('modal reducer', () => {
         type: 'VALIDATE_PERIOD_FORM',
         modalProps : modProps3,
         timeTablePeriods: ttperiods3,
-        timetableInDates: ttdates3
+        timetableInDates: ttdates3,
+        metas: metas
       })
     ).toEqual(Object.assign({}, state3, {modalProps: newModalProps3}))
   })
diff --git a/spec/javascripts/time_table/reducers/pagination_spec.js b/spec/javascripts/time_table/reducers/pagination_spec.js
index 5da58427e..3c1edb9c5 100644
--- a/spec/javascripts/time_table/reducers/pagination_spec.js
+++ b/spec/javascripts/time_table/reducers/pagination_spec.js
@@ -76,20 +76,38 @@ describe('pagination reducer', () => {
     ).toEqual(Object.assign({}, state, {currentPage : page, stateChanged: false}))
   })
 
-  it('should handle INCLUDE_DATE_IN_PERIOD', () => {
+  it('should handle ADD_INCLUDED_DATE', () => {
     expect(
       paginationReducer(state, {
-        type: 'INCLUDE_DATE_IN_PERIOD'
+        type: 'ADD_INCLUDED_DATE'
       })
     ).toEqual(Object.assign({}, state, {stateChanged: true}))
   })
-  it('should handle EXCLUDE_DATE_FROM_PERIOD', () => {
+
+  it('should handle REMOVE_INCLUDED_DATE', () => {
+    expect(
+      paginationReducer(state, {
+        type: 'REMOVE_INCLUDED_DATE'
+      })
+    ).toEqual(Object.assign({}, state, {stateChanged: true}))
+  })
+
+  it('should handle ADD_EXCLUDED_DATE', () => {
     expect(
       paginationReducer(state, {
-        type: 'EXCLUDE_DATE_FROM_PERIOD'
+        type: 'ADD_EXCLUDED_DATE'
       })
     ).toEqual(Object.assign({}, state, {stateChanged: true}))
   })
+
+  it('should handle REMOVE_EXCLUDED_DATE', () => {
+    expect(
+      paginationReducer(state, {
+        type: 'REMOVE_EXCLUDED_DATE'
+      })
+    ).toEqual(Object.assign({}, state, {stateChanged: true}))
+  })
+
   it('should handle DELETE_PERIOD', () => {
     expect(
       paginationReducer(state, {
diff --git a/spec/javascripts/time_table/reducers/timetable_spec.js b/spec/javascripts/time_table/reducers/timetable_spec.js
index 805a29b5f..515efa4c8 100644
--- a/spec/javascripts/time_table/reducers/timetable_spec.js
+++ b/spec/javascripts/time_table/reducers/timetable_spec.js
@@ -12,8 +12,6 @@ let current_month = [{"day":"lundi","date":"2017-05-01","wday":1,"wnumber":"18",
 
 let newCurrentMonth = [{"day":"lundi","date":"2017-05-01","wday":1,"wnumber":"18","mday":1,"include_date":false,"excluded_date":false,"in_periods":true},{"day":"mardi","date":"2017-05-02","wday":2,"wnumber":"18","mday":2,"include_date":false,"excluded_date":false,"in_periods":true},{"day":"mercredi","date":"2017-05-03","wday":3,"wnumber":"18","mday":3,"include_date":false,"excluded_date":false,"in_periods":true},{"day":"jeudi","date":"2017-05-04","wday":4,"wnumber":"18","mday":4,"include_date":false,"excluded_date":false,"in_periods":true},{"day":"vendredi","date":"2017-05-05","wday":5,"wnumber":"18","mday":5,"include_date":false,"excluded_date":false,"in_periods":false},{"day":"samedi","date":"2017-05-06","wday":6,"wnumber":"18","mday":6,"include_date":false,"excluded_date":false,"in_periods":false},{"day":"dimanche","date":"2017-05-07","wday":0,"wnumber":"18","mday":7,"include_date":false,"excluded_date":false,"in_periods":false},{"day":"lundi","date":"2017-05-08","wday":1,"wnumber":"19","mday":8,"include_date":false,"excluded_date":false,"in_periods":false},{"day":"mardi","date":"2017-05-09","wday":2,"wnumber":"19","mday":9,"include_date":false,"excluded_date":false,"in_periods":false},{"day":"mercredi","date":"2017-05-10","wday":3,"wnumber":"19","mday":10,"include_date":false,"excluded_date":false,"in_periods":false},{"day":"jeudi","date":"2017-05-11","wday":4,"wnumber":"19","mday":11,"include_date":false,"excluded_date":false,"in_periods":false},{"day":"vendredi","date":"2017-05-12","wday":5,"wnumber":"19","mday":12,"include_date":false,"excluded_date":false,"in_periods":false},{"day":"samedi","date":"2017-05-13","wday":6,"wnumber":"19","mday":13,"include_date":false,"excluded_date":false,"in_periods":false},{"day":"dimanche","date":"2017-05-14","wday":0,"wnumber":"19","mday":14,"include_date":false,"excluded_date":false,"in_periods":true},{"day":"lundi","date":"2017-05-15","wday":1,"wnumber":"20","mday":15,"include_date":false,"excluded_date":false,"in_periods":true},{"day":"mardi","date":"2017-05-16","wday":2,"wnumber":"20","mday":16,"include_date":false,"excluded_date":false,"in_periods":true},{"day":"mercredi","date":"2017-05-17","wday":3,"wnumber":"20","mday":17,"include_date":false,"excluded_date":false,"in_periods":true},{"day":"jeudi","date":"2017-05-18","wday":4,"wnumber":"20","mday":18,"include_date":false,"excluded_date":false,"in_periods":true},{"day":"vendredi","date":"2017-05-19","wday":5,"wnumber":"20","mday":19,"include_date":false,"excluded_date":false,"in_periods":true},{"day":"samedi","date":"2017-05-20","wday":6,"wnumber":"20","mday":20,"include_date":false,"excluded_date":false,"in_periods":true},{"day":"dimanche","date":"2017-05-21","wday":0,"wnumber":"20","mday":21,"include_date":false,"excluded_date":false,"in_periods":true},{"day":"lundi","date":"2017-05-22","wday":1,"wnumber":"21","mday":22,"include_date":false,"excluded_date":false,"in_periods":true},{"day":"mardi","date":"2017-05-23","wday":2,"wnumber":"21","mday":23,"include_date":false,"excluded_date":false,"in_periods":true},{"day":"mercredi","date":"2017-05-24","wday":3,"wnumber":"21","mday":24,"include_date":false,"excluded_date":false,"in_periods":true},{"day":"jeudi","date":"2017-05-25","wday":4,"wnumber":"21","mday":25,"include_date":false,"excluded_date":false,"in_periods":false},{"day":"vendredi","date":"2017-05-26","wday":5,"wnumber":"21","mday":26,"include_date":false,"excluded_date":false,"in_periods":false},{"day":"samedi","date":"2017-05-27","wday":6,"wnumber":"21","mday":27,"include_date":false,"excluded_date":false,"in_periods":false},{"day":"dimanche","date":"2017-05-28","wday":0,"wnumber":"21","mday":28,"include_date":false,"excluded_date":false,"in_periods":false},{"day":"lundi","date":"2017-05-29","wday":1,"wnumber":"22","mday":29,"include_date":false,"excluded_date":false,"in_periods":false},{"day":"mardi","date":"2017-05-30","wday":2,"wnumber":"22","mday":30,"include_date":false,"excluded_date":false,"in_periods":false},{"day":"mercredi","date":"2017-05-31","wday":3,"wnumber":"22","mday":31,"include_date":false,"excluded_date":false,"in_periods":false}]
 
-let time_table_dates = []
-
 let json = {
   current_month: current_month,
   current_periode_range: current_periode_range,
@@ -46,7 +44,7 @@ describe('timetable reducer with empty state', () => {
       current_periode_range: current_periode_range,
       periode_range: periode_range,
       time_table_periods: time_table_periods,
-      time_table_dates: time_table_dates
+      time_table_dates: []
     }
     expect(
       timetableReducer(state, {
@@ -125,24 +123,46 @@ describe('timetable reducer with filled state', () => {
     ).toEqual(Object.assign({}, state, {current_periode_range: newPage}))
   })
 
-  it('should handle DELETE_PERIOD', () => {
-    state.time_table_periods[0].deleted = true
+  it('should handle DELETE_PERIOD and remove excluded days that were in period', () => {
+    state.time_table_dates.push({date: "2017-05-01", in_out: false})
+    state.current_month[0].excluded_date = true
+    state.time_table_periods[3].deleted = true
+
+    let begin = new Date(state.time_table_periods[3].period_start)
+    let end = new Date(state.time_table_periods[3].period_end)
+
+    let newState = Object.assign({}, state, {
+      time_table_dates: [],
+      current_month: state.current_month.map((d, i) => {
+        if (new Date(d.date) >=  begin && new Date(d.date) <= end) {
+          d.excluded_date = false
+          d.in_periods = false
+        }
+        return d
+      })
+    })
     expect(
       timetableReducer(state, {
         type: 'DELETE_PERIOD',
-        index: 0,
+        index: 3,
         dayTypes: arrDayTypes
       })
-    ).toEqual(state)
+    ).toEqual(newState)
   })
 
-  it('should handle INCLUDE_DATE_IN_PERIOD and add in_day if TT doesnt have it', () => {
+  it('should handle ADD_INCLUDED_DATE', () => {
     let newDates = state.time_table_dates.concat({date: "2017-05-05", in_out: true})
-    let newState = Object.assign({}, state, {time_table_dates: newDates})
-    state.current_month[4].include_date = true
+
+    let newCM = newCurrentMonth.map((d,i) => {
+      if (i == 4) d.include_date = true
+      return d
+    })
+
+    let newState = Object.assign({}, state, {time_table_dates: newDates, current_month: newCM})
+
     expect(
       timetableReducer(state, {
-        type: 'INCLUDE_DATE_IN_PERIOD',
+        type: 'ADD_INCLUDED_DATE',
         index: 4,
         dayTypes: arrDayTypes,
         date: "2017-05-05"
@@ -150,13 +170,20 @@ describe('timetable reducer with filled state', () => {
     ).toEqual(newState)
   })
 
-  it('should handle INCLUDE_DATE_IN_PERIOD and remove in_day if TT has it', () => {
+  it('should handle REMOVE_INCLUDED_DATE', () => {
     state.current_month[4].include_date = true
     state.time_table_dates.push({date: "2017-05-05", in_out: true})
-    let newState = Object.assign({}, state, {time_table_dates: []})
+
+    let newCM = newCurrentMonth.map((d,i) => {
+      if (i == 4) d.include_date = false
+      return d
+    })
+
+    let newDates = state.time_table_dates.filter(d => d.date != "2017-05-05" && d.in_out != true )
+    let newState = Object.assign({}, state, {time_table_dates: newDates, current_month: newCM})
     expect(
       timetableReducer(state, {
-        type: 'INCLUDE_DATE_IN_PERIOD',
+        type: 'REMOVE_INCLUDED_DATE',
         index: 4,
         dayTypes: arrDayTypes,
         date: "2017-05-05"
@@ -164,13 +191,19 @@ describe('timetable reducer with filled state', () => {
     ).toEqual(newState)
   })
 
-  it('should handle EXCLUDE_DATE_FROM_PERIOD and add out_day if TT doesnt have it', () => {
+  it('should handle ADD_EXCLUDED_DATE', () => {
     let newDates = state.time_table_dates.concat({date: "2017-05-01", in_out: false})
-    let newState = Object.assign({}, state, {time_table_dates: newDates})
+
+    let newCM = newCurrentMonth.map((d,i) => {
+      if (i == 0) d.include_date = false
+      return d
+    })
+
+    let newState = Object.assign({}, state, {time_table_dates: newDates, current_month: newCM})
     state.current_month[0].excluded_date = true
     expect(
       timetableReducer(state, {
-        type: 'EXCLUDE_DATE_FROM_PERIOD',
+        type: 'ADD_EXCLUDED_DATE',
         index: 0,
         dayTypes: arrDayTypes,
         date: "2017-05-01"
@@ -178,7 +211,7 @@ describe('timetable reducer with filled state', () => {
     ).toEqual(newState)
   })
 
-  it('should handle EXCLUDE_DATE_FROM_PERIOD and remove out_day if TT has it', () => {
+  it('should handle REMOVE_EXCLUDED_DATE', () => {
     state.time_table_dates = [{date: "2017-05-01", in_out: false}]
     state.current_month[0].excluded_date = true
     let newState = Object.assign({}, state, {time_table_dates: []})
@@ -222,4 +255,53 @@ describe('timetable reducer with filled state', () => {
       })
     ).toEqual(newState)
   })
+
+  it('should handle VALIDATE_PERIOD_FORM and update period if modalProps index != false', () => {
+
+    let begin = new Date(state.time_table_periods[0].period_start)
+    let end = new Date(state.time_table_periods[0].period_end)
+    let newCM = newCurrentMonth.map((d) => {
+      if (new Date (d.date) >= begin && new Date(d.date) <= end) {
+        d.in_periods = false
+        d.excluded_date = false
+      }
+      return d
+    })
+
+    let newPeriods = state.time_table_periods.map( (p,i) => {
+        if (i == 0) {
+          p.period_start = "2018-05-15"
+          p.period_end = "2018-05-24"
+        }
+        return p
+    })
+    let newState = Object.assign({}, state, {time_table_periods: newPeriods})
+
+    let modalProps = {
+      active: false,
+      begin: {
+        day: '15',
+        month: '05',
+        year: '2018'
+      },
+      end: {
+        day: '24',
+        month: '05',
+        year: '2018'
+      },
+      error: '',
+      index: 0
+    }
+    expect(
+      timetableReducer(state, {
+        type: 'VALIDATE_PERIOD_FORM',
+        modalProps: modalProps,
+        timeTablePeriods: state.time_table_periods,
+        metas: {
+          day_types: arrDayTypes
+        },
+        timetableInDates: state.time_table_dates.filter(d => d.in_out == true)
+      })
+    ).toEqual(newState)
+  })
 })