Skip to content

E
edx-platform
Commit 80d1cae6 by Greg Price
Options

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.
parent eaa93bf6
Showing with 147 additions and 30 deletions
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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment