add select2 with reactux

6 files changed, 179 insertions, 70 deletions

diff --git a/app/assets/javascripts/es6_browserified/actions/index.js b/app/assets/javascripts/es6_browserified/actions/index.js
index c0f64005e..8967c0322 100644
--- a/app/assets/javascripts/es6_browserified/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/actions/index.js
@@ -1,25 +1,21 @@
 module.exports = {
-
   addStop : () => {
     return {
       type: 'ADD_STOP'
     }
   },
-
   moveStopUp : (index) => {
     return {
       type: 'MOVE_STOP_UP',
       index
     }
   },
-
   moveStopDown : (index) => {
     return {
       type: 'MOVE_STOP_DOWN',
       index
     }
   },
-
   deleteStop: (index) => {
     return {
       type: 'DELETE_STOP',
@@ -27,6 +23,7 @@ module.exports = {
     }
   },
   updateInputValue: (index, text) => {
+    console.log('action',index, text)
     return {
       type : "UPDATE_INPUT_VALUE",
       index,
diff --git a/app/assets/javascripts/es6_browserified/components/BSelect2.js b/app/assets/javascripts/es6_browserified/components/BSelect2.js
new file mode 100644
index 000000000..7e4782563
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/components/BSelect2.js
@@ -0,0 +1,96 @@
+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('/', 3).join('/')
+
+class BSelect3 extends React.Component{
+  constructor(props) {
+    super(props)
+    this.state = {
+      edit: false
+    }
+  }
+  onToggleEdit(e) {
+    e.preventDefault()
+    this.setState({edit: !this.state.edit})
+  }
+  onChange(e) {
+    console.log(e.currentTarget.value, e.currentTarget.textContent)
+    this.props.onChange(this.props.index, {text: e.currentTarget.textContent, id: e.currentTarget.value})
+    this.setState({edit: false})
+  }
+  render() {
+    if(this.state.edit)
+      return (
+        <div>
+          <BSelect2 {...this.props} onSelect={ this.onChange.bind(this) }/>
+        </div>
+      )
+    else
+      return (
+        <div>
+          <span
+            title="Cliquez pour changer l'arrêt"
+            style={{cursor: 'pointer', display: 'block'}}
+            onClick={this.onToggleEdit.bind(this)}
+          >
+            {this.props.value.text}
+          </span>
+        </div>
+      )
+  }
+}
+
+const BSelect2 = (props) => {
+  return (
+    <Select2
+      value={props.value.id}
+      onSelect={ props.onSelect }
+      options={{
+        placeholder: 'Sélectionnez un arrêt existant...',
+        theme: 'bootstrap',
+        ajax: {
+          url: origin + path + '/autocomplete_stop_areas.json',
+          dataType: 'json',
+          delay: '500',
+          data: function(params) {
+            return {
+              q: params.term
+            };
+          },
+          processResults: function(data, params) {
+            return {
+              results: data.map(
+                item => Object.assign(
+                  {},
+                  item,
+                  { text: item.name + ", " + item.zip_code + " " + item.short_city_name }
+                )
+              )
+            };
+          },
+          cache: true
+        },
+        minimumInputLength: 3,
+        templateResult: formatRepo
+      }}
+    />
+  )
+}
+
+// to fix: this is for custom results return
+const formatRepo = (props) => {
+  if(props.text) return props.text
+  // console.log(props)
+  // return (
+  //   <div>
+  //     {props.short_name}
+  //     <small><em>{props.zip_code} {props.short_city_name}</em></small>
+  //   </div>
+  // )
+}
+
+module.exports = BSelect3
diff --git a/app/assets/javascripts/es6_browserified/components/Todo.js b/app/assets/javascripts/es6_browserified/components/Todo.js
index aeee78295..0e74e728f 100644
--- a/app/assets/javascripts/es6_browserified/components/Todo.js
+++ b/app/assets/javascripts/es6_browserified/components/Todo.js
@@ -1,48 +1,52 @@
 var React = require('react')
 var PropTypes = require('react').PropTypes
+var BSelect2 = require('./BSelect2')
 
 const Container = {display: 'table',  width: '100%'}
 const firstBlock = {display: 'table-cell', verticalAlign: 'middle'}
 const secondBlock = {display: 'table-cell', verticalAlign: 'middle', width: '150px', textAlign: 'right'}
 
-const Todo = (props)  => (
-  <div className='list-group-item' style={Container}>
-    <div style={firstBlock}>
-      <div style={{display: 'inline-block', width: '9%'}}>
-        <span className='strong'>Id: {props.index}</span>
-      </div>
-      <div style={{display: 'inline-block', width: '91%'}}>
-        <input type='text' className='form-control' id={'route_stop_points_' + props.index} value={props.text} onChange={props.onChange}/>
-      </div>
-    </div>
-
-    <div style={secondBlock}>
-      <div className='btn-group btn-group-sm'>
-        <div className='btn btn-default'>
-          <span className='fa fa-times'></span>
-        </div>
-        <div
-          className={'btn btn-primary' + (props.first ? ' disabled' : '')}
-          onClick={props.onMoveUpClick}
-        >
-          <span className='fa fa-arrow-up'></span>
+const Todo = (props) => {
+  return (
+    <div className='list-group-item' style={Container}>
+      <div style={firstBlock}>
+        <div style={{display: 'inline-block', width: '9%', verticalAlign: 'middle'}}>
+          <span className='strong'>#{props.index}</span>
         </div>
-        <div
-          className={'btn btn-primary' + (props.last ? ' disabled' : '')}
-          onClick={props.onMoveDownClick}
-        >
-          <span className='fa fa-arrow-down'></span>
+
+        <div style={{display: 'inline-block', width: '91%', verticalAlign: 'middle'}}>
+          <BSelect2 id={'route_stop_points_' + props.id} value={props.value} onChange={props.onChange} index={props.index} defaultData={props.defaultData}/>
         </div>
-        <div
-          className='btn btn-danger'
-          onClick={props.onDeleteClick}
-        >
-          <span className='fa fa-trash'></span>
+      </div>
+
+      <div style={secondBlock}>
+        <div className='btn-group btn-group-sm'>
+          <div className='btn btn-default'>
+            <span className='fa fa-times'></span>
+          </div>
+          <div
+            className={'btn btn-primary' + (props.first ? ' disabled' : '')}
+            onClick={props.onMoveUpClick}
+          >
+            <span className='fa fa-arrow-up'></span>
+          </div>
+          <div
+            className={'btn btn-primary' + (props.last ? ' disabled' : '')}
+            onClick={props.onMoveDownClick}
+          >
+            <span className='fa fa-arrow-down'></span>
+          </div>
+          <div
+            className='btn btn-danger'
+            onClick={props.onDeleteClick}
+          >
+            <span className='fa fa-trash'></span>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-)
+  )
+}
 
 Todo.propTypes = {
   onDeleteClick: PropTypes.func.isRequired,
@@ -50,7 +54,9 @@ Todo.propTypes = {
   onMoveDownClick: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
   first: PropTypes.bool,
-  last: PropTypes.bool
+  last: PropTypes.bool,
+  index: PropTypes.number,
+  defaultData: PropTypes.array
 }
 
 module.exports = Todo
diff --git a/app/assets/javascripts/es6_browserified/components/TodoList.js b/app/assets/javascripts/es6_browserified/components/TodoList.js
index 768c691bb..367cfc256 100644
--- a/app/assets/javascripts/es6_browserified/components/TodoList.js
+++ b/app/assets/javascripts/es6_browserified/components/TodoList.js
@@ -2,27 +2,33 @@ var React = require('react')
 var PropTypes = require('react').PropTypes
 var Todo = require('./Todo')
 
-const TodoList = ({ todos, onDeleteClick, onMoveUpClick, onMoveDownClick, onChange }) => (
-  <div className='list-group'>
-    {todos.map((todo, index) =>
-      <Todo
-        key={'item-' + index}
-        {...todo}
-        onDeleteClick={() => onDeleteClick(index)}
-        onMoveUpClick={() => onMoveUpClick(index)}
-        onMoveDownClick={() => onMoveDownClick(index)}
-        onChange={(event) => onChange(index, event.currentTarget.value)}
-        first={ index === 0 }
-        last={ index === (todos.length - 1) }
-      />
-    )}
-  </div>
-)
+const TodoList = ({ todos, onDeleteClick, onMoveUpClick, onMoveDownClick, onChange }) => {
+  console.log(todos)
+  return (
+    <div className='list-group'>
+      {todos.map((todo, index) =>
+        <Todo
+          key={'item-' + index}
+          onDeleteClick={() => onDeleteClick(index)}
+          onMoveUpClick={() => {
+            console.log(index, todos)
+            onMoveUpClick(index)}
+          }
+          onMoveDownClick={() => onMoveDownClick(index)}
+          onChange={ onChange }
+          first={ index === 0 }
+          last={ index === (todos.length - 1) }
+          index={ index }
+          defaultData={ todos }
+          value={ todo }
+        />
+      )}
+    </div>
+  )
+}
 
 TodoList.propTypes = {
-  todos: PropTypes.arrayOf(PropTypes.shape({
-    index: PropTypes.number.isRequired,
-  }).isRequired).isRequired,
+  todos: PropTypes.array.isRequired,
   onDeleteClick: PropTypes.func.isRequired,
   onMoveUpClick: PropTypes.func.isRequired,
   onMoveDownClick: PropTypes.func.isRequired
diff --git a/app/assets/javascripts/es6_browserified/reducers/todos.js b/app/assets/javascripts/es6_browserified/reducers/todos.js
index d5a02f40a..bf64632bd 100644
--- a/app/assets/javascripts/es6_browserified/reducers/todos.js
+++ b/app/assets/javascripts/es6_browserified/reducers/todos.js
@@ -6,6 +6,7 @@ const todo = (state = {}, action, length) => {
         index: length
       }
     case 'UPDATE_INPUT_VALUE':
+      console.log('reducer', action)
       if (state.index !== action.index) {
         return state
       }
@@ -13,7 +14,7 @@ const todo = (state = {}, action, length) => {
       return Object.assign(
         {},
         state,
-        {text: action.text}
+        {text: action.text.text, id: action.text.id}
       )
     default:
       return state
@@ -28,8 +29,6 @@ const todos = (state = [], action) => {
         todo(undefined, action, state.length)
       ]
     case 'MOVE_STOP_UP':
-      state[action.index].index = state[action.index - 1].index
-      state[action.index - 1].index = state[action.index].index + 1
       return [
         ...state.slice(0, action.index - 1),
         state[action.index],
@@ -37,8 +36,6 @@ const todos = (state = [], action) => {
         ...state.slice(action.index + 1)
       ]
     case 'MOVE_STOP_DOWN':
-      state[action.index + 1].index = state[action.index].index
-      state[action.index].index = state[action.index + 1].index + 1
       return [
         ...state.slice(0, action.index),
         state[action.index + 1],
@@ -54,9 +51,10 @@ const todos = (state = [], action) => {
         })
       ]
     case 'UPDATE_INPUT_VALUE':
-      return state.map(t =>
-        todo(t, action)
-      )
+      return state.map((t, i) => (i === action.index) ? action.text : t)
+      // return state.map(t =>
+      //   todo(t, action)
+      // )
     default:
       return state
   }
diff --git a/app/assets/javascripts/es6_browserified/stop_points.js b/app/assets/javascripts/es6_browserified/stop_points.js
index 41c99c90f..9c0195f2b 100644
--- a/app/assets/javascripts/es6_browserified/stop_points.js
+++ b/app/assets/javascripts/es6_browserified/stop_points.js
@@ -13,14 +13,20 @@ const getInitialState = () => {
   let state = []
   let datas = JSON.parse(decodeURIComponent(window.itinerary_stop))
   for (let [index, value] of datas.entries()){
+
+    let fancyText = value.name
+    if(value.zip_code && value.city_name)
+      fancyText += ", " + value.zip_code + " " + value.city_name
+
     state.push({
-      index: index,
-      text: value.name,
+      id: value.id,
+      name: value.name,
       city_name: value.city_name,
-      zip_code: value.zip_code
+      zip_code: value.zip_code,
+      text: fancyText
     })
   }
-  console.log(state)
+  // console.log(state)
   return state
 }
 
@@ -32,7 +38,7 @@ let store = createStore(
   // applyMiddleware(thunkMiddleware, promise, loggerMiddleware)
 )
 
-console.log(store.getState())
+// console.log(store.getState())
 
 render(
   <Provider store={store}>