Merge pull request #9504 from edx/peter-fogg/sort-team-page

Allow sorting of teams in a topic

common/test/acceptance/pages/lms/teams.py

@@ -20,6 +20,25 @@ TEAMS_HEADER_CSS = '.teams-header'
 CREATE_TEAM_LINK_CSS = '.create-team'
 
 
+class TeamCardsMixin(object):
+    """Provides common operations on the team card component."""
+
+    @property
+    def team_cards(self):
+        """Get all the team cards on the page."""
+        return self.q(css='.team-card')
+
+    @property
+    def team_names(self):
+        """Return the names of each team on the page."""
+        return self.q(css='h3.card-title').map(lambda e: e.text).results
+
+    @property
+    def team_descriptions(self):
+        """Return the names of each team on the page."""
+        return self.q(css='p.card-description').map(lambda e: e.text).results
+
+
 class TeamsPage(CoursePage):
     """
     Teams page/tab.
@@ -84,7 +103,7 @@ class TeamsPage(CoursePage):
         self.q(css='a.nav-item').filter(text=topic)[0].click()
 
 
-class MyTeamsPage(CoursePage, PaginatedUIMixin):
+class MyTeamsPage(CoursePage, PaginatedUIMixin, TeamCardsMixin):
     """
     The 'My Teams' tab of the Teams page.
     """
@@ -98,11 +117,6 @@ class MyTeamsPage(CoursePage, PaginatedUIMixin):
             return False
         return 'is-active' in button_classes[0]
 
-    @property
-    def team_cards(self):
-        """Get all the team cards on the page."""
-        return self.q(css='.team-card')
-
 
 class BrowseTopicsPage(CoursePage, PaginatedUIMixin):
     """
@@ -145,7 +159,7 @@ class BrowseTopicsPage(CoursePage, PaginatedUIMixin):
         self.wait_for_ajax()
 
 
-class BrowseTeamsPage(CoursePage, PaginatedUIMixin):
+class BrowseTeamsPage(CoursePage, PaginatedUIMixin, TeamCardsMixin):
     """
     The paginated UI for browsing teams within a Topic on the Teams
     page.
@@ -179,9 +193,13 @@ class BrowseTeamsPage(CoursePage, PaginatedUIMixin):
         return self.q(css=TEAMS_HEADER_CSS + ' .page-description')[0].text
 
     @property
-    def team_cards(self):
-        """Get all the team cards on the page."""
-        return self.q(css='.team-card')
+    def sort_order(self):
+        """Return the current sort order on the page."""
+        return self.q(
+            css='#paging-header-select option'
+        ).filter(
+            lambda e: e.is_selected()
+        ).results[0].text.strip()
 
     def click_create_team_link(self):
         """ Click on create team link."""
@@ -204,6 +222,13 @@ class BrowseTeamsPage(CoursePage, PaginatedUIMixin):
             query.first.click()
             self.wait_for_ajax()
 
+    def sort_teams_by(self, sort_order):
+        """Sort the list of teams by the given `sort_order`."""
+        self.q(
+            css='#paging-header-select option[value={sort_order}]'.format(sort_order=sort_order)
+        ).click()
+        self.wait_for_ajax()
+
 
 class CreateOrEditTeamPage(CoursePage, FieldsMixin):
     """

lms/djangoapps/teams/static/teams/js/collections/team.js

@@ -3,6 +3,8 @@
     define(['teams/js/collections/base', 'teams/js/models/team', 'gettext'],
         function(BaseCollection, TeamModel, gettext) {
             var TeamCollection = BaseCollection.extend({
+                sortField: 'last_activity_at',
+
                 initialize: function(teams, options) {
                     var self = this;
                     BaseCollection.prototype.initialize.call(this, options);
@@ -12,14 +14,14 @@
                             topic_id: this.topic_id = options.topic_id,
                             expand: 'user',
                             course_id: function () { return encodeURIComponent(self.course_id); },
-                            order_by: function () { return 'name'; } // TODO surface sort order in UI
+                            order_by: function () { return this.sortField; }
                         },
                         BaseCollection.prototype.server_api
                     );
                     delete this.server_api.sort_order; // Sort order is not specified for the Team API
 
-                    this.registerSortableField('name', gettext('name'));
-                    this.registerSortableField('open_slots', gettext('open_slots'));
+                    this.registerSortableField('last_activity_at', gettext('last activity'));
+                    this.registerSortableField('open_slots', gettext('open slots'));
                 },
 
                 model: TeamModel

lms/djangoapps/teams/static/teams/js/views/teams.js

@@ -10,10 +10,6 @@
         var TeamsView = PaginatedView.extend({
             type: 'teams',
 
-            events: {
-                'click button.action': '' // entry point for team creation
-            },
-
             srInfo: {
                 id: "heading-browse-teams",
                 text: gettext('All teams')

lms/djangoapps/teams/static/teams/js/views/topic_teams.js

 ;(function (define) {
     'use strict';
-
-    define(['backbone', 'gettext', 'teams/js/views/teams',
-            'text!teams/templates/team-actions.underscore'],
-        function (Backbone, gettext, TeamsView, teamActionsTemplate) {
+    define([
+        'backbone',
+        'gettext',
+        'teams/js/views/teams',
+        'common/js/components/views/paging_header',
+        'text!teams/templates/team-actions.underscore'
+    ], function (Backbone, gettext, TeamsView, PagingHeader, teamActionsTemplate) {
             var TopicTeamsView = TeamsView.extend({
                 events: {
                     'click a.browse-teams': 'browseTeams',
@@ -54,6 +57,14 @@
                 showCreateTeamForm: function (event) {
                     event.preventDefault();
                     Backbone.history.navigate('topics/' + this.teamParams.topicID + '/create-team', {trigger: true});
+                },
+
+                createHeaderView: function () {
+                    return new PagingHeader({
+                        collection: this.options.collection,
+                        srInfo: this.srInfo,
+                        showSortControls: true
+                    });
                 }
             });
 

lms/static/sass/views/_teams.scss

@@ -164,6 +164,7 @@
     label { // override
       color: inherit;
       font-size: inherit;
+      cursor: auto;
     }
 
     .listing-sort-select {