Add Full Country & Language Names to Teams [TNL-2891]

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

@@ -9,13 +9,25 @@ define([
                     return {
                         name: "team " + i,
                         id: "id " + i,
-                        language: "English",
-                        country: "Sealand",
+                        language: languages[i%4][0],
+                        country: countries[i%4][0],
                         is_active: true,
                         membership: []
                     };
                 });
-            };
+            },
+            countries = [
+                ['', ''],
+                ['US', 'United States'],
+                ['CA', 'Canada'],
+                ['MX', 'Mexico']
+            ],
+            languages = [
+                ['', ''],
+                ['en', 'English'],
+                ['es', 'Spanish'],
+                ['fr', 'French']
+            ];
 
         beforeEach(function () {
             setFixtures('<div class="teams-container"></div>');
@@ -33,7 +45,10 @@ define([
             teamsView = new TeamsView({
                 el: '.teams-container',
                 collection: teamCollection,
-                teamParams: {}
+                teamParams: {
+                    countries: countries,
+                    languages: languages
+                }
             }).render();
         });
 
@@ -43,9 +58,10 @@ define([
             expect(teamsView.$('.teams-paging-header').text()).toMatch('Showing 1-5 out of 6 total');
             _.each(initialTeams, function (team, index) {
                 var currentCard = teamCards.eq(index);
+
                 expect(currentCard.text()).toMatch(team.name);
-                expect(currentCard.text()).toMatch(team.language);
-                expect(currentCard.text()).toMatch(team.country);
+                expect(currentCard.text()).toMatch(_.object(languages)[team.language]);
+                expect(currentCard.text()).toMatch(_.object(countries)[team.country]);
             });
             expect(footerEl.text()).toMatch('1\\s+out of\\s+\/\\s+2');
             expect(footerEl).not.toHaveClass('hidden');

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

@@ -47,11 +47,16 @@
         TeamCountryLanguageView = Backbone.View.extend({
             template: _.template(teamCountryLanguageTemplate),
 
+            initialize: function (options) {
+                this.countries = options.countries;
+                this.languages = options.languages;
+            },
+
             render: function() {
                 // this.$el should be the card meta div
                 this.$el.append(this.template({
-                    country: this.model.get('country'),
-                    language: this.model.get('language')
+                    country: this.countries[this.model.get('country')],
+                    language: this.languages[this.model.get('language')]
                 }));
             }
         });
@@ -62,7 +67,11 @@
                 // TODO: show last activity detail view
                 this.detailViews = [
                     new TeamMembershipView({model: this.model, maxTeamSize: this.maxTeamSize}),
-                    new TeamCountryLanguageView({model: this.model})
+                    new TeamCountryLanguageView({
+                        model: this.model,
+                        countries: this.countries,
+                        languages: this.languages
+                    })
                 ];
             },
 

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

@@ -14,7 +14,9 @@
                 this.itemViewClass = TeamCardView.extend({
                     router: options.router,
                     topic: options.topic,
-                    maxTeamSize: options.maxTeamSize
+                    maxTeamSize: options.maxTeamSize,
+                    countries: this.selectorOptionsArrayToHashWithBlank(options.teamParams.countries),
+                    languages: this.selectorOptionsArrayToHashWithBlank(options.teamParams.languages),
                 });
                 PaginatedView.prototype.initialize.call(this);
                 this.teamParams = options.teamParams;
@@ -29,6 +31,20 @@
                 this.$el.append(teamActionsView.$el);
                 teamActionsView.render();
                 return this;
+            },
+
+            /**
+             * Convert a 2d array to an object equivalent with an additional blank element
+             *
+             * @param {Array.<Array.<string>>} Two dimensional options array
+             * @returns {Object} Hash version of the input array
+             * @example selectorOptionsArrayToHashWithBlank([["a", "alpha"],["b","beta"]])
+             * // returns {"a":"alpha", "b":"beta", "":""}
+             */
+            selectorOptionsArrayToHashWithBlank: function (options) {
+                var map = _.object(options);
+                map[""] = "";
+                return map;
             }
         });
         return TeamsView;