Skip to content

E
edx-platform
Commit f788caa6 by muzaffaryousaf
Options

Edit team page for Instructor only. 

TNL-1914
parent 406c9bc5
Showing with 269 additions and 92 deletions
common/test/acceptance/pages/lms/teams.py
...@@ -205,7 +205,7 @@ class BrowseTeamsPage(CoursePage, PaginatedUIMixin): ...@@ -205,7 +205,7 @@ class BrowseTeamsPage(CoursePage, PaginatedUIMixin):
self.wait_for_ajax() self.wait_for_ajax()
class CreateTeamPage(CoursePage, FieldsMixin): class CreateOrEditTeamPage(CoursePage, FieldsMixin):
""" """
Create team page. Create team page.
""" """
...@@ -216,7 +216,7 @@ class CreateTeamPage(CoursePage, FieldsMixin): ...@@ -216,7 +216,7 @@ class CreateTeamPage(CoursePage, FieldsMixin):
representation of a topic following the same convention as a representation of a topic following the same convention as a
course module's topic. course module's topic.
""" """
super(CreateTeamPage, self).__init__(browser, course_id) super(CreateOrEditTeamPage, self).__init__(browser, course_id)
self.topic = topic self.topic = topic
self.url_path = "teams/#topics/{topic_id}/create-team".format(topic_id=self.topic['id']) self.url_path = "teams/#topics/{topic_id}/create-team".format(topic_id=self.topic['id'])
...@@ -410,3 +410,12 @@ class TeamPage(CoursePage, PaginatedUIMixin): ...@@ -410,3 +410,12 @@ class TeamPage(CoursePage, PaginatedUIMixin):
"""Navigate to the 'All Topics' page.""" """Navigate to the 'All Topics' page."""
self.q(css='.breadcrumbs a').results[0].click() self.q(css='.breadcrumbs a').results[0].click()
self.wait_for_ajax() self.wait_for_ajax()
@property
def edit_team_button_present(self):
""" Returns True if Edit Team button is present else False """
return self.q(css='.form-actions .action-edit-team').present
def click_edit_team_button(self):
""" Click on Edit Team button"""
self.q(css='.form-actions .action-edit-team').first.click()
lms/djangoapps/teams/static/teams/js/spec/views/team_join_spec.js → lms/djangoapps/teams/static/teams/js/spec/views/team_profile_header_actions_spec.js
define([ define([
'backbone', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'teams/js/models/team', 'backbone', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'teams/js/models/team',
'teams/js/views/team_join', 'teams/js/spec_helpers/team_spec_helpers' 'teams/js/views/team_profile_header_actions', 'teams/js/spec_helpers/team_spec_helpers'
], function (Backbone, _, AjaxHelpers, TeamModel, TeamJoinView, TeamSpecHelpers) { ], function (Backbone, _, AjaxHelpers, TeamModel, TeamProfileHeaderActionsView, TeamSpecHelpers) {
'use strict'; 'use strict';
describe('TeamJoinView', function () {
describe('TeamProfileHeaderActionsView', function () {
var createTeamsUrl, var createTeamsUrl,
createTeamModelData, createTeamModelData,
createMembershipData, createMembershipData,
createJoinView, createHeaderActionsView,
verifyErrorMessage, verifyErrorMessage,
ACCOUNTS_API_URL = '/api/user/v1/accounts/', ACCOUNTS_API_URL = '/api/user/v1/accounts/',
TEAMS_URL = '/api/team/v0/teams/', TEAMS_URL = '/api/team/v0/teams/',
TEAMS_MEMBERSHIP_URL = '/api/team/v0/team_membership/'; TEAMS_MEMBERSHIP_URL = '/api/team/v0/team_membership/';
beforeEach(function () {
setFixtures(
'<div class="teams-content"><div class="msg-content"><div class="copy"></div></div><div class="header-action-view"></div></div>'
);
});
verifyErrorMessage = function (requests, errorMessage, expectedMessage, joinTeam) {
var view = createJoinView(1, 'ma', createTeamModelData('teamA', 'teamAlpha', []));
if (joinTeam) {
// if we want the error to return when user try to join team, respond with no membership
AjaxHelpers.respondWithJson(requests, {"count": 0});
view.$('.action.action-primary').click();
}
AjaxHelpers.respondWithTextError(requests, 400, errorMessage);
expect($('.msg-content .copy').text().trim()).toBe(expectedMessage);
};
createTeamsUrl = function (teamId) { createTeamsUrl = function (teamId) {
return TEAMS_URL + teamId + '?expand=user'; return TEAMS_URL + teamId + '?expand=user';
}; };
...@@ -38,10 +22,31 @@ define([ ...@@ -38,10 +22,31 @@ define([
return { return {
id: teamId, id: teamId,
name: teamName, name: teamName,
membership: membership membership: membership,
url: createTeamsUrl(teamId)
}; };
}; };
createHeaderActionsView = function(maxTeamSize, currentUsername, teamModelData, showEditButton) {
var teamId = 'teamA';
var model = new TeamModel(teamModelData, { parse: true });
return new TeamProfileHeaderActionsView(
{
courseID: TeamSpecHelpers.testCourseID,
teamEvents: TeamSpecHelpers.teamEvents,
model: model,
teamsUrl: createTeamsUrl(teamId),
maxTeamSize: maxTeamSize,
currentUsername: currentUsername,
teamMembershipsUrl: TEAMS_MEMBERSHIP_URL,
topicID: '',
showEditButton: showEditButton
}
).render();
};
createMembershipData = function (username) { createMembershipData = function (username) {
return [ return [
{ {
...@@ -53,29 +58,28 @@ define([ ...@@ -53,29 +58,28 @@ define([
]; ];
}; };
createJoinView = function(maxTeamSize, currentUsername, teamModelData, teamId) { describe('JoinButton', function () {
teamId = teamId || 'teamA';
var model = new TeamModel(teamModelData, { parse: true }); beforeEach(function () {
model.url = createTeamsUrl(teamId); setFixtures(
'<div class="teams-content"><div class="msg-content"><div class="copy"></div></div><div class="header-action-view"></div></div>'
);
});
var teamJoinView = new TeamJoinView( verifyErrorMessage = function (requests, errorMessage, expectedMessage, joinTeam) {
{ var view = createHeaderActionsView(1, 'ma', createTeamModelData('teamA', 'teamAlpha', []));
courseID: TeamSpecHelpers.testCourseID, if (joinTeam) {
teamEvents: TeamSpecHelpers.teamEvents, // if we want the error to return when user try to join team, respond with no membership
model: model, AjaxHelpers.respondWithJson(requests, {"count": 0});
teamsUrl: createTeamsUrl(teamId), view.$('.action.action-primary').click();
maxTeamSize: maxTeamSize,
currentUsername: currentUsername,
teamMembershipsUrl: TEAMS_MEMBERSHIP_URL
} }
); AjaxHelpers.respondWithTextError(requests, 400, errorMessage);
return teamJoinView.render(); expect($('.msg-content .copy').text().trim()).toBe(expectedMessage);
}; };
it('can render itself', function () { it('can render itself', function () {
var teamModelData = createTeamModelData('teamA', 'teamAlpha', createMembershipData('ma')); var teamModelData = createTeamModelData('teamA', 'teamAlpha', createMembershipData('ma'));
var view = createJoinView(1, 'ma', teamModelData); var view = createHeaderActionsView(1, 'ma', teamModelData);
expect(view.$('.join-team').length).toEqual(1); expect(view.$('.join-team').length).toEqual(1);
}); });
...@@ -86,7 +90,7 @@ define([ ...@@ -86,7 +90,7 @@ define([
var teamId = 'teamA'; var teamId = 'teamA';
var teamName = 'teamAlpha'; var teamName = 'teamAlpha';
var teamModelData = createTeamModelData(teamId, teamName, []); var teamModelData = createTeamModelData(teamId, teamName, []);
var view = createJoinView(1, currentUsername, teamModelData); var view = createHeaderActionsView(1, currentUsername, teamModelData);
// a get request will be sent to get user membership info // a get request will be sent to get user membership info
// because current user is not member of current team // because current user is not member of current team
...@@ -131,7 +135,7 @@ define([ ...@@ -131,7 +135,7 @@ define([
it('shows already member message', function () { it('shows already member message', function () {
var requests = AjaxHelpers.requests(this); var requests = AjaxHelpers.requests(this);
var currentUsername = 'ma1'; var currentUsername = 'ma1';
var view = createJoinView(1, currentUsername, createTeamModelData('teamA', 'teamAlpha', [])); var view = createHeaderActionsView(1, currentUsername, createTeamModelData('teamA', 'teamAlpha', []));
// a get request will be sent to get user membership info // a get request will be sent to get user membership info
// because current user is not member of current team // because current user is not member of current team
...@@ -151,7 +155,7 @@ define([ ...@@ -151,7 +155,7 @@ define([
it('shows team full message', function () { it('shows team full message', function () {
var requests = AjaxHelpers.requests(this); var requests = AjaxHelpers.requests(this);
var view = createJoinView( var view = createHeaderActionsView(
1, 1,
'ma1', 'ma1',
createTeamModelData('teamA', 'teamAlpha', createMembershipData('ma')) createTeamModelData('teamA', 'teamAlpha', createMembershipData('ma'))
...@@ -215,4 +219,36 @@ define([ ...@@ -215,4 +219,36 @@ define([
); );
}); });
}); });
describe('EditButton', function() {
var teamModelData,
view,
createAndAssertView;
createAndAssertView = function(showEditButton) {
teamModelData = createTeamModelData('aveA', 'avengers', createMembershipData('ma'));
view = createHeaderActionsView(1, 'ma', teamModelData, showEditButton);
expect(view.$('.action-edit-team').length).toEqual(showEditButton ? 1 : 0);
};
it('renders when option showEditButton is true', function () {
createAndAssertView(true);
});
it('does not render when option showEditButton is false', function () {
createAndAssertView(false);
});
it("can navigate to correct url", function () {
spyOn(Backbone.history, 'navigate');
createAndAssertView(true);
var editButton = view.$('.action-edit-team');
expect(editButton.length).toEqual(1);
$(editButton).click();
expect(Backbone.history.navigate.calls[0].args[0]).toContain('/edit-team');
});
});
});
}); });
lms/djangoapps/teams/static/teams/js/views/edit_team.js
...@@ -14,9 +14,9 @@ ...@@ -14,9 +14,9 @@
maxTeamDescriptionLength: 300, maxTeamDescriptionLength: 300,
events: { events: {
'click .action-primary': 'createTeam', 'click .action-primary': 'createOrUpdateTeam',
'submit form': 'createTeam', 'submit form': 'createOrUpdateTeam',
'click .action-cancel': 'goBackToTopic' 'click .action-cancel': 'cancelAndGoBack'
}, },
initialize: function(options) { initialize: function(options) {
...@@ -27,12 +27,20 @@ ...@@ -27,12 +27,20 @@
this.teamsUrl = options.teamParams.teamsUrl; this.teamsUrl = options.teamParams.teamsUrl;
this.languages = options.teamParams.languages; this.languages = options.teamParams.languages;
this.countries = options.teamParams.countries; this.countries = options.teamParams.countries;
this.primaryButtonTitle = options.primaryButtonTitle || 'Submit'; this.teamsDetailUrl = options.teamParams.teamsDetailUrl;
this.action = options.action;
_.bindAll(this, 'goBackToTopic', 'createTeam'); _.bindAll(this, 'cancelAndGoBack', 'createOrUpdateTeam');
if (this.action === 'create') {
this.teamModel = new TeamModel({}); this.teamModel = new TeamModel({});
this.teamModel.url = this.teamsUrl; this.teamModel.url = this.teamsUrl;
this.primaryButtonTitle = 'Create';
} else if(this.action === 'edit' ) {
this.teamModel = options.model;
this.teamModel.url = this.teamsDetailUrl.replace('team_id', options.model.get('id')) + '?expand=user';
this.primaryButtonTitle = 'Update';
}
this.teamNameField = new FieldViews.TextFieldView({ this.teamNameField = new FieldViews.TextFieldView({
model: this.teamModel, model: this.teamModel,
...@@ -74,7 +82,11 @@ ...@@ -74,7 +82,11 @@
}, },
render: function() { render: function() {
this.$el.html(_.template(editTeamTemplate)({primaryButtonTitle: this.primaryButtonTitle})); this.$el.html(_.template(editTeamTemplate) ({
primaryButtonTitle: this.primaryButtonTitle,
action: this.action,
totalMembers: _.isUndefined(this.teamModel) ? 0 : this.teamModel.get('membership').length
}));
this.set(this.teamNameField, '.team-required-fields'); this.set(this.teamNameField, '.team-required-fields');
this.set(this.teamDescriptionField, '.team-required-fields'); this.set(this.teamDescriptionField, '.team-required-fields');
this.set(this.teamLanguageField, '.team-optional-fields'); this.set(this.teamLanguageField, '.team-optional-fields');
...@@ -91,31 +103,39 @@ ...@@ -91,31 +103,39 @@
} }
}, },
createTeam: function (event) { createOrUpdateTeam: function (event) {
event.preventDefault(); event.preventDefault();
var view = this, var view = this,
teamLanguage = this.teamLanguageField.fieldValue(), teamLanguage = this.teamLanguageField.fieldValue(),
teamCountry = this.teamCountryField.fieldValue(); teamCountry = this.teamCountryField.fieldValue(),
data = {
var data = {
course_id: this.courseID,
topic_id: this.topicID,
name: this.teamNameField.fieldValue(), name: this.teamNameField.fieldValue(),
description: this.teamDescriptionField.fieldValue(), description: this.teamDescriptionField.fieldValue(),
language: _.isNull(teamLanguage) ? '' : teamLanguage, language: _.isNull(teamLanguage) ? '' : teamLanguage,
country: _.isNull(teamCountry) ? '' : teamCountry country: _.isNull(teamCountry) ? '' : teamCountry
},
saveOptions = {
wait: true
}; };
if (this.action === 'create') {
data.course_id = this.courseID;
data.topic_id = this.topicID;
} else if (this.action === 'edit' ) {
saveOptions.patch = true;
saveOptions.contentType = 'application/merge-patch+json';
}
var validationResult = this.validateTeamData(data); var validationResult = this.validateTeamData(data);
if (validationResult.status === false) { if (validationResult.status === false) {
this.showMessage(validationResult.message, validationResult.srMessage); this.showMessage(validationResult.message, validationResult.srMessage);
return; return;
} }
this.teamModel.save(data, { wait: true }) this.teamModel.save(data, saveOptions)
.done(function(result) { .done(function(result) {
view.teamEvents.trigger('teams:update', { view.teamEvents.trigger('teams:update', {
action: 'create', action: view.action,
team: result team: result
}); });
Backbone.history.navigate( Backbone.history.navigate(
...@@ -186,8 +206,15 @@ ...@@ -186,8 +206,15 @@
} }
}, },
goBackToTopic: function () { cancelAndGoBack: function (event) {
Backbone.history.navigate('topics/' + this.topicID, {trigger: true}); event.preventDefault();
var url;
if (this.action === 'create') {
url = 'topics/' + this.topicID;
} else if (this.action === 'edit' ) {
url = 'teams/' + this.topicID + '/' + this.teamModel.get('id');
}
Backbone.history.navigate(url, {trigger: true});
} }
}); });
}); });
......
lms/djangoapps/teams/static/teams/js/views/team_join.js → lms/djangoapps/teams/static/teams/js/views/team_profile_header_actions.js
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
'underscore', 'underscore',
'gettext', 'gettext',
'teams/js/views/team_utils', 'teams/js/views/team_utils',
'text!teams/templates/team-join.underscore'], 'text!teams/templates/team-profile-header-actions.underscore'],
function (Backbone, _, gettext, TeamUtils, teamJoinTemplate) { function (Backbone, _, gettext, TeamUtils, teamProfileHeaderActionsTemplate) {
return Backbone.View.extend({ return Backbone.View.extend({
errorMessage: gettext("An error occurred. Try again."), errorMessage: gettext("An error occurred. Try again."),
...@@ -14,31 +14,34 @@ ...@@ -14,31 +14,34 @@
teamFullMessage: gettext("This team is full."), teamFullMessage: gettext("This team is full."),
events: { events: {
"click .action-primary": "joinTeam" "click .action-primary": "joinTeam",
"click .action-edit-team": "editTeam"
}, },
initialize: function(options) { initialize: function(options) {
this.teamEvents = options.teamEvents; this.teamEvents = options.teamEvents;
this.template = _.template(teamJoinTemplate); this.template = _.template(teamProfileHeaderActionsTemplate);
this.courseID = options.courseID; this.courseID = options.courseID;
this.maxTeamSize = options.maxTeamSize; this.maxTeamSize = options.maxTeamSize;
this.currentUsername = options.currentUsername; this.currentUsername = options.currentUsername;
this.teamMembershipsUrl = options.teamMembershipsUrl; this.teamMembershipsUrl = options.teamMembershipsUrl;
_.bindAll(this, 'render', 'joinTeam', 'getUserTeamInfo'); this.showEditButton = options.showEditButton;
this.topicID = options.topicID;
_.bindAll(this, 'render', 'joinTeam','editTeam', 'getUserTeamInfo');
this.listenTo(this.model, "change", this.render); this.listenTo(this.model, "change", this.render);
}, },
render: function() { render: function() {
var view = this, var view = this,
message, message,
showButton, showJoinButton,
teamHasSpace; teamHasSpace;
this.getUserTeamInfo(this.currentUsername, view.maxTeamSize).done(function (info) { this.getUserTeamInfo(this.currentUsername, view.maxTeamSize).done(function (info) {
teamHasSpace = info.teamHasSpace; teamHasSpace = info.teamHasSpace;
// if user is the member of current team then we wouldn't show anything // if user is the member of current team then we wouldn't show anything
if (!info.memberOfCurrentTeam) { if (!info.memberOfCurrentTeam) {
showButton = !info.alreadyMember && teamHasSpace; showJoinButton = !info.alreadyMember && teamHasSpace;
if (info.alreadyMember) { if (info.alreadyMember) {
message = info.memberOfCurrentTeam ? '' : view.alreadyMemberMessage; message = info.memberOfCurrentTeam ? '' : view.alreadyMemberMessage;
...@@ -47,7 +50,11 @@ ...@@ -47,7 +50,11 @@
} }
} }
view.$el.html(view.template({showButton: showButton, message: message})); view.$el.html(view.template({
showJoinButton: showJoinButton,
message: message,
showEditButton: view.showEditButton
}));
}); });
return view; return view;
}, },
...@@ -108,6 +115,10 @@ ...@@ -108,6 +115,10 @@
} }
return deferred.promise(); return deferred.promise();
},
editTeam: function (event) {
event.preventDefault();
Backbone.history.navigate('topics/' + this.topicID + '/' + this.model.get('id') +'/edit-team', {trigger: true});
} }
}); });
}); });
......
lms/djangoapps/teams/static/teams/js/views/teams_tab.js
...@@ -17,12 +17,12 @@ ...@@ -17,12 +17,12 @@
'teams/js/views/my_teams', 'teams/js/views/my_teams',
'teams/js/views/topic_teams', 'teams/js/views/topic_teams',
'teams/js/views/edit_team', 'teams/js/views/edit_team',
'teams/js/views/team_join', 'teams/js/views/team_profile_header_actions',
'text!teams/templates/teams_tab.underscore'], 'text!teams/templates/teams_tab.underscore'],
function (Backbone, _, gettext, HeaderView, HeaderModel, TabbedView, function (Backbone, _, gettext, HeaderView, HeaderModel, TabbedView,
TopicModel, TopicCollection, TeamModel, TeamCollection, TeamMembershipCollection, TopicModel, TopicCollection, TeamModel, TeamCollection, TeamMembershipCollection,
TopicsView, TeamProfileView, MyTeamsView, TopicTeamsView, TeamEditView, TopicsView, TeamProfileView, MyTeamsView, TopicTeamsView, TeamEditView,
TeamJoinView, teamsTemplate) { TeamProfileHeaderActionsView, teamsTemplate) {
var TeamsHeaderModel = HeaderModel.extend({ var TeamsHeaderModel = HeaderModel.extend({
initialize: function (attributes) { initialize: function (attributes) {
_.extend(this.defaults, {nav_aria_label: gettext('teams')}); _.extend(this.defaults, {nav_aria_label: gettext('teams')});
...@@ -52,6 +52,7 @@ ...@@ -52,6 +52,7 @@
this.topics = options.topics; this.topics = options.topics;
this.topicUrl = options.topicUrl; this.topicUrl = options.topicUrl;
this.teamsUrl = options.teamsUrl; this.teamsUrl = options.teamsUrl;
this.teamsDetailUrl = options.teamsDetailUrl;
this.teamMembershipsUrl = options.teamMembershipsUrl; this.teamMembershipsUrl = options.teamMembershipsUrl;
this.teamMembershipDetailUrl = options.teamMembershipDetailUrl; this.teamMembershipDetailUrl = options.teamMembershipDetailUrl;
this.maxTeamSize = options.maxTeamSize; this.maxTeamSize = options.maxTeamSize;
...@@ -74,6 +75,7 @@ ...@@ -74,6 +75,7 @@
}, this)], }, this)],
['topics/:topic_id(/)', _.bind(this.browseTopic, this)], ['topics/:topic_id(/)', _.bind(this.browseTopic, this)],
['topics/:topic_id/create-team(/)', _.bind(this.newTeam, this)], ['topics/:topic_id/create-team(/)', _.bind(this.newTeam, this)],
['topics/:topic_id/:team_id/edit-team(/)', _.bind(this.editTeam, this)],
['teams/:topic_id/:team_id(/)', _.bind(this.browseTeam, this)], ['teams/:topic_id/:team_id(/)', _.bind(this.browseTeam, this)],
[new RegExp('^(browse)\/?$'), _.bind(this.goToTab, this)], [new RegExp('^(browse)\/?$'), _.bind(this.goToTab, this)],
[new RegExp('^(my-teams)\/?$'), _.bind(this.goToTab, this)] [new RegExp('^(my-teams)\/?$'), _.bind(this.goToTab, this)]
...@@ -208,10 +210,9 @@ ...@@ -208,10 +210,9 @@
}) })
}), }),
main: new TeamEditView({ main: new TeamEditView({
action: 'create',
teamEvents: self.teamEvents, teamEvents: self.teamEvents,
tagName: 'create-new-team', teamParams: teamsView.main.teamParams
teamParams: teamsView.main.teamParams,
primaryButtonTitle: 'Create'
}) })
}); });
self.render(); self.render();
...@@ -219,6 +220,44 @@ ...@@ -219,6 +220,44 @@
}, },
/** /**
* Render the edit team form.
*/
editTeam: function (topicID, teamID) {
var self = this,
editViewWithHeader;
this.getTopic(topicID).done(function (topic) {
self.getTeam(teamID, false).done(function(team) {
var view = new TeamEditView({
action: 'edit',
teamEvents: self.teamEvents,
teamParams: {
courseID: self.courseID,
topicID: topic.get('id'),
teamsUrl: self.teamsUrl,
topicName: topic.get('name'),
languages: self.languages,
countries: self.countries,
teamsDetailUrl: self.teamsDetailUrl
},
model: team
});
editViewWithHeader = self.createViewWithHeader({
mainView: view,
subject: {
name: gettext("Edit Team"),
description: gettext("If you make significant changes, make sure you notify members of the team before making these changes.")
},
parentTeam: team,
parentTopic: topic
}
);
self.mainView = editViewWithHeader;
self.render();
});
});
},
/**
* Return a promise for the TeamsView for the given topic ID. * Return a promise for the TeamsView for the given topic ID.
*/ */
getTeamsView: function (topicID) { getTeamsView: function (topicID) {
...@@ -227,7 +266,7 @@ ...@@ -227,7 +266,7 @@
var self = this, var self = this,
router = this.router, router = this.router,
deferred = $.Deferred(); deferred = $.Deferred();
if (this.teamsCollection && this.teamsCollection.topic_id === topicID) { if (this.teamsCollection && this.teamsCollection.topic_id === topicID && this.teamsView) {
deferred.resolve(this.teamsView); deferred.resolve(this.teamsView);
} else { } else {
this.getTopic(topicID) this.getTopic(topicID)
...@@ -254,7 +293,8 @@ ...@@ -254,7 +293,8 @@
teamsUrl: self.teamsUrl, teamsUrl: self.teamsUrl,
topicName: topic.get('name'), topicName: topic.get('name'),
languages: self.languages, languages: self.languages,
countries: self.countries countries: self.countries,
teamsDetailUrl: self.teamsDetailUrl
} }
}); });
deferred.resolve( deferred.resolve(
...@@ -311,14 +351,17 @@ ...@@ -311,14 +351,17 @@
teamMembershipDetailUrl: self.teamMembershipDetailUrl, teamMembershipDetailUrl: self.teamMembershipDetailUrl,
setFocusToHeaderFunc: self.setFocusToHeader setFocusToHeaderFunc: self.setFocusToHeader
}); });
var teamJoinView = new TeamJoinView({
var TeamProfileActionsView = new TeamProfileHeaderActionsView({
teamEvents: self.teamEvents, teamEvents: self.teamEvents,
courseID: courseID, courseID: courseID,
model: team, model: team,
teamsUrl: self.teamsUrl, teamsUrl: self.teamsUrl,
maxTeamSize: self.maxTeamSize, maxTeamSize: self.maxTeamSize,
currentUsername: self.userInfo.username, currentUsername: self.userInfo.username,
teamMembershipsUrl: self.teamMembershipsUrl teamMembershipsUrl: self.teamMembershipsUrl,
topicID: topicID,
showEditButton: self.userInfo.privileged || self.userInfo.staff
}); });
deferred.resolve( deferred.resolve(
self.createViewWithHeader( self.createViewWithHeader(
...@@ -326,7 +369,7 @@ ...@@ -326,7 +369,7 @@
mainView: view, mainView: view,
subject: team, subject: team,
parentTopic: topic, parentTopic: topic,
headerActionsView: teamJoinView headerActionsView: TeamProfileActionsView
} }
) )
); );
...@@ -337,7 +380,8 @@ ...@@ -337,7 +380,8 @@
createViewWithHeader: function (options) { createViewWithHeader: function (options) {
var router = this.router, var router = this.router,
breadcrumbs, headerView; breadcrumbs, headerView,
viewDescription, viewTitle;
breadcrumbs = [{ breadcrumbs = [{
title: gettext('All Topics'), title: gettext('All Topics'),
url: '#browse' url: '#browse'
...@@ -348,10 +392,25 @@ ...@@ -348,10 +392,25 @@
url: '#topics/' + options.parentTopic.id url: '#topics/' + options.parentTopic.id
}); });
} }
if (options.parentTeam) {
breadcrumbs.push({
title: options.parentTeam.get('name'),
url: '#teams/' + options.parentTopic.id + '/' + options.parentTeam.id
});
}
if (options.subject instanceof Backbone.Model) {
viewDescription = options.subject.get('description');
viewTitle = options.subject.get('name');
} else if (options.subject) {
viewDescription = options.subject.description;
viewTitle = options.subject.name;
}
headerView = new HeaderView({ headerView = new HeaderView({
model: new TeamsHeaderModel({ model: new TeamsHeaderModel({
description: options.subject.get('description'), description: viewDescription,
title: options.subject.get('name'), title: viewTitle,
breadcrumbs: breadcrumbs breadcrumbs: breadcrumbs
}), }),
headerActionsView: options.headerActionsView, headerActionsView: options.headerActionsView,
......
lms/djangoapps/teams/static/teams/templates/edit-team.underscore
<form> <form>
<div class="create-team wrapper-msg is-incontext urgency-low warning is-hidden" tabindex="-1"> <div class="create-team wrapper-msg is-incontext urgency-low error is-hidden" tabindex="-1">
<div class="msg"> <div class="msg">
<div class="msg-content"> <div class="msg-content">
<h3 class="title"><%- gettext("Your team could not be created!") %></h3> <h3 class="title">
<% if (action === 'create') { %>
<%- gettext("Your team could not be created.") %>
<% } else if (action === 'edit') { %>
<%- gettext("Your team could not be updated.") %>
<% } %>
</h3>
<span class="screen-reader-message sr"></span> <span class="screen-reader-message sr"></span>
<div class="copy"> <div class="copy">
<p></p> <p></p>
...@@ -11,15 +17,16 @@ ...@@ -11,15 +17,16 @@
</div> </div>
</div> </div>
<div class="form-instructions create-team-instructions"> <% if (action === 'create') { %>
<div class="form-instructions create-team-instructions">
<p class="copy"> <p class="copy">
<%- gettext("Enter information to describe your team. You cannot change these details after you create the team.") %></p> <%- gettext("Enter information to describe your team. You cannot change these details after you create the team.") %></p>
</div> </div>
<% } %>
<div class="team-edit-fields"> <div class="team-edit-fields">
<div class="team-required-fields"> <div class="team-required-fields">
</div> </div>
<div class="team-optional-fields"> <div class="team-optional-fields">
<fieldset> <fieldset>
<div class="u-field u-field-optional_description"> <div class="u-field u-field-optional_description">
...@@ -38,7 +45,7 @@ ...@@ -38,7 +45,7 @@
<button class="action action-primary"> <button class="action action-primary">
<%= <%=
interpolate_text( interpolate_text(
_.escape(gettext("{primaryButtonTitle} {span_start}a new team{span_end}")), _.escape(gettext("{primaryButtonTitle} {span_start}a team{span_end}")),
{ {
'primaryButtonTitle': primaryButtonTitle, 'span_start': '<span class="sr">', 'span_end': '</span>' 'primaryButtonTitle': primaryButtonTitle, 'span_start': '<span class="sr">', 'span_end': '</span>'
} }
...@@ -48,9 +55,10 @@ ...@@ -48,9 +55,10 @@
<button class="action action-cancel"> <button class="action action-cancel">
<%= <%=
interpolate_text( interpolate_text(
_.escape(gettext("Cancel {span_start}a new team{span_end}")), _.escape(gettext("Cancel {span_start} {action} team {span_end}")),
{ {
'span_start': '<span class="sr">', 'span_end': '</span>' 'span_start': '<span class="sr">', 'span_end': '</span>',
'action': action === 'create' ? 'creating' : 'updating'
} }
) )
%> %>
......
lms/djangoapps/teams/static/teams/templates/team-join.underscore → lms/djangoapps/teams/static/teams/templates/team-profile-header-actions.underscore
<div class="join-team form-actions"> <div class="join-team form-actions">
<% if (showButton) {%> <% if (showJoinButton) {%>
<button class="action action-primary"> <button class="action action-primary">
<%- gettext("Join Team") %> <%- gettext("Join Team") %>
</button> </button>
<% } else if (message) { %> <% } else if (message) { %>
<p class="join-team-message"><%- message %></p> <p class="join-team-message"><%- message %></p>
<% } %> <% } %>
<% if (showEditButton) { %>
<button class="btn btn-secondary action-edit-team"><%- gettext("Edit Team") %></button>
<% } %>
</div> </div>
lms/djangoapps/teams/static/teams/templates/team-profile.underscore
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
<% if (isMember) { %> <% if (isMember) { %>
<div class="leave-team"> <div class="leave-team">
<button class="btn btn-link btn-base btn-secondary leave-team-link"><%- gettext("Leave Team") %></button> <button class="btn btn-link leave-team-link"><%- gettext("Leave Team") %></button>
</div> </div>
<div class="divider-lv1"></div> <div class="divider-lv1"></div>
......
lms/djangoapps/teams/templates/teams/teams.html
...@@ -39,6 +39,7 @@ ...@@ -39,6 +39,7 @@
topicUrl: '${ topic_url }', topicUrl: '${ topic_url }',
topicsUrl: '${ topics_url }', topicsUrl: '${ topics_url }',
teamsUrl: '${ teams_url }', teamsUrl: '${ teams_url }',
teamsDetailUrl: '${ teams_detail_url }',
teamMembershipsUrl: '${ team_memberships_url }', teamMembershipsUrl: '${ team_memberships_url }',
teamMembershipDetailUrl: '${ team_membership_detail_url }', teamMembershipDetailUrl: '${ team_membership_detail_url }',
maxTeamSize: ${ course.teams_max_size }, maxTeamSize: ${ course.teams_max_size },
......
lms/djangoapps/teams/views.py
...@@ -117,6 +117,7 @@ class TeamsDashboardView(View): ...@@ -117,6 +117,7 @@ class TeamsDashboardView(View):
), ),
"topics_url": reverse('topics_list', request=request), "topics_url": reverse('topics_list', request=request),
"teams_url": reverse('teams_list', request=request), "teams_url": reverse('teams_list', request=request),
"teams_detail_url": reverse('teams_detail', args=['team_id']),
"team_memberships_url": reverse('team_membership_list', request=request), "team_memberships_url": reverse('team_membership_list', request=request),
"team_membership_detail_url": reverse('team_membership_detail', args=['team_id', user.username]), "team_membership_detail_url": reverse('team_membership_detail', args=['team_id', user.username]),
"languages": settings.ALL_LANGUAGES, "languages": settings.ALL_LANGUAGES,
......
lms/static/js/spec/main.js
...@@ -802,7 +802,7 @@ ...@@ -802,7 +802,7 @@
'lms/include/teams/js/spec/views/topic_card_spec.js', 'lms/include/teams/js/spec/views/topic_card_spec.js',
'lms/include/teams/js/spec/views/topic_teams_spec.js', 'lms/include/teams/js/spec/views/topic_teams_spec.js',
'lms/include/teams/js/spec/views/topics_spec.js', 'lms/include/teams/js/spec/views/topics_spec.js',
'lms/include/teams/js/spec/views/team_join_spec.js' 'lms/include/teams/js/spec/views/team_profile_header_actions_spec.js'
]); ]);
}).call(this, requirejs, define); }).call(this, requirejs, define);
lms/static/sass/elements/_controls.scss
...@@ -404,7 +404,7 @@ ...@@ -404,7 +404,7 @@
} }
} }
.btn-link { .btn-secondary {
@extend %btn-pl-secondary-base; @extend %btn-pl-secondary-base;
background-image: none; background-image: none;
...@@ -416,3 +416,24 @@ ...@@ -416,3 +416,24 @@
color: $link-color; color: $link-color;
} }
} }
.btn-link {
@extend %shame-link-text;
// reset of inherited buttons
border-radius: 0;
border-color: $transparent;
padding: 1px;
background: $transparent;
background-image: none;
@extend %t-action3;
@extend %t-strong;
&:focus,
&:hover {
background-image: none !important;
background-color: $transparent !important;
box-shadow: none !important;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment