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