Refs #2893: add select2 tag input and comment it for now

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

5 files changed, 111 insertions, 6 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 f2d065917..185a9eac9 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
@@ -26,7 +26,20 @@ const actions = {
     type: 'UPDATE_COLOR',
     color
   }),
-
+  select2Tags: (selectedTag) => ({
+    type: 'UPDATE_SELECT_TAG',
+    selectedItem: {
+      id: selectedTag.id,
+      name: selectedTag.name
+    }
+  }),
+  unselect2Tags: (selectedTag) => ({
+    type: 'UPDATE_UNSELECT_TAG',
+    selectedItem: {
+      id: selectedTag.id,
+      name: selectedTag.name
+    }
+  }),
   fetchTimeTables: (dispatch, currentPage, nextPage) => {
     let urlJSON = window.location.pathname.split('/', 5).join('/') + '.json'
     let hasError = false
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 6fee6a590..ea47f56d3 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/Metas.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/Metas.js
@@ -1,8 +1,9 @@
 var React = require('react')
 var PropTypes = require('react').PropTypes
 let weekDays = ['D', 'L', 'Ma', 'Me', 'J', 'V', 'S']
+var TagsSelect2 = require('./TagsSelect2')
 
-const Metas = ({metas, onUpdateDayTypes, onUpdateComment, onUpdateColor}) => {
+const Metas = ({metas, onUpdateDayTypes, onUpdateComment, onUpdateColor, onSelect2Tags, onUnselect2Tags}) => {
   let colorList = ["", "#9B9B9B", "#FFA070", "#C67300", "#7F551B", "#41CCE3", "#09B09C", "#3655D7",   "#6321A0", "#E796C6", "#DD2DAA"]
   return (
     <div className="row">
@@ -71,14 +72,18 @@ const Metas = ({metas, onUpdateDayTypes, onUpdateComment, onUpdateColor}) => {
               </div>
 
               {/* tags */}
-              <div className="form-group">
+              {/* <div className="form-group">
                 <label htmlFor="" className="control-label col-sm-4">Etiquettes</label>
                 <div className="col-sm-8">
-                  {/* Select2 to implement*/}
+                  <TagsSelect2
+                    tags={metas.tags}
+                    onSelect2Tags={(e) => onSelect2Tags(e)}
+                    onUnselect2Tags={(e) => onUnselect2Tags(e)}
+                  />
                   <input type="text" value='ton papa' className='form-control'/>
                 </div>
               </div>
-
+              */}
               {/* day_types */}
               <div className="form-group">
                 <label htmlFor="" className="control-label col-sm-4">
@@ -118,7 +123,9 @@ Metas.propTypes = {
   metas: PropTypes.object.isRequired,
   onUpdateDayTypes: PropTypes.func.isRequired,
   onUpdateColor: PropTypes.func.isRequired,
-  onUpdateColor: PropTypes.func.isRequired
+  onUpdateColor: PropTypes.func.isRequired,
+  onSelect2Tags: PropTypes.func.isRequired,
+  onUnselect2Tags: PropTypes.func.isRequired
 }
 
 module.exports = Metas
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/TagsSelect2.js b/app/assets/javascripts/es6_browserified/time_tables/components/TagsSelect2.js
new file mode 100644
index 000000000..16ebc250a
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/TagsSelect2.js
@@ -0,0 +1,73 @@
+var _ = require('lodash')
+var React = require('react')
+var PropTypes = require('react').PropTypes
+var Select2 = require('react-select2')
+
+// get JSON full path
+var origin = window.location.origin
+var path = window.location.pathname.split('/', 4).join('/')
+var _ = require('lodash')
+
+class TagsSelect2 extends React.Component{
+  constructor(props) {
+    super(props)
+  }
+
+  mapKeys(array){
+    return array.map((item) =>
+      _.mapKeys(item, (v, k) =>
+        ((k == 'name') ? 'text' : k)
+      )
+    )
+  }
+
+  render() {
+    return (
+      <Select2
+        value={(this.props.tags.length) ? _.map(this.props.tags, 'id') : undefined}
+        data={(this.props.tags.length) ? this.mapKeys(this.props.tags) : undefined}
+        onSelect={(e) => this.props.onSelect2Tags(e)}
+        onUnselect={(e) => setTimeout( () => this.props.onUnselect2Tags(e, 150))}
+        multiple={true}
+        ref='tags_id'
+        options={{
+          allowClear: true,
+          theme: 'bootstrap',
+          width: '100%',
+          placeholder: 'Cherchez un tag...',
+          ajax: {
+            url: origin + path + '/tags.json',
+            dataType: 'json',
+            delay: '500',
+            data: function(params) {
+              return {
+                tag: params.term,
+              };
+            },
+            processResults: function(data, params) {
+
+              return {
+                results: data.map(
+                  item => _.assign(
+                    {},
+                    item,
+                    {text: item.name}
+                  )
+                )
+              };
+            },
+            cache: true
+          },
+          minimumInputLength: 3,
+          templateResult: formatRepo
+        }}
+      />
+    )
+  }
+}
+
+const formatRepo = (props) => {
+  if(props.name) return props.name
+}
+
+module.exports = TagsSelect2
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 9dec42fc3..514ed2347 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/Metas.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/containers/Metas.js
@@ -18,6 +18,12 @@ const mapDispatchToProps = (dispatch) => {
     },
     onUpdateColor: (color) => {
       dispatch(actions.updateColor(color))
+    },
+    onSelect2Tags: (e) => {
+      dispatch(actions.select2Tags(e.params.data))
+    },
+    onUnselect2Tags: (e) => {
+      dispatch(actions.unselect2Tags(e.params.data))
     }
   }
 }
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 e75c89349..9bec92f17 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/metas.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/reducers/metas.js
@@ -18,6 +18,12 @@ const metas = (state = {}, action) => {
       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
   }