adds sort dropdown for group members

4 files changed, 100 insertions, 15 deletions

diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index 756efa9c7fa..962aca7066c 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -70,8 +70,17 @@
 .member-search-form {
   position: relative;
 
-  @media (min-width: $screen-sm-min) {
-    float: right;
+  @media (min-width: $screen-sm-min) { float: right; }
+
+  .dropdown {
+    width: 100%;
+    margin-top: 5px;
+
+    .dropdown-menu-toggle {
+      width: 100%;
+    }
+
+    @media (min-width: $screen-sm-min) { top: 2.4px; width: 155px; }
   }
 
   .form-control {
@@ -81,18 +90,38 @@
     @media (min-width: $screen-sm-min) {
       width: 350px;
     }
+
+    &.input-short {
+      /* Medium devices (desktops, 992px and up) */
+      @media (min-width: $screen-md-min) { width: 170px; }
+
+      /* Large devices (large desktops, 1200px and up) */
+      @media (min-width: $screen-lg-min) { width: 210px; }
+    }
+  }
+
+  &.group-member {
+    .member-search-btn {
+      right: 4px;
+
+      @media (min-width: $screen-sm-min) {
+        right: 160px;
+        top: 8px;
+      }
+    }
+  }
+
+  .member-search-btn {
+    position: absolute;
+    right: 20px;
+    top: 0;
+    height: 35px;
+    padding-left: 10px;
+    padding-right: 10px;
+    color: $gray-darkest;
+    background: transparent;
+    border: 0;
+    outline: 0;
   }
-}
 
-.member-search-btn {
-  position: absolute;
-  right: 0;
-  top: 0;
-  height: 35px;
-  padding-left: 10px;
-  padding-right: 10px;
-  color: $gray-darkest;
-  background: transparent;
-  border: 0;
-  outline: 0;
 }
diff --git a/app/helpers/sorting_helper.rb b/app/helpers/sorting_helper.rb
index 8b138a8e69f..f860a5cf3a2 100644
--- a/app/helpers/sorting_helper.rb
+++ b/app/helpers/sorting_helper.rb
@@ -35,6 +35,20 @@ module SortingHelper
     options
   end
 
+  def member_sort_options_hash
+    options = {
+      sort_value_last_joined => sort_title_last_joined,
+      sort_value_oldest_joined => sort_title_oldest_joined,
+      sort_value_name => sort_title_name_asc,
+      sort_value_name_desc => sort_title_name_desc,
+      sort_value_recently_signin => sort_title_recently_signin,
+      sort_value_oldest_signin => sort_title_oldest_signin,
+
+    }
+
+    options
+  end
+
   def sort_title_priority
     'Priority'
   end
@@ -95,6 +109,34 @@ module SortingHelper
     'Most popular'
   end
 
+  def sort_title_last_joined
+    'Last joined'
+  end
+
+  def sort_title_oldest_joined
+    'Oldest joined'
+  end
+
+  def sort_title_name_asc
+    'Name, ascending'
+  end
+
+  def sort_title_name_desc
+    'Name, descending'
+  end
+
+  def sort_value_last_joined
+    'last_joined'
+  end
+
+  def sort_value_oldest_joined
+    'oldest_joined'
+  end
+
+  def sort_value_name_desc
+    'name_desc'
+  end
+
   def sort_value_priority
     'priority'
   end
diff --git a/app/views/groups/group_members/index.html.haml b/app/views/groups/group_members/index.html.haml
index ebf9aca7700..d0e9da5af18 100644
--- a/app/views/groups/group_members/index.html.haml
+++ b/app/views/groups/group_members/index.html.haml
@@ -16,11 +16,12 @@
   .append-bottom-default.clearfix
     %h5.member.existing-title
       Existing users
-    = form_tag group_group_members_path(@group), method: :get, class: 'form-inline member-search-form'  do
+    = form_tag group_group_members_path(@group), method: :get, class: 'form-inline group-member member-search-form'  do
       .form-group
         = search_field_tag :search, params[:search], { placeholder: 'Find existing members by name', class: 'form-control', spellcheck: false }
         %button.member-search-btn{ type: "submit", "aria-label" => "Submit search" }
           = icon("search")
+        = render 'shared/members/sort_dropdown'
   .panel.panel-default
     .panel-heading
       Users with access to
diff --git a/app/views/shared/members/_sort_dropdown.html.haml b/app/views/shared/members/_sort_dropdown.html.haml
new file mode 100644
index 00000000000..f367d9363f7
--- /dev/null
+++ b/app/views/shared/members/_sort_dropdown.html.haml
@@ -0,0 +1,13 @@
+- @sort ||= sort_value_last_joined
+
+.dropdown.inline
+  - toggle_text = member_sort_options_hash[@sort]
+  = dropdown_toggle(toggle_text, { toggle: 'dropdown' }, { id: 'sort-members-dropdown' })
+  %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
+    %li.dropdown-header
+      Sort by
+    - member_sort_options_hash.each do |value, title|
+      %li
+        / need to change this so that it selects memeber project path
+        = link_to filter_projects_path(sort: value), class: ("is-active" if @sort == value) do
+          = title