Refs #2521: add select2 in timetables editing (wip)

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

6 files changed, 102 insertions, 15 deletions

diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
index 861671e35..f90d8e48f 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
@@ -62,6 +62,13 @@ const actions = {
     type : 'EDIT_CALENDARS_VEHICLEJOURNEY_MODAL',
     vehicleJourneys
   }),
+  select2Timetable: (selectedTT) =>({
+    type: 'SEELCT_TT_CALENDAR_MODAL',
+    selectedItem:{
+      id: selectedTT.id
+      // TODO add relevant attributes
+    }
+  }),
   deleteCalendarModal : (timetable) => ({
     type : 'DELETE_CALENDAR_MODAL',
     timetable
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CalendarsEditVehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CalendarsEditVehicleJourney.js
index 5d4e782a0..fca2934cd 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CalendarsEditVehicleJourney.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CalendarsEditVehicleJourney.js
@@ -2,6 +2,7 @@ var React = require('react')
 var Component = require('react').Component
 var PropTypes = require('react').PropTypes
 var actions = require('../../actions')
+var TimetableSelect2 = require('./select2s/TimetableSelect2')
 
 class CalendarsEditVehicleJourney extends Component {
   constructor(props) {
@@ -42,21 +43,33 @@ class CalendarsEditVehicleJourney extends Component {
                   {(this.props.modal.type == 'calendars_edit') && (
                     <form>
                       <div className='modal-body'>
-                      <ul>
-                      {this.props.modal.modalProps.timetables.map((tt, i) =>
-                          <li
-                            key= {i}
-                          >
-                            {tt.comment}
-                            <button
-                            type='button'
-                            onClick={() => this.props.onDeleteCalendarModal(tt)}
+                        <ul>
+                        {this.props.modal.modalProps.timetables.map((tt, i) =>
+                            <li
+                              key= {i}
                             >
-                              <span className='fa fa-times'></span>
-                            </button>
-                          </li>
-                      )}
-                      </ul>
+                              {tt.comment}
+                              <button
+                              type='button'
+                              onClick={() => this.props.onDeleteCalendarModal(tt)}
+                              >
+                                <span className='fa fa-times'></span>
+                              </button>
+                            </li>
+                        )}
+                        </ul>
+                        <div className='row'>
+                          <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                            <div className='form-group'>
+                              <label className='control-label is-required'>Ajouter un calendrier</label>
+                              <TimetableSelect2 onSelect2Timetable={this.props.onSelect2Timetable} />
+                              <button
+                                type='button'
+                              ><span className='fa fa-times'>Ajouter</span>
+                              </button>
+                            </div>
+                          </div>
+                        </div>
                       </div>
 
                       <div className='modal-footer'>
@@ -95,6 +108,7 @@ CalendarsEditVehicleJourney.propTypes = {
   onModalClose: PropTypes.func.isRequired,
   onCalendarsEditVehicleJourney: PropTypes.func.isRequired,
   onDeleteCalendarModal: PropTypes.func.isRequired,
+  onSelect2Timetable: PropTypes.func.isRequired,
   filters: PropTypes.object.isRequired
 }
 
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js
index dbac7c392..6e589f1bb 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js
@@ -2,7 +2,7 @@ var React = require('react')
 var Component = require('react').Component
 var PropTypes = require('react').PropTypes
 var actions = require('../../actions')
-var MissionSelect2 = require('./MissionSelect2')
+var MissionSelect2 = require('./select2s/MissionSelect2')
 
 class CreateModal extends Component {
   constructor(props) {
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/MissionSelect2.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/MissionSelect2.js
index 0ab4475ac..0ab4475ac 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/MissionSelect2.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/MissionSelect2.js
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/TimetableSelect2.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/TimetableSelect2.js
new file mode 100644
index 000000000..2fdcd92a5
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/TimetableSelect2.js
@@ -0,0 +1,62 @@
+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('/', 7).join('/')
+
+
+class BSelect4 extends React.Component{
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    return (
+      <Select2
+        defaultValue=''
+        onSelect={(e) => this.props.onSelect2Timetable(e) }
+        ref='journey_pattern_id'
+        options={{
+          placeholder: 'Nom d\'un calendrier existant',
+          allowClear: true,
+          language: 'fr', /* Doesn't seem to work... :( */
+          theme: 'bootstrap',
+          width: '100%',
+          ajax: {
+            url: origin + path + '/journey_patterns_collection.json',
+            dataType: 'json',
+            delay: '500',
+            data: function(params) {
+              return {
+                q: {published_name_cont: params.term},
+              };
+            },
+            processResults: function(data, params) {
+
+              return {
+                results: data.map(
+                  item => Object.assign(
+                    {},
+                    item,
+                    {text: item.published_name, complete_jp: item}
+                  )
+                )
+              };
+            },
+            cache: true
+          },
+          minimumInputLength: 3,
+          templateResult: formatRepo
+        }}
+      />
+    )
+  }
+}
+
+const formatRepo = (props) => {
+  if(props.text) return props.text
+}
+
+module.exports = BSelect4
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/CalendarsEditVehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/CalendarsEditVehicleJourney.js
index 2c0062751..8491e6e32 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/CalendarsEditVehicleJourney.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/CalendarsEditVehicleJourney.js
@@ -24,6 +24,10 @@ const mapDispatchToProps = (dispatch) => {
     },
     onCalendarsEditVehicleJourney: (calendars) =>{
       dispatch(actions.editVehicleJourneyCalendars(calendars))
+    },
+    onSelect2Timetable: (e) =>{
+      console.log(e.params.data)
+      dispatch(actions.select2Timetable(e.params.data))
     }
   }
 }