inline discussion component filtering and sorting

TNL-6117

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;

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();

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);

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);
             };
 

common/static/common/templates/discussion/inline-discussion.underscore

@@ -6,7 +6,7 @@
     <article class="new-post-article is-hidden"></article>
 
     <div class="inline-discussion-thread-container">
-        <section class="inline-threads">
+        <section class="inline-threads" data-discussion-id="<%- discussionId %>">
         </section>
 
         <div class="inline-thread">

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(),

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');
+            });
         });
     });
 });

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')

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

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)}"

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

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%;