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

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

7 files changed, 113 insertions, 8 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
   }
diff --git a/app/views/time_tables/_form.html.slim b/app/views/time_tables/_form.html.slim
index 3b1a83682..39e3b4138 100644
--- a/app/views/time_tables/_form.html.slim
+++ b/app/views/time_tables/_form.html.slim
@@ -15,7 +15,7 @@
 
             = form.input :color, as: :radio_buttons, label: false, collection: ["", "#9B9B9B", "#FFA070", "#C67300", "#7F551B", "#41CCE3", "#09B09C", "#3655D7",   "#6321A0", "#E796C6", "#DD2DAA"], input_html: {class: 'color_selector'}, label_method: lambda{|c| ("<span class='fa fa-circle' style='color:" + (c.empty? ? 'transparent' : c) + "'></span>").html_safe}, wrapper_html: { class: 'dropdown-menu', 'aria-labelledby': "dropdownMenu1"}, include_blank: true
 
-      = form.input :tag_list, as: :tags
+      / = form.input :tag_list, as: :tags
 
       .form-group
         label.control-label.col-sm-4
diff --git a/app/views/time_tables/show.rabl b/app/views/time_tables/show.rabl
index 595d7ecad..a0a799985 100644
--- a/app/views/time_tables/show.rabl
+++ b/app/views/time_tables/show.rabl
@@ -4,7 +4,7 @@ attributes :id, :comment
 node do |tt|
   {
     time_table_bounding: tt.presenter.time_table_bounding,
-    tags: tt.tags.map(&:name),
+    tags: tt.tags.map{ |tag| {id: tag.id, name: tag.name}},
     day_types: %w(monday tuesday wednesday thursday friday saturday sunday).select{ |d| tt.send(d) }.map{ |d| tt.human_attribute_name(d).first(2)}.join(''),
     current_month: tt.month_inspect(Date.today),
     periode_range: month_periode_enum(3),