BigW Consortium Gitlab

users_select.js.coffee 10.1 KB
Newer Older
1
class @UsersSelect
2
  constructor: (currentUser) ->
3 4
    @usersPath = "/autocomplete/users.json"
    @userPath = "/autocomplete/users/:id.json"
5 6
    if currentUser?
      @currentUser = JSON.parse(currentUser)
7

8
    $('.js-user-search').each (i, dropdown) =>
9 10 11 12 13 14
      $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')
15
      @authorId = $dropdown.data('author-id')
16
      selectedId = $dropdown.data('selected')
17
      defaultLabel = $dropdown.data('default-label')
18 19 20
      issueURL = $dropdown.data('issueUpdate')
      $selectbox = $dropdown.closest('.selectbox')
      $block = $selectbox.closest('.block')
21
      abilityName = $dropdown.data('ability-name')
22
      $value = $block.find('.value')
23
      $collapsedSidebar = $block.find('.sidebar-collapsed-user')
24
      $loading = $block.find('.block-loading').fadeOut()
25

26
      $block.on('click', '.js-assign-yourself', (e) =>
27 28 29 30 31 32 33 34 35 36
        e.preventDefault()
        assignTo(@currentUser.id)
      )

      assignTo = (selected) ->
        data = {}
        data[abilityName] = {}
        data[abilityName].assignee_id = selected
        $loading
          .fadeIn()
37
        $dropdown.trigger('loading.gl.dropdown')
38 39 40 41 42 43
        $.ajax(
          type: 'PUT'
          dataType: 'json'
          url: issueURL
          data: data
        ).done (data) ->
44
          $dropdown.trigger('loaded.gl.dropdown')
45 46
          $loading.fadeOut()
          $selectbox.hide()
47

48 49 50 51
          if data.assignee
            user =
              name: data.assignee.name
              username: data.assignee.username
52
              avatar: data.assignee.avatar_url
53 54 55 56 57
          else
            user =
              name: 'Unassigned'
              username: ''
              avatar: ''
58 59
          $value.html(assigneeTemplate(user))
          $collapsedSidebar.html(collapsedAssigneeTemplate(user))
60 61


62 63 64 65 66 67 68 69 70 71
      collapsedAssigneeTemplate = _.template(
        '<% if( avatar ) { %>
        <a class="author_link" href="/u/<%= username %>">
          <img width="24" class="avatar avatar-inline s24" alt="" src="<%= avatar %>">
          <span class="author">Toni Boehm</span>
        </a>
        <% } else { %>
        <i class="fa fa-user"></i>
        <% } %>'
      )
72

73
      assigneeTemplate = _.template(
74 75 76 77 78 79 80 81 82 83 84 85
        '<% if (username) { %>
        <a class="author_link " href="/u/<%= username %>">
          <% if( avatar ) { %>
          <img width="32" class="avatar avatar-inline s32" alt="" src="<%= avatar %>">
          <% } %>
          <span class="author"><%= name %></span>
          <span class="username">
            @<%= username %>
          </span>
        </a>
          <% } else { %>
        <span class="assign-yourself">
86
          No assignee -
87 88 89 90 91 92 93
          <a href="#" class="js-assign-yourself">
            assign yourself
          </a>
        </span>
          <% } %>'
      )

94
      $dropdown.glDropdown(
95
        data: (term, callback) =>
96 97 98
          isAuthorFilter = $('.js-author-search')

          @users term, term is '' and isAuthorFilter, (users) =>
99
            if term.length is 0
100 101
              showDivider = 0

102 103 104 105 106 107 108 109 110
              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
111
                showDivider += 1
112
                users.unshift(
113
                  beforeDivider: true
114 115 116 117 118
                  name: 'Unassigned',
                  id: 0
                )

              if showAnyUser
119
                showDivider += 1
120 121 122
                name = showAnyUser
                name = 'Any User' if name == true
                anyUser = {
123
                  beforeDivider: true
124 125 126 127
                  name: name,
                  id: null
                }
                users.unshift(anyUser)
128

129 130 131
            if showDivider
              users.splice(showDivider, 0, "divider")

132 133 134
            # Send the data back
            callback users
        filterable: true
135
        filterRemote: true
136 137 138
        search:
          fields: ['name', 'username']
        selectable: true
139
        fieldName: $dropdown.data('field-name')
140

141
        toggleLabel: (selected) ->
Phil Hughes committed
142
          if selected && 'id' of selected
143
            if selected.text then selected.text else selected.name
144 145
          else
            defaultLabel
146

147 148
        inputId: 'issue_assignee_id'

149
        hidden: (e) ->
150
          $selectbox.hide()
151
          # display:block overrides the hide-collapse rule
Phil Hughes committed
152
          $value.css('display', '')
153

Phil Hughes committed
154
        clicked: (user) ->
155 156 157
          page = $('body').data 'page'
          isIssueIndex = page is 'projects:issues:index'
          isMRIndex = page is page is 'projects:merge_requests:index'
158 159
          if $dropdown.hasClass('js-filter-bulk-update')
            return
160

161
          if $dropdown.hasClass('js-filter-submit') and (isIssueIndex or isMRIndex)
Phil Hughes committed
162
            selectedId = user.id
163
            Issuable.filterResults $dropdown.closest('form')
164 165
          else if $dropdown.hasClass 'js-filter-submit'
            $dropdown.closest('form').submit()
166
          else
167 168 169
            selected = $dropdown
              .closest('.selectbox')
              .find("input[name='#{$dropdown.data('field-name')}']").val()
170
            assignTo(selected)
171

172 173
        renderRow: (user) ->
          username = if user.username then "@#{user.username}" else ""
174
          avatar = if user.avatar_url then user.avatar_url else false
175
          selected = if user.id is selectedId then "is-active" else ""
176 177
          img = ""

178 179 180
          if user.beforeDivider?
            "<li>
              <a href='#' class='#{selected}'>
181
                #{user.name}
182 183 184 185 186 187
              </a>
            </li>"
          else
            if avatar
              img = "<img src='#{avatar}' class='avatar avatar-inline' width='30' />"

188 189 190 191 192 193 194 195 196 197 198 199 200 201
          # split into three parts so we can remove the username section if nessesary
          listWithName = "<li>
            <a href='#' class='dropdown-menu-user-link #{selected}'>
              #{img}
              <strong class='dropdown-menu-user-full-name'>
                #{user.name}
              </strong>"

          listWithUserName = "<span class='dropdown-menu-user-username'>
                #{username}
              </span>"
          listClosingTags = "</a>
          </li>"

202

203 204 205 206
          if username is ''
            listWithUserName = ''

          listWithName + listWithUserName + listClosingTags
207
      )
208

209
    $('.ajax-users-select').each (i, select) =>
210 211
      @projectId = $(select).data('project-id')
      @groupId = $(select).data('group-id')
212
      @showCurrentUser = $(select).data('current-user')
213
      @authorId = $(select).data('author-id')
214 215
      showNullUser = $(select).data('null-user')
      showAnyUser = $(select).data('any-user')
216
      showEmailUser = $(select).data('email-user')
217
      firstUser = $(select).data('first-user')
218

219 220 221 222
      $(select).select2
        placeholder: "Search for a user"
        multiple: $(select).hasClass('multiselect')
        minimumInputLength: 0
223
        query: (query) =>
224
          @users query.term, @projectId?, (users) =>
225
            data = { results: users }
226 227

            if query.term.length == 0
228 229 230 231 232 233 234
              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
235

236
              if showNullUser
237 238 239 240
                nullUser = {
                  name: 'Unassigned',
                  id: 0
                }
241
                data.results.unshift(nullUser)
242

243
              if showAnyUser
244 245
                name = showAnyUser
                name = 'Any User' if name == true
246
                anyUser = {
247
                  name: name,
248 249
                  id: null
                }
250 251
                data.results.unshift(anyUser)

252 253 254 255 256 257 258 259
            if showEmailUser && data.results.length == 0 && query.term.match(/^[^@]+@[^@]+$/)
              emailUser = {
                name: "Invite \"#{query.term}\"",
                username: query.term,
                id: query.term
              }
              data.results.unshift(emailUser)

260 261
            query.callback(data)

262 263
        initSelection: (args...) =>
          @initSelection(args...)
264 265 266 267 268 269 270 271
        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

272 273 274 275 276 277 278 279
  initSelection: (element, callback) ->
    id = $(element).val()
    if id == "0"
      nullUser = { name: 'Unassigned' }
      callback(nullUser)
    else if id != ""
      @user(id, callback)

280
  formatResult: (user) ->
281
    if user.avatar_url
282
      avatar = user.avatar_url
283
    else
284
      avatar = gon.default_avatar_url
285

286
    "<div class='user-result #{'no-username' unless user.username}'>
287 288
       <div class='user-image'><img class='avatar s24' src='#{avatar}'></div>
       <div class='user-name'>#{user.name}</div>
289
       <div class='user-username'>#{user.username || ""}</div>
290
     </div>"
291

292
  formatSelection: (user) ->
293
    user.name
294 295 296 297 298 299 300 301 302 303 304 305 306

  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
307
  users: (query, fromProject, callback) =>
308 309 310 311 312 313 314 315
    url = @buildUrl(@usersPath)

    $.ajax(
      url: url
      data:
        search: query
        per_page: 20
        active: true
316
        project_id: @projectId if fromProject
317
        group_id: @groupId
318
        current_user: @showCurrentUser
319
        author_id: @authorId
320 321 322 323 324
      dataType: "json"
    ).done (users) ->
      callback(users)

  buildUrl: (url) ->
325
    url = gon.relative_url_root.replace(/\/$/, '') + url if gon.relative_url_root?
326
    return url