aboutsummaryrefslogtreecommitdiffstats
path: root/app/javascript/routes/components/BSelect2.js
blob: 340d9df95de18dbdf01524855f859f20413d46fe (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import _ from'lodash'
import React, { Component, PropTypes } from 'react'
import Select2 from 'react-select2'


// get JSON full path
var origin = window.location.origin
var path = window.location.pathname.split('/', 3).join('/')


export default class BSelect3 extends Component {
  constructor(props, context) {
    super(props, context)
  }
  onChange(e) {
    this.props.onChange(this.props.index, {
      text: e.currentTarget.textContent,
      stoparea_id: e.currentTarget.value,
      user_objectid: e.params.data.user_objectid,
      longitude: e.params.data.longitude,
      latitude: e.params.data.latitude,
      name: e.params.data.name,
      short_name: e.params.data.short_name,
      city_name: e.params.data.city_name,
      area_type: e.params.data.area_type,
      zip_code: e.params.data.zip_code,
      comment: e.params.data.comment
    })
  }

  parsedText(data) {
    let a = data.replace('</em></small>', '')
    let b = a.split('<small><em>')
    if (b.length > 1) {
      return (
        <span>
          {b[0]}
          <small><em>{b[1]}</em></small>
        </span>
      )
    } else {
      return (
        <span>{data}</span>
      )
    }
  }

  render() {
    if(this.props.value.edit)
      return (
        <div className='select2-bootstrap-append'>
          <BSelect2 {...this.props} onSelect={ this.onChange.bind(this) }/>
        </div>
      )
    else
      if(!this.props.value.stoparea_id)
        return (
          <div>
            <BSelect2 {...this.props} onSelect={ this.onChange.bind(this) }/>
          </div>
        )
      else
        return (
          <a
            className='navlink'
            href={origin + path + '/stop_areas/' + this.props.value.stoparea_id}
            title="Voir l'arrêt"
          >
            {this.parsedText(this.props.value.text)}
          </a>
        )
  }
}

class BSelect2 extends Component{
  componentDidMount() {
    this.refs.newSelect.el.select2('open')
  }

  render() {
    return (
      <Select2
        value={ this.props.value.stoparea_id }
        onSelect={ this.props.onSelect }
        ref='newSelect'
        options={{
          placeholder: this.context.I18n.routes.edit.select2.placeholder,
          allowClear: true,
          language: 'fr', /* Doesn't seem to work... :( */
          theme: 'bootstrap',
          width: '100%',
          ajax: {
            url: origin + path + '/autocomplete_stop_areas.json',
            dataType: 'json',
            delay: '500',
            data: function(params) {
              return {
                q: params.term,
                target_type: 'zdep'
              };
            },
            processResults: function(data, params) {
              return {
                results: data.map(
                  item => _.assign(
                    {},
                    item,
                    { text: item.name + ", " + item.zip_code + " " + item.short_city_name + " <small><em>(" + item.user_objectid + ")</em></small>" }
                  )
                )
              };
            },
            cache: true
          },
          escapeMarkup: function (markup) { return markup; },
          minimumInputLength: 3
        }}
      />
    )
  }
}

BSelect2.contextTypes = {
  I18n: PropTypes.object
}