From f12dfae2d12bc358d3ab4a0eec7da15a9ae4d291 Mon Sep 17 00:00:00 2001 From: alisan617 Date: Wed, 11 Jan 2017 16:24:46 -0500 Subject: [PATCH] inline discussion component filtering and sorting TNL-6117 --- .../static/common/js/discussion/discussion.js | 6 +++++- .../views/discussion_inline_view.js | 9 ++++++--- .../views/discussion_thread_list_view.js | 19 +++++++++++++------ .../view/discussion_thread_list_view_spec.js | 1 + .../discussion/inline-discussion.underscore | 2 +- .../js/spec/discussion_board_view_spec.js | 8 ++++++++ .../discussion_user_profile_view_spec.js | 19 ++++++++++++++----- .../js/views/discussion_board_view.js | 3 ++- .../js/views/discussion_user_profile_view.js | 4 ++-- .../discussion/discussion_profile_page.html | 1 + .../teams/js/spec/views/team_profile_spec.js | 3 ++- .../sass/discussion/elements/_navigation.scss | 13 +++++++++---- 12 files changed, 64 insertions(+), 24 deletions(-) diff --git a/common/static/common/js/discussion/discussion.js b/common/static/common/js/discussion/discussion.js index ce0a04a572..d6b41eeee4 100644 --- a/common/static/common/js/discussion/discussion.js +++ b/common/static/common/js/discussion/discussion.js @@ -99,7 +99,7 @@ data.text = options.search_text; break; case 'commentables': - url = DiscussionUtil.urlFor('search'); + url = DiscussionUtil.urlFor('retrieve_discussion', options.commentable_ids); data.commentable_ids = options.commentable_ids; break; case 'all': @@ -107,6 +107,10 @@ break; case 'followed': url = DiscussionUtil.urlFor('followed_threads', options.user_id); + break; + case 'user': + url = DiscussionUtil.urlFor('user_profile', options.user_id); + break; } if (options.group_id) { data.group_id = options.group_id; diff --git a/common/static/common/js/discussion/views/discussion_inline_view.js b/common/static/common/js/discussion/views/discussion_inline_view.js index c2f87a3ef7..1a80011b5b 100644 --- a/common/static/common/js/discussion/views/discussion_inline_view.js +++ b/common/static/common/js/discussion/views/discussion_inline_view.js @@ -39,6 +39,9 @@ this.page = 1; } + this.defaultSortKey = 'activity'; + this.defaultSortOrder = 'desc'; + // By default the view is displayed in a hidden state. If you want it to be shown by default (e.g. in Teams) // pass showByDefault as an option. This code will open it on initialization. if (this.showByDefault) { @@ -48,7 +51,8 @@ loadDiscussions: function($elem, error) { var discussionId = this.$el.data('discussion-id'), - url = DiscussionUtil.urlFor('retrieve_discussion', discussionId) + ('?page=' + this.page), + url = DiscussionUtil.urlFor('retrieve_discussion', discussionId) + ('?page=' + this.page) + + ('&sort_key=' + this.defaultSortKey) + ('&sort_order=' + this.defaultSortOrder), self = this; DiscussionUtil.safeAjax({ @@ -100,8 +104,7 @@ this.threadListView = new DiscussionThreadListView({ el: this.$('.inline-threads'), collection: self.discussion, - courseSettings: self.course_settings, - hideRefineBar: true // TODO: re-enable the search/filter bar when it works correctly + courseSettings: self.course_settings }); this.threadListView.render(); diff --git a/common/static/common/js/discussion/views/discussion_thread_list_view.js b/common/static/common/js/discussion/views/discussion_thread_list_view.js index ac151c9493..6bdf7305f1 100644 --- a/common/static/common/js/discussion/views/discussion_thread_list_view.js +++ b/common/static/common/js/discussion/views/discussion_thread_list_view.js @@ -91,14 +91,13 @@ DiscussionThreadListView.prototype.initialize = function(options) { var self = this; this.courseSettings = options.courseSettings; - this.hideRefineBar = options.hideRefineBar; this.supportsActiveThread = options.supportsActiveThread; this.hideReadState = options.hideReadState || false; this.displayedCollection = new Discussion(this.collection.models, { pages: this.collection.pages }); this.collection.on('change', this.reloadDisplayedCollection); - this.discussionIds = ''; + this.discussionIds = this.$el.data('discussion-id') || ''; this.collection.on('reset', function(discussion) { self.displayedCollection.current_page = discussion.current_page; self.displayedCollection.pages = discussion.pages; @@ -109,7 +108,7 @@ this.sidebar_padding = 10; this.boardName = null; this.current_search = ''; - this.mode = 'all'; + this.mode = options.mode || 'commentables'; this.showThreadPreview = true; this.searchAlertCollection = new Backbone.Collection([], { model: Backbone.Model @@ -199,6 +198,9 @@ isPrivilegedUser: DiscussionUtil.isPrivilegedUser() }) ); + if (this.hideReadState) { + this.$('.forum-nav-filter-main').addClass('is-hidden'); + } this.$('.forum-nav-sort-control option').removeProp('selected'); this.$('.forum-nav-sort-control option[value=' + this.collection.sort_preference + ']') .prop('selected', true); @@ -223,9 +225,6 @@ } this.showMetadataAccordingToSort(); this.renderMorePages(); - if (this.hideRefineBar) { - this.$('.forum-nav-refine-bar').addClass('is-hidden'); - } this.trigger('threads:rendered'); }; @@ -284,6 +283,9 @@ case 'followed': options.user_id = window.user.id; break; + case 'user': + options.user_id = this.$el.parent().data('user-id'); + break; case 'commentables': options.commentable_ids = this.discussionIds; if (this.group_id) { @@ -319,6 +321,11 @@ gettext('Additional posts could not be loaded. Refresh the page and try again.') ); }; + /* + The options object is being passed to the function below from discussion/discussion.js + which correspondingly forms the ajax url based on the mode via the DiscussionUtil.urlFor + from discussion/utils.js + */ return this.collection.retrieveAnotherPage(this.mode, options, { sort_key: this.$('.forum-nav-sort-control').val() }, error); diff --git a/common/static/common/js/spec/discussion/view/discussion_thread_list_view_spec.js b/common/static/common/js/spec/discussion/view/discussion_thread_list_view_spec.js index 713ffa801a..dfd9d15c8f 100644 --- a/common/static/common/js/spec/discussion/view/discussion_thread_list_view_spec.js +++ b/common/static/common/js/spec/discussion/view/discussion_thread_list_view_spec.js @@ -364,6 +364,7 @@ }); sortControl.val(newType).change(); expect($.ajax).toHaveBeenCalled(); + expect(view.mode).toBe('commentables'); checkThreadsOrdering(view, sortOrder, newType); }; diff --git a/common/static/common/templates/discussion/inline-discussion.underscore b/common/static/common/templates/discussion/inline-discussion.underscore index 56e914eaa0..6e2a34401f 100644 --- a/common/static/common/templates/discussion/inline-discussion.underscore +++ b/common/static/common/templates/discussion/inline-discussion.underscore @@ -6,7 +6,7 @@
-
+
diff --git a/lms/djangoapps/discussion/static/discussion/js/spec/discussion_board_view_spec.js b/lms/djangoapps/discussion/static/discussion/js/spec/discussion_board_view_spec.js index ccee1de7da..f75456210d 100644 --- a/lms/djangoapps/discussion/static/discussion/js/spec/discussion_board_view_spec.js +++ b/lms/djangoapps/discussion/static/discussion/js/spec/discussion_board_view_spec.js @@ -30,6 +30,14 @@ return discussionBoardView; }; + describe('Thread List View', function() { + it('should ensure the mode is all', function() { + var discussionBoardView = createDiscussionBoardView().render(), + threadListView = discussionBoardView.discussionThreadListView; + expect(threadListView.mode).toBe('all'); + }); + }); + describe('Search events', function() { it('perform search when enter pressed inside search textfield', function() { var discussionBoardView = createDiscussionBoardView(), diff --git a/lms/djangoapps/discussion/static/discussion/js/spec/views/discussion_user_profile_view_spec.js b/lms/djangoapps/discussion/static/discussion/js/spec/views/discussion_user_profile_view_spec.js index 531f807935..0732f75bf2 100644 --- a/lms/djangoapps/discussion/static/discussion/js/spec/views/discussion_user_profile_view_spec.js +++ b/lms/djangoapps/discussion/static/discussion/js/spec/views/discussion_user_profile_view_spec.js @@ -30,13 +30,22 @@ DiscussionSpecHelper, DiscussionUserProfileView) { describe('thread list in user profile page', function() { it('should render', function() { - var discussionUserProfileView = createDiscussionUserProfileView(), - threadListView; - discussionUserProfileView.render(); - threadListView = discussionUserProfileView.discussionThreadListView; - threadListView.render(); + var discussionUserProfileView = createDiscussionUserProfileView().render(), + threadListView = discussionUserProfileView.discussionThreadListView.render(); expect(threadListView.$('.forum-nav-thread-list').length).toBe(1); }); + + it('should ensure discussion thread list view mode is all', function() { + var discussionUserProfileView = createDiscussionUserProfileView().render(), + threadListView = discussionUserProfileView.discussionThreadListView.render(); + expect(threadListView.mode).toBe('user'); + }); + + it('should not show the thread list unread unanswered filter', function() { + var discussionUserProfileView = createDiscussionUserProfileView().render(), + threadListView = discussionUserProfileView.discussionThreadListView.render(); + expect(threadListView.$('.forum-nav-filter-main')).toHaveClass('is-hidden'); + }); }); }); }); diff --git a/lms/djangoapps/discussion/static/discussion/js/views/discussion_board_view.js b/lms/djangoapps/discussion/static/discussion/js/views/discussion_board_view.js index 075fcdf3f9..ce64ab4257 100644 --- a/lms/djangoapps/discussion/static/discussion/js/views/discussion_board_view.js +++ b/lms/djangoapps/discussion/static/discussion/js/views/discussion_board_view.js @@ -46,7 +46,8 @@ collection: this.discussion, el: this.$('.discussion-thread-list-container'), courseSettings: this.courseSettings, - supportsActiveThread: true + supportsActiveThread: true, + mode: this.mode }).render(); this.searchView = new DiscussionSearchView({ el: this.$('.forum-search') diff --git a/lms/djangoapps/discussion/static/discussion/js/views/discussion_user_profile_view.js b/lms/djangoapps/discussion/static/discussion/js/views/discussion_user_profile_view.js index b8148b5f55..900413ef47 100644 --- a/lms/djangoapps/discussion/static/discussion/js/views/discussion_user_profile_view.js +++ b/lms/djangoapps/discussion/static/discussion/js/views/discussion_user_profile_view.js @@ -26,7 +26,7 @@ initialize: function(options) { this.courseSettings = options.courseSettings; this.discussion = options.discussion; - this.mode = 'all'; + this.mode = 'user'; this.listenTo(this.model, 'change', this.render); }, @@ -39,7 +39,7 @@ collection: this.discussion, el: this.$('.inline-threads'), courseSettings: this.courseSettings, - hideRefineBar: true, // TODO: re-enable the search/filter bar when it works correctly + mode: this.mode, // @TODO: On the profile page, thread read state for the viewing user is not accessible via API. // Fix this when the Discussions API can support this query. Until then, hide read state. hideReadState: true diff --git a/lms/djangoapps/discussion/templates/discussion/discussion_profile_page.html b/lms/djangoapps/discussion/templates/discussion/discussion_profile_page.html index a727028d38..5a9602d7fe 100644 --- a/lms/djangoapps/discussion/templates/discussion/discussion_profile_page.html +++ b/lms/djangoapps/discussion/templates/discussion/discussion_profile_page.html @@ -76,6 +76,7 @@ from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_str data-course-name="${course.display_name_with_default}" data-threads="${threads}" data-user-info="${user_info}" + data-user-id="${django_user.id}" data-page="${page}" data-num-pages="${num_pages}" data-user-create-comment="${json.dumps(can_create_comment)}" 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 index 83fa3768f7..a969d624a7 100644 --- 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 @@ -59,7 +59,8 @@ define([ requests, 'GET', interpolate( - '/courses/%(courseID)s/discussion/forum/%(topicID)s/inline?page=1&ajax=1', + '/courses/%(courseID)s/discussion/forum/%(topicID)s/inline' + + '?page=1&sort_key=activity&sort_order=desc&ajax=1', { courseID: TeamSpecHelpers.testCourseID, topicID: TeamSpecHelpers.testTeamDiscussionID diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss index f4974e5ed3..66eb5e2aa9 100644 --- a/lms/static/sass/discussion/elements/_navigation.scss +++ b/lms/static/sass/discussion/elements/_navigation.scss @@ -137,21 +137,26 @@ @include text-align(left); @include float(left); box-sizing: border-box; - display: inline-block; width: 50%; } .forum-nav-filter-cohort, .forum-nav-sort { @include text-align(right); - @include float(right); box-sizing: border-box; - display: inline-block; +} - @media (min-width: $bp-screen-md) { +.forum-nav-filter-cohort { + .discussion-board & { + @include float(right); + @include text-align(right); width: 50%; } } +.forum-nav-sort { + @include float(right); +} + %forum-nav-select { border: none; max-width: 100%;