diff --git a/common/static/coffee/src/discussion/discussion_module_view.coffee b/common/static/coffee/src/discussion/discussion_module_view.coffee index 9733e6658f..0fd883d6c7 100644 --- a/common/static/coffee/src/discussion/discussion_module_view.coffee +++ b/common/static/coffee/src/discussion/discussion_module_view.coffee @@ -10,10 +10,11 @@ if Backbone? "click .discussion-paginator a": "navigateToPage" page_re: /\?discussion_page=(\d+)/ - initialize: -> + initialize: (options) -> @toggleDiscussionBtn = @$(".discussion-show") # Set the page if it was set in the URL. This is used to allow deep linking to pages match = @page_re.exec(window.location.href) + @context = options.context or "course" # allowed values are "course" or "standalone" if match @page = parseInt(match[1]) else @@ -105,6 +106,7 @@ if Backbone? el: @$("article#thread_#{thread.id}"), model: thread, mode: "inline", + context: @context, course_settings: @course_settings, topicId: discussionId ) @@ -141,6 +143,7 @@ if Backbone? el: article, model: thread, mode: "inline", + context: @context, course_settings: @course_settings, topicId: @$el.data("discussion-id") ) diff --git a/common/static/coffee/src/discussion/templates.coffee b/common/static/coffee/src/discussion/templates.coffee deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/common/static/coffee/src/discussion/views/discussion_thread_edit_view.js b/common/static/coffee/src/discussion/views/discussion_thread_edit_view.js index 316c3aff4f..bd82bad796 100644 --- a/common/static/coffee/src/discussion/views/discussion_thread_edit_view.js +++ b/common/static/coffee/src/discussion/views/discussion_thread_edit_view.js @@ -18,6 +18,7 @@ this.course_settings = options.course_settings; this.threadType = this.model.get('thread_type'); this.topicId = this.model.get('commentable_id'); + this.context = options.context || 'course'; _.bindAll(this); return this; }, @@ -31,11 +32,15 @@ threadTypeTemplate = _.template($("#thread-type-template").html()); this.addField(threadTypeTemplate({form_id: formId})); this.$("#" + formId + "-post-type-" + this.threadType).attr('checked', true); - this.topicView = new DiscussionTopicMenuView({ - topicId: this.topicId, - course_settings: this.course_settings - }); - this.addField(this.topicView.render()); + // Only allow the topic field for course threads, as standalone threads + // cannot be moved. + if (this.context === 'course') { + this.topicView = new DiscussionTopicMenuView({ + topicId: this.topicId, + course_settings: this.course_settings + }); + this.addField(this.topicView.render()); + } DiscussionUtil.makeWmdEditor(this.$el, $.proxy(this.$, this), 'edit-post-body'); return this; }, @@ -53,13 +58,14 @@ var title = this.$('.edit-post-title').val(), threadType = this.$(".post-type-input:checked").val(), body = this.$('.edit-post-body textarea').val(), - commentableId = this.topicView.getCurrentTopicId(), postData = { title: title, thread_type: threadType, - body: body, - commentable_id: commentableId + body: body }; + if (this.topicView) { + postData.commentable_id = this.topicView.getCurrentTopicId(); + } return DiscussionUtil.safeAjax({ $elem: this.submitBtn, @@ -75,7 +81,9 @@ this.$('.edit-post-title').val('').attr('prev-text', ''); this.$('.edit-post-body textarea').val('').attr('prev-text', ''); this.$('.wmd-preview p').html(''); - postData.courseware_title = this.topicView.getFullTopicName(); + if (this.topicView) { + postData.courseware_title = this.topicView.getFullTopicName(); + } this.model.set(postData).unset('abbreviatedBody'); this.trigger('thread:updated'); if (this.threadType !== threadType) { diff --git a/common/static/coffee/src/discussion/views/discussion_thread_view.coffee b/common/static/coffee/src/discussion/views/discussion_thread_view.coffee index f369cf6619..798a4022b6 100644 --- a/common/static/coffee/src/discussion/views/discussion_thread_view.coffee +++ b/common/static/coffee/src/discussion/views/discussion_thread_view.coffee @@ -19,6 +19,7 @@ if Backbone? initialize: (options) -> super() @mode = options.mode or "inline" # allowed values are "tab" or "inline" + @context = options.context or "course" # allowed values are "course" or "standalone" if @mode not in ["tab", "inline"] throw new Error("invalid mode: " + @mode) @@ -300,6 +301,7 @@ if Backbone? container: @$('.thread-content-wrapper') model: @model mode: @mode + context: @context course_settings: @options.course_settings ) @editView.bind "thread:updated thread:cancel_edit", @closeEditView diff --git a/common/static/coffee/src/discussion/views/new_post_view.coffee b/common/static/coffee/src/discussion/views/new_post_view.coffee index ccbb313874..75ad7a91bc 100644 --- a/common/static/coffee/src/discussion/views/new_post_view.coffee +++ b/common/static/coffee/src/discussion/views/new_post_view.coffee @@ -87,7 +87,6 @@ if Backbone? url: url type: "POST" dataType: 'json' - async: false # TODO when the rest of the stuff below is made to work properly.. data: thread_type: thread_type title: title diff --git a/common/test/acceptance/pages/lms/discussion.py b/common/test/acceptance/pages/lms/discussion.py index e92cc556a4..8a2c260e8a 100644 --- a/common/test/acceptance/pages/lms/discussion.py +++ b/common/test/acceptance/pages/lms/discussion.py @@ -389,7 +389,7 @@ class InlineDiscussionPage(PageObject): def __init__(self, browser, discussion_id): super(InlineDiscussionPage, self).__init__(browser) self._discussion_selector = ( - "body.courseware .discussion-module[data-discussion-id='{discussion_id}'] ".format( + ".discussion-module[data-discussion-id='{discussion_id}'] ".format( discussion_id=discussion_id ) ) @@ -418,6 +418,10 @@ class InlineDiscussionPage(PageObject): def get_num_displayed_threads(self): return len(self._find_within(".discussion-thread")) + def has_thread(self, thread_id): + """Returns true if this page is showing the thread with the specified id.""" + return self._find_within('.discussion-thread#thread_{}'.format(thread_id)).present + def element_exists(self, selector): return self.q(css=self._discussion_selector + " " + selector).present diff --git a/common/test/acceptance/pages/lms/teams.py b/common/test/acceptance/pages/lms/teams.py index 09f6f8d698..3eb3618578 100644 --- a/common/test/acceptance/pages/lms/teams.py +++ b/common/test/acceptance/pages/lms/teams.py @@ -4,6 +4,7 @@ Teams pages. """ from .course_page import CoursePage +from .discussion import InlineDiscussionPage from ..common.paging import PaginatedUIMixin from .fields import FieldsMixin @@ -179,3 +180,50 @@ class CreateTeamPage(CoursePage, FieldsMixin): """Click on cancel team button""" self.q(css='.create-team .action-cancel').first.click() self.wait_for_ajax() + + +class TeamPage(CoursePage, PaginatedUIMixin): + """ + The page for a specific Team within the Teams tab + """ + def __init__(self, browser, course_id, team=None): + """ + Set up `self.url_path` on instantiation, since it dynamically + reflects the current team. + """ + super(TeamPage, self).__init__(browser, course_id) + self.team = team + if self.team: + self.url_path = "teams/#teams/{topic_id}/{team_id}".format( + topic_id=self.team['topic_id'], team_id=self.team['id'] + ) + + def is_browser_on_page(self): + """Check if we're on the teams list page for a particular team.""" + if self.team: + if not self.url.endswith(self.url_path): + return False + return self.q(css='.team-profile').present + + @property + def discussion_id(self): + """Get the id of the discussion module on the page""" + return self.q(css='div.discussion-module').attrs('data-discussion-id')[0] + + @property + def discussion_page(self): + """Get the discussion as a bok_choy page object""" + if not hasattr(self, '_discussion_page'): + # pylint: disable=attribute-defined-outside-init + self._discussion_page = InlineDiscussionPage(self.browser, self.discussion_id) + return self._discussion_page + + @property + def team_name(self): + """Get the team's name as displayed in the page header""" + return self.q(css='.page-header .page-title')[0].text + + @property + def team_description(self): + """Get the team's description as displayed in the page header""" + return self.q(css=TEAMS_HEADER_CSS + ' .page-description')[0].text diff --git a/common/test/acceptance/tests/lms/test_teams.py b/common/test/acceptance/tests/lms/test_teams.py index 7e070693a8..1dff334ed5 100644 --- a/common/test/acceptance/tests/lms/test_teams.py +++ b/common/test/acceptance/tests/lms/test_teams.py @@ -4,14 +4,19 @@ Acceptance tests for the teams feature. import json from nose.plugins.attrib import attr +from uuid import uuid4 from ..helpers import UniqueCourseTest -from ...pages.lms.teams import TeamsPage, BrowseTopicsPage, BrowseTeamsPage, CreateTeamPage from ...fixtures import LMS_BASE_URL from ...fixtures.course import CourseFixture -from ...pages.lms.tab_nav import TabNavPage +from ...fixtures.discussion import ( + Thread, + MultipleThreadFixture +) from ...pages.lms.auto_auth import AutoAuthPage from ...pages.lms.course_info import CourseInfoPage +from ...pages.lms.tab_nav import TabNavPage +from ...pages.lms.teams import TeamsPage, BrowseTopicsPage, BrowseTeamsPage, CreateTeamPage, TeamPage class TeamsTabBase(UniqueCourseTest): @@ -26,6 +31,33 @@ class TeamsTabBase(UniqueCourseTest): """Create `num_topics` test topics.""" return [{u"description": str(i), u"name": str(i), u"id": i} for i in xrange(num_topics)] + def create_teams(self, topic, num_teams): + """Create `num_teams` teams belonging to `topic`.""" + teams = [] + for i in xrange(num_teams): + team = { + 'course_id': self.course_id, + 'topic_id': topic['id'], + 'name': 'Team {}'.format(i), + 'description': 'Description {}'.format(i) + } + response = self.course_fixture.session.post( + LMS_BASE_URL + '/api/team/v0/teams/', + data=json.dumps(team), + headers=self.course_fixture.headers + ) + teams.append(json.loads(response.text)) + return teams + + def create_membership(self, username, team_id): + """Assign `username` to `team_id`.""" + response = self.course_fixture.session.post( + LMS_BASE_URL + '/api/team/v0/team_membership/', + data=json.dumps({'username': username, 'team_id': team_id}), + headers=self.course_fixture.headers + ) + return json.loads(response.text) + def set_team_configuration(self, configuration, enroll_in_course=True, global_staff=False): """ Sets team configuration on the course and calls auto-auth on the user. @@ -272,33 +304,6 @@ class BrowseTeamsWithinTopicTest(TeamsTabBase): self.browse_teams_page = BrowseTeamsPage(self.browser, self.course_id, self.topic) self.topics_page = BrowseTopicsPage(self.browser, self.course_id) - def create_teams(self, num_teams): - """Create `num_teams` teams belonging to `self.topic`.""" - teams = [] - for i in xrange(num_teams): - team = { - 'course_id': self.course_id, - 'topic_id': self.topic['id'], - 'name': 'Team {}'.format(i), - 'description': 'Description {}'.format(i) - } - response = self.course_fixture.session.post( - LMS_BASE_URL + '/api/team/v0/teams/', - data=json.dumps(team), - headers=self.course_fixture.headers - ) - teams.append(json.loads(response.text)) - return teams - - def create_membership(self, username, team_id): - """Assign `username` to `team_id`.""" - response = self.course_fixture.session.post( - LMS_BASE_URL + '/api/team/v0/team_membership/', - data=json.dumps({'username': username, 'team_id': team_id}), - headers=self.course_fixture.headers - ) - return json.loads(response.text) - def verify_page_header(self): """Verify that the page header correctly reflects the current topic's name and description.""" self.assertEqual(self.browse_teams_page.header_topic_name, self.topic['name']) @@ -380,7 +385,7 @@ class BrowseTeamsWithinTopicTest(TeamsTabBase): And I should see a button to add a team And I should not see a pagination footer """ - teams = self.create_teams(self.TEAMS_PAGE_SIZE) + teams = self.create_teams(self.topic, self.TEAMS_PAGE_SIZE) self.browse_teams_page.visit() self.verify_page_header() self.assertEqual(self.browse_teams_page.get_pagination_header_text(), 'Showing 1-10 out of 10 total') @@ -403,7 +408,7 @@ class BrowseTeamsWithinTopicTest(TeamsTabBase): And when I click on the previous page button Then I should see that I am on the first page of results """ - teams = self.create_teams(self.TEAMS_PAGE_SIZE + 1) + teams = self.create_teams(self.topic, self.TEAMS_PAGE_SIZE + 1) self.browse_teams_page.visit() self.verify_page_header() self.verify_on_page(1, teams, 'Showing 1-10 out of 11 total', True) @@ -425,7 +430,7 @@ class BrowseTeamsWithinTopicTest(TeamsTabBase): When I input the first page Then I should see that I am on the first page of results """ - teams = self.create_teams(self.TEAMS_PAGE_SIZE + 10) + teams = self.create_teams(self.topic, self.TEAMS_PAGE_SIZE + 10) self.browse_teams_page.visit() self.verify_page_header() self.verify_on_page(1, teams, 'Showing 1-10 out of 20 total', True) @@ -445,7 +450,7 @@ class BrowseTeamsWithinTopicTest(TeamsTabBase): And I should see the team for that topic And I should see that the team card shows my membership """ - teams = self.create_teams(1) + teams = self.create_teams(self.topic, 1) self.browse_teams_page.visit() self.verify_page_header() self.verify_teams(teams) @@ -615,23 +620,18 @@ class CreateTeamTest(TeamsTabBase): Then I should see the Create Team header and form When I fill all the fields present with appropriate data And I click Create button - Then I should see teams list page with newly created team. + Then I should see the page for my team """ - self.assertEqual(self.browse_teams_page.get_pagination_header_text(), 'Showing 0 out of 0 total') self.verify_and_navigate_to_create_team_page() self.fill_create_form() self.create_team_page.submit_form() - self.assertTrue(self.browse_teams_page.is_browser_on_page()) - self.assertEqual(self.browse_teams_page.get_pagination_header_text(), 'Showing 1 out of 1 total') - # Verify the newly created team content. - team_card = self.browse_teams_page.team_cards.results[0] - self.assertEqual(team_card.find_element_by_css_selector('.card-title').text, self.team_name) - self.assertEqual( - team_card.find_element_by_css_selector('.card-description').text, - 'The Avengers are a fictional team of superheroes.' - ) + # Verify that the page is shown for the new team + team_page = TeamPage(self.browser, self.course_id) + team_page.wait_for_page() + self.assertEqual(team_page.team_name, self.team_name) + self.assertEqual(team_page.team_description, 'The Avengers are a fictional team of superheroes.') def test_user_can_cancel_the_team_creation(self): """ @@ -649,3 +649,47 @@ class CreateTeamTest(TeamsTabBase): self.assertTrue(self.browse_teams_page.is_browser_on_page()) self.assertEqual(self.browse_teams_page.get_pagination_header_text(), 'Showing 0 out of 0 total') + + +@attr('shard_5') +class TeamPageTest(TeamsTabBase): + """Tests for viewing a specific team""" + def setUp(self): + super(TeamPageTest, self).setUp() + self.topic = {u"name": u"Example Topic", u"id": "example_topic", u"description": "Description"} + self.set_team_configuration({'course_id': self.course_id, 'max_team_size': 10, 'topics': [self.topic]}) + self.team = self.create_teams(self.topic, 1)[0] + self.create_membership(self.user_info['username'], self.team['id']) + self.team_page = TeamPage(self.browser, self.course_id, self.team) + + def setup_thread(self): + """ + Set up the discussion thread for the team. + """ + thread = Thread( + id="test_thread_{}".format(uuid4().hex), + commentable_id=self.team['discussion_topic_id'], + body="Dummy text body." + ) + thread_fixture = MultipleThreadFixture([thread]) + thread_fixture.push() + return thread + + def test_discussion_on_team_page(self): + """ + Scenario: Team Page renders a team discussion. + Given I am enrolled in a course with a team configuration, a topic, + and a team belonging to that topic + When a thread exists in the team's discussion + And I visit the Team page for that team + Then I should see a discussion with the correct discussion_id + And I should see the existing thread + """ + thread = self.setup_thread() + self.team_page.visit() + self.assertEqual(self.team_page.discussion_id, self.team['discussion_topic_id']) + discussion = self.team_page.discussion_page + self.assertTrue(discussion.is_browser_on_page()) + self.assertTrue(discussion.is_discussion_expanded()) + self.assertEqual(discussion.get_num_displayed_threads(), 1) + self.assertTrue(discussion.has_thread(thread['id'])) diff --git a/lms/djangoapps/django_comment_client/forum/views.py b/lms/djangoapps/django_comment_client/forum/views.py index 2221db75f9..6d57b0f983 100644 --- a/lms/djangoapps/django_comment_client/forum/views.py +++ b/lms/djangoapps/django_comment_client/forum/views.py @@ -339,6 +339,11 @@ def single_thread(request, course_key, discussion_id, thread_id): raise Http404 raise + # Verify that the student has access to this thread if belongs to a course discussion module + thread_context = getattr(thread, "context", "course") + if thread_context == "course" and not utils.discussion_category_id_access(course, request.user, discussion_id): + raise Http404 + # verify that the thread belongs to the requesting student's cohort if is_commentable_cohorted(course_key, discussion_id) and not is_moderator: user_group_id = get_cohort_id(request.user, course_key) diff --git a/lms/djangoapps/teams/static/teams/js/models/team.js b/lms/djangoapps/teams/static/teams/js/models/team.js index 32a4531beb..be480904d3 100644 --- a/lms/djangoapps/teams/static/teams/js/models/team.js +++ b/lms/djangoapps/teams/static/teams/js/models/team.js @@ -16,6 +16,10 @@ country: '', language: '', membership: [] + }, + + initialize: function(options) { + this.url = options.url; } }); return Team; diff --git a/lms/djangoapps/teams/static/teams/js/models/topic.js b/lms/djangoapps/teams/static/teams/js/models/topic.js index 774e992f39..ffd576024a 100644 --- a/lms/djangoapps/teams/static/teams/js/models/topic.js +++ b/lms/djangoapps/teams/static/teams/js/models/topic.js @@ -10,6 +10,10 @@ description: '', team_count: 0, id: '' + }, + + initialize: function(options) { + this.url = options.url; } }); return Topic; diff --git a/lms/djangoapps/teams/static/teams/js/spec/topic_collection_spec.js b/lms/djangoapps/teams/static/teams/js/spec/collections/topic_collection_spec.js similarity index 100% rename from lms/djangoapps/teams/static/teams/js/spec/topic_collection_spec.js rename to lms/djangoapps/teams/static/teams/js/spec/collections/topic_collection_spec.js diff --git a/lms/djangoapps/teams/static/teams/js/spec/edit_team_spec.js b/lms/djangoapps/teams/static/teams/js/spec/edit_team_spec.js index 553389c778..0dd2563069 100644 --- a/lms/djangoapps/teams/static/teams/js/spec/edit_team_spec.js +++ b/lms/djangoapps/teams/static/teams/js/spec/edit_team_spec.js @@ -102,10 +102,10 @@ define([ teamEditView.$('.create-team.form-actions .action-primary').click(); AjaxHelpers.expectJsonRequest(requests, 'POST', teamsUrl, teamsData); - AjaxHelpers.respondWithJson(requests, teamsData); + AjaxHelpers.respondWithJson(requests, _.extend(_.extend({}, teamsData), { id: '123'})); expect(teamEditView.$('.create-team.wrapper-msg .copy').text().trim().length).toBe(0); - expect(Backbone.history.navigate.calls[0].args).toContain('topics/awesomeness'); + expect(Backbone.history.navigate.calls[0].args).toContain('teams/awesomeness/123'); }); it('shows validation error message when field is empty', function () { diff --git a/lms/djangoapps/teams/static/teams/js/spec/teams_factory_spec.js b/lms/djangoapps/teams/static/teams/js/spec/teams_factory_spec.js index dae5e029c1..911412ea88 100644 --- a/lms/djangoapps/teams/static/teams/js/spec/teams_factory_spec.js +++ b/lms/djangoapps/teams/static/teams/js/spec/teams_factory_spec.js @@ -2,17 +2,17 @@ define(["jquery", "backbone", "teams/js/teams_tab_factory"], function($, Backbone, TeamsTabFactory) { 'use strict'; - describe("Teams tab", function() { + describe("Teams Tab Factory", function() { var teamsTab; beforeEach(function() { setFixtures('
'); teamsTab = new TeamsTabFactory({ topics: {results: []}, - topics_url: '', - teams_url: '', + topicsUrl: '', + teamsUrl: '', maxTeamSize: 9999, - course_id: 'edX/DemoX/Demo_Course' + courseID: 'edX/DemoX/Demo_Course' }); }); diff --git a/lms/djangoapps/teams/static/teams/js/spec/teams_tab_spec.js b/lms/djangoapps/teams/static/teams/js/spec/teams_tab_spec.js deleted file mode 100644 index e2e182b777..0000000000 --- a/lms/djangoapps/teams/static/teams/js/spec/teams_tab_spec.js +++ /dev/null @@ -1,80 +0,0 @@ -define([ - 'jquery', - 'backbone', - 'common/js/spec_helpers/ajax_helpers', - 'teams/js/views/teams_tab' -], function ($, Backbone, AjaxHelpers, TeamsTabView) { - 'use strict'; - - describe('TeamsTab', function () { - var teamsTabView, - expectContent = function (text) { - expect(teamsTabView.$('.page-content-main').text()).toContain(text); - }, - expectHeader = function (text) { - expect(teamsTabView.$('.teams-header').text()).toContain(text); - }, - expectError = function (text) { - expect(teamsTabView.$('.warning').text()).toContain(text); - }, - expectFocus = function (element) { - expect(element.focus).toHaveBeenCalled(); - }; - - beforeEach(function () { - setFixtures('
'); - teamsTabView = new TeamsTabView({ - el: $('.teams-content'), - topics: { - count: 1, - num_pages: 1, - current_page: 1, - start: 0, - results: [{ - description: 'test description', - name: 'test topic', - id: 'test_id', - team_count: 0 - }] - }, - topic_url: 'api/topics/topic_id,course_id', - topics_url: 'topics_url', - teams_url: 'teams_url', - course_id: 'test/course/id' - }).render(); - Backbone.history.start(); - spyOn($.fn, 'focus'); - }); - - afterEach(function () { - Backbone.history.stop(); - }); - - it('shows the teams tab initially', function () { - expectHeader('See all teams in your course, organized by topic'); - expectContent('This is the new Teams tab.'); - }); - - it('can switch tabs', function () { - teamsTabView.$('a.nav-item[data-url="browse"]').click(); - expectContent('test description'); - teamsTabView.$('a.nav-item[data-url="teams"]').click(); - expectContent('This is the new Teams tab.'); - }); - - it('displays and focuses an error message when trying to navigate to a nonexistent route', function () { - teamsTabView.router.navigate('test', {trigger: true}); - expectError('The page "test" could not be found.'); - expectFocus(teamsTabView.$('.warning')); - }); - - it('displays and focuses an error message when trying to navigate to a nonexistent topic', function () { - var requests = AjaxHelpers.requests(this); - teamsTabView.router.navigate('topics/test', {trigger: true}); - AjaxHelpers.expectRequest(requests, 'GET', 'api/topics/test,course_id', null); - AjaxHelpers.respondWithError(requests, 404); - expectError('The topic "test" could not be found.'); - expectFocus(teamsTabView.$('.warning')); - }); - }); -}); diff --git a/lms/djangoapps/teams/static/teams/js/spec/views/team_discussion_spec.js b/lms/djangoapps/teams/static/teams/js/spec/views/team_discussion_spec.js new file mode 100644 index 0000000000..42045cf705 --- /dev/null +++ b/lms/djangoapps/teams/static/teams/js/spec/views/team_discussion_spec.js @@ -0,0 +1,214 @@ +define([ + 'underscore', 'common/js/spec_helpers/ajax_helpers', 'teams/js/views/team_discussion', + 'teams/js/spec_helpers/team_discussion_helpers', + 'xmodule_js/common_static/coffee/spec/discussion/discussion_spec_helper' +], function (_, AjaxHelpers, TeamDiscussionView, TeamDiscussionSpecHelper, DiscussionSpecHelper) { + 'use strict'; + describe('TeamDiscussionView', function() { + var discussionView, createDiscussionView, createPost, expandReplies, postReply; + + beforeEach(function() { + setFixtures('
'); + $('.discussion-module').data('course-id', TeamDiscussionSpecHelper.testCourseID); + $('.discussion-module').data('discussion-id', TeamDiscussionSpecHelper.testTeamDiscussionID); + $('.discussion-module').data('user-create-comment', true); + $('.discussion-module').data('user-create-subcomment', true); + DiscussionSpecHelper.setUnderscoreFixtures(); + }); + + createDiscussionView = function(requests, threads) { + discussionView = new TeamDiscussionView({ + el: '.discussion-module' + }); + discussionView.render(); + AjaxHelpers.expectRequest( + requests, 'GET', + interpolate( + '/courses/%(courseID)s/discussion/forum/%(discussionID)s/inline?page=1&ajax=1', + { + courseID: TeamDiscussionSpecHelper.testCourseID, + discussionID: TeamDiscussionSpecHelper.testTeamDiscussionID + }, + true + + ) + ); + AjaxHelpers.respondWithJson(requests, TeamDiscussionSpecHelper.createMockDiscussionResponse(threads)); + return discussionView; + }; + + createPost = function(requests, view, title, body, threadID) { + title = title || "Test title"; + body = body || "Test body"; + threadID = threadID || "999"; + view.$('.new-post-button').click(); + view.$('.js-post-title').val(title); + view.$('.js-post-body textarea').val(body); + view.$('.submit').click(); + AjaxHelpers.expectRequest( + requests, 'POST', + interpolate( + '/courses/%(courseID)s/discussion/%(discussionID)s/threads/create?ajax=1', + { + courseID: TeamDiscussionSpecHelper.testCourseID, + discussionID: TeamDiscussionSpecHelper.testTeamDiscussionID + }, + true + ), + interpolate( + 'thread_type=discussion&title=%(title)s&body=%(body)s&anonymous=false&anonymous_to_peers=false&auto_subscribe=true', + { + title: title.replace(/ /g, '+'), + body: body.replace(/ /g, '+') + }, + true + ) + ); + AjaxHelpers.respondWithJson(requests, { + content: TeamDiscussionSpecHelper.createMockPostResponse({ + id: threadID, + title: title, + body: body + }), + annotated_content_info: TeamDiscussionSpecHelper.createAnnotatedContentInfo() + }); + }; + + expandReplies = function(requests, view, threadID) { + view.$('.forum-thread-expand').first().click(); + AjaxHelpers.expectRequest( + requests, 'GET', + interpolate( + '/courses/%(courseID)s/discussion/forum/%(discussionID)s/threads/%(threadID)s?ajax=1&resp_skip=0&resp_limit=25', + { + courseID: TeamDiscussionSpecHelper.testCourseID, + discussionID: TeamDiscussionSpecHelper.testTeamDiscussionID, + threadID: threadID || "999" + }, + true + ) + ); + AjaxHelpers.respondWithJson(requests, { + content: TeamDiscussionSpecHelper.createMockThreadResponse(), + annotated_content_info: TeamDiscussionSpecHelper.createAnnotatedContentInfo() + }); + }; + + postReply = function(requests, view, reply, threadID) { + var replyForm = view.$('.discussion-reply-new').first(); + replyForm.find('.reply-body textarea').val(reply); + replyForm.find('.discussion-submit-post').click(); + AjaxHelpers.expectRequest( + requests, 'POST', + interpolate( + '/courses/%(courseID)s/discussion/threads/%(threadID)s/reply?ajax=1', + { + courseID: TeamDiscussionSpecHelper.testCourseID, + threadID: threadID || "999" + }, + true + ), + 'body=' + reply.replace(/ /g, '+') + ); + AjaxHelpers.respondWithJson(requests, { + content: TeamDiscussionSpecHelper.createMockThreadResponse({ + body: reply, + comments_count: 1 + }), + "annotated_content_info": TeamDiscussionSpecHelper.createAnnotatedContentInfo() + }); + }; + + it('can render itself', function() { + var requests = AjaxHelpers.requests(this), + view = createDiscussionView(requests); + expect(view.$('.discussion-thread').length).toEqual(3); + }); + + it('can create a new post', function() { + var requests = AjaxHelpers.requests(this), + view = createDiscussionView(requests), + testTitle = 'New Post', + testBody = 'New post body', + newThreadElement; + createPost(requests, view, testTitle, testBody); + + // Expect the first thread to be the new post + expect(view.$('.discussion-thread').length).toEqual(4); + newThreadElement = view.$('.discussion-thread').first(); + expect(newThreadElement.find('.post-header-content h1').text().trim()).toEqual(testTitle); + expect(newThreadElement.find('.post-body').text().trim()).toEqual(testBody); + }); + + it('can post a reply', function() { + var requests = AjaxHelpers.requests(this), + view = createDiscussionView(requests), + testReply = "Test reply", + testThreadID = "1"; + expandReplies(requests, view, testThreadID); + postReply(requests, view, testReply, testThreadID); + expect(view.$('.discussion-response .response-body').text().trim()).toBe(testReply); + }); + + it('can post a reply to a new post', function() { + var requests = AjaxHelpers.requests(this), + view = createDiscussionView(requests, []), + testReply = "Test reply"; + createPost(requests, view); + expandReplies(requests, view); + postReply(requests, view, testReply); + expect(view.$('.discussion-response .response-body').text().trim()).toBe(testReply); + }); + + it('cannot move an existing thread to a different topic', function() { + var requests = AjaxHelpers.requests(this), + view = createDiscussionView(requests), + postTopicButton, updatedThreadElement, + updatedTitle = 'Updated title', + updatedBody = 'Updated body', + testThreadID = "1"; + expandReplies(requests, view, testThreadID); + view.$('.action-more .icon').first().click(); + view.$('.action-edit').first().click(); + postTopicButton = view.$('.post-topic'); + expect(postTopicButton.length).toBe(0); + view.$('.js-post-post-title').val(updatedTitle); + view.$('.js-post-body textarea').val(updatedBody); + view.$('.submit').click(); + AjaxHelpers.expectRequest( + requests, 'POST', + interpolate( + '/courses/%(courseID)s/discussion/%(discussionID)s/threads/create?ajax=1', + { + courseID: TeamDiscussionSpecHelper.testCourseID, + discussionID: TeamDiscussionSpecHelper.testTeamDiscussionID + }, + true + ), + 'thread_type=discussion&title=&body=Updated+body&anonymous=false&anonymous_to_peers=false&auto_subscribe=true' + ); + AjaxHelpers.respondWithJson(requests, { + content: TeamDiscussionSpecHelper.createMockPostResponse({ + id: "999", title: updatedTitle, body: updatedBody + }), + annotated_content_info: TeamDiscussionSpecHelper.createAnnotatedContentInfo() + }); + + // Expect the thread to have been updated + updatedThreadElement = view.$('.discussion-thread').first(); + expect(updatedThreadElement.find('.post-header-content h1').text().trim()).toEqual(updatedTitle); + expect(updatedThreadElement.find('.post-body').text().trim()).toEqual(updatedBody); + }); + + it('cannot move a new thread to a different topic', function() { + var requests = AjaxHelpers.requests(this), + view = createDiscussionView(requests), + postTopicButton; + createPost(requests, view); + expandReplies(requests, view); + view.$('.action-more .icon').first().click(); + view.$('.action-edit').first().click(); + expect(view.$('.post-topic').length).toBe(0); + }); + }); +}); diff --git a/lms/djangoapps/teams/static/teams/js/spec/views/team_profile_spec.js b/lms/djangoapps/teams/static/teams/js/spec/views/team_profile_spec.js new file mode 100644 index 0000000000..c61bc981d9 --- /dev/null +++ b/lms/djangoapps/teams/static/teams/js/spec/views/team_profile_spec.js @@ -0,0 +1,50 @@ +define([ + 'underscore', 'common/js/spec_helpers/ajax_helpers', 'teams/js/models/team', + 'teams/js/views/team_profile', 'teams/js/spec_helpers/team_discussion_helpers', + 'xmodule_js/common_static/coffee/spec/discussion/discussion_spec_helper' +], function (_, AjaxHelpers, TeamModel, TeamProfileView, TeamDiscussionSpecHelper, DiscussionSpecHelper) { + 'use strict'; + describe('TeamProfileView', function () { + var discussionView, createTeamProfileView; + + beforeEach(function () { + DiscussionSpecHelper.setUnderscoreFixtures(); + }); + + createTeamProfileView = function(requests) { + var model = new TeamModel( + { + id: "test-team", + name: "Test Team", + discussion_topic_id: TeamDiscussionSpecHelper.testTeamDiscussionID + }, + { parse: true } + ); + discussionView = new TeamProfileView({ + courseID: TeamDiscussionSpecHelper.testCourseID, + model: model + }); + discussionView.render(); + AjaxHelpers.expectRequest( + requests, + 'GET', + interpolate( + '/courses/%(courseID)s/discussion/forum/%(topicID)s/inline?page=1&ajax=1', + { + courseID: TeamDiscussionSpecHelper.testCourseID, + topicID: TeamDiscussionSpecHelper.testTeamDiscussionID + }, + true + ) + ); + AjaxHelpers.respondWithJson(requests, TeamDiscussionSpecHelper.createMockDiscussionResponse()); + return discussionView; + }; + + it('can render itself', function () { + var requests = AjaxHelpers.requests(this), + view = createTeamProfileView(requests); + expect(view.$('.discussion-thread').length).toEqual(3); + }); + }); +}); diff --git a/lms/djangoapps/teams/static/teams/js/spec/teams_spec.js b/lms/djangoapps/teams/static/teams/js/spec/views/teams_spec.js similarity index 98% rename from lms/djangoapps/teams/static/teams/js/spec/teams_spec.js rename to lms/djangoapps/teams/static/teams/js/spec/views/teams_spec.js index 8bea272a86..156bc87db2 100644 --- a/lms/djangoapps/teams/static/teams/js/spec/teams_spec.js +++ b/lms/djangoapps/teams/static/teams/js/spec/views/teams_spec.js @@ -2,7 +2,7 @@ define([ 'backbone', 'teams/js/collections/team', 'teams/js/views/teams' ], function (Backbone, TeamCollection, TeamsView) { 'use strict'; - describe('TeamsView', function () { + describe('Teams View', function () { var teamsView, teamCollection, initialTeams, createTeams = function (startIndex, stopIndex) { return _.map(_.range(startIndex, stopIndex + 1), function (i) { diff --git a/lms/djangoapps/teams/static/teams/js/spec/views/teams_tab_spec.js b/lms/djangoapps/teams/static/teams/js/spec/views/teams_tab_spec.js new file mode 100644 index 0000000000..7b0169f706 --- /dev/null +++ b/lms/djangoapps/teams/static/teams/js/spec/views/teams_tab_spec.js @@ -0,0 +1,92 @@ +define([ + 'jquery', + 'backbone', + 'common/js/spec_helpers/ajax_helpers', + 'teams/js/views/teams_tab', + 'URI' +], function ($, Backbone, AjaxHelpers, TeamsTabView, URI) { + 'use strict'; + + describe('TeamsTab', function () { + var teamsTabView, + expectContent = function (text) { + expect(teamsTabView.$('.page-content-main').text()).toContain(text); + }, + expectHeader = function (text) { + expect(teamsTabView.$('.teams-header').text()).toContain(text); + }, + expectError = function (text) { + expect(teamsTabView.$('.warning').text()).toContain(text); + }, + expectFocus = function (element) { + expect(element.focus).toHaveBeenCalled(); + }; + + beforeEach(function () { + setFixtures('
'); + teamsTabView = new TeamsTabView({ + el: $('.teams-content'), + topics: { + count: 1, + num_pages: 1, + current_page: 1, + start: 0, + results: [{ + description: 'test description', + name: 'test topic', + id: 'test_topic', + team_count: 0 + }] + }, + topicsUrl: 'api/topics/', + topicUrl: 'api/topics/topic_id,test/course/id', + teamsUrl: 'api/teams/', + courseID: 'test/course/id' + }).render(); + Backbone.history.start(); + spyOn($.fn, 'focus'); + }); + + afterEach(function () { + Backbone.history.stop(); + }); + + it('shows the teams tab initially', function () { + expectHeader('See all teams in your course, organized by topic'); + expectContent('This is the new Teams tab.'); + }); + + describe('Navigation', function () { + it('can switch tabs', function () { + teamsTabView.$('a.nav-item[data-url="browse"]').click(); + expectContent('test description'); + teamsTabView.$('a.nav-item[data-url="teams"]').click(); + expectContent('This is the new Teams tab.'); + }); + + it('displays and focuses an error message when trying to navigate to a nonexistent page', function () { + teamsTabView.router.navigate('no_such_page', {trigger: true}); + expectError('The page "no_such_page" could not be found.'); + expectFocus(teamsTabView.$('.warning')); + }); + + it('displays and focuses an error message when trying to navigate to a nonexistent topic', function () { + var requests = AjaxHelpers.requests(this); + teamsTabView.router.navigate('topics/no_such_topic', {trigger: true}); + AjaxHelpers.expectRequest(requests, 'GET', 'api/topics/no_such_topic,test/course/id', null); + AjaxHelpers.respondWithError(requests, 404); + expectError('The topic "no_such_topic" could not be found.'); + expectFocus(teamsTabView.$('.warning')); + }); + + it('displays and focuses an error message when trying to navigate to a nonexistent team', function () { + var requests = AjaxHelpers.requests(this); + teamsTabView.router.navigate('teams/test_topic/no_such_team', {trigger: true}); + AjaxHelpers.expectRequest(requests, 'GET', 'api/teams/no_such_team', null); + AjaxHelpers.respondWithError(requests, 404); + expectError('The team "no_such_team" could not be found.'); + expectFocus(teamsTabView.$('.warning')); + }); + }); + }); +}); diff --git a/lms/djangoapps/teams/static/teams/js/spec/topic_card_spec.js b/lms/djangoapps/teams/static/teams/js/spec/views/topic_card_spec.js similarity index 100% rename from lms/djangoapps/teams/static/teams/js/spec/topic_card_spec.js rename to lms/djangoapps/teams/static/teams/js/spec/views/topic_card_spec.js diff --git a/lms/djangoapps/teams/static/teams/js/spec/topics_spec.js b/lms/djangoapps/teams/static/teams/js/spec/views/topics_spec.js similarity index 100% rename from lms/djangoapps/teams/static/teams/js/spec/topics_spec.js rename to lms/djangoapps/teams/static/teams/js/spec/views/topics_spec.js diff --git a/lms/djangoapps/teams/static/teams/js/spec_helpers/team_discussion_helpers.js b/lms/djangoapps/teams/static/teams/js/spec_helpers/team_discussion_helpers.js new file mode 100644 index 0000000000..665b48cbc7 --- /dev/null +++ b/lms/djangoapps/teams/static/teams/js/spec_helpers/team_discussion_helpers.js @@ -0,0 +1,133 @@ +define([ + 'underscore', 'common/js/spec_helpers/ajax_helpers' +], function (_, AjaxHelpers) { + 'use strict'; + var createMockPostResponse, createMockDiscussionResponse, createAnnotatedContentInfo, createMockThreadResponse, + testCourseID = 'course/1', + testUser = 'testUser', + testTeamDiscussionID = "12345"; + + createMockPostResponse = function(options) { + return _.extend( + { + username: testUser, + course_id: testCourseID, + commentable_id: testTeamDiscussionID, + type: 'thread', + body: "", + anonymous_to_peers: false, + unread_comments_count: 0, + updated_at: '2015-07-29T18:44:56Z', + group_name: 'Default Group', + pinned: false, + votes: {count: 0, down_count: 0, point: 0, up_count: 0}, + user_id: "9", + abuse_flaggers: [], + closed: false, + at_position_list: [], + read: false, + anonymous: false, + created_at: "2015-07-29T18:44:56Z", + thread_type: 'discussion', + comments_count: 0, + group_id: 1, + endorsed: false + }, + options || {} + ); + }; + + createMockDiscussionResponse = function(threads) { + if (_.isUndefined(threads)) { + threads = [ + createMockPostResponse({ id: "1", title: "First Post"}), + createMockPostResponse({ id: "2", title: "Second Post"}), + createMockPostResponse({ id: "3", title: "Third Post"}) + ]; + } + return { + "num_pages": 1, + "page": 1, + "discussion_data": threads, + "user_info": { + "username": testUser, + "follower_ids": [], + "default_sort_key": "date", + "downvoted_ids": [], + "subscribed_thread_ids": [], + "upvoted_ids": [], + "external_id": "9", + "id": "9", + "subscribed_user_ids": [], + "subscribed_commentable_ids": [] + }, + "annotated_content_info": { + }, + "roles": {"Moderator": [], "Administrator": [], "Community TA": []}, + "course_settings": { + "is_cohorted": false, + "allow_anonymous_to_peers": false, + "allow_anonymous": true, + "category_map": {"subcategories": {}, "children": [], "entries": {}}, + "cohorts": [] + } + }; + }; + + createAnnotatedContentInfo = function() { + return { + voted: '', + subscribed: true, + ability: { + can_reply: true, + editable: true, + can_openclose: true, + can_delete: true, + can_vote: true + } + }; + }; + + createMockThreadResponse = function(options) { + return _.extend( + { + username: testUser, + course_id: testCourseID, + commentable_id: testTeamDiscussionID, + children: [], + comments_count: 0, + anonymous_to_peers: false, + unread_comments_count: 0, + updated_at: "2015-08-04T21:44:28Z", + resp_skip: 0, + id: "55c1323c56c02ce921000001", + pinned: false, + votes: {"count": 0, "down_count": 0, "point": 0, "up_count": 0}, + resp_limit: 25, + abuse_flaggers: [], + closed: false, + resp_total: 1, + at_position_list: [], + type: "thread", + read: true, + anonymous: false, + user_id: "5", + created_at: "2015-08-04T21:44:28Z", + thread_type: "discussion", + context: "standalone", + endorsed: false + }, + options || {} + ); + }; + + return { + testCourseID: testCourseID, + testUser: testUser, + testTeamDiscussionID: testTeamDiscussionID, + createMockPostResponse: createMockPostResponse, + createMockDiscussionResponse: createMockDiscussionResponse, + createAnnotatedContentInfo: createAnnotatedContentInfo, + createMockThreadResponse: createMockThreadResponse + }; +}); diff --git a/lms/djangoapps/teams/static/teams/js/views/edit_team.js b/lms/djangoapps/teams/static/teams/js/views/edit_team.js index 24019390fe..0776f7c90a 100644 --- a/lms/djangoapps/teams/static/teams/js/views/edit_team.js +++ b/lms/djangoapps/teams/static/teams/js/views/edit_team.js @@ -1,192 +1,191 @@ ;(function (define) { -'use strict'; + 'use strict'; -define(['backbone', - 'underscore', - 'gettext', - 'js/views/fields', - 'teams/js/models/team', - 'text!teams/templates/edit-team.underscore'], - function (Backbone, _, gettext, FieldViews, TeamModel, edit_team_template) { - return Backbone.View.extend({ + define(['backbone', + 'underscore', + 'gettext', + 'js/views/fields', + 'teams/js/models/team', + 'text!teams/templates/edit-team.underscore'], + function (Backbone, _, gettext, FieldViews, TeamModel, edit_team_template) { + return Backbone.View.extend({ - maxTeamNameLength: 255, - maxTeamDescriptionLength: 300, + maxTeamNameLength: 255, + maxTeamDescriptionLength: 300, - events: { - "click .action-primary": "createTeam", - "click .action-cancel": "goBackToTopic" - }, + events: { + 'click .action-primary': 'createTeam', + 'click .action-cancel': 'goBackToTopic' + }, - initialize: function(options) { - this.courseId = options.teamParams.courseId; - this.teamsUrl = options.teamParams.teamsUrl; - this.topicId = options.teamParams.topicId; - this.languages = options.teamParams.languages; - this.countries = options.teamParams.countries; - this.primaryButtonTitle = options.primaryButtonTitle || 'Submit'; + initialize: function(options) { + this.courseId = options.teamParams.courseId; + this.collection = options.collection; + this.teamsUrl = options.teamParams.teamsUrl; + this.topicId = options.teamParams.topicId; + this.languages = options.teamParams.languages; + this.countries = options.teamParams.countries; + this.primaryButtonTitle = options.primaryButtonTitle || 'Submit'; - _.bindAll(this, "goBackToTopic", "createTeam"); + _.bindAll(this, 'goBackToTopic', 'createTeam'); - this.teamModel = new TeamModel({}); - this.teamModel.url = this.teamsUrl; + this.teamModel = new TeamModel({}); + this.teamModel.url = this.teamsUrl; - this.teamNameField = new FieldViews.TextFieldView({ - model: this.teamModel, - title: gettext("Team Name (Required) *"), - valueAttribute: 'name', - helpMessage: gettext("A name that identifies your team (maximum 255 characters).") - }); + this.teamNameField = new FieldViews.TextFieldView({ + model: this.teamModel, + title: gettext('Team Name (Required) *'), + valueAttribute: 'name', + helpMessage: gettext('A name that identifies your team (maximum 255 characters).') + }); - this.teamDescriptionField = new FieldViews.TextareaFieldView({ - model: this.teamModel, - title: gettext("Team Description (Required) *"), - valueAttribute: 'description', - editable: 'always', - showMessages: false, - helpMessage: gettext("A short description of the team to help other learners understand the goals or direction of the team (maximum 300 characters).") - }); + this.teamDescriptionField = new FieldViews.TextareaFieldView({ + model: this.teamModel, + title: gettext('Team Description (Required) *'), + valueAttribute: 'description', + editable: 'always', + showMessages: false, + helpMessage: gettext('A short description of the team to help other learners understand the goals or direction of the team (maximum 300 characters).') + }); - this.optionalDescriptionField = new FieldViews.ReadonlyFieldView({ - model: this.teamModel, - title: gettext("Optional Characteristics"), - valueAttribute: 'optional_description', - helpMessage: gettext("Help other learners decide whether to join your team by specifying some characteristics for your team. Choose carefully, because fewer people might be interested in joining your team if it seems too restrictive.") - }); + this.optionalDescriptionField = new FieldViews.ReadonlyFieldView({ + model: this.teamModel, + title: gettext('Optional Characteristics'), + valueAttribute: 'optional_description', + helpMessage: gettext('Help other learners decide whether to join your team by specifying some characteristics for your team. Choose carefully, because fewer people might be interested in joining your team if it seems too restrictive.') + }); - this.teamLanguageField = new FieldViews.DropdownFieldView({ - model: this.teamModel, - title: gettext("Language"), - valueAttribute: 'language', - required: false, - showMessages: false, - titleIconName: 'fa-comment-o', - options: this.languages, - helpMessage: gettext("The language that team members primarily use to communicate with each other.") - }); + this.teamLanguageField = new FieldViews.DropdownFieldView({ + model: this.teamModel, + title: gettext('Language'), + valueAttribute: 'language', + required: false, + showMessages: false, + titleIconName: 'fa-comment-o', + options: this.languages, + helpMessage: gettext('The language that team members primarily use to communicate with each other.') + }); - this.teamCountryField = new FieldViews.DropdownFieldView({ - model: this.teamModel, - title: gettext('Country'), - valueAttribute: 'country', - required: false, - showMessages: false, - titleIconName: 'fa-globe', - options: this.countries, - helpMessage: gettext("The country that team members primarily identify with.") - }); - }, + this.teamCountryField = new FieldViews.DropdownFieldView({ + model: this.teamModel, + title: gettext('Country'), + valueAttribute: 'country', + required: false, + showMessages: false, + titleIconName: 'fa-globe', + options: this.countries, + helpMessage: gettext('The country that team members primarily identify with.') + }); + }, - render: function() { - this.$el.html(_.template(edit_team_template)({primaryButtonTitle: this.primaryButtonTitle})); - this.set(this.teamNameField, '.team-required-fields'); - this.set(this.teamDescriptionField, '.team-required-fields'); - this.set(this.optionalDescriptionField, '.team-optional-fields'); - this.set(this.teamLanguageField, '.team-optional-fields'); - this.set(this.teamCountryField, '.team-optional-fields'); - return this; - }, + render: function() { + this.$el.html(_.template(edit_team_template)({primaryButtonTitle: this.primaryButtonTitle})); + this.set(this.teamNameField, '.team-required-fields'); + this.set(this.teamDescriptionField, '.team-required-fields'); + this.set(this.optionalDescriptionField, '.team-optional-fields'); + this.set(this.teamLanguageField, '.team-optional-fields'); + this.set(this.teamCountryField, '.team-optional-fields'); + return this; + }, - set: function(view, selector) { - var viewEl = view.$el; - if (this.$(selector).has(viewEl).length) { - view.render().setElement(viewEl); - } else { - this.$(selector).append(view.render().$el); - } - }, + set: function(view, selector) { + var viewEl = view.$el; + if (this.$(selector).has(viewEl).length) { + view.render().setElement(viewEl); + } else { + this.$(selector).append(view.render().$el); + } + }, - createTeam: function () { - var teamName = this.teamNameField.fieldValue(); - var teamDescription = this.teamDescriptionField.fieldValue(); - var teamLanguage = this.teamLanguageField.fieldValue(); - var teamCountry = this.teamCountryField.fieldValue(); + createTeam: function () { + var view = this, + teamLanguage = this.teamLanguageField.fieldValue(), + teamCountry = this.teamCountryField.fieldValue(); - var data = { - course_id: this.courseId, - topic_id: this.topicId, - name: teamName, - description: teamDescription, - language: _.isNull(teamLanguage) ? '' : teamLanguage, - country: _.isNull(teamCountry) ? '' : teamCountry - }; + var data = { + course_id: this.courseId, + topic_id: this.topicId, + name: this.teamNameField.fieldValue(), + description: this.teamDescriptionField.fieldValue(), + language: _.isNull(teamLanguage) ? '' : teamLanguage, + country: _.isNull(teamCountry) ? '' : teamCountry + }; - var validationResult = this.validateTeamData(data); - if (validationResult.status === false) { - this.showMessage(validationResult.message, validationResult.srMessage); - return; - } + var validationResult = this.validateTeamData(data); + if (validationResult.status === false) { + this.showMessage(validationResult.message, validationResult.srMessage); + return; + } - var view = this; - var options = { - wait: true, - success: function () { - view.goBackToTopic(); - }, - error: function () { - var message = gettext('An error occurred. Please try again.'); - view.showMessage(message, message); - } - }; - this.teamModel.save(data, options); - }, + this.teamModel.save(data, { wait: true }) + .done(function(result) { + Backbone.history.navigate( + 'teams/' + view.topicId + '/' + view.teamModel.id, + {trigger: true} + ); + }) + .fail(function() { + var message = gettext('An error occurred. Please try again.'); + view.showMessage(message, message); + }); + }, - validateTeamData: function (data) { - var status = true, - message = gettext("Check the highlighted fields below and try again."); - var srMessages = []; + validateTeamData: function (data) { + var status = true, + message = gettext('Check the highlighted fields below and try again.'); + var srMessages = []; - this.teamNameField.unhighlightField(); - this.teamDescriptionField.unhighlightField(); + this.teamNameField.unhighlightField(); + this.teamDescriptionField.unhighlightField(); - if (_.isEmpty(data.name.trim()) ) { - status = false; - this.teamNameField.highlightFieldOnError(); - srMessages.push( - gettext("Enter team name.") - ); - } else if (data.name.length > this.maxTeamNameLength) { - status = false; - this.teamNameField.highlightFieldOnError(); - srMessages.push( - gettext("Team name cannot have more than 255 characters.") - ); - } + if (_.isEmpty(data.name.trim()) ) { + status = false; + this.teamNameField.highlightFieldOnError(); + srMessages.push( + gettext('Enter team name.') + ); + } else if (data.name.length > this.maxTeamNameLength) { + status = false; + this.teamNameField.highlightFieldOnError(); + srMessages.push( + gettext('Team name cannot have more than 255 characters.') + ); + } - if (_.isEmpty(data.description.trim()) ) { - status = false; - this.teamDescriptionField.highlightFieldOnError(); - srMessages.push( - gettext("Enter team description.") - ); - } else if (data.description.length > this.maxTeamDescriptionLength) { - status = false; - this.teamDescriptionField.highlightFieldOnError(); - srMessages.push( - gettext("Team description cannot have more than 300 characters.") - ); - } + if (_.isEmpty(data.description.trim()) ) { + status = false; + this.teamDescriptionField.highlightFieldOnError(); + srMessages.push( + gettext('Enter team description.') + ); + } else if (data.description.length > this.maxTeamDescriptionLength) { + status = false; + this.teamDescriptionField.highlightFieldOnError(); + srMessages.push( + gettext('Team description cannot have more than 300 characters.') + ); + } - return { - status: status, - message: message, - srMessage: srMessages.join(" ") - }; - }, + return { + status: status, + message: message, + srMessage: srMessages.join(' ') + }; + }, - showMessage: function (message, screenReaderMessage) { - this.$('.wrapper-msg').removeClass('is-hidden'); - this.$('.msg-content .copy p').text(message); - this.$('.wrapper-msg').focus(); + showMessage: function (message, screenReaderMessage) { + this.$('.wrapper-msg').removeClass('is-hidden'); + this.$('.msg-content .copy p').text(message); + this.$('.wrapper-msg').focus(); - if (screenReaderMessage) { - this.$('.screen-reader-message').text(screenReaderMessage); - } + if (screenReaderMessage) { + this.$('.screen-reader-message').text(screenReaderMessage); + } }, goBackToTopic: function () { - Backbone.history.navigate("topics/" + this.topicId, {trigger: true}); - } - }); - }); + Backbone.history.navigate('topics/' + this.topicId, {trigger: true}); + } + }); + }); }).call(this, define || RequireJS.define); diff --git a/lms/djangoapps/teams/static/teams/js/views/team_card.js b/lms/djangoapps/teams/static/teams/js/views/team_card.js index cdfbeda5cf..c13fa5cb96 100644 --- a/lms/djangoapps/teams/static/teams/js/views/team_card.js +++ b/lms/djangoapps/teams/static/teams/js/views/team_card.js @@ -78,6 +78,11 @@ {span_start: '', team_name: this.model.get('name'), span_end: ''}, true ); + }, + action: function (event) { + var url = 'teams/' + this.topic.get('id') + '/' + this.model.get('id'); + event.preventDefault(); + this.router.navigate(url, {trigger: true}); } }); return TeamCardView; diff --git a/lms/djangoapps/teams/static/teams/js/views/team_discussion.js b/lms/djangoapps/teams/static/teams/js/views/team_discussion.js new file mode 100644 index 0000000000..2549f17124 --- /dev/null +++ b/lms/djangoapps/teams/static/teams/js/views/team_discussion.js @@ -0,0 +1,27 @@ +/** + * View that shows the discussion for a team. + */ +;(function (define) { + 'use strict'; + define(['backbone', 'underscore', 'gettext', 'DiscussionModuleView'], + function (Backbone, _, gettext, DiscussionModuleView) { + var TeamDiscussionView = Backbone.View.extend({ + initialize: function () { + window.$$course_id = this.$el.data("course-id"); + this.render(); + }, + + render: function () { + var discussionModuleView = new DiscussionModuleView({ + el: this.$el, + context: 'standalone' + }); + discussionModuleView.render(); + discussionModuleView.loadPage(this.$el); + return this; + } + }); + + return TeamDiscussionView; + }); +}).call(this, define || RequireJS.define); diff --git a/lms/djangoapps/teams/static/teams/js/views/team_profile.js b/lms/djangoapps/teams/static/teams/js/views/team_profile.js new file mode 100644 index 0000000000..a0a0d7794a --- /dev/null +++ b/lms/djangoapps/teams/static/teams/js/views/team_profile.js @@ -0,0 +1,33 @@ +/** + * View for an individual team. + */ +;(function (define) { + 'use strict'; + define(['backbone', 'underscore', 'gettext', 'teams/js/views/team_discussion', + 'text!teams/templates/team-profile.underscore'], + function (Backbone, _, gettext, TeamDiscussionView, teamTemplate) { + var TeamProfileView = Backbone.View.extend({ + initialize: function (options) { + this.courseID = options.courseID; + this.discussionTopicID = this.model.get('discussion_topic_id'); + }, + + render: function () { + var canPostToTeam = true; // TODO: determine this permission correctly! + this.$el.html(_.template(teamTemplate, { + courseID: this.courseID, + discussionTopicID: this.discussionTopicID, + canCreateComment: canPostToTeam, + canCreateSubComment: canPostToTeam + })); + this.discussionView = new TeamDiscussionView({ + el: this.$('.discussion-module') + }); + this.discussionView.render(); + return this; + } + }); + + return TeamProfileView; + }); +}).call(this, define || RequireJS.define); diff --git a/lms/djangoapps/teams/static/teams/js/views/teams.js b/lms/djangoapps/teams/static/teams/js/views/teams.js index c509da128a..741ac255dd 100644 --- a/lms/djangoapps/teams/static/teams/js/views/teams.js +++ b/lms/djangoapps/teams/static/teams/js/views/teams.js @@ -10,8 +10,10 @@ type: 'teams', initialize: function (options) { + this.topic = options.topic; this.itemViewClass = TeamCardView.extend({ router: options.router, + topic: options.topic, maxTeamSize: options.maxTeamSize }); PaginatedView.prototype.initialize.call(this); diff --git a/lms/djangoapps/teams/static/teams/js/views/teams_tab.js b/lms/djangoapps/teams/static/teams/js/views/teams_tab.js index fd5bbe9e66..89de3e7c28 100644 --- a/lms/djangoapps/teams/static/teams/js/views/teams_tab.js +++ b/lms/djangoapps/teams/static/teams/js/views/teams_tab.js @@ -7,304 +7,379 @@ 'js/components/header/views/header', 'js/components/header/models/header', 'js/components/tabbed/views/tabbed_view', - 'teams/js/views/topics', 'teams/js/models/topic', 'teams/js/collections/topic', - 'teams/js/views/teams', + 'teams/js/models/team', 'teams/js/collections/team', + 'teams/js/views/topics', + 'teams/js/views/team_profile', + 'teams/js/views/teams', 'teams/js/views/edit_team', 'text!teams/templates/teams_tab.underscore'], - function (Backbone, _, gettext, HeaderView, HeaderModel, TabbedView, - TopicsView, TopicModel, TopicCollection, TeamsView, TeamCollection, - TeamEditView, teamsTemplate) { - var ViewWithHeader = Backbone.View.extend({ - initialize: function (options) { - this.header = options.header; - this.main = options.main; - }, + function (Backbone, _, gettext, HeaderView, HeaderModel, TabbedView, + TopicModel, TopicCollection, TeamModel, TeamCollection, + TopicsView, TeamProfileView, TeamsView, TeamEditView, + teamsTemplate) { + var ViewWithHeader = Backbone.View.extend({ + initialize: function (options) { + this.header = options.header; + this.main = options.main; + }, - render: function () { - this.$el.html(_.template(teamsTemplate)); - this.$('p.error').hide(); - this.header.setElement(this.$('.teams-header')).render(); - this.main.setElement(this.$('.page-content')).render(); - return this; - } - }); + render: function () { + this.$el.html(_.template(teamsTemplate)); + this.$('p.error').hide(); + this.header.setElement(this.$('.teams-header')).render(); + this.main.setElement(this.$('.page-content')).render(); + return this; + } + }); - var TeamTabView = Backbone.View.extend({ - initialize: function(options) { - var TempTabView, router; - this.course_id = options.course_id; - this.topics = options.topics; - this.topic_url = options.topic_url; - this.teams_url = options.teams_url; - this.maxTeamSize = options.maxTeamSize; - this.languages = options.languages; - this.countries = options.countries; - // This slightly tedious approach is necessary - // to use regular expressions within Backbone - // routes, allowing us to capture which tab - // name is being routed to - router = this.router = new Backbone.Router(); - _.each([ - [':default', _.bind(this.routeNotFound, this)], - ['topics/:topic_id(/)', _.bind(this.browseTopic, this)], - ['topics/:topic_id/create-team(/)', _.bind(this.newTeam, this)], - [new RegExp('^(browse)\/?$'), _.bind(this.goToTab, this)], - [new RegExp('^(teams)\/?$'), _.bind(this.goToTab, this)] - ], function (route) { - router.route.apply(router, route); - }); - // TODO replace this with actual views! - TempTabView = Backbone.View.extend({ - initialize: function (options) { - this.text = options.text; - }, + var TeamTabView = Backbone.View.extend({ + initialize: function(options) { + var TempTabView, router; + this.courseID = options.courseID; + this.topics = options.topics; + this.topicUrl = options.topicUrl; + this.teamsUrl = options.teamsUrl; + this.maxTeamSize = options.maxTeamSize; + this.languages = options.languages; + this.countries = options.countries; + // This slightly tedious approach is necessary + // to use regular expressions within Backbone + // routes, allowing us to capture which tab + // name is being routed to + router = this.router = new Backbone.Router(); + _.each([ + [':default', _.bind(this.routeNotFound, this)], + ['topics/:topic_id(/)', _.bind(this.browseTopic, this)], + ['topics/:topic_id/create-team(/)', _.bind(this.newTeam, this)], + ['teams/:topic_id/:team_id(/)', _.bind(this.browseTeam, this)], + [new RegExp('^(browse)\/?$'), _.bind(this.goToTab, this)], + [new RegExp('^(teams)\/?$'), _.bind(this.goToTab, this)] + ], function (route) { + router.route.apply(router, route); + }); + // TODO replace this with actual views! + TempTabView = Backbone.View.extend({ + initialize: function (options) { + this.text = options.text; + }, + render: function () { + this.$el.text(this.text); + } + }); + this.topicsCollection = new TopicCollection( + this.topics, + {url: options.topicsUrl, course_id: this.courseID, parse: true} + ).bootstrap(); + this.topicsView = new TopicsView({ + collection: this.topicsCollection, + router: this.router + }); + this.mainView = this.tabbedView = new ViewWithHeader({ + header: new HeaderView({ + model: new HeaderModel({ + description: gettext("See all teams in your course, organized by topic. Join a team to collaborate with other learners who are interested in the same topic as you are."), + title: gettext("Teams") + }) + }), + main: new TabbedView({ + tabs: [{ + title: gettext('My Teams'), + url: 'teams', + view: new TempTabView({text: 'This is the new Teams tab.'}) + }, { + title: gettext('Browse'), + url: 'browse', + view: this.topicsView + }], + router: this.router + }) + }); + }, - render: function () { - this.$el.text(this.text); - } - }); - this.topicsCollection = new TopicCollection( - this.topics, - {url: options.topics_url, course_id: this.course_id, parse: true} - ).bootstrap(); - this.mainView = this.tabbedView = new ViewWithHeader({ - header: new HeaderView({ - model: new HeaderModel({ - description: gettext("See all teams in your course, organized by topic. Join a team to collaborate with other learners who are interested in the same topic as you are."), - title: gettext("Teams") - }) - }), - main: new TabbedView({ - tabs: [{ - title: gettext('My Teams'), - url: 'teams', - view: new TempTabView({text: 'This is the new Teams tab.'}) - }, { - title: gettext('Browse'), - url: 'browse', - view: new TopicsView({ - collection: this.topicsCollection, - router: this.router - }) - }], - router: this.router - }) - }); - }, + render: function() { + this.mainView.setElement(this.$el).render(); + this.hideWarning(); + return this; + }, - render: function() { - this.mainView.setElement(this.$el).render(); - this.hideWarning(); - return this; - }, + /** + * Render the list of teams for the given topic ID. + */ + browseTopic: function (topicID) { + var self = this; + this.getTeamsView(topicID).done(function (teamsView) { + self.teamsView = self.mainView = teamsView; + self.render(); + }); + }, - /** - * Render the create new team form. - */ - newTeam: function (topicId) { - var self = this; - this.getTeamsView(topicId).done(function (teamsView) { - self.mainView = new ViewWithHeader({ - header: new HeaderView({ - model: new HeaderModel({ - description: gettext("Create a new team if you can't find existing teams to join, or if you would like to learn with friends you know."), - title: gettext("Create a New Team"), - breadcrumbs: [ - { - title: teamsView.main.teamParams.topicName, - url: '#topics/' + teamsView.main.teamParams.topicId - } - ] - }) - }), - main: new TeamEditView({ - tagName: 'create-new-team', - teamParams: teamsView.main.teamParams, - primaryButtonTitle: 'Create' - }) - }); - self.render(); - }); - }, + /** + * Render the create new team form. + */ + newTeam: function (topicId) { + var self = this; + this.getTeamsView(topicId).done(function (teamsView) { + self.mainView = new ViewWithHeader({ + header: new HeaderView({ + model: new HeaderModel({ + description: gettext("Create a new team if you can't find existing teams to join, or if you would like to learn with friends you know."), + title: gettext("Create a New Team"), + breadcrumbs: [ + { + title: teamsView.main.teamParams.topicName, + url: '#topics/' + teamsView.main.teamParams.topicId + } + ] + }) + }), + main: new TeamEditView({ + tagName: 'create-new-team', + teamParams: teamsView.main.teamParams, + primaryButtonTitle: 'Create' + }) + }); + self.render(); + }); + }, - /** - * Render the list of teams for the given topic ID. - */ - browseTopic: function (topicID) { - var self = this; - this.getTeamsView(topicID).done(function (teamsView) { - self.mainView = teamsView; - self.render(); - }); - }, + /** + * Return a promise for the TeamsView for the given topic ID. + */ + getTeamsView: function (topicID) { + // Lazily load the teams-for-topic view in + // order to avoid making an extra AJAX call. + var self = this, + router = this.router, + deferred = $.Deferred(); + if (this.teamsCollection && this.teamsCollection.topic_id === topicID) { + deferred.resolve(this.teamsView); + } else { + this.getTopic(topicID) + .done(function(topic) { + var collection = new TeamCollection([], { + course_id: self.courseID, + topic_id: topicID, + url: self.teamsUrl, + per_page: 10 + }); + this.teamsCollection = collection; + collection.goTo(1) + .done(function() { + var teamsView = new TeamsView({ + router: router, + topic: topic, + collection: collection, + maxTeamSize: self.maxTeamSize, + teamParams: { + courseId: self.courseID, + teamsUrl: self.teamsUrl, + topicId: topic.get('id'), + topicName: topic.get('name'), + languages: self.languages, + countries: self.countries + } + }); + deferred.resolve(self.createViewWithHeader(teamsView, topic)); + }); + }); + } + return deferred.promise(); + }, - /** - * Return a promise for the TeamsView for the given - * topic ID. - */ - getTeamsView: function (topicID) { - // Lazily load the teams-for-topic view in - // order to avoid making an extra AJAX call. - if (!_.isUndefined(this.teamsView) - && this.teamsView.main.collection.topic_id === topicID) { - return this.identityPromise(this.teamsView); - } - var self = this, - teamCollection = new TeamCollection([], { - course_id: this.course_id, - url: this.teams_url, - topic_id: topicID, - per_page: 10 - }), - teamPromise = teamCollection.goTo(1).fail(function (xhr) { - if (xhr.status === 400) { - self.topicNotFound(topicID); - } - }), - topicPromise = this.getTopic(topicID).fail(function (xhr) { - if (xhr.status === 404) { - self.topicNotFound(topicID); - } - }); - return $.when(topicPromise, teamPromise).pipe( - _.bind(this.constructTeamView, this) - ); - }, + /** + * Browse to the team with the specified team ID belonging to the specified topic. + */ + browseTeam: function (topicID, teamID) { + var self = this; + this.getBrowseTeamView(topicID, teamID).done(function (browseTeamView) { + self.mainView = browseTeamView; + self.render(); + }); + }, - /** - * Given a topic and the results of the team - * collection's fetch(), return the team list view. - */ - constructTeamView: function (topic, collectionResults) { - var self = this, - headerView = new HeaderView({ - model: new HeaderModel({ - description: _.escape(topic.get('description')), - title: _.escape(topic.get('name')), - breadcrumbs: [{ - title: 'All topics', - url: '#' - }] - }), - events: { - 'click nav.breadcrumbs a.nav-item': function (event) { - event.preventDefault(); - self.router.navigate('browse', {trigger: true}); - } - } - }); - return new ViewWithHeader({ - header: headerView, - main: new TeamsView({ - collection: new TeamCollection(collectionResults[0], { - course_id: this.course_id, - url: this.teams_url, - topic_id: topic.get('id'), - per_page: 10, - parse: true - }), - teamParams: { - courseId: this.course_id, - teamsUrl: this.teams_url, - topicId: topic.get('id'), - topicName: topic.get('name'), - languages: self.languages, - countries: self.countries - }, - maxTeamSize: this.maxTeamSize - }) - }); - }, + /** + * Return a promise for the team view for the given team ID. + */ + getBrowseTeamView: function (topicID, teamID) { + var self = this, + deferred = $.Deferred(), + courseID = this.courseID; + self.getTopic(topicID).done(function(topic) { + self.getTeam(teamID).done(function(team) { + var view = new TeamProfileView({ + courseID: courseID, + model: team + }); + deferred.resolve(self.createViewWithHeader(view, team, topic)); + }); + }); + return deferred.promise(); + }, - /** - * Get a topic given a topic ID. Returns a jQuery deferred - * promise, since the topic may need to be fetched from the - * server. - * @param topicID the string identifier for the requested topic - * @returns a jQuery deferred promise for the topic. - */ - getTopic: function (topicID) { - // Try finding topic in the current page of the - // topicCollection. Otherwise call the topic endpoint. - var topic = this.topicsCollection.findWhere({'id': topicID}), - self = this; - if (topic) { - return this.identityPromise(topic); - } else { - var TopicModelWithUrl = TopicModel.extend({ - url: function () { return self.topic_url.replace('topic_id', this.id); } - }); - return (new TopicModelWithUrl({id: topicID })).fetch(); - } - }, + createViewWithHeader: function (mainView, subject, parentTopic) { + var router = this.router, + breadcrumbs, headerView; + breadcrumbs = [{ + title: gettext('All Topics'), + url: '#browse' + }]; + if (parentTopic) { + breadcrumbs.push({ + title: parentTopic.get('name'), + url: '#topics/' + parentTopic.id + }); + } + headerView = new HeaderView({ + model: new HeaderModel({ + description: subject.get('description'), + title: subject.get('name'), + breadcrumbs: breadcrumbs + }), + events: { + 'click nav.breadcrumbs a.nav-item': function (event) { + var url = $(event.currentTarget).attr('href'); + event.preventDefault(); + router.navigate(url, {trigger: true}); + } + } + }); + return new ViewWithHeader({ + header: headerView, + main: mainView + }); + }, - /** - * Immediately return a promise for the given - * object. - */ - identityPromise: function (obj) { - return new $.Deferred().resolve(obj).promise(); - }, + /** + * Get a topic given a topic ID. Returns a jQuery deferred + * promise, since the topic may need to be fetched from the + * server. + * @param topicID the string identifier for the requested topic + * @returns a jQuery deferred promise for the topic. + */ + getTopic: function (topicID) { + // Try finding topic in the current page of the + // topicCollection. Otherwise call the topic endpoint. + var topic = this.topicsCollection.findWhere({'id': topicID}), + self = this, + deferred = $.Deferred(); + if (topic) { + deferred.resolve(topic); + } else { + topic = new TopicModel({ + id: topicID, + url: self.topicUrl.replace('topic_id', topicID) + }); + topic.fetch() + .done(function() { + deferred.resolve(topic); + }) + .fail(function() { + self.topicNotFound(topicID); + deferred.reject(); + }); + } + return deferred.promise(); + }, - /** - * Set up the tabbed view and switch tabs. - */ - goToTab: function (tab) { - this.mainView = this.tabbedView; - // Note that `render` should be called first so - // that the tabbed view's element is set - // correctly. - this.render(); - this.tabbedView.main.setActiveTab(tab); - }, + /** + * Get a team given a team ID. Returns a jQuery deferred + * promise, since the team may need to be fetched from the + * server. + * @param teamID the string identifier for the requested team + * @returns {promise} a jQuery deferred promise for the team. + */ + getTeam: function (teamID) { + var team = this.teamsCollection ? this.teamsCollection.get(teamID) : null, + self = this, + deferred = $.Deferred(); + if (team) { + deferred.resolve(team); + } else { + team = new TeamModel({ + id: teamID, + url: this.teamsUrl + teamID + }); + team.fetch() + .done(function() { + deferred.resolve(team); + }) + .fail(function() { + self.teamNotFound(teamID); + deferred.reject(); + }); + } + return deferred.promise(); + }, - // Error handling + /** + * Set up the tabbed view and switch tabs. + */ + goToTab: function (tab) { + this.mainView = this.tabbedView; + // Note that `render` should be called first so + // that the tabbed view's element is set + // correctly. + this.render(); + this.tabbedView.main.setActiveTab(tab); + }, - routeNotFound: function (route) { - this.notFoundError( - interpolate( - gettext('The page "%(route)s" could not be found.'), - {route: route}, - true - ) - ); - }, + // Error handling - topicNotFound: function (topicID) { - this.notFoundError( - interpolate( - gettext('The topic "%(topic)s" could not be found.'), - {topic: topicID}, - true - ) - ); - }, + routeNotFound: function (route) { + this.notFoundError( + interpolate( + gettext('The page "%(route)s" could not be found.'), + {route: route}, + true + ) + ); + }, - /** - * Called when the user attempts to navigate to a - * route that doesn't exist. "Redirects" back to - * the main teams tab, and adds an error message. - */ - notFoundError: function (message) { - this.router.navigate('teams', {trigger: true}); - this.showWarning(message); - }, + topicNotFound: function (topicID) { + this.notFoundError( + interpolate( + gettext('The topic "%(topic)s" could not be found.'), + {topic: topicID}, + true + ) + ); + }, - showWarning: function (message) { - var warningEl = this.$('.warning'); - warningEl.find('.copy').html('

' + message + '' + message + ' +

+ <%= gettext("New Post") %> +
+ diff --git a/lms/djangoapps/teams/templates/teams/teams.html b/lms/djangoapps/teams/templates/teams/teams.html index eb23a11d24..a267b96173 100644 --- a/lms/djangoapps/teams/templates/teams/teams.html +++ b/lms/djangoapps/teams/templates/teams/teams.html @@ -7,8 +7,11 @@ <%block name="bodyclass">view-teams is-in-course course <%block name="pagetitle">${_("Teams")} + <%block name="headextra"> +<%static:css group='style-course-vendor'/> <%static:css group='style-course'/> +<%include file="../discussion/_js_head_dependencies.html" /> <%include file="/courseware/course_navigation.html" args="active_page='teams'" /> @@ -21,16 +24,25 @@ <%block name="js_extra"> + +<%include file="../discussion/_js_body_dependencies.html" /> +<%static:js group='discussion'/> + + <%static:require_module module_name="teams/js/teams_tab_factory" class_name="TeamsTabFactory"> - new TeamsTabFactory({ + TeamsTabFactory({ + courseID: '${ unicode(course.id) }', topics: ${ json.dumps(topics, cls=EscapedEdxJSONEncoder) }, - topic_url: '${ topic_url }', - topics_url: '${ topics_url }', - teams_url: '${ teams_url }', + topicUrl: '${ topic_url }', + topicsUrl: '${ topics_url }', + teamsUrl: '${ teams_url }', maxTeamSize: ${ course.teams_max_size }, - course_id: '${ unicode(course.id) }', languages: ${ json.dumps(languages, cls=EscapedEdxJSONEncoder) }, countries: ${ json.dumps(countries, cls=EscapedEdxJSONEncoder) } }); + +<%include file="../discussion/_underscore_templates.html" /> diff --git a/lms/static/js/spec/main.js b/lms/static/js/spec/main.js index 7f688c473e..b6e3aa8bca 100644 --- a/lms/static/js/spec/main.js +++ b/lms/static/js/spec/main.js @@ -21,6 +21,7 @@ 'jquery.inputnumber': 'xmodule_js/common_static/js/vendor/html5-input-polyfills/number-polyfill', 'jquery.immediateDescendents': 'xmodule_js/common_static/coffee/src/jquery.immediateDescendents', 'jquery.simulate': 'xmodule_js/common_static/js/vendor/jquery.simulate', + 'jquery.timeago': 'xmodule_js/common_static/js/vendor/jquery.timeago', 'jquery.url': 'xmodule_js/common_static/js/vendor/url.min', 'datepair': 'xmodule_js/common_static/js/vendor/timepicker/datepair', 'date': 'xmodule_js/common_static/js/vendor/date', @@ -30,8 +31,8 @@ 'backbone': 'xmodule_js/common_static/js/vendor/backbone-min', 'backbone.associations': 'xmodule_js/common_static/js/vendor/backbone-associations-min', 'backbone.paginator': 'xmodule_js/common_static/js/vendor/backbone.paginator.min', + 'backbone-super': 'js/vendor/backbone-super', 'URI': 'xmodule_js/common_static/js/vendor/URI.min', - "backbone-super": "js/vendor/backbone-super", 'tinymce': 'xmodule_js/common_static/js/vendor/tinymce/js/tinymce/tinymce.full.min', 'jquery.tinymce': 'xmodule_js/common_static/js/vendor/tinymce/js/tinymce/jquery.tinymce', 'xmodule': 'xmodule_js/src/xmodule', @@ -57,6 +58,12 @@ 'capa/display': 'xmodule_js/src/capa/display', 'string_utils': 'xmodule_js/common_static/js/src/string_utils', 'logger': 'xmodule_js/common_static/js/src/logger', + 'Markdown.Converter': 'js/Markdown.Converter', + 'Markdown.Editor': 'js/Markdown.Editor', + 'Markdown.Sanitizer': 'js/Markdown.Sanitizer', + '_split': 'js/split', + 'mathjax_delay_renderer': 'coffee/src/mathjax_delay_renderer', + 'MathJaxProcessor': 'coffee/src/customwmd', // Manually specify LMS files that are not converted to RequireJS 'history': 'js/vendor/history', @@ -83,6 +90,9 @@ 'js/student_profile/views/learner_profile_view': 'js/student_profile/views/learner_profile_view', 'js/ccx/schedule': 'js/ccx/schedule', + // Discussion classes loaded explicitly until they are converted to use RequireJS + 'DiscussionModuleView': 'xmodule_js/common_static/coffee/src/discussion/discussion_module_view', + // edxnotes 'annotator_1.2.9': 'xmodule_js/common_static/js/vendor/edxnotes/annotator-full.min' }, @@ -149,6 +159,10 @@ deps: ['jquery'], exports: 'jQuery.fn.simulate' }, + 'jquery.timeago': { + deps: ['jquery'], + exports: 'jQuery.timeago' + }, 'jquery.tinymce': { deps: ['jquery', 'tinymce'], exports: 'jQuery.fn.tinymce' @@ -192,11 +206,32 @@ exports: 'Backbone.Paginator' }, "backbone-super": { - deps: ["backbone"], + deps: ["backbone"] }, 'youtube': { exports: 'YT' }, + 'Markdown.Converter': { + deps: ['mathjax'], + exports: 'Markdown.Converter' + }, + 'Markdown.Editor': { + deps: ['Markdown.Converter'], + exports: 'Markdown.Editor' + }, + 'Markdown.Sanitizer': { + deps: ['Markdown.Converter'], + exports: 'Markdown.Sanitizer' + }, + '_split': { + exports: '_split' + }, + 'MathJaxProcessor': { + deps: [ + 'Markdown.Converter', 'Markdown.Sanitizer', 'Markdown.Editor', '_split', 'mathjax_delay_renderer' + ], + exports: 'MathJaxProcessor' + }, 'codemirror': { exports: 'CodeMirror' }, @@ -417,7 +452,7 @@ exports: 'edx.verify_student.IntroStepView', deps: [ 'jquery', - 'js/verify_student/views/step_view', + 'js/verify_student/views/step_view' ] }, 'js/verify_student/views/make_payment_step_view': { @@ -429,7 +464,7 @@ 'jquery.cookie', 'jquery.url', 'string_utils', - 'js/verify_student/views/step_view', + 'js/verify_student/views/step_view' ] }, 'js/verify_student/views/payment_confirmation_step_view': { @@ -438,7 +473,7 @@ 'jquery', 'underscore', 'gettext', - 'js/verify_student/views/step_view', + 'js/verify_student/views/step_view' ] }, 'js/verify_student/views/face_photo_step_view': { @@ -475,14 +510,14 @@ exports: 'edx.verify_student.EnrollmentConfirmationStepView', deps: [ 'jquery', - 'js/verify_student/views/step_view', + 'js/verify_student/views/step_view' ] }, 'js/verify_student/views/reverify_success_step_view': { exports: 'edx.verify_student.ReverifySuccessStepView', deps: [ 'jquery', - 'js/verify_student/views/step_view', + 'js/verify_student/views/step_view' ] }, 'js/verify_student/views/pay_and_verify_view': { @@ -520,21 +555,169 @@ 'annotator_1.2.9': { exports: 'Annotator', deps: ['jquery'] + }, + // Discussions + 'xmodule_js/common_static/coffee/src/discussion/utils': { + deps: [ + 'jquery', + 'jquery.timeago', + 'underscore', + 'backbone', + 'gettext', + 'MathJaxProcessor', + 'URI' + ], + exports: 'DiscussionUtil', + init: function() { + // Set global variables that the discussion code is expecting to be defined + window.Backbone = require('backbone'); + window.URI = require('URI'); + } + }, + 'xmodule_js/common_static/coffee/src/discussion/content': { + deps: [ + 'xmodule_js/common_static/coffee/src/discussion/utils' + ], + exports: 'Content' + }, + 'xmodule_js/common_static/coffee/src/discussion/discussion': { + deps: [ + 'xmodule_js/common_static/coffee/src/discussion/utils', + 'xmodule_js/common_static/coffee/src/discussion/content' + ], + exports: 'Discussion' + }, + 'xmodule_js/common_static/coffee/src/discussion/discussion_filter': { + deps: [ + 'xmodule_js/common_static/coffee/src/discussion/utils' + ], + exports: 'DiscussionFilter' + }, + 'xmodule_js/common_static/coffee/src/discussion/models/discussion_course_settings': { + deps: [ + 'xmodule_js/common_static/coffee/src/discussion/utils' + ], + exports: 'DiscussionCourseSettings' + }, + 'xmodule_js/common_static/coffee/src/discussion/models/discussion_user': { + deps: [ + 'xmodule_js/common_static/coffee/src/discussion/utils' + ], + exports: 'DiscussionUser' + }, + 'xmodule_js/common_static/coffee/src/discussion/views/discussion_content_view': { + deps: [ + 'xmodule_js/common_static/coffee/src/discussion/utils' + ], + exports: 'DiscussionContentView' + }, + 'xmodule_js/common_static/coffee/src/discussion/views/discussion_thread_edit_view': { + deps: [ + 'xmodule_js/common_static/coffee/src/discussion/utils' + ], + exports: 'DiscussionThreadEditView' + }, + 'xmodule_js/common_static/coffee/src/discussion/views/discussion_thread_list_view': { + deps: [ + 'xmodule_js/common_static/coffee/src/discussion/utils' + ], + exports: 'DiscussionThreadListView' + }, + 'xmodule_js/common_static/coffee/src/discussion/views/discussion_thread_profile_view': { + deps: [ + 'xmodule_js/common_static/coffee/src/discussion/utils' + ], + exports: 'DiscussionThreadProfileView' + }, + 'xmodule_js/common_static/coffee/src/discussion/views/discussion_thread_show_view': { + deps: [ + 'xmodule_js/common_static/coffee/src/discussion/utils' + ], + exports: 'DiscussionThreadShowView' + }, + 'xmodule_js/common_static/coffee/src/discussion/views/discussion_thread_view': { + deps: [ + 'xmodule_js/common_static/coffee/src/discussion/utils' + ], + exports: 'DiscussionThreadView' + }, + 'xmodule_js/common_static/coffee/src/discussion/views/discussion_topic_menu_view': { + deps: [ + 'xmodule_js/common_static/coffee/src/discussion/utils' + ], + exports: 'DiscussionTopicMenuView' + }, + 'xmodule_js/common_static/coffee/src/discussion/views/discussion_user_profile_view': { + deps: [ + 'xmodule_js/common_static/coffee/src/discussion/utils' + ], + exports: 'DiscussionUserProfileView' + }, + 'xmodule_js/common_static/coffee/src/discussion/views/new_post_view': { + deps: [ + 'xmodule_js/common_static/coffee/src/discussion/utils' + ], + exports: 'NewPostView' + }, + 'xmodule_js/common_static/coffee/src/discussion/views/thread_response_edit_view': { + deps: [ + 'xmodule_js/common_static/coffee/src/discussion/utils' + ], + exports: 'ThreadResponseEditView' + }, + 'xmodule_js/common_static/coffee/src/discussion/views/thread_response_show_view': { + deps: [ + 'xmodule_js/common_static/coffee/src/discussion/utils' + ], + exports: 'ThreadResponseShowView' + }, + 'xmodule_js/common_static/coffee/src/discussion/views/thread_response_view': { + deps: [ + 'xmodule_js/common_static/coffee/src/discussion/utils' + ], + exports: 'ThreadResponseView' + }, + 'DiscussionModuleView': { + deps: [ + 'jquery', + 'underscore', + 'backbone', + 'gettext', + 'URI', + 'xmodule_js/common_static/coffee/src/discussion/content', + 'xmodule_js/common_static/coffee/src/discussion/discussion', + 'xmodule_js/common_static/coffee/src/discussion/discussion_filter', + 'xmodule_js/common_static/coffee/src/discussion/utils', + 'xmodule_js/common_static/coffee/src/discussion/models/discussion_course_settings', + 'xmodule_js/common_static/coffee/src/discussion/models/discussion_user', + 'xmodule_js/common_static/coffee/src/discussion/views/discussion_content_view', + 'xmodule_js/common_static/coffee/src/discussion/views/discussion_thread_edit_view', + 'xmodule_js/common_static/coffee/src/discussion/views/discussion_thread_list_view', + 'xmodule_js/common_static/coffee/src/discussion/views/discussion_thread_profile_view', + 'xmodule_js/common_static/coffee/src/discussion/views/discussion_thread_show_view', + 'xmodule_js/common_static/coffee/src/discussion/views/discussion_thread_view', + 'xmodule_js/common_static/coffee/src/discussion/views/discussion_topic_menu_view', + 'xmodule_js/common_static/coffee/src/discussion/views/discussion_user_profile_view', + 'xmodule_js/common_static/coffee/src/discussion/views/new_post_view', + 'xmodule_js/common_static/coffee/src/discussion/views/thread_response_edit_view', + 'xmodule_js/common_static/coffee/src/discussion/views/thread_response_show_view', + 'xmodule_js/common_static/coffee/src/discussion/views/thread_response_view' + ], + exports: 'DiscussionModuleView' + }, + 'xmodule_js/common_static/coffee/spec/discussion/discussion_spec_helper': { + deps: [ + 'xmodule_js/common_static/coffee/src/discussion/utils' + ], + exports: 'DiscussionSpecHelper' } + } }); // TODO: why do these need 'lms/include' at the front but the CMS equivalent logic doesn't? define([ // Run the LMS tests - 'lms/include/teams/js/spec/teams_factory_spec.js', - 'lms/include/teams/js/spec/topic_card_spec.js', - 'lms/include/teams/js/spec/topic_collection_spec.js', - 'lms/include/teams/js/spec/topics_spec.js', - 'lms/include/teams/js/spec/teams_spec.js', - 'lms/include/teams/js/spec/teams_tab_spec.js', - 'lms/include/teams/js/spec/team_actions_spec.js', - 'lms/include/teams/js/spec/edit_team_spec.js', 'lms/include/js/spec/components/header/header_spec.js', 'lms/include/js/spec/components/tabbed/tabbed_view_spec.js', 'lms/include/js/spec/components/card/card_spec.js', @@ -605,7 +788,17 @@ 'lms/include/js/spec/discovery/views/refine_sidebar_spec.js', 'lms/include/js/spec/discovery/views/search_form_spec.js', 'lms/include/js/spec/discovery/discovery_factory_spec.js', - 'lms/include/js/spec/ccx/schedule_spec.js' + 'lms/include/js/spec/ccx/schedule_spec.js', + 'lms/include/teams/js/spec/collections/topic_collection_spec.js', + 'lms/include/teams/js/spec/edit_team_spec.js', + 'lms/include/teams/js/spec/team_actions_spec.js', + 'lms/include/teams/js/spec/teams_factory_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/include/teams/js/spec/views/teams_tab_spec.js', + 'lms/include/teams/js/spec/views/topic_card_spec.js', + 'lms/include/teams/js/spec/views/topics_spec.js', ]); }).call(this, requirejs, define); diff --git a/lms/static/js_test.yml b/lms/static/js_test.yml index 82b875da50..4aa034d22f 100644 --- a/lms/static/js_test.yml +++ b/lms/static/js_test.yml @@ -39,6 +39,7 @@ lib_paths: - xmodule_js/common_static/js/vendor/jquery.min.js - xmodule_js/common_static/js/vendor/jquery-ui.min.js - xmodule_js/common_static/js/vendor/jquery.cookie.js + - xmodule_js/common_static/js/vendor/jquery.timeago.js - xmodule_js/common_static/js/vendor/flot/jquery.flot.js - xmodule_js/common_static/js/vendor/CodeMirror/codemirror.js - xmodule_js/common_static/js/vendor/URI.min.js @@ -66,8 +67,10 @@ lib_paths: # Paths to source JavaScript files src_paths: - js + - coffee/src - common/js - teams/js + - xmodule_js/common_static/coffee # Paths to spec (test) JavaScript files spec_paths: diff --git a/lms/static/lms/js/build.js b/lms/static/lms/js/build.js index 33b1903289..81d8568dd9 100644 --- a/lms/static/lms/js/build.js +++ b/lms/static/lms/js/build.js @@ -64,6 +64,7 @@ 'logger': 'empty:', 'utility': 'empty:', 'URI': 'empty:', + 'DiscussionModuleView': 'empty:' }, /** diff --git a/lms/static/lms/js/require-config.js b/lms/static/lms/js/require-config.js index 50c433affd..13270a1993 100644 --- a/lms/static/lms/js/require-config.js +++ b/lms/static/lms/js/require-config.js @@ -23,6 +23,7 @@ defineDependency("Logger", "logger"); defineDependency("URI", "URI"); defineDependency("Backbone", "backbone"); + // utility.js adds two functions to the window object, but does not return anything defineDependency("isExternal", "utility", true); }