Add filter menu to forum nav sidebar

The menu allows filtering to unread, unanswered, or flagged threads.
This includes passing through the appropriate query parameters to the
comments service.

common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee

@@ -137,13 +137,21 @@ describe "DiscussionThreadListView", ->
             </div>
             <div class="forum-nav-thread-list-wrapper">
                 <div class="forum-nav-refine-bar">
-                    <span class="forum-nav-sort">
+                    <label class="forum-nav-filter-main">
+                        <select class="forum-nav-filter-main-control">
+                            <option value="all">Show all</option>
+                            <option value="unread">Unread</option>
+                            <option value="unanswered">Unanswered</option>
+                            <option value="flagged">Flagged</option>
+                        </select>
+                    </label>
+                    <label class="forum-nav-sort">
                         <select class="forum-nav-sort-control">
                             <option value="date">by recent activity</option>
                             <option value="comments">by most activity</option>
                             <option value="votes">by most votes</option>
                         </select>
-                    </span>
+                    </label>
                 </div>
             </div>
             <div class="search-alerts"></div>
@@ -201,6 +209,31 @@ describe "DiscussionThreadListView", ->
           collection: discussion
       )
 
+    expectFilter = (filterVal) ->
+        $.ajax.andCallFake((params) ->
+            _.each(["unread", "unanswered", "flagged"], (paramName)->
+                if paramName == filterVal
+                    expect(params.data[paramName]).toEqual(true)
+                else
+                    expect(params.data[paramName]).toBeUndefined()
+            )
+            {always: ->}
+        )
+
+    describe "should filter correctly", ->
+        _.each(["all", "unread", "unanswered", "flagged"], (filterVal) ->
+            it "for #{filterVal}", ->
+                expectFilter(filterVal)
+                @view.$(".forum-nav-filter-main-control").val(filterVal).change()
+                expect($.ajax).toHaveBeenCalled()
+        )
+
+    it "search should clear filter", ->
+        expectFilter(null)
+        @view.$(".forum-nav-filter-main-control").val("flagged")
+        @view.searchFor("foobar")
+        expect(@view.$(".forum-nav-filter-main-control").val()).toEqual("all")
+
     checkThreadsOrdering =  (view, sort_order, type) ->
       expect(view.$el.find(".forum-nav-thread").children().length).toEqual(3)
       expect(view.$el.find(".forum-nav-thread:nth-child(1) .forum-nav-thread-title").text()).toEqual(sort_order[0])

common/static/coffee/src/discussion/discussion.coffee

@@ -34,6 +34,8 @@ if Backbone?
 
     retrieveAnotherPage: (mode, options={}, sort_options={}, error=null)->
       data = { page: @current_page + 1 }
+      if _.contains(["unread", "unanswered", "flagged"], options.filter)
+        data[options.filter] = true
       switch mode
         when 'search'
           url = DiscussionUtil.urlFor 'search'

common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee

@@ -10,6 +10,7 @@ if Backbone?
       "change .forum-nav-sort-control": "sortThreads"
       "click .forum-nav-thread-link": "threadSelected"
       "click .forum-nav-load-more-link": "loadMorePages"
+      "change .forum-nav-filter-main-control": "chooseFilter"
       "change .forum-nav-filter-cohort-control": "chooseCohort"
 
     initialize: ->
@@ -173,7 +174,7 @@ if Backbone?
       loadingElem = loadMoreElem.find(".forum-nav-loading")
       DiscussionUtil.makeFocusTrap(loadingElem)
       loadingElem.focus()
-      options = {}
+      options = {filter: @filter}
       switch @mode
         when 'search'
           options.search_text = @current_search
@@ -378,11 +379,13 @@ if Backbone?
         @retrieveDiscussions(discussionIds)
         @$(".forum-nav-filter-cohort").toggle(item.data('cohorted') == true)
 
-    chooseCohort: (event) ->
+    chooseFilter: (event) =>
+      @filter = $(".forum-nav-filter-main-control :selected").val()
+      @retrieveFirstPage()
+
+    chooseCohort: (event) =>
       @group_id = @$('.forum-nav-filter-cohort-control :selected').val()
-      @collection.current_page = 0
-      @collection.reset()
-      @loadMorePages(event)
+      @retrieveFirstPage()
       
     retrieveDiscussion: (discussion_id, callback=null) ->
       url = DiscussionUtil.urlFor("retrieve_discussion", discussion_id)
@@ -434,6 +437,7 @@ if Backbone?
 
     searchFor: (text) ->
       @clearSearchAlerts()
+      @clearFilters()
       @mode = 'search'
       @current_search = text
       url = DiscussionUtil.urlFor("search")
@@ -500,6 +504,10 @@ if Backbone?
       @$(".forum-nav-search-input").val("")
       @current_search = ""
 
+    clearFilters: ->
+     @$(".forum-nav-filter-main-control").val("all")
+     @$(".forum-nav-filter-cohort-control").val("all")
+
     retrieveFollowed: () =>
       @mode = 'followed'
       @retrieveFirstPage()

lms/djangoapps/django_comment_client/forum/views.py

@@ -103,11 +103,24 @@ def get_threads(request, course_id, discussion_id=None, per_page=THREADS_PER_PAG
 
     #so by default, a moderator sees all items, and a student sees his cohort
 
-    query_params = merge_dict(default_query_params,
-                              strip_none(extract(request.GET,
-                                                 ['page', 'sort_key',
-                                                  'sort_order', 'text',
-                                                  'commentable_ids', 'flagged'])))
+    query_params = merge_dict(
+        default_query_params,
+        strip_none(
+            extract(
+                request.GET,
+                [
+                    'page',
+                    'sort_key',
+                    'sort_order',
+                    'text',
+                    'commentable_ids',
+                    'flagged',
+                    'unread',
+                    'unanswered',
+                ]
+            )
+        )
+    )
 
     threads, page, num_pages, corrected_text = cc.Thread.search(query_params)
 
@@ -368,13 +381,30 @@ def followed_threads(request, course_id, user_id):
     try:
         profiled_user = cc.User(id=user_id, course_id=course_id)
 
-        query_params = {
-            'page': request.GET.get('page', 1),
+        default_query_params = {
+            'page': 1,
             'per_page': THREADS_PER_PAGE,   # more than threads_per_page to show more activities
-            'sort_key': request.GET.get('sort_key', 'date'),
-            'sort_order': request.GET.get('sort_order', 'desc'),
+            'sort_key': 'date',
+            'sort_order': 'desc',
         }
 
+        query_params = merge_dict(
+            default_query_params,
+            strip_none(
+                extract(
+                    request.GET,
+                    [
+                        'page',
+                        'sort_key',
+                        'sort_order',
+                        'flagged',
+                        'unread',
+                        'unanswered',
+                    ]
+                )
+            )
+        )
+
         threads, page, num_pages = profiled_user.subscribed_threads(query_params)
         query_params['page'] = page
         query_params['num_pages'] = num_pages

lms/static/sass/discussion/elements/_navigation.scss

@@ -127,21 +127,35 @@
   background-color: $gray-l5;
   padding: ($baseline/4) ($baseline/2);
   color: $black;
+  text-align: right;
+}
+
+.forum-nav-filter-main {
+  @include box-sizing(border-box);
+  display: inline-block;
+  width: 50%;
+  text-align: left;
+}
+
+.forum-nav-filter-cohort, .forum-nav-sort {
+  @include box-sizing(border-box);
+  display: inline-block;
+  width: 50%;
+  text-align: right;
 }
 
 %forum-nav-select {
   border: none;
   max-width: 100%;
   background-color: transparent;
-  font: inherit;
 }
 
-.forum-nav-filter-cohort-control {
+.forum-nav-filter-main-control {
   @extend %forum-nav-select;
 }
 
-.forum-nav-sort {
-  float: right;
+.forum-nav-filter-cohort-control {
+  @extend %forum-nav-select;
 }
 
 .forum-nav-sort-control {

lms/static/sass/discussion/utilities/_shame.scss

@@ -66,9 +66,16 @@
 // navigation - sort and filter bar
 // --------------------------------
 
-// Override global span rules
-.forum-nav-sort-label {
-  color: inherit;
+// Override global label rules
+.forum-nav-filter-main, .forum-nav-filter-cohort, .forum-nav-sort {
+  font: inherit;
+  line-height: 1em;
+  margin-bottom: 0;
+}
+
+// Override global select rules
+.forum-nav-filter-main-control, .forum-nav-filter-cohort-control, .forum-nav-sort-control {
+  font: inherit;
 }
 
 // --------------------------------

lms/templates/discussion/_thread_list_template.html

@@ -20,18 +20,41 @@
     <%include file="_filter_dropdown.html" />
     <div class="forum-nav-thread-list-wrapper">
         <div class="forum-nav-refine-bar">
+            <label class="forum-nav-filter-main">
+                ## Translators: This labels a filter menu in forum navigation
+                <span class="sr">${_("Filter:")}</span>
+                <select class="forum-nav-filter-main-control">
+                    ## Translators: This is a menu option for showing all forum threads unfiltered
+                    <option value="all">${_("Show all")}</option>
+                    ## Translators: This is a menu option for showing only unread forum threads
+                    <option value="unread">${_("Unread")}</option>
+                    ## Translators: This is a menu option for showing only unanswered forum
+                    ## question threads
+                    <option value="unanswered">${_("Unanswered")}</option>
+                    %if flag_moderator:
+                        ## Translators: This is a menu option for showing only forum threads flagged
+                        ## for abuse
+                        <option value="flagged">${_("Flagged")}</option>
+                    %endif
+                </select>
+            </label>\
             %if is_course_cohorted and is_moderator:
-            <span class="forum-nav-filter-cohort">
+## Lack of indentation is intentional to avoid whitespace between this and siblings
+<label class="forum-nav-filter-cohort">
+                ## Translators: This labels a cohort menu in forum navigation
+                <span class="sr">${_("Cohort:")}</span>
                 <select class="forum-nav-filter-cohort-control">
-                    <option value="all">${_("View all cohorts")}</option>
+                    <option value="all">${_("in all cohorts")}</option>
                         %for c in cohorts:
-                            <option value="${c['id']}">${_("View as {cohort_name}").format(cohort_name=c['name'])}</option>
+                            <option value="${c['id']}">${c['name']}</option>
                         %endfor
                 </select>
-            </span>
+            </label>\
             %endif
-
-            <span class="forum-nav-sort">
+## Lack of indentation is intentional to avoid whitespace between this and siblings
+<label class="forum-nav-sort">
+                ## Translators: This labels a sort menu in forum navigation
+                <span class="sr">${_("Sort:")}</span>
                 <select class="forum-nav-sort-control">
                     ## Translators: This is a menu option for sorting forum threads
                     <option value="date">${_("by recent activity")}</option>
@@ -40,7 +63,7 @@
                     ## Translators: This is a menu option for sorting forum threads
                     <option value="votes">${_("by most votes")}</option>
                 </select>
-            </span>
+            </label>
         </div>
         <div class="search-alerts"></div>
         <ul class="forum-nav-thread-list"></ul>