Add webpacker gem and migrate the React apps

6 files changed, 296 insertions, 0 deletions

diff --git a/app/javascript/time_tables/reducers/index.js b/app/javascript/time_tables/reducers/index.js
new file mode 100644
index 000000000..aed9035b5
--- /dev/null
+++ b/app/javascript/time_tables/reducers/index.js
@@ -0,0 +1,16 @@
+import { combineReducers } from 'redux'
+import status from './status'
+import pagination from './pagination'
+import modal from './modal'
+import timetable from './timetable'
+import metas from './metas'
+
+const timeTablesApp = combineReducers({
+  timetable,
+  metas,
+  status,
+  pagination,
+  modal
+})
+
+export default timeTablesApp
diff --git a/app/javascript/time_tables/reducers/metas.js b/app/javascript/time_tables/reducers/metas.js
new file mode 100644
index 000000000..548798012
--- /dev/null
+++ b/app/javascript/time_tables/reducers/metas.js
@@ -0,0 +1,40 @@
+import _ from 'lodash'
+import actions from '../actions'
+
+export default function metas(state = {}, action) {
+  switch (action.type) {
+    case 'RECEIVE_TIME_TABLES':
+      return _.assign({}, state, {
+        comment: action.json.comment,
+        day_types: actions.strToArrayDayTypes(action.json.day_types),
+        tags: action.json.tags,
+        initial_tags: action.json.tags,
+        color: action.json.color,
+        calendar: action.json.calendar ? action.json.calendar : null
+      })
+    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 '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})
+    case 'UPDATE_DAY_TYPES':
+      return _.assign({}, state, {day_types: action.dayTypes, calendar : null})
+    case 'UPDATE_COMMENT':
+      return _.assign({}, state, {comment: action.comment})
+    case 'UPDATE_COLOR':
+      return _.assign({}, state, {color: action.color})
+    case 'UPDATE_SELECT_TAG':
+      let tags = [...state.tags]
+      tags.push(action.selectedItem)
+      return _.assign({}, state, {tags: tags})
+    case 'UPDATE_UNSELECT_TAG':
+      return _.assign({}, state, {tags: _.filter(state.tags, (t) => (t.id != action.selectedItem.id))})
+    default:
+      return state
+  }
+}
\ No newline at end of file
diff --git a/app/javascript/time_tables/reducers/modal.js b/app/javascript/time_tables/reducers/modal.js
new file mode 100644
index 000000000..a530b2717
--- /dev/null
+++ b/app/javascript/time_tables/reducers/modal.js
@@ -0,0 +1,64 @@
+import _ from 'lodash'
+import actions from '../actions'
+
+let newModalProps = {}
+let emptyDate = {
+  day: '01',
+  month: '01',
+  year: String(new Date().getFullYear())
+}
+let period_start = '', period_end = ''
+
+export default function modal(state = {}, action) {
+  switch (action.type) {
+    case 'OPEN_CONFIRM_MODAL':
+      $('#ConfirmModal').modal('show')
+      return _.assign({}, state, {
+        type: 'confirm',
+        confirmModal: {
+          callback: action.callback,
+        }
+      })
+    case 'OPEN_ERROR_MODAL':
+      $('#ErrorModal').modal('show')
+      newModalProps = _.assign({}, state.modalProps, {error: action.error})
+      return _.assign({}, state, {type: 'error'}, {modalProps: newModalProps})
+    case 'RESET_MODAL_ERRORS':
+      newModalProps = _.assign({}, state.modalProps, {error: ''})
+      return _.assign({}, state, {type: ''}, {modalProps: newModalProps})
+    case 'CLOSE_PERIOD_FORM':
+      newModalProps = _.assign({}, state.modalProps, {active: false, error: ""})
+      return _.assign({}, state, {modalProps: newModalProps})
+    case 'OPEN_EDIT_PERIOD_FORM':
+      period_start = action.period.period_start.split('-')
+      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
+      newModalProps.index = action.index
+      newModalProps.error = ''
+      return _.assign({}, state, {modalProps: newModalProps})
+    case 'OPEN_ADD_PERIOD_FORM':
+      newModalProps = _.assign({}, state.modalProps, {active: true, begin: emptyDate, end: emptyDate, index: false, error: ''})
+      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})
+    case 'VALIDATE_PERIOD_FORM':
+      newModalProps = JSON.parse(JSON.stringify(state.modalProps))
+      newModalProps.error = action.error
+      newModalProps.active = (newModalProps.error == '') ? false : true
+      return _.assign({}, state, {modalProps: newModalProps})
+    default:
+      return state
+  }
+}
\ No newline at end of file
diff --git a/app/javascript/time_tables/reducers/pagination.js b/app/javascript/time_tables/reducers/pagination.js
new file mode 100644
index 000000000..e9ca9e1ec
--- /dev/null
+++ b/app/javascript/time_tables/reducers/pagination.js
@@ -0,0 +1,44 @@
+import _ from 'lodash'
+
+export default function pagination(state = {}, action) {
+  switch (action.type) {
+    case 'RECEIVE_TIME_TABLES':
+      return _.assign({}, state, {
+        currentPage: action.json.current_periode_range,
+        periode_range: action.json.periode_range,
+        stateChanged: false
+      })
+    case 'RECEIVE_MONTH':
+    case 'RECEIVE_ERRORS':
+      return _.assign({}, state, {stateChanged: false})
+    case 'GO_TO_PREVIOUS_PAGE':
+    case 'GO_TO_NEXT_PAGE':
+      let nextPage = action.nextPage ? 1 : -1
+      let newPage = action.pagination.periode_range[action.pagination.periode_range.indexOf(action.pagination.currentPage) + nextPage]
+      toggleOnConfirmModal()
+      return _.assign({}, state, {currentPage : newPage, stateChanged: false})
+    case 'CHANGE_PAGE':
+      toggleOnConfirmModal()
+      return _.assign({}, state, {currentPage : action.page, stateChanged: false})
+    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':
+    case 'UPDATE_COLOR':
+    case 'UPDATE_DAY_TYPES':
+    case 'UPDATE_CURRENT_MONTH_FROM_DAYTYPES':
+      toggleOnConfirmModal('modal')
+      return _.assign({}, state, {stateChanged: true})
+    default:
+      return state
+  }
+}
+
+const toggleOnConfirmModal = (arg = '') =>{
+  $('.confirm').each(function(){
+    $(this).data('toggle','')
+  })
+}
\ No newline at end of file
diff --git a/app/javascript/time_tables/reducers/status.js b/app/javascript/time_tables/reducers/status.js
new file mode 100644
index 000000000..8d93bc2e2
--- /dev/null
+++ b/app/javascript/time_tables/reducers/status.js
@@ -0,0 +1,15 @@
+import _ from 'lodash'
+
+export default function status(state = {}, action) {
+  switch (action.type) {
+    case 'UNAVAILABLE_SERVER':
+      return _.assign({}, state, {fetchSuccess: false})
+    case 'FETCH_API':
+      return _.assign({}, state, {isFetching: true})
+    case 'RECEIVE_TIME_TABLES':
+    case 'RECEIVE_MONTH':
+      return _.assign({}, state, {fetchSuccess: true, isFetching: false})
+    default:
+      return state
+  }
+}
\ No newline at end of file
diff --git a/app/javascript/time_tables/reducers/timetable.js b/app/javascript/time_tables/reducers/timetable.js
new file mode 100644
index 000000000..274153a69
--- /dev/null
+++ b/app/javascript/time_tables/reducers/timetable.js
@@ -0,0 +1,117 @@
+import _ from 'lodash'
+import actions from '../actions'
+let newState, newPeriods, newDates, newCM
+
+export default function timetable(state = {}, action) {
+  switch (action.type) {
+    case 'RECEIVE_TIME_TABLES':
+      let fetchedState = _.assign({}, state, {
+        current_month: action.json.current_month,
+        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: _.sortBy(action.json.time_table_dates, ['date'])
+      })
+      return _.assign({}, fetchedState, {current_month: actions.updateSynthesis(fetchedState)})
+    case 'RECEIVE_MONTH':
+      newState = _.assign({}, state, {
+        current_month: action.json.days
+      })
+      return _.assign({}, newState, {current_month: actions.updateSynthesis(newState)})
+    case 'GO_TO_PREVIOUS_PAGE':
+    case 'GO_TO_NEXT_PAGE':
+      let nextPage = action.nextPage ? 1 : -1
+      let newPage = action.pagination.periode_range[action.pagination.periode_range.indexOf(action.pagination.currentPage) + nextPage]
+      $('#ConfirmModal').modal('hide')
+      actions.fetchTimeTables(action.dispatch, newPage)
+      return _.assign({}, state, {current_periode_range: newPage})
+    case 'CHANGE_PAGE':
+      $('#ConfirmModal').modal('hide')
+      actions.fetchTimeTables(action.dispatch, action.page)
+      return _.assign({}, state, {current_periode_range: action.page})
+    case 'DELETE_PERIOD':
+      newPeriods = state.time_table_periods.map((period, i) =>{
+        if(i == action.index){
+          period.deleted = true
+        }
+        return period
+      })
+      let deletedPeriod = Array.of(state.time_table_periods[action.index])
+      newDates = _.reject(state.time_table_dates, d => actions.isInPeriod(deletedPeriod, d.date) && !d.in_out)
+      newState = _.assign({}, state, {time_table_periods : newPeriods, time_table_dates: newDates})
+      return _.assign({}, newState, { current_month: actions.updateSynthesis(newState)})
+    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
+      })
+      return _.assign({}, state, {current_month: newCM, time_table_dates: newDates})
+    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
+      })
+      return _.assign({}, state, {current_month: newCM, time_table_dates: newDates})
+    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
+      })
+      return _.assign({}, state, {current_month: newCM, time_table_dates: newDates})
+    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
+      })
+      return _.assign({}, state, {current_month: newCM, time_table_dates: newDates})
+    case 'UPDATE_DAY_TYPES':
+      // We get the week days of the activated day types to reject the out_dates that that are out of newDayTypes
+      let weekDays = _.reduce(action.dayTypes, (array, dt, i) => {
+        if (dt) array.push(i)
+        return array
+      }, [])
+
+      newDates =  _.reject(state.time_table_dates, (d) => {
+        let weekDay = new Date(d.date).getDay()
+
+        if (d.in_out) {
+          return actions.isInPeriod(state.time_table_periods, d.date) && weekDays.includes(weekDay)
+        } else {
+          return !weekDays.includes(weekDay)
+        }
+      })
+      return _.assign({}, state, {time_table_dates: newDates})
+    case 'UPDATE_CURRENT_MONTH_FROM_DAYTYPES':
+      return _.assign({}, state, {current_month: actions.updateSynthesis(state)})
+    case 'VALIDATE_PERIOD_FORM':
+      if (action.error != '') return state
+
+      let period_start = actions.formatDate(action.modalProps.begin)
+      let period_end = actions.formatDate(action.modalProps.end)
+
+      let newPeriods = JSON.parse(JSON.stringify(action.timeTablePeriods))
+
+      if (action.modalProps.index !== false){
+        let updatedPeriod = newPeriods[action.modalProps.index]
+        updatedPeriod.period_start = period_start
+        updatedPeriod.period_end = period_end
+        newDates = _.reject(state.time_table_dates, d => actions.isInPeriod(newPeriods, d.date) && !d.in_out)
+      }else{
+        let newPeriod = {
+          period_start: period_start,
+          period_end: period_end
+        }
+        newPeriods.push(newPeriod)
+      }
+      
+      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)})
+    default:
+      return state
+  }
+}
\ No newline at end of file