Skip to content

E
edx-platform
Commit 909903eb by Greg Price
Options

Merge pull request #3391 from edx/gprice/user-profile-pagination 

Add pagination to forum user profile
parents 693e5f7b 0e59038c
Showing with 362 additions and 184 deletions
common/static/coffee/spec/discussion/view/discussion_thread_profile_view_spec.coffee deleted 100644 → 0
describe "DiscussionThreadProfileView", ->
beforeEach ->
setFixtures(
"""
<div class="discussion-post">
<a href="#" class="vote-btn" data-tooltip="vote" role="button" aria-pressed="false">
<span class="plus-icon"/><span class="votes-count-number">0</span> <span class="sr">votes (click to vote)</span>
</a>
</div>
"""
)
@threadData = {
id: "dummy",
user_id: "567",
course_id: "TestOrg/TestCourse/TestRun",
body: "this is a thread",
created_at: "2013-04-03T20:08:39Z",
abuse_flaggers: [],
votes: {up_count: "42"}
}
@thread = new Thread(@threadData)
@view = new DiscussionThreadProfileView({ model: @thread })
@view.setElement($(".discussion-post"))
window.user = new DiscussionUser({id: "567", upvoted_ids: []})
it "renders the vote correctly", ->
DiscussionViewSpecHelper.checkRenderVote(@view, @thread)
it "votes correctly", ->
DiscussionViewSpecHelper.checkVote(@view, @thread, @threadData, true)
it "unvotes correctly", ->
DiscussionViewSpecHelper.checkUnvote(@view, @thread, @threadData, true)
it "toggles the vote correctly", ->
DiscussionViewSpecHelper.checkToggleVote(@view, @thread)
it "vote button activates on appropriate events", ->
DiscussionViewSpecHelper.checkVoteButtonEvents(@view)
common/static/coffee/spec/discussion/view/discussion_user_profile_view_spec.coffee 0 → 100644
describe "DiscussionUserProfileView", ->
beforeEach ->
setFixtures(
"""
<script type="text/template" id="_user_profile">
<section class="discussion">
{{#threads}}
<article class="discussion-thread" id="thread_{{id}}"/>
{{/threads}}
</section>
<section class="pagination"/>
</script>
<script type="text/template" id="_profile_thread">
<div class="profile-thread" id="thread_{{id}}"/>
</script>
<script type="text/template" id="_pagination">
<div class="discussion-paginator">
<a href="#different-page"/>
</div>
<div
class="pagination-params"
data-leftdots="{{leftdots}}"
data-page="{{page}}"
data-rightdots="{{rightdots}}"
>
{{#previous}}
<div class="previous" data-url="{{url}}" data-number="{{number}}"/>
{{/previous}}
{{#first}}
<div class="first" data-url="{{url}}" data-number="{{number}}"/>
{{/first}}
{{#lowPages}}
<div class="lowPages" data-url="{{url}}" data-number="{{number}}"/>
{{/lowPages}}
{{#highPages}}
<div class="highPages" data-url="{{url}}" data-number="{{number}}"/>
{{/highPages}}
{{#last}}
<div class="last" data-url="{{url}}" data-number="{{number}}"/>
{{/last}}
{{#next}}
<div class="next" data-url="{{url}}" data-number="{{number}}"/>
{{/next}}
</div>
</script>
<div class="user-profile-fixture"/>
"""
)
window.$$course_id = "dummy_course_id"
spyOn(DiscussionThreadProfileView.prototype, "render")
makeView = (threads, page, numPages) ->
return new DiscussionUserProfileView(
el: $(".user-profile-fixture")
collection: threads
page: page
numPages: numPages
)
describe "thread rendering should be correct", ->
checkRender = (numThreads) ->
threads = _.map(_.range(numThreads), (i) -> {id: i.toString(), body: "dummy body"})
view = makeView(threads, 1, 1)
expect(view.$(".discussion").children().length).toEqual(numThreads)
_.each(threads, (thread) -> expect(view.$("#thread_#{thread.id}").length).toEqual(1))
it "with no threads", ->
checkRender(0)
it "with one thread", ->
checkRender(1)
it "with several threads", ->
checkRender(5)
describe "pagination rendering should be correct", ->
baseUri = URI(window.location)
pageInfo = (page) -> {url: baseUri.clone().addSearch("page", page).toString(), number: page}
checkRender = (params) ->
view = makeView([], params.page, params.numPages)
paramsQuery = view.$(".pagination-params")
expect(paramsQuery.length).toEqual(1)
_.each(
["page", "leftdots", "rightdots"],
(param) ->
expect(paramsQuery.data(param)).toEqual(params[param])
)
_.each(
["previous", "first", "last", "next"],
(param) ->
expected = params[param]
expect(paramsQuery.find("." + param).data()).toEqual(
if expected then pageInfo(expected) else null
)
)
_.each(
["lowPages", "highPages"]
(param) ->
expect(paramsQuery.find("." + param).map(-> $(this).data()).get()).toEqual(
_.map(params[param], pageInfo)
)
)
it "for one page", ->
checkRender(
page: 1
numPages: 1
previous: null
first: null
leftdots: false
lowPages: []
highPages: []
rightdots: false
last: null
next: null
)
it "for first page of three (max with no last)", ->
checkRender(
page: 1
numPages: 3
previous: null
first: null
leftdots: false
lowPages: []
highPages: [2, 3]
rightdots: false
last: null
next: 2
)
it "for first page of four (has last but no dots)", ->
checkRender(
page: 1
numPages: 4
previous: null
first: null
leftdots: false
lowPages: []
highPages: [2, 3]
rightdots: false
last: 4
next: 2
)
it "for first page of five (has dots)", ->
checkRender(
page: 1
numPages: 5
previous: null
first: null
leftdots: false
lowPages: []
highPages: [2, 3]
rightdots: true
last: 5
next: 2
)
it "for last page of three (max with no first)", ->
checkRender(
page: 3
numPages: 3
previous: 2
first: null
leftdots: false
lowPages: [1, 2]
highPages: []
rightdots: false
last: null
next: null
)
it "for last page of four (has first but no dots)", ->
checkRender(
page: 4
numPages: 4
previous: 3
first: 1
leftdots: false
lowPages: [2, 3]
highPages: []
rightdots: false
last: null
next: null
)
it "for last page of five (has dots)", ->
checkRender(
page: 5
numPages: 5
previous: 4
first: 1
leftdots: true
lowPages: [3, 4]
highPages: []
rightdots: false
last: null
next: null
)
it "for middle page of five (max with no first/last)", ->
checkRender(
page: 3
numPages: 5
previous: 2
first: null
leftdots: false
lowPages: [1, 2]
highPages: [4, 5]
rightdots: false
last: null
next: 4
)
it "for middle page of seven (has first/last but no dots)", ->
checkRender(
page: 4
numPages: 7
previous: 3
first: 1
leftdots: false
lowPages: [2, 3]
highPages: [5, 6]
rightdots: false
last: 7
next: 5
)
it "for middle page of nine (has dots)", ->
checkRender(
page: 5
numPages: 9
previous: 4
first: 1
leftdots: true
lowPages: [3, 4]
highPages: [6, 7]
rightdots: true
last: 9
next: 6
)
describe "pagination interaction", ->
beforeEach ->
@view = makeView([], 1, 1)
spyOn($, "ajax")
it "causes updated rendering", ->
$.ajax.andCallFake(
(params) =>
params.success(
discussion_data: [{id: "on_page_42", body: "dummy body"}]
page: 42
num_pages: 99
)
{always: ->}
)
@view.$(".pagination a").first().click()
expect(@view.$("#thread_on_page_42").length).toEqual(1)
expect(@view.$(".pagination-params").data("page")).toEqual(42)
expect(@view.$(".pagination-params .last").data("number")).toEqual(99)
it "handles AJAX errors", ->
spyOn(DiscussionUtil, "discussionAlert")
$.ajax.andCallFake(
(params) =>
params.error()
{always: ->}
)
@view.$(".pagination a").first().click()
expect(DiscussionUtil.discussionAlert).toHaveBeenCalled()
common/static/coffee/src/discussion/discussion_module_view.coffee
......@@ -116,7 +116,7 @@ if Backbone?
@discussion.on "add", @addThread
@retrieved = true
@showed = true
@renderPagination(2, response.num_pages)
@renderPagination(response.num_pages)
if @isWaitingOnNewPost
@newPostForm.show()
......@@ -128,21 +128,10 @@ if Backbone?
threadView.render()
@threadviews.unshift threadView
renderPagination: (delta, numPages) =>
minPage = Math.max(@page - delta, 1)
maxPage = Math.min(@page + delta, numPages)
renderPagination: (numPages) =>
pageUrl = (number) ->
"?discussion_page=#{number}"
params =
page: @page
lowPages: _.range(minPage, @page).map (n) -> {number: n, url: pageUrl(n)}
highPages: _.range(@page+1, maxPage+1).map (n) -> {number: n, url: pageUrl(n)}
previous: if @page-1 >= 1 then {url: pageUrl(@page-1), number: @page-1} else false
next: if @page+1 <= numPages then {url: pageUrl(@page+1), number: @page+1} else false
leftdots: minPage > 2
rightdots: maxPage < numPages-1
first: if minPage > 1 then {url: pageUrl(1)} else false
last: if maxPage < numPages then {number: numPages, url: pageUrl(numPages)} else false
params = DiscussionUtil.getPaginationParams(@page, numPages, pageUrl)
thing = Mustache.render @paginationTemplate(), params
@$('section.pagination').html(thing)
......
common/static/coffee/src/discussion/main.coffee
......@@ -21,7 +21,9 @@ if Backbone?
threads = element.data("threads")
user_info = element.data("user-info")
window.user = new DiscussionUser(user_info)
new DiscussionUserProfileView(el: element, collection: threads)
page = element.data("page")
numPages = element.data("num-pages")
new DiscussionUserProfileView(el: element, collection: threads, page: page, numPages: numPages)
$ ->
$("section.discussion").each (index, elem) ->
DiscussionApp.start(elem)
......
common/static/coffee/src/discussion/utils.coffee
......@@ -299,3 +299,18 @@ class @DiscussionUtil
minLength++
return text.substr(0, minLength) + gettext('…')
@getPaginationParams: (curPage, numPages, pageUrlFunc) =>
delta = 2
minPage = Math.max(curPage - delta, 1)
maxPage = Math.min(curPage + delta, numPages)
pageInfo = (pageNum) -> {number: pageNum, url: pageUrlFunc(pageNum)}
params =
page: curPage
lowPages: _.range(minPage, curPage).map(pageInfo)
highPages: _.range(curPage+1, maxPage+1).map(pageInfo)
previous: if curPage > 1 then pageInfo(curPage - 1) else null
next: if curPage < numPages then pageInfo(curPage + 1) else null
leftdots: minPage > 2
rightdots: maxPage < numPages-1
first: if minPage > 1 then pageInfo(1) else null
last: if maxPage < numPages then pageInfo(numPages) else null
common/static/coffee/src/discussion/views/discussion_thread_profile_view.coffee
if Backbone?
class @DiscussionThreadProfileView extends DiscussionContentView
expanded = false
events:
"click .vote-btn":
(event) -> @toggleVote(event)
"keydown .vote-btn":
(event) -> DiscussionUtil.activateOnSpace(event, @toggleVote)
"click .action-follow": "toggleFollowing"
"keydown .action-follow":
(event) -> DiscussionUtil.activateOnSpace(event, @toggleFollowing)
"click .expand-post": "expandPost"
"click .collapse-post": "collapsePost"
initLocal: ->
@$local = @$el.children(".discussion-article").children(".local")
@$delegateElement = @$local
initialize: ->
super()
@model.on "change", @updateModelDetails
class @DiscussionThreadProfileView extends Backbone.View
render: ->
@template = DiscussionUtil.getTemplate("_profile_thread")
if not @model.has('abbreviatedBody')
@abbreviateBody()
params = $.extend(@model.toJSON(),{expanded: @expanded, permalink: @model.urlFor('retrieve')})
params = $.extend(@model.toJSON(),{permalink: @model.urlFor('retrieve')})
if not @model.get('anonymous')
params = $.extend(params, user:{username: @model.username, user_url: @model.user_url})
@$el.html(Mustache.render(@template, params))
@initLocal()
@delegateEvents()
@renderVote()
@renderAttrs()
@$("span.timeago").timeago()
@convertMath()
if @expanded
@renderResponses()
@
updateModelDetails: =>
@renderVote()
convertMath: ->
element = @$(".post-body")
element.html DiscussionUtil.postMathJaxProcessor DiscussionUtil.markdownWithHighlight element.text()
MathJax.Hub.Queue ["Typeset", MathJax.Hub, element[0]]
renderResponses: ->
DiscussionUtil.safeAjax
url: "/courses/#{$$course_id}/discussion/forum/#{@model.get('commentable_id')}/threads/#{@model.id}"
$loading: @$el
success: (data, textStatus, xhr) =>
@$el.find(".loading").remove()
Content.loadContentInfos(data['annotated_content_info'])
comments = new Comments(data['content']['children'])
comments.each @renderResponse
@trigger "thread:responses:rendered"
renderResponse: (response) =>
response.set('thread', @model)
view = new ThreadResponseView(model: response)
view.on "comment:add", @addComment
view.render()
@$el.find(".responses").append(view.el)
addComment: =>
@model.comment()
edit: ->
abbreviateBody: ->
abbreviated = DiscussionUtil.abbreviateString @model.get('body'), 140
@model.set('abbreviatedBody', abbreviated)
expandPost: (event) ->
@expanded = true
@$el.addClass('expanded')
@$el.find('.post-body').html(@model.get('body'))
@convertMath()
@$el.find('.expand-post').css('display', 'none')
@$el.find('.collapse-post').css('display', 'block')
@$el.find('.post-extended-content').show()
if @$el.find('.loading').length
@renderResponses()
collapsePost: (event) ->
@expanded = false
@$el.removeClass('expanded')
@$el.find('.post-body').html(@model.get('abbreviatedBody'))
@convertMath()
@$el.find('.collapse-post').css('display', 'none')
@$el.find('.post-extended-content').hide()
@$el.find('.expand-post').css('display', 'block')
common/static/coffee/src/discussion/views/discussion_user_profile_view.coffee
if Backbone?
class @DiscussionUserProfileView extends Backbone.View
# events:
# "":""
events:
"click .discussion-paginator a": "changePage"
initialize: (options) ->
@renderThreads @$el, @collection
renderThreads: ($elem, threads) =>
#Content.loadContentInfos(response.annotated_content_info)
super()
@page = options.page
@numPages = options.numPages
@discussion = new Discussion()
@discussion.reset(threads, {silent: false})
$discussion = $(Mustache.render $("script#_user_profile").html(), {'threads':threads})
$elem.append($discussion)
@threadviews = @discussion.map (thread) ->
new DiscussionThreadProfileView el: @$("article#thread_#{thread.id}"), model: thread
_.each @threadviews, (dtv) -> dtv.render()
@discussion.on("reset", @render)
@discussion.reset(@collection, {silent: false})
render: () =>
profileTemplate = $("script#_user_profile").html()
@$el.html(Mustache.render(profileTemplate, {threads: @discussion.models}))
@discussion.map (thread) ->
new DiscussionThreadProfileView(el: @$("article#thread_#{thread.id}"), model: thread).render()
baseUri = URI(window.location).removeSearch("page")
pageUrlFunc = (page) -> baseUri.clone().addSearch("page", page)
paginationParams = DiscussionUtil.getPaginationParams(@page, @numPages, pageUrlFunc)
paginationTemplate = $("script#_pagination").html()
@$el.find(".pagination").html(Mustache.render(paginationTemplate, paginationParams))
addThread: (thread, collection, options) =>
# TODO: When doing pagination, this will need to repaginate. Perhaps just reload page 1?
article = $("<article class='discussion-thread' id='thread_#{thread.id}'></article>")
@$('section.discussion > .threads').prepend(article)
threadView = new DiscussionThreadInlineView el: article, model: thread
threadView.render()
@threadviews.unshift threadView
changePage: (event) ->
event.preventDefault()
url = $(event.target).attr("href")
DiscussionUtil.safeAjax
$elem: @$el
$loading: $(event.target)
takeFocus: true
url: url
type: "GET"
dataType: "json"
success: (response, textStatus, xhr) =>
@page = response.page
@numPages = response.num_pages
@discussion.reset(response.discussion_data, {silent: false})
history.pushState({}, "", url)
error: =>
DiscussionUtil.discussionAlert(
gettext("Sorry"),
gettext("We had some trouble loading the page you requested. Please try again.")
)
lms/djangoapps/django_comment_client/forum/tests.py
......@@ -299,8 +299,8 @@ class UserProfileTestCase(ModuleStoreTestCase):
self.assertEqual(response.status_code, 200)
self.assertEqual(response['Content-Type'], 'text/html; charset=utf-8')
html = response.content
self.assertRegexpMatches(html, r'var \$\$course_id = \"{}\"'.format(self.course.id))
self.assertRegexpMatches(html, r'var \$\$profiled_user_id = \"{}\"'.format(self.profiled_user.id))
self.assertRegexpMatches(html, r'data-page="1"')
self.assertRegexpMatches(html, r'data-num-pages="1"')
self.assertRegexpMatches(html, r'<span>1</span> discussion started')
self.assertRegexpMatches(html, r'<span>2</span> comments')
self.assertRegexpMatches(html, r'&quot;id&quot;: &quot;{}&quot;'.format(self.TEST_THREAD_ID))
......
lms/djangoapps/django_comment_client/forum/views.py
......@@ -353,6 +353,8 @@ def user_profile(request, course_id, user_id):
'threads': saxutils.escape(json.dumps(threads), escapedict),
'user_info': saxutils.escape(json.dumps(user_info), escapedict),
'annotated_content_info': saxutils.escape(json.dumps(annotated_content_info), escapedict),
'page': query_params['page'],
'num_pages': query_params['num_pages'],
# 'content': content,
}
......
lms/static/sass/_discussion.scss
......@@ -2226,18 +2226,18 @@ body.discussion {
a {
@include white-button;
}
}
li.current-page{
height: 35px;
padding: 0 15px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 13px;
font-weight: 700;
line-height: 32px;
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
&.current-page span {
display: inline-block;
height: 35px;
padding: 0 15px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 13px;
font-weight: 700;
line-height: 32px;
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
}
}
}
......
lms/templates/discussion/mustache/_pagination.mustache
......@@ -15,7 +15,7 @@
{{#lowPages}}
<li><a class="discussion-pagination" href="{{url}}" data-page-number="{{number}}">{{number}}</a></li>
{{/lowPages}}
<li class="current-page">{{page}}</li>
<li class="current-page"><span>{{page}}</span></li>
{{#highPages}}
<li><a class="discussion-pagination" href="{{url}}" data-page-number="{{number}}">{{number}}</a></li>
{{/highPages}}
......
lms/templates/discussion/mustache/_profile_thread.mustache
<%! from django.utils.translation import ugettext as _ %>
<article class="discussion-article" data-id="{{id}}">
<div class="local"><a href="javascript:void(0)" class="dogear action-follow"></a></div>
<div class="discussion-post local">
<header>
<a href="#" class="vote-btn" role="button" aria-pressed="false"/>
<h3>{{title}}</h3>
<p class="posted-details">
{{#user}}
......@@ -22,10 +20,6 @@
</header>
<div class="post-body">{{abbreviatedBody}}</div>
</div>
<ol class="responses post-extended-content">
<li class="loading"></li>
</ol>
<div class="local post-tools">
<a href="{{permalink}}">${_("View discussion")}</a>
</div>
......
lms/templates/discussion/mustache/_user_profile.mustache
<section class="discussion-user-threads" >
<section class="discussion">
{{#threads}}
<article class="discussion-thread" id="thread_{{id}}">
</article>
{{/threads}}
</div>
<section class="pagination">
</section>
<%! from django.utils.translation import ugettext as _ %>
<h2>${_("Active Threads")}</h2>
<section class="discussion">
{{#threads}}
<article class="discussion-thread" id="thread_{{id}}"/>
{{/threads}}
</section>
<section class="pagination"/>
lms/templates/discussion/user_profile.html
......@@ -32,14 +32,8 @@
</nav>
</section>
<section class="course-content container discussion-user-threads" data-user-id="${django_user.id | h}" data-course-id="${course.id | h}" data-threads="${threads}" data-user-info="${user_info}">
<h2>${_("Active Threads")}</h2>
</section>
<section class="course-content container discussion-user-threads" data-course-id="${course.id | h}" data-threads="${threads}" data-user-info="${user_info}" data-page="${page}" data-num-pages="${num_pages}"/>
</div>
</section>
<script type="text/javascript">
var $$profiled_user_id = "${django_user.id | escapejs}";
var $$course_id = "${course.id | escapejs}";
</script>
<%include file="_underscore_templates.html" />
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