Pagination in inline discussion views.

lms/djangoapps/django_comment_client/forum/views.py

@@ -21,6 +21,7 @@ import comment_client as cc
 import xml.sax.saxutils as saxutils
 
 THREADS_PER_PAGE = 50000
+INLINE_THREADS_PER_PAGE = 5
 PAGES_NEARBY_DELTA = 2
 
 
@@ -106,11 +107,11 @@ def render_forum_discussion(*args, **kwargs):
 def render_user_discussion(*args, **kwargs):
     return render_discussion(discussion_type='user', *args, **kwargs)
 
-def get_threads(request, course_id, discussion_id=None):
+def get_threads(request, course_id, discussion_id=None, per_page=THREADS_PER_PAGE):
 
     default_query_params = {
         'page': 1,
-        'per_page': THREADS_PER_PAGE,
+        'per_page': per_page,
         'sort_key': 'date',
         'sort_order': 'desc',
         'text': '',
@@ -133,7 +134,7 @@ def inline_discussion(request, course_id, discussion_id):
     """
     Renders JSON for DiscussionModules
     """
-    threads, query_params = get_threads(request, course_id, discussion_id)
+    threads, query_params = get_threads(request, course_id, discussion_id, per_page=INLINE_THREADS_PER_PAGE)
     # TODO: Remove all of this stuff or switch back to server side rendering once templates are mustache again
 #    html = render_inline_discussion(request, course_id, threads, discussion_id=discussion_id,  \
 #                                                                 query_params=query_params)
@@ -147,7 +148,9 @@ def inline_discussion(request, course_id, discussion_id):
 #        'html': html,
         'discussion_data': map(utils.safe_content, threads),
         'user_info': user_info,
-        'annotated_content_info': annotated_content_info
+        'annotated_content_info': annotated_content_info,
+        'page': query_params['page'],
+        'num_pages': query_params['num_pages']
     })
 
 def render_search_bar(request, course_id, discussion_id=None, text=''):

lms/static/coffee/src/discussion/discussion_module_view.coffee

@@ -4,7 +4,12 @@ if Backbone?
       "click .discussion-show": "toggleDiscussion"
       "click .new-post-btn": "toggleNewPost"
       "click .new-post-cancel": "hideNewPost"
+      "click .discussion-paginator a": "navigateToPage"
+
+    paginationTemplate: -> DiscussionUtil.getTemplate("_pagination")
+
     initialize: ->
+      @page = 1
 
     toggleNewPost: (event) ->
       if @newPostForm.is(':hidden')
@@ -26,23 +31,29 @@ if Backbone?
           @showed = true
         else
           $elem = $(event.target)
-          discussionId = $elem.data("discussion-id")
+          @loadPage $elem
-          url = DiscussionUtil.urlFor 'retrieve_discussion', discussionId
+
+    loadPage: ($elem)=>
+      discussionId = @$el.data("discussion-id")
+      url = DiscussionUtil.urlFor('retrieve_discussion', discussionId) + "?page=#{@page}"
       DiscussionUtil.safeAjax
         $elem: $elem
         $loading: $elem
         url: url
         type: "GET"
         dataType: 'json'
-            success: (response, textStatus, jqXHR) => @createDiscussion(event, response, textStatus, discussionId)
+        success: (response, textStatus, jqXHR) => @renderDiscussion(event, response, textStatus, discussionId)
 
-    createDiscussion: (event, response, textStatus, discussionId) =>
+    renderDiscussion: (event, response, textStatus, discussionId) =>
       window.user = new DiscussionUser(response.user_info)
       Content.loadContentInfos(response.annotated_content_info)
       $(event.target).html("Hide Discussion")
       @discussion = new Discussion()
       @discussion.reset(response.discussion_data, {silent: false})
       $discussion = $(Mustache.render $("script#_inline_discussion").html(), {'threads':response.discussion_data, 'discussionId': discussionId})
+      if @$('section.discussion').length
+        @$('section.discussion').replaceWith($discussion)
+      else
         $(".discussion-module").append($discussion)
       @newPostForm = $('.new-post-article')
       @threadviews = @discussion.map (thread) ->
@@ -53,6 +64,7 @@ if Backbone?
       @discussion.on "add", @addThread
       @retrieved = true
       @showed = true
+      @renderPagination(2, response.num_pages)
 
     addThread: (thread, collection, options) =>
       # TODO: When doing pagination, this will need to repaginate
@@ -62,3 +74,28 @@ if Backbone?
       threadView.render()
       @threadviews.unshift threadView
 
+    renderPagination: (delta, numPages) =>
+      minPage = Math.max(@page - delta, 1)
+      maxPage = Math.min(@page + delta, numPages)
+      console.log minPage
+      console.log maxPage
+      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
+      thing = Mustache.render @paginationTemplate(), params
+      @$('section.pagination').html(thing)
+
+    navigateToPage: (event) =>
+      event.preventDefault()
+      window.history.pushState({}, window.document.title, event.target.href)
+      @page = $(event.target).data('page-number')
+      @loadPage($(event.target))

lms/static/sass/_discussion.scss

@@ -1755,4 +1755,28 @@ body.discussion {
     margin: 8px 7px 0 0;
     background: url(../images/new-post-icon.png) no-repeat;
   }
+  section.pagination {
+    nav.discussion-paginator {
+      ol{
+        li{
+          list-style: none;
+          display: inline-block;
+          padding-right: 0.5em;
+          a {
+            @include white-button
+          }
+
+        }
+        li.current-page{
+          height: 35px;
+          font-size: 13px;
+          font-weight: 700;
+          line-height: 32px;
+          color: #333;
+          text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+          box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
+        }
+      }
+    }
+  }
 }

lms/templates/discussion/_discussion_module.html

@@ -1,5 +1,5 @@
 <%include file="_underscore_templates.html" />
 
-<div class="discussion-module">
+<div class="discussion-module" data-discussion-id="${discussion_id | h}">
     <a class="discussion-show control-button" href="javascript:void(0)" data-discussion-id="${discussion_id | h}">Show Discussion</a>
 </div>

lms/templates/discussion/mustache/_inline_discussion.mustache

@@ -36,4 +36,7 @@
             </article>
         {{/threads}}
     </section>
+
+    <section class="pagination">
+    </section>
 </section>

lms/templates/discussion/mustache/_pagination.mustache

@@ -0,0 +1,32 @@
+<nav class="discussion-{{discussiontype}}-paginator discussion-paginator local">
+    <ol>
+        {{#previous}}
+        <li><a class="discussion-pagination" href="{{url}}" data-page-number="{{number}}">&lt; Previous</a></li>
+        {{/previous}}
+        {{#first}}
+        <li><a class="discussion-pagination" href="{{url}}" data-page-number="1">1</a></li>
+        {{/first}}
+        {{#leftdots}}
+        <li>&hellip;</li>
+        {{/leftdots}}
+
+        {{#lowPages}}
+        <li><a class="discussion-pagination" href="{{url}}" data-page-number="{{number}}">{{number}}</a></li>
+        {{/lowPages}}
+        <li class="current-page">{{page}}</li>
+        {{#highPages}}
+        <li><a class="discussion-pagination" href="{{url}}" data-page-number="{{number}}">{{number}}</a></li>
+        {{/highPages}}
+
+        {{#rightdots}}
+        <li>&hellip;</li>
+        {{/rightdots}}
+        {{#last}}
+        <li><a class="discussion-pagination" href="{{url}}" data-page-number="{{number}}">{{number}}</a></li>
+        {{/last}}
+        {{#next}}
+        <li><a class="discussion-pagination" href="{{url}}" data-page-number="{{number}}">Next &gt;</a></li>
+        {{/next}}
+    </ol>
+</nav>
+