users_select.js.coffee 8.17 KB
Newer Older
1 2
class @UsersSelect
  constructor: ->
3 4 5
    @usersPath = "/autocomplete/users.json"
    @userPath = "/autocomplete/users/:id.json"

6
    $('.js-user-search').each (i, dropdown) =>
Phil Hughes's avatar
Phil Hughes committed
7 8 9 10 11 12 13
      $dropdown = $(dropdown)
      @projectId = $dropdown.data('project-id')
      @showCurrentUser = $dropdown.data('current-user')
      showNullUser = $dropdown.data('null-user')
      showAnyUser = $dropdown.data('any-user')
      firstUser = $dropdown.data('first-user')
      selectedId = $dropdown.data('selected')
14
      defaultLabel = $dropdown.data('default-label')
15 16 17
      issueURL = $dropdown.data('issueUpdate')
      $selectbox = $dropdown.closest('.selectbox')
      $block = $selectbox.closest('.block')
18
      abilityName = $dropdown.data('ability-name')
19 20
      $value = $block.find('.value')
      $loading = $block.find('.block-loading').fadeOut()
21

Phil Hughes's avatar
Phil Hughes committed
22
      $dropdown.glDropdown(
Phil Hughes's avatar
Phil Hughes committed
23 24 25
        data: (term, callback) =>
          @users term, (users) =>
            if term.length is 0
26 27
              showDivider = 0

Phil Hughes's avatar
Phil Hughes committed
28 29 30 31 32 33 34 35 36
              if firstUser
                # Move current user to the front of the list
                for obj, index in users
                  if obj.username == firstUser
                    users.splice(index, 1)
                    users.unshift(obj)
                    break

              if showNullUser
37
                showDivider += 1
Phil Hughes's avatar
Phil Hughes committed
38
                users.unshift(
39
                  beforeDivider: true
Phil Hughes's avatar
Phil Hughes committed
40 41 42 43 44
                  name: 'Unassigned',
                  id: 0
                )

              if showAnyUser
45
                showDivider += 1
Phil Hughes's avatar
Phil Hughes committed
46 47 48
                name = showAnyUser
                name = 'Any User' if name == true
                anyUser = {
49
                  beforeDivider: true
Phil Hughes's avatar
Phil Hughes committed
50 51 52 53
                  name: name,
                  id: null
                }
                users.unshift(anyUser)
54

55 56 57
            if showDivider
              users.splice(showDivider, 0, "divider")

58 59 60
            # Send the data back
            callback users
        filterable: true
Phil Hughes's avatar
Phil Hughes committed
61
        filterRemote: true
62 63 64
        search:
          fields: ['name', 'username']
        selectable: true
Phil Hughes's avatar
Phil Hughes committed
65
        fieldName: $dropdown.data('field-name')
66

67
        toggleLabel: (selected) ->
Phil Hughes's avatar
Phil Hughes committed
68
          if selected && 'id' of selected
69 70 71
            selected.name
          else
            defaultLabel
72 73 74 75 76

        hidden: ->
          $selectbox.hide()
          $value.show()

77
        clicked: ->
Phil Hughes's avatar
Phil Hughes committed
78 79 80
          page = $('body').data 'page'
          isIssueIndex = page is 'projects:issues:index'
          isMRIndex = page is page is 'projects:merge_requests:index'
81

Phil Hughes's avatar
Phil Hughes committed
82 83 84 85
          if $dropdown.hasClass('js-filter-submit') and (isIssueIndex or isMRIndex)
            Issues.filterResults $dropdown.closest('form')
          else if $dropdown.hasClass 'js-filter-submit'
            $dropdown.closest('form').submit()
Jacob Schatz's avatar
Jacob Schatz committed
86
          else
87 88 89
            selected = $dropdown
              .closest('.selectbox')
              .find("input[name='#{$dropdown.data('field-name')}']").val()
90 91 92
            data = {}
            data[abilityName] = {}
            data[abilityName].assignee_id = selected
93 94 95 96
            $loading
              .fadeIn()
            $.ajax(
              type: 'PUT'
Alfredo Sumaran's avatar
Alfredo Sumaran committed
97
              dataType: 'json'
98
              url: issueURL
99
              data: data
100 101 102 103 104 105 106 107
            ).done (data) ->
              $loading.fadeOut()
              $selectbox.hide()
              href = $value
                      .show()
                      .find('.author')
                      .text(data.assignee.name)
                      .end()
108 109 110
                      .find('.username')
                      .text("@#{data.assignee.username}")
                      .end()
111 112 113 114 115 116 117
                      .find('a')
                      .attr('href')
              splitHref = href.split('/')
              splitHref[splitHref.length - 1] = data.assignee.username
              $value
                .find('a')
                .attr('href',splitHref.join('/'))
118 119
        renderRow: (user) ->
          username = if user.username then "@#{user.username}" else ""
120
          avatar = if user.avatar_url then user.avatar_url else false
121
          selected = if user.id is selectedId then "is-active" else ""
122 123
          img = ""

124 125 126
          if user.beforeDivider?
            "<li>
              <a href='#' class='#{selected}'>
127
                #{user.name}
128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144
              </a>
            </li>"
          else
            if avatar
              img = "<img src='#{avatar}' class='avatar avatar-inline' width='30' />"

            "<li>
              <a href='#' class='dropdown-menu-user-link #{selected}'>
                #{img}
                <strong class='dropdown-menu-user-full-name'>
                  #{user.name}
                </strong>
                <span class='dropdown-menu-user-username'>
                  #{username}
                </span>
              </a>
            </li>"
145 146
      )

147
    $('.ajax-users-select').each (i, select) =>
148 149
      @projectId = $(select).data('project-id')
      @groupId = $(select).data('group-id')
150
      @showCurrentUser = $(select).data('current-user')
151 152
      showNullUser = $(select).data('null-user')
      showAnyUser = $(select).data('any-user')
153
      showEmailUser = $(select).data('email-user')
154
      firstUser = $(select).data('first-user')
155

156 157 158 159
      $(select).select2
        placeholder: "Search for a user"
        multiple: $(select).hasClass('multiselect')
        minimumInputLength: 0
160 161
        query: (query) =>
          @users query.term, (users) =>
162
            data = { results: users }
163 164

            if query.term.length == 0
165 166 167 168 169 170 171
              if firstUser
                # Move current user to the front of the list
                for obj, index in data.results
                  if obj.username == firstUser
                    data.results.splice(index, 1)
                    data.results.unshift(obj)
                    break
172

173
              if showNullUser
174 175 176 177
                nullUser = {
                  name: 'Unassigned',
                  id: 0
                }
178
                data.results.unshift(nullUser)
179

180
              if showAnyUser
181 182
                name = showAnyUser
                name = 'Any User' if name == true
183
                anyUser = {
184
                  name: name,
185 186
                  id: null
                }
187 188
                data.results.unshift(anyUser)

189 190 191 192 193 194 195 196
            if showEmailUser && data.results.length == 0 && query.term.match(/^[^@]+@[^@]+$/)
              emailUser = {
                name: "Invite \"#{query.term}\"",
                username: query.term,
                id: query.term
              }
              data.results.unshift(emailUser)

197 198
            query.callback(data)

199 200
        initSelection: (args...) =>
          @initSelection(args...)
201 202 203 204 205 206 207 208
        formatResult: (args...) =>
          @formatResult(args...)
        formatSelection: (args...) =>
          @formatSelection(args...)
        dropdownCssClass: "ajax-users-dropdown"
        escapeMarkup: (m) -> # we do not want to escape markup since we are displaying html in results
          m

209 210 211 212 213 214 215 216
  initSelection: (element, callback) ->
    id = $(element).val()
    if id == "0"
      nullUser = { name: 'Unassigned' }
      callback(nullUser)
    else if id != ""
      @user(id, callback)

217
  formatResult: (user) ->
218
    if user.avatar_url
219
      avatar = user.avatar_url
220
    else
221
      avatar = gon.default_avatar_url
222

223
    "<div class='user-result #{'no-username' unless user.username}'>
224 225
       <div class='user-image'><img class='avatar s24' src='#{avatar}'></div>
       <div class='user-name'>#{user.name}</div>
226
       <div class='user-username'>#{user.username || ""}</div>
227
     </div>"
228

229
  formatSelection: (user) ->
230
    user.name
231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254

  user: (user_id, callback) =>
    url = @buildUrl(@userPath)
    url = url.replace(':id', user_id)

    $.ajax(
      url: url
      dataType: "json"
    ).done (user) ->
      callback(user)

  # Return users list. Filtered by query
  # Only active users retrieved
  users: (query, callback) =>
    url = @buildUrl(@usersPath)

    $.ajax(
      url: url
      data:
        search: query
        per_page: 20
        active: true
        project_id: @projectId
        group_id: @groupId
255
        current_user: @showCurrentUser
256 257 258 259 260
      dataType: "json"
    ).done (users) ->
      callback(users)

  buildUrl: (url) ->
Igor Matsko's avatar
Igor Matsko committed
261
    url = gon.relative_url_root.replace(/\/$/, '') + url if gon.relative_url_root?
262
    return url