Show a team's last activity in the UI.

Fix timeago and requireJS.

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

@@ -15,7 +15,8 @@
                 description: '',
                 country: '',
                 language: '',
-                membership: []
+                membership: [],
+                last_activity_at: ''
             },
 
             initialize: function(options) {

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

@@ -20,7 +20,8 @@ define([
                 description: "TeamDescription",
                 country: "c",
                 language: "a",
-                membership: []
+                membership: [],
+                last_activity_at: ''
             },
             verifyValidation = function (requests, teamEditView, fieldsData) {
                 _.each(fieldsData, function (fieldData) {

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

+define(['jquery',
+        'underscore',
+        'teams/js/views/team_card',
+        'teams/js/models/team'],
+    function ($, _, TeamCardView, Team) {
+        describe('TeamCardView', function () {
+            var createTeamCardView, view;
+            createTeamCardView = function () {
+                var model = new Team({
+                    id: 'test-team',
+                    name: 'Test Team',
+                    is_active: true,
+                    course_id: 'test/course/id',
+                    topic_id: 'test-topic',
+                    description: 'A team for testing',
+                    last_activity_at: "2015-08-21T18:53:01.145Z",
+                    country: 'us',
+                    language: 'en'
+                }),
+                    teamCardClass = TeamCardView.extend({
+                        maxTeamSize: '100',
+                        srInfo: {
+                            id: 'test-sr-id',
+                            text: 'Screenreader text'
+                        },
+                        countries: {us: 'United States of America'},
+                        languages: {en: 'English'}
+                    });
+                return new teamCardClass({
+                    model: model
+                });
+            };
+
+            beforeEach(function () {
+                view = createTeamCardView();
+                view.render();
+            });
+
+            it('can render itself', function () {
+                expect(view.$el).toHaveClass('list-card');
+                expect(view.$el.find('.card-title').text()).toContain('Test Team');
+                expect(view.$el.find('.card-description').text()).toContain('A team for testing');
+                expect(view.$el.find('.team-activity abbr').attr('title')).toEqual("2015-08-21T18:53:01.145Z");
+                expect(view.$el.find('.team-activity').text()).toContain('Last Activity');
+                expect(view.$el.find('.card-meta').text()).toContain('0 / 100 Members');
+                expect(view.$el.find('.team-location').text()).toContain('United States of America');
+                expect(view.$el.find('.team-language').text()).toContain('English');
+            });
+
+            it('navigates to the associated team page when its action button is clicked', function () {
+                expect(view.$('.action').attr('href')).toEqual('#teams/test-topic/test-team');
+            });
+        });
+    }
+);

lms/djangoapps/teams/static/teams/js/spec_helpers/team_spec_helpers.js

@@ -33,7 +33,8 @@ define([
                 language: testLanguages[i%4][0],
                 country: testCountries[i%4][0],
                 is_active: true,
-                membership: []
+                membership: [],
+                last_activity_at: ''
             };
         });
     };

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

@@ -4,11 +4,13 @@
         'backbone',
         'underscore',
         'gettext',
+        'jquery.timeago',
         'js/components/card/views/card',
         'teams/js/views/team_utils',
-        'text!teams/templates/team-country-language.underscore'
-    ], function (Backbone, _, gettext, CardView, TeamUtils, teamCountryLanguageTemplate) {
-        var TeamMembershipView, TeamCountryLanguageView, TeamCardView;
+        'text!teams/templates/team-country-language.underscore',
+        'text!teams/templates/team-activity.underscore'
+    ], function (Backbone, _, gettext, timeago, CardView, TeamUtils, teamCountryLanguageTemplate, teamActivityTemplate) {
+        var TeamMembershipView, TeamCountryLanguageView, TeamActivityView, TeamCardView;
 
         TeamMembershipView = Backbone.View.extend({
             tagName: 'div',
@@ -54,6 +56,28 @@
             }
         });
 
+        TeamActivityView = Backbone.View.extend({
+            tagName: 'div',
+            className: 'team-activity',
+            template: _.template(teamActivityTemplate),
+
+            initialize: function (options) {
+                this.date = options.date;
+            },
+
+            render: function () {
+                this.$el.html(
+                    interpolate(
+                        // Translators: 'date' is a placeholder for a fuzzy, relative timestamp (see: https://github.com/rmm5t/jquery-timeago)
+                        gettext("Last Activity %(date)s"),
+                        {date: this.template({date: this.date})},
+                        true
+                    )
+                );
+                this.$('abbr').timeago();
+            }
+        });
+
         TeamCardView = CardView.extend({
             initialize: function () {
                 CardView.prototype.initialize.apply(this, arguments);
@@ -64,7 +88,8 @@
                         model: this.teamModel(),
                         countries: this.countries,
                         languages: this.languages
-                    })
+                    }),
+                    new TeamActivityView({date: this.teamModel().get('last_activity_at')})
                 ];
             },
 

lms/djangoapps/teams/static/teams/templates/team-activity.underscore

+<abbr title="<%= date %>"></abbr>

lms/static/js/spec/main.js

@@ -794,6 +794,7 @@
         'lms/include/teams/js/spec/teams_tab_factory_spec.js',
         'lms/include/teams/js/spec/views/edit_team_spec.js',
         'lms/include/teams/js/spec/views/my_teams_spec.js',
+        'lms/include/teams/js/spec/views/team_card_spec.js',
         'lms/include/teams/js/spec/views/team_discussion_spec.js',
         'lms/include/teams/js/spec/views/team_profile_spec.js',
         'lms/include/teams/js/spec/views/teams_spec.js',

lms/static/lms/js/require-config.js

@@ -44,6 +44,7 @@
             "underscore.string": "js/vendor/underscore.string.min",
             "jquery": "js/vendor/jquery.min",
             "jquery.cookie": "js/vendor/jquery.cookie",
+            'jquery.timeago': 'js/vendor/jquery.timeago',
             "jquery.url": "js/vendor/url.min",
             "jquery.ui": "js/vendor/jquery-ui.min",
             "jquery.iframe-transport": "js/vendor/jQuery-File-Upload/js/jquery.iframe-transport",
@@ -94,6 +95,10 @@
                 deps: ["jquery"],
                 exports: "jQuery.fn.cookie"
             },
+            "jquery.timeago": {
+                deps: ["jquery"],
+                exports: "jQuery.timeago"
+            },
             "jquery.url": {
                 deps: ["jquery"],
                 exports: "jQuery.url"