Merge branch 'improve_large_groups' into 'master'

Improve for large groupsImprove for large groups This merge request is a set of patched to improve application for large groups with more then 100 people. Pages to be improved: Group#members page Project#issues page Project#merge_requests page Project#new_issue page Project#new_mr page Project#members page

Merge branch 'improve_large_groups' into 'master'
Improve for large groupsImprove for large groups This merge request is a set of patched to improve application for large groups with more then 100 people. Pages to be improved: Group#members page Project#issues page Project#merge_requests page Project#new_issue page Project#new_mr page Project#members page
Dmitriy Zaporozhets
2 parents 361a8781 fd12e5c6
Showing 27 changed files with 345 additions and 172 deletions Show diff stats
app/assets/javascripts/api.js.coffee
app/assets/javascripts/project_users_select.js.coffee
app/assets/javascripts/users_select.js.coffee
app/assets/stylesheets/application.scss
app/assets/stylesheets/generic/common.scss
app/assets/stylesheets/generic/forms.scss
app/assets/stylesheets/generic/selects.scss
app/assets/stylesheets/sections/groups.scss
app/assets/stylesheets/sections/issues.scss
app/controllers/groups_controller.rb
app/controllers/projects/issues_controller.rb
app/controllers/projects/merge_requests_controller.rb
app/helpers/application_helper.rb
app/helpers/issues_helper.rb
app/helpers/selects_helper.rb
app/views/groups/_new_group_member.html.haml
app/views/groups/members.html.haml
app/views/projects/issues/_form.html.haml
app/views/projects/issues/_head.html.haml
app/views/projects/issues/_issues.html.haml
@@ -3,6 +3,7 @@
   user_path: "/api/:version/users/:id.json"
   notes_path: "/api/:version/projects/:id/notes.json"
   namespaces_path: "/api/:version/namespaces.json"
+  project_users_path: "/api/:version/projects/:id/users.json"
  
   # Get 20 (depends on api) recent notes
   # and sort the ascending from oldest to newest
@@ -50,6 +51,23 @@
     ).done (users) ->
       callback(users)
  
+  # Return project users list. Filtered by query
+  # Only active users retrieved
+  projectUsers: (project_id, query, callback) ->
+    url = Api.buildUrl(Api.project_users_path)
+    url = url.replace(':id', project_id)
+
+    $.ajax(
+      url: url
+      data:
+        private_token: gon.api_token
+        search: query
+        per_page: 20
+        active: true
+      dataType: "json"
+    ).done (users) ->
+      callback(users)
+
   # Return namespaces list. Filtered by query
   namespaces: (query, callback) ->
     url = Api.buildUrl(Api.namespaces_path)
@@ -0,0 +1,44 @@
+$ ->
+  projectUserFormatResult = (user) ->
+    if user.avatar_url
+      avatar = user.avatar_url
+    else if gon.gravatar_enabled
+      avatar = gon.gravatar_url
+      avatar = avatar.replace('%{hash}', md5(user.email))
+      avatar = avatar.replace('%{size}', '24')
+    else
+      avatar = gon.relative_url_root + "/assets/no_avatar.png"
+
+    "<div class='user-result'>
+       <div class='user-image'><img class='avatar s24' src='#{avatar}'></div>
+       <div class='user-name'>#{user.name}</div>
+       <div class='user-username'>#{user.username}</div>
+     </div>"
+
+  projectUserFormatSelection = (user) ->
+    user.name
+
+  $('.ajax-project-users-select').each (i, select) ->
+    project_id = $('body').data('project-id')
+
+    $(select).select2
+      placeholder: $(select).data('placeholder') || "Search for a user"
+      multiple: $(select).hasClass('multiselect')
+      minimumInputLength: 0
+      query: (query) ->
+        Api.projectUsers project_id, query.term, (users) ->
+          data = { results: users }
+          query.callback(data)
+
+      initSelection: (element, callback) ->
+        id = $(element).val()
+        if id isnt ""
+          Api.user(id, callback)
+
+
+      formatResult: projectUserFormatResult
+      formatSelection: projectUserFormatSelection
+      dropdownCssClass: "ajax-project-users-dropdown"
+      dropdownAutoWidth: true
+      escapeMarkup: (m) -> # we do not want to escape markup since we are displaying html in results
+        m
 $ ->
   userFormatResult = (user) ->
-    if user.avatar
-      avatar = user.avatar.url
+    if user.avatar_url
+      avatar = user.avatar_url
     else if gon.gravatar_enabled
       avatar = gon.gravatar_url
       avatar = avatar.replace('%{hash}', md5(user.email))
@@ -65,6 +65,7 @@
 @import "sections/wall.scss";
 @import "sections/dashboard.scss";
 @import "sections/stat_graph.scss";
+@import "sections/groups.scss";
  
 /**
  * Code ighlight
@@ -112,6 +112,7 @@ pre.well-pre {
 .dropdown-menu > li > a:hover,
 .dropdown-menu > li > a:focus {
   background: #29b;
+  color: #FFF
 }
  
 .breadcrumb > li + li:before {
@@ -51,3 +51,27 @@ label {
 .input-mn-300 {
   min-width: 300px;
 }
+
+.custom-form-control {
+  width: 150px;
+}
+
+@media (min-width: $screen-sm-min) {
+  .custom-form-control {
+    width: 150px;
+  }
+}
+
+/* Medium devices (desktops, 992px and up) */
+@media (min-width: $screen-md-min) {
+  .custom-form-control {
+    width: 170px;
+  }
+}
+
+/* Large devices (large desktops, 1200px and up) */
+@media (min-width: $screen-lg-min) {
+  .custom-form-control {
+    width: 200px;
+  }
+}
 /** Select2 selectbox style override **/
-
 .select2-container, .select2-container.select2-drop-above {
   .select2-choice {
     background: #FFF;
@@ -12,9 +11,13 @@
 }
  
 .select2-drop-active {
-  border: 1px solid #BBB;
+  border: 1px solid #BBB !important;
   margin-top: 4px;
  
+  &.select2-drop-above {
+    margin-bottom: 8px;
+  }
+
   .select2-search input {
     background: #fafafa;
     border-color: #DDD;
@@ -78,3 +81,9 @@ select {
 .project-refs-form .select2-container {
   margin-right: 10px;
 }
+
+.ajax-users-dropdown, .ajax-project-users-dropdown {
+  .select2-search {
+    padding-top: 4px;
+  }
+}
@@ -0,0 +1,9 @@
+.new-group-member-holder {
+  margin-top: 50px;
+  background: #f9f9f9;
+  padding-top: 20px;
+}
+
+.member-search-form {
+  float: left;
+}
@@ -14,8 +14,8 @@
  
     .issue-check {
       float: left;
-      padding: 8px 0;
       padding-right: 8px;
+      margin-bottom: 10px;
       min-width: 15px;
     }
  
@@ -38,13 +38,21 @@
   }
 }
  
-input.check_all_issues {
+.check-all-holder {
+  height: 32px;
   float: left;
-  padding: 0;
-  margin: 0;
-  margin-right: 10px;
-  position: relative;
-  top: 13px;
+  margin-right: 12px;
+  padding: 6px 10px;
+  border: 1px solid #ccc;
+  @include border-radius(4px);
+
+
+  input.check_all_issues {
+    padding: 0;
+    margin: 0;
+    position: relative;
+    top: 3px;
+  }
 }
  
 .issues_content {
@@ -91,6 +99,13 @@ input.check_all_issues {
     .update_selected_issues {
       margin-left: 4px;
     }
+
+    .select2-container .select2-choice {
+      height: 32px;
+      line-height: 28px;
+      color: #444 !important;
+      font-weight: 500;
+    }
   }
 }
  
@@ -63,7 +63,14 @@ class GroupsController &lt; ApplicationController
  
   def members
     @project = group.projects.find(params[:project_id]) if params[:project_id]
-    @members = group.users_groups.order('group_access DESC')
+    @members = group.users_groups
+
+    if params[:search].present?
+      users = group.users.search(params[:search])
+      @members = @members.where(user_id: users)
+    end
+
+    @members = @members.order('group_access DESC').page(params[:page]).per(50)
     @users_group = UsersGroup.new
   end
  
@@ -28,7 +28,7 @@ class Projects::IssuesController &lt; Projects::ApplicationController
     @milestone = @project.milestones.find(milestone_id) if milestone_id.present? && !milestone_id.to_i.zero?
     sort_param = params[:sort] || 'newest'
     @sort = sort_param.humanize unless sort_param.empty?
-
+    @assignees = User.where(id: @project.issues.pluck(:assignee_id))
  
     respond_to do |format|
       format.html
@@ -28,6 +28,7 @@ class Projects::MergeRequestsController &lt; Projects::ApplicationController
     assignee_id, milestone_id = params[:assignee_id], params[:milestone_id]
     @assignee = @project.team.find(assignee_id) if assignee_id.present? && !assignee_id.to_i.zero?
     @milestone = @project.milestones.find(milestone_id) if milestone_id.present? && !milestone_id.to_i.zero?
+    @assignees = User.where(id: @project.merge_requests.pluck(:assignee_id))
   end
  
   def show
@@ -162,15 +162,6 @@ module ApplicationHelper
  
   alias_method :url_to_image, :image_url
  
-  def users_select_tag(id, opts = {})
-    css_class = "ajax-users-select "
-    css_class << "multiselect " if opts[:multiple]
-    css_class << (opts[:class] || '')
-    value = opts[:selected] || ''
-
-    hidden_field_tag(id, value, class: css_class)
-  end
-
   def body_data_page
     path = controller.controller_path.split('/')
     namespace = path.first if path.second
@@ -70,11 +70,11 @@ module IssuesHelper
   end
  
   def bulk_update_milestone_options
-    options_for_select(["None (backlog)", nil]) + options_from_collection_for_select(project_active_milestones, "id", "title", params[:milestone_id])
+    options_for_select(["None (backlog)"]) + options_from_collection_for_select(project_active_milestones, "id", "title", params[:milestone_id])
   end
  
   def bulk_update_assignee_options
-    options_for_select(["None (unassigned)", nil]) + options_from_collection_for_select(@project.team.members, "id", "name", params[:assignee_id])
+    options_for_select(["None (unassigned)"]) + options_from_collection_for_select(@project.team.members, "id", "name", params[:assignee_id])
   end
  
   def assignee_options object
@@ -0,0 +1,20 @@
+module SelectsHelper
+  def users_select_tag(id, opts = {})
+    css_class = "ajax-users-select "
+    css_class << "multiselect " if opts[:multiple]
+    css_class << (opts[:class] || '')
+    value = opts[:selected] || ''
+
+    hidden_field_tag(id, value, class: css_class)
+  end
+
+  def project_users_select_tag(id, opts = {})
+    css_class = "ajax-project-users-select "
+    css_class << "multiselect " if opts[:multiple]
+    css_class << (opts[:class] || '')
+    value = opts[:selected] || ''
+    placeholder = opts[:placeholder] || 'Select user'
+
+    hidden_field_tag(id, value, class: css_class, 'data-placeholder' => placeholder)
+  end
+end
 = form_for @users_group, url: group_users_groups_path(@group), html: { class: 'form-horizontal users-group-form' } do |f|
-  %h4.append-bottom-20
-    New member(s) for
-    %strong #{@group.name}
-    group
-
-  %p 1. Choose users you want in the group
   .form-group
     = f.label :user_ids, "People", class: 'control-label'
     .col-sm-10= users_select_tag(:user_ids, multiple: true, class: 'input-large')
  
-  %p 2. Set access level for them
   .form-group
     = f.label :group_access, "Group Access", class: 'control-label'
     .col-sm-10= select_tag :group_access, options_for_select(UsersGroup.group_access_roles, @users_group.group_access), class: "project-access-select select2"
@@ -6,14 +6,34 @@
   %strong= link_to "here", help_permissions_path, class: "vlink"
  
 %hr
-.ui-box
+
+.clearfix
+  = form_tag members_group_path(@group), method: :get, class: 'form-inline member-search-form'  do
+    .form-group
+      = search_field_tag :search, params[:search], { placeholder: 'Find member by name', class: 'form-control search-text-input input-mn-300' }
+    = submit_tag 'Search', class: 'btn'
+
+  - if current_user.can? :manage_group, @group
+    .pull-right
+      = link_to '#', class: 'btn btn-new js-toggle-visibility-link' do
+        Add members
+        %i.icon-chevron-down
+
+    .js-toggle-visibility-container.hide.new-group-member-holder
+      = render "new_group_member"
+
+.ui-box.prepend-top-20
   .title
     %strong #{@group.name}
     group members
     %small
-      (#{@members.count})
+      (#{@members.total_count})
   %ul.well-list
     - @members.each do |member|
       = render 'users_groups/users_group', member: member, show_controls: true
-- if current_user.can? :manage_group, @group
-  = render "new_group_member"
+= paginate @members, theme: 'gitlab'
+
+:coffeescript
+  $('form.member-search-form').on 'submit', (event) ->
+    event.preventDefault()
+    Turbolinks.visit @.action + '?' + $(@).serialize()
@@ -24,7 +24,7 @@
           %i.icon-user
           Assign to
         .col-sm-10
-          = f.select(:assignee_id, assignee_options(@issue), { include_blank: "Select a user" }, {class: 'select2'})
+          = project_users_select_tag('issue[assignee_id]', placeholder: 'Select a user', class: 'custom-form-control')
           &nbsp;
           = link_to 'Assign to me', '#', class: 'btn btn-small assign-to-me-link'
     .form-group
@@ -17,10 +17,10 @@
  
     %li.pull-right
       .pull-right
-        = form_tag project_issues_path(@project), method: :get, id: "issue_search_form", class: 'inline issue-search-form'  do
+        = form_tag project_issues_path(@project), method: :get, id: "issue_search_form", class: 'pull-left issue-search-form'  do
           .append-right-10.hidden-xs.hidden-sm
             = search_field_tag :issue_search, nil, { placeholder: 'Filter by title or description', class: 'form-control issue_search search-text-input input-mn-300' }
         - if can? current_user, :write_issue, @project
-          = link_to new_project_issue_path(@project, issue: { assignee_id: params[:assignee_id], milestone_id: params[:milestone_id]}), class: "btn btn-new", title: "New Issue", id: "new_issue_link" do
+          = link_to new_project_issue_path(@project, issue: { assignee_id: params[:assignee_id], milestone_id: params[:milestone_id]}), class: "btn btn-new pull-left", title: "New Issue", id: "new_issue_link" do
             %i.icon-plus
             New Issue
-.ui-box
-  .title
+.append-bottom-10
+  .check-all-holder
     = check_box_tag "check_all_issues", nil, false, class: "check_all_issues left"
-    .clearfix
-      .issues_bulk_update.hide
-        = form_tag bulk_update_project_issues_path(@project), method: :post  do
-          %span Update selected issues with &nbsp;
-          = select_tag('update[status]', options_for_select(['open', 'closed']), prompt: "Status")
-          = select_tag('update[assignee_id]', bulk_update_assignee_options, prompt: "Assignee")
-          = select_tag('update[milestone_id]', bulk_update_milestone_options, prompt: "Milestone")
-          = hidden_field_tag 'update[issues_ids]', []
-          = hidden_field_tag :status, params[:status]
-          = button_tag "Save", class: "btn update_selected_issues btn-small btn-save"
-      .issues-filters
-        %span Filter by
-        .dropdown.inline.prepend-left-10
-          %a.dropdown-toggle.btn.btn-small{href: '#', "data-toggle" => "dropdown"}
-            %i.icon-tags
-            %span.light labels:
-            - if params[:label_name].present?
-              %strong= params[:label_name]
-            - else
-              Any
-            %b.caret
-          %ul.dropdown-menu
-            %li
-              = link_to project_filter_path(label_name: nil) do
-                Any
-            - issue_label_names.each do |label_name|
-              %li
-                = link_to project_filter_path(label_name: label_name) do
-                  %span{class: "label #{label_css_class(label_name)}"}
-                    %i.icon-tag
-                  = label_name
-        .dropdown.inline.prepend-left-10
-          %a.dropdown-toggle.btn.btn-small{href: '#', "data-toggle" => "dropdown"}
-            %i.icon-user
-            %span.light assignee:
-            - if @assignee.present?
-              %strong= @assignee.name
-            - elsif params[:assignee_id] == "0"
-              Unassigned
-            - else
-              Any
-            %b.caret
-          %ul.dropdown-menu
-            %li
-              = link_to project_filter_path(assignee_id: nil) do
-                Any
-              = link_to project_filter_path(assignee_id: 0) do
-                Unassigned
-            - @project.team.members.sort_by(&:name).each do |user|
-              %li
-                = link_to project_filter_path(assignee_id: user.id) do
-                  = image_tag avatar_icon(user.email), class: "avatar s16", alt: ''
-                  = user.name
+  .issues-filters
+    .dropdown.inline
+      %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
+        %i.icon-tags
+        %span.light labels:
+        - if params[:label_name].present?
+          %strong= params[:label_name]
+        - else
+          Any
+        %b.caret
+      %ul.dropdown-menu
+        %li
+          = link_to project_filter_path(label_name: nil) do
+            Any
+        - issue_label_names.each do |label_name|
+          %li
+            = link_to project_filter_path(label_name: label_name) do
+              %span{class: "label #{label_css_class(label_name)}"}
+                %i.icon-tag
+              = label_name
+    .dropdown.inline.prepend-left-10
+      %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
+        %i.icon-user
+        %span.light assignee:
+        - if @assignee.present?
+          %strong= @assignee.name
+        - elsif params[:assignee_id] == "0"
+          Unassigned
+        - else
+          Any
+        %b.caret
+      %ul.dropdown-menu
+        %li
+          = link_to project_filter_path(assignee_id: nil) do
+            Any
+          = link_to project_filter_path(assignee_id: 0) do
+            Unassigned
+        - @assignees.sort_by(&:name).each do |user|
+          %li
+            = link_to project_filter_path(assignee_id: user.id) do
+              = image_tag avatar_icon(user.email), class: "avatar s16", alt: ''
+              = user.name
  
-        .dropdown.inline.prepend-left-10
-          %a.dropdown-toggle.btn.btn-small{href: '#', "data-toggle" => "dropdown"}
-            %i.icon-time
-            %span.light milestone:
-            - if @milestone.present?
-              %strong= @milestone.title
-            - elsif params[:milestone_id] == "0"
-              None (backlog)
-            - else
-              Any
-            %b.caret
-          %ul.dropdown-menu
-            %li
-              = link_to project_filter_path(milestone_id: nil) do
-                Any
-              = link_to project_filter_path(milestone_id: 0) do
-                None (backlog)
-            - project_active_milestones.each do |milestone|
-              %li
-                = link_to project_filter_path(milestone_id: milestone.id) do
-                  %strong= milestone.title
-                  %small.light= milestone.expires_at
+    .dropdown.inline.prepend-left-10
+      %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
+        %i.icon-time
+        %span.light milestone:
+        - if @milestone.present?
+          %strong= @milestone.title
+        - elsif params[:milestone_id] == "0"
+          None (backlog)
+        - else
+          Any
+        %b.caret
+      %ul.dropdown-menu
+        %li
+          = link_to project_filter_path(milestone_id: nil) do
+            Any
+          = link_to project_filter_path(milestone_id: 0) do
+            None (backlog)
+        - project_active_milestones.each do |milestone|
+          %li
+            = link_to project_filter_path(milestone_id: milestone.id) do
+              %strong= milestone.title
+              %small.light= milestone.expires_at
  
-        .pull-right
-          = render 'shared/sort_dropdown'
+    .pull-right
+      = render 'shared/sort_dropdown'
  
+  .clearfix
+    .issues_bulk_update.hide
+      = form_tag bulk_update_project_issues_path(@project), method: :post  do
+        = select_tag('update[status]', options_for_select(['Open', 'Closed']), prompt: "Status")
+        = project_users_select_tag('update[assignee_id]', placeholder: 'Assignee')
+        = select_tag('update[milestone_id]', bulk_update_milestone_options, prompt: "Milestone")
+        = hidden_field_tag 'update[issues_ids]', []
+        = hidden_field_tag :status, params[:status]
+        = button_tag "Update issues", class: "btn update_selected_issues btn-save"
  
+.ui-box
   %ul.well-list.issues-list
     = render @issues
     - if @issues.blank?
@@ -47,7 +47,7 @@
           %i.icon-user
           Assign to
         .col-sm-10
-          = f.select(:assignee_id, assignee_options(@merge_request), { include_blank: "Select a user" }, {class: 'select2'})
+          = project_users_select_tag('merge_request[assignee_id]', placeholder: 'Select a user', class: 'custom-form-control')
           &nbsp;
           = link_to 'Assign to me', '#', class: 'btn btn-small assign-to-me-link'
     .form-group
@@ -10,59 +10,57 @@
   .col-md-3
     = render 'shared/project_filter', project_entities_path: project_merge_requests_path(@project)
   .col-md-9
-    .ui-box
-      .title
-        .mr-filters
-          %span Filter by
-          .dropdown.inline.prepend-left-10
-            %a.dropdown-toggle.btn.btn-small{href: '#', "data-toggle" => "dropdown"}
-              %i.icon-user
-              %span.light assignee:
-              - if @assignee.present?
-                %strong= @assignee.name
-              - elsif params[:assignee_id] == "0"
-                Unassigned
-              - else
-                Any
-              %b.caret
-            %ul.dropdown-menu
-              %li
-                = link_to project_filter_path(assignee_id: nil) do
-                  Any
-                = link_to project_filter_path(assignee_id: 0) do
-                  Unassigned
-              - @project.team.members.sort_by(&:name).each do |user|
-                %li
-                  = link_to project_filter_path(assignee_id: user.id) do
-                    = image_tag avatar_icon(user.email), class: "avatar s16", alt: ''
-                    = user.name
+    .mr-filters.append-bottom-10
+      .dropdown.inline
+        %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
+          %i.icon-user
+          %span.light assignee:
+          - if @assignee.present?
+            %strong= @assignee.name
+          - elsif params[:assignee_id] == "0"
+            Unassigned
+          - else
+            Any
+          %b.caret
+        %ul.dropdown-menu
+          %li
+            = link_to project_filter_path(assignee_id: nil) do
+              Any
+            = link_to project_filter_path(assignee_id: 0) do
+              Unassigned
+          - @assignees.sort_by(&:name).each do |user|
+            %li
+              = link_to project_filter_path(assignee_id: user.id) do
+                = image_tag avatar_icon(user.email), class: "avatar s16", alt: ''
+                = user.name
  
-          .dropdown.inline.prepend-left-10
-            %a.dropdown-toggle.btn.btn-small{href: '#', "data-toggle" => "dropdown"}
-              %i.icon-time
-              %span.light milestone:
-              - if @milestone.present?
-                %strong= @milestone.title
-              - elsif params[:milestone_id] == "0"
-                None (backlog)
-              - else
-                Any
-              %b.caret
-            %ul.dropdown-menu
-              %li
-                = link_to project_filter_path(milestone_id: nil) do
-                  Any
-                = link_to project_filter_path(milestone_id: 0) do
-                  None (backlog)
-              - project_active_milestones.each do |milestone|
-                %li
-                  = link_to project_filter_path(milestone_id: milestone.id) do
-                    %strong= milestone.title
-                    %small.light= milestone.expires_at
+      .dropdown.inline.prepend-left-10
+        %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
+          %i.icon-time
+          %span.light milestone:
+          - if @milestone.present?
+            %strong= @milestone.title
+          - elsif params[:milestone_id] == "0"
+            None (backlog)
+          - else
+            Any
+          %b.caret
+        %ul.dropdown-menu
+          %li
+            = link_to project_filter_path(milestone_id: nil) do
+              Any
+            = link_to project_filter_path(milestone_id: 0) do
+              None (backlog)
+          - project_active_milestones.each do |milestone|
+            %li
+              = link_to project_filter_path(milestone_id: milestone.id) do
+                %strong= milestone.title
+                %small.light= milestone.expires_at
  
-          .pull-right
-            = render 'shared/sort_dropdown'
+      .pull-right
+        = render 'shared/sort_dropdown'
  
+    .ui-box
       %ul.well-list.mr-list
         = render @merge_requests
         - if @merge_requests.blank?
+- group_users_count = @group.users_groups.count
 .ui-box
   .title
     %strong #{@group.name}
-    group members (#{@group.users_groups.count})
+    group members (#{group_users_count})
     .pull-right
       = link_to members_group_path(@group), class: 'btn btn-small' do
         %i.icon-edit
   %ul.well-list
-    - @group.users_groups.order('group_access DESC').each do |member|
+    - @group.users_groups.order('group_access DESC').limit(20).each do |member|
       = render 'users_groups/users_group', member: member, show_controls: false
+    - if group_users_count > 20
+      %li
+        and #{group_users_count - 20} more. For full list visit #{link_to 'group members page', members_group_path(@group)}
 .dropdown.inline.prepend-left-10
-  %a.dropdown-toggle.btn.btn-small{href: '#', "data-toggle" => "dropdown"}
+  %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
     %span.light sort:
     - if @sort.present?
       = @sort
@@ -29,6 +29,7 @@ class Groups &lt; Spinach::FeatureSteps
  
   And 'I select user "Mary Jane" from list with role "Reporter"' do
     user = User.find_by(name: "Mary Jane") || create(:user, name: "Mary Jane")
+    click_link 'Add members'
     within ".users-group-form" do
       select2(user.id, from: "#user_ids", multiple: true)
       select "Reporter", from: "group_access"
@@ -6,6 +6,12 @@ module API
       expose :is_admin?, as: :is_admin
       expose :can_create_group?, as: :can_create_group
       expose :can_create_project?, as: :can_create_project
+
+      expose :avatar_url do |user, options|
+        if user.avatar.present?
+          user.avatar.url
+        end
+      end
     end
  
     class UserSafe < Grape::Entity
@@ -11,7 +11,7 @@ module API
           end
           not_found!
         end
-        
+
         def map_public_to_visibility_level(attrs)
           publik = attrs.delete(:public)
           publik = [ true, 1, '1', 't', 'T', 'true', 'TRUE', 'on', 'ON' ].include?(publik)
@@ -308,6 +308,18 @@ module API
         projects = Project.where("(id in (?) OR visibility_level in (?)) AND (name LIKE (?))", ids, visibility_levels, "%#{params[:query]}%")
         present paginate(projects), with: Entities::Project
       end
+
+
+      # Get a users list
+      #
+      # Example Request:
+      #  GET /users
+      get ':id/users' do
+        @users = User.where(id: user_project.team.users.map(&:id))
+        @users = @users.search(params[:search]) if params[:search].present?
+        @users = paginate @users
+        present @users, with: Entities::User
+      end
     end
   end
 end
...	...	@@ -3,6 +3,7 @@
3	3	user_path: "/api/:version/users/:id.json"
4	4	notes_path: "/api/:version/projects/:id/notes.json"
5	5	namespaces_path: "/api/:version/namespaces.json"
	6	+ project_users_path: "/api/:version/projects/:id/users.json"
6	7
7	8	# Get 20 (depends on api) recent notes
8	9	# and sort the ascending from oldest to newest
...	...	@@ -50,6 +51,23 @@
50	51	).done (users) ->
51	52	callback(users)
52	53
	54	+ # Return project users list. Filtered by query
	55	+ # Only active users retrieved
	56	+ projectUsers: (project_id, query, callback) ->
	57	+ url = Api.buildUrl(Api.project_users_path)
	58	+ url = url.replace(':id', project_id)
	59	+
	60	+ $.ajax(
	61	+ url: url
	62	+ data:
	63	+ private_token: gon.api_token
	64	+ search: query
	65	+ per_page: 20
	66	+ active: true
	67	+ dataType: "json"
	68	+ ).done (users) ->
	69	+ callback(users)
	70	+
53	71	# Return namespaces list. Filtered by query
54	72	namespaces: (query, callback) ->
55	73	url = Api.buildUrl(Api.namespaces_path)
...	...
...	...	@@ -0,0 +1,44 @@
	1	+$ ->
	2	+ projectUserFormatResult = (user) ->
	3	+ if user.avatar_url
	4	+ avatar = user.avatar_url
	5	+ else if gon.gravatar_enabled
	6	+ avatar = gon.gravatar_url
	7	+ avatar = avatar.replace('%{hash}', md5(user.email))
	8	+ avatar = avatar.replace('%{size}', '24')
	9	+ else
	10	+ avatar = gon.relative_url_root + "/assets/no_avatar.png"
	11	+
	12	+ "<div class='user-result'>
	13	+ <div class='user-image'><img class='avatar s24' src='#{avatar}'></div>
	14	+ <div class='user-name'>#{user.name}</div>
	15	+ <div class='user-username'>#{user.username}</div>
	16	+ </div>"
	17	+
	18	+ projectUserFormatSelection = (user) ->
	19	+ user.name
	20	+
	21	+ $('.ajax-project-users-select').each (i, select) ->
	22	+ project_id = $('body').data('project-id')
	23	+
	24	+ $(select).select2
	25	+ placeholder: $(select).data('placeholder') \|\| "Search for a user"
	26	+ multiple: $(select).hasClass('multiselect')
	27	+ minimumInputLength: 0
	28	+ query: (query) ->
	29	+ Api.projectUsers project_id, query.term, (users) ->
	30	+ data = { results: users }
	31	+ query.callback(data)
	32	+
	33	+ initSelection: (element, callback) ->
	34	+ id = $(element).val()
	35	+ if id isnt ""
	36	+ Api.user(id, callback)
	37	+
	38	+
	39	+ formatResult: projectUserFormatResult
	40	+ formatSelection: projectUserFormatSelection
	41	+ dropdownCssClass: "ajax-project-users-dropdown"
	42	+ dropdownAutoWidth: true
	43	+ escapeMarkup: (m) -> # we do not want to escape markup since we are displaying html in results
	44	+ m
...	...
1	1	$ ->
2	2	userFormatResult = (user) ->
3		- if user.avatar
4		- avatar = user.avatar.url
	3	+ if user.avatar_url
	4	+ avatar = user.avatar_url
5	5	else if gon.gravatar_enabled
6	6	avatar = gon.gravatar_url
7	7	avatar = avatar.replace('%{hash}', md5(user.email))
...	...
...	...	@@ -65,6 +65,7 @@
65	65	@import "sections/wall.scss";
66	66	@import "sections/dashboard.scss";
67	67	@import "sections/stat_graph.scss";
	68	+@import "sections/groups.scss";
68	69
69	70	/**
70	71	* Code ighlight
...	...
...	...	@@ -112,6 +112,7 @@ pre.well-pre {
112	112	.dropdown-menu > li > a:hover,
113	113	.dropdown-menu > li > a:focus {
114	114	background: #29b;
	115	+ color: #FFF
115	116	}
116	117
117	118	.breadcrumb > li + li:before {
...	...
...	...	@@ -51,3 +51,27 @@ label {
51	51	.input-mn-300 {
52	52	min-width: 300px;
53	53	}
	54	+
	55	+.custom-form-control {
	56	+ width: 150px;
	57	+}
	58	+
	59	+@media (min-width: $screen-sm-min) {
	60	+ .custom-form-control {
	61	+ width: 150px;
	62	+ }
	63	+}
	64	+
	65	+/* Medium devices (desktops, 992px and up) */
	66	+@media (min-width: $screen-md-min) {
	67	+ .custom-form-control {
	68	+ width: 170px;
	69	+ }
	70	+}
	71	+
	72	+/* Large devices (large desktops, 1200px and up) */
	73	+@media (min-width: $screen-lg-min) {
	74	+ .custom-form-control {
	75	+ width: 200px;
	76	+ }
	77	+}
...	...
1	1	/ Select2 selectbox style override /
2		-
3	2	.select2-container, .select2-container.select2-drop-above {
4	3	.select2-choice {
5	4	background: #FFF;
...	...	@@ -12,9 +11,13 @@
12	11	}
13	12
14	13	.select2-drop-active {
15		- border: 1px solid #BBB;
	14	+ border: 1px solid #BBB !important;
16	15	margin-top: 4px;
17	16
	17	+ &.select2-drop-above {
	18	+ margin-bottom: 8px;
	19	+ }
	20	+
18	21	.select2-search input {
19	22	background: #fafafa;
20	23	border-color: #DDD;
...	...	@@ -78,3 +81,9 @@ select {
78	81	.project-refs-form .select2-container {
79	82	margin-right: 10px;
80	83	}
	84	+
	85	+.ajax-users-dropdown, .ajax-project-users-dropdown {
	86	+ .select2-search {
	87	+ padding-top: 4px;
	88	+ }
	89	+}
...	...
...	...	@@ -0,0 +1,9 @@
	1	+.new-group-member-holder {
	2	+ margin-top: 50px;
	3	+ background: #f9f9f9;
	4	+ padding-top: 20px;
	5	+}
	6	+
	7	+.member-search-form {
	8	+ float: left;
	9	+}
...	...
...	...	@@ -14,8 +14,8 @@
14	14
15	15	.issue-check {
16	16	float: left;
17		- padding: 8px 0;
18	17	padding-right: 8px;
	18	+ margin-bottom: 10px;
19	19	min-width: 15px;
20	20	}
21	21
...	...	@@ -38,13 +38,21 @@
38	38	}
39	39	}
40	40
41		-input.check_all_issues {
	41	+.check-all-holder {
	42	+ height: 32px;
42	43	float: left;
43		- padding: 0;
44		- margin: 0;
45		- margin-right: 10px;
46		- position: relative;
47		- top: 13px;
	44	+ margin-right: 12px;
	45	+ padding: 6px 10px;
	46	+ border: 1px solid #ccc;
	47	+ @include border-radius(4px);
	48	+
	49	+
	50	+ input.check_all_issues {
	51	+ padding: 0;
	52	+ margin: 0;
	53	+ position: relative;
	54	+ top: 3px;
	55	+ }
48	56	}
49	57
50	58	.issues_content {
...	...	@@ -91,6 +99,13 @@ input.check_all_issues {
91	99	.update_selected_issues {
92	100	margin-left: 4px;
93	101	}
	102	+
	103	+ .select2-container .select2-choice {
	104	+ height: 32px;
	105	+ line-height: 28px;
	106	+ color: #444 !important;
	107	+ font-weight: 500;
	108	+ }
94	109	}
95	110	}
96	111
...	...
...	...	@@ -63,7 +63,14 @@ class GroupsController < ApplicationController
63	63
64	64	def members
65	65	@project = group.projects.find(params[:project_id]) if params[:project_id]
66		- @members = group.users_groups.order('group_access DESC')
	66	+ @members = group.users_groups
	67	+
	68	+ if params[:search].present?
	69	+ users = group.users.search(params[:search])
	70	+ @members = @members.where(user_id: users)
	71	+ end
	72	+
	73	+ @members = @members.order('group_access DESC').page(params[:page]).per(50)
67	74	@users_group = UsersGroup.new
68	75	end
69	76
...	...