Refs #2893: Add UPDATE_COLOR for tt metas

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

6 files changed, 36 insertions, 4 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 4dac1906a..f2d065917 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
@@ -22,6 +22,10 @@ const actions = {
     type: 'UPDATE_COMMENT',
     comment
   }),
+  updateColor: (color) => ({
+    type: 'UPDATE_COLOR',
+    color
+  }),
 
   fetchTimeTables: (dispatch, currentPage, nextPage) => {
     let urlJSON = window.location.pathname.split('/', 5).join('/') + '.json'
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/Metas.js b/app/assets/javascripts/es6_browserified/time_tables/components/Metas.js
index 3edc86ae0..6fee6a590 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/Metas.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/Metas.js
@@ -2,7 +2,7 @@ var React = require('react')
 var PropTypes = require('react').PropTypes
 let weekDays = ['D', 'L', 'Ma', 'Me', 'J', 'V', 'S']
 
-const Metas = ({metas, onUpdateDayTypes, onUpdateComment}) => {
+const Metas = ({metas, onUpdateDayTypes, onUpdateComment, onUpdateColor}) => {
   let colorList = ["", "#9B9B9B", "#FFA070", "#C67300", "#7F551B", "#41CCE3", "#09B09C", "#3655D7",   "#6321A0", "#E796C6", "#DD2DAA"]
   return (
     <div className="row">
@@ -40,14 +40,18 @@ const Metas = ({metas, onUpdateDayTypes, onUpdateComment}) => {
                       >
                       <span
                         className='fa fa-circle mr-xs'
-                        style={{color: metas.color}}
+                        style={{color: (metas.color == '')  ? 'transparent' : metas.color}}
                         ></span>
                       <span className='caret'></span>
                     </button>
 
                     <div className="form-group dropdown-menu" aria-labelledby='dpdwn_color'>
                       {colorList.map((c, i) =>
-                        <span className="radio" key={i}>
+                        <span
+                          className="radio"
+                          key={i}
+                          onClick={() => {onUpdateColor(c)}}
+                        >
                           <label htmlFor="">
                             <input
                               type='radio'
@@ -112,7 +116,9 @@ const Metas = ({metas, onUpdateDayTypes, onUpdateComment}) => {
 
 Metas.propTypes = {
   metas: PropTypes.object.isRequired,
-  onUpdateDayTypes: PropTypes.func.isRequired
+  onUpdateDayTypes: PropTypes.func.isRequired,
+  onUpdateColor: PropTypes.func.isRequired,
+  onUpdateColor: PropTypes.func.isRequired
 }
 
 module.exports = Metas
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/Metas.js b/app/assets/javascripts/es6_browserified/time_tables/containers/Metas.js
index 680150c01..9dec42fc3 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/Metas.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/containers/Metas.js
@@ -15,6 +15,9 @@ const mapDispatchToProps = (dispatch) => {
     },
     onUpdateComment: (comment) => {
       dispatch(actions.updateComment(comment))
+    },
+    onUpdateColor: (color) => {
+      dispatch(actions.updateColor(color))
     }
   }
 }
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 b2bd20ea1..e75c89349 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/metas.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/reducers/metas.js
@@ -16,6 +16,8 @@ const metas = (state = {}, action) => {
       return _.assign({}, state, {day_types: dayTypes})
     case 'UPDATE_COMMENT':
       return _.assign({}, state, {comment: action.comment})
+    case 'UPDATE_COLOR':
+      return _.assign({}, state, {color: action.color})
     default:
       return state
   }
diff --git a/spec/javascripts/time_table/actions_spec.js b/spec/javascripts/time_table/actions_spec.js
index 79aef0bd1..c628a0f57 100644
--- a/spec/javascripts/time_table/actions_spec.js
+++ b/spec/javascripts/time_table/actions_spec.js
@@ -16,4 +16,12 @@ describe('actions', () => {
     }
     expect(actions.updateComment('test')).toEqual(expectedAction)
   })
+
+  it('should create an action to update color', () => {
+    const expectedAction = {
+      type: 'UPDATE_COLOR',
+      color: '#ffffff'
+    }
+    expect(actions.updateColor('#ffffff')).toEqual(expectedAction)
+  })
 })
diff --git a/spec/javascripts/time_table/reducers/metas_spec.js b/spec/javascripts/time_table/reducers/metas_spec.js
index 6ca5c78b9..e3729dc2a 100644
--- a/spec/javascripts/time_table/reducers/metas_spec.js
+++ b/spec/javascripts/time_table/reducers/metas_spec.js
@@ -37,4 +37,13 @@ describe('status reducer', () => {
     ).toEqual(Object.assign({}, state, {comment: 'title'}))
   })
 
+  it('should handle UPDATE_COLOR', () => {
+    expect(
+      metasReducer(state, {
+        type: 'UPDATE_COLOR',
+        color: '#ffffff'
+      })
+    ).toEqual(Object.assign({}, state, {color: '#ffffff'}))
+  })
+
 })