Bookmarks List Pagination

TNL-2490

common/static/common/templates/components/paging-footer.underscore

-<nav class="pagination pagination-full bottom" aria-label="Teams Pagination">
+<nav class="pagination pagination-full bottom" aria-label="Pagination">
     <div class="nav-item previous"><button class="nav-link previous-page-link"><i class="icon fa fa-angle-left" aria-hidden="true"></i> <span class="nav-label"><%= gettext("Previous") %></span></button></div>
     <div class="nav-item page">
         <div class="pagination-form">

common/test/acceptance/pages/common/paging.py

@@ -15,6 +15,7 @@ class PaginatedUIMixin(object):
     PREVIOUS_PAGE_BUTTON_CSS = 'button.previous-page-link'
     PAGINATION_HEADER_TEXT_CSS = 'div.search-tools'
     CURRENT_PAGE_NUMBER_CSS = 'span.current-page'
+    TOTAL_PAGES_CSS = 'span.total-pages'
 
     def get_pagination_header_text(self):
         """Return the text showing which items the user is currently viewing."""
@@ -31,6 +32,11 @@ class PaginatedUIMixin(object):
         """Return the the current page number."""
         return int(self.q(css=self.CURRENT_PAGE_NUMBER_CSS).text[0])
 
+    @property
+    def get_total_pages(self):
+        """Returns the total page value"""
+        return int(self.q(css=self.TOTAL_PAGES_CSS).text[0])
+
     def go_to_page(self, page_number):
         """Go to the given page_number in the paginated list results."""
         self.q(css=self.PAGE_NUMBER_INPUT_CSS).results[0].send_keys(unicode(page_number), Keys.ENTER)

common/test/acceptance/pages/lms/bookmarks.py

@@ -3,9 +3,10 @@ Courseware Boomarks
 """
 from bok_choy.promise import EmptyPromise
 from .course_page import CoursePage
+from ..common.paging import PaginatedUIMixin
 
 
-class BookmarksPage(CoursePage):
+class BookmarksPage(CoursePage, PaginatedUIMixin):
     """
     Courseware Bookmarks Page.
     """

lms/static/js/bookmarks/collections/bookmarks.js

 ;(function (define) {
     'use strict';
-    define(['backbone', 'js/bookmarks/models/bookmark'],
-        function (Backbone, BookmarkModel) {
+    define(['backbone', 'common/js/components/collections/paging_collection', 'js/bookmarks/models/bookmark'],
+        function (Backbone, PagingCollection, BookmarkModel) {
 
+            return PagingCollection.extend({
+                initialize: function(options) {
+                    PagingCollection.prototype.initialize.call(this);
 
-        return Backbone.Collection.extend({
-            model: BookmarkModel,
+                    this.url = options.url;
+                    this.server_api.course_id = function () { return encodeURIComponent(options.course_id); };
+                    this.server_api.fields = function () { return encodeURIComponent('display_name,path'); };
+                    delete this.server_api.sort_order; // Sort order is not specified for the Bookmark API
+                },
 
-            url: function() {
-                return $(".courseware-bookmarks-button").data('bookmarksApiUrl');
-            },
+                model: BookmarkModel,
 
-            parse: function(response) {
-                return response.results;
-            }
-        });
+                url: function() {
+                    return this.url;
+                }
+            });
     });
 
-})(define || RequireJS.define);
+})(define || RequireJS.define);
\ No newline at end of file

lms/static/js/bookmarks/views/bookmarks_list.js

 ;(function (define, undefined) {
     'use strict';
-    define(['gettext', 'jquery', 'underscore', 'backbone', 'logger', 'moment'],
-        function (gettext, $, _, Backbone, Logger, _moment) {
+    define(['gettext', 'jquery', 'underscore', 'backbone', 'logger', 'moment',
+            'common/js/components/views/paging_header', 'common/js/components/views/paging_footer'],
+        function (gettext, $, _, Backbone, Logger, _moment, PagingHeaderView, PagingFooterView) {
 
         var moment = _moment || window.moment;
 
@@ -16,27 +17,31 @@
             errorMessage: gettext('An error has occurred. Please try again.'),
             loadingMessage: gettext('Loading'),
 
-            PAGE_SIZE: 500,
+            defaultPage: 1,
 
             events : {
                 'click .bookmarks-results-list-item': 'visitBookmark'
             },
 
             initialize: function (options) {
-                this.template = _.template($('#bookmarks_list-tpl').text());
+                this.template = _.template($('#bookmarks-list-tpl').text());
                 this.loadingMessageView = options.loadingMessageView;
                 this.errorMessageView = options.errorMessageView;
-                this.courseId = $(this.el).data('courseId');
                 this.langCode = $(this.el).data('langCode');
+                this.pagingHeaderView = new PagingHeaderView({collection: this.collection});
+                this.pagingFooterView = new PagingFooterView({collection: this.collection});
+                this.listenTo(this.collection, 'page_changed', this.render);
                 _.bindAll(this, 'render', 'humanFriendlyDate');
             },
 
             render: function () {
                 var data = {
-                    bookmarks: this.collection.models,
+                    bookmarksCollection: this.collection,
                     humanFriendlyDate: this.humanFriendlyDate
                 };
                 this.$el.html(this.template(data));
+                this.pagingHeaderView.setElement(this.$('.paging-header')).render();
+                this.pagingFooterView.setElement(this.$('.paging-footer')).render();
                 this.delegateEvents();
                 return this;
             },
@@ -48,10 +53,7 @@
                 this.showBookmarksContainer();
                 this.showLoadingMessage();
 
-                this.collection.fetch({
-                    reset: true,
-                    data: {course_id: this.courseId, page_size: this.PAGE_SIZE, fields: 'display_name,path'}
-                }).done(function () {
+                this.collection.goTo(this.defaultPage).done(function () {
                     view.hideLoadingMessage();
                     view.render();
                     view.focusBookmarksElement();

lms/static/js/bookmarks/views/bookmarks_list_button.js

@@ -16,11 +16,20 @@
             },
 
             initialize: function () {
-                this.bookmarksListView = new BookmarksListView({
-                    collection: new BookmarksCollection(),
-                    loadingMessageView: new MessageView({el: $(this.loadingMessageElement)}),
-                    errorMessageView: new MessageView({el: $(this.errorMessageElement)})
-                });
+                var bookmarksCollection = new BookmarksCollection(
+                    {
+                        course_id: $('.courseware-results').data('courseId'),
+                        url: $(".courseware-bookmarks-button").data('bookmarksApiUrl')
+                    }
+                );
+                bookmarksCollection.bootstrap();
+                this.bookmarksListView = new BookmarksListView(
+                    {
+                        collection: bookmarksCollection,
+                        loadingMessageView: new MessageView({el: $(this.loadingMessageElement)}),
+                        errorMessageView: new MessageView({el: $(this.errorMessageElement)})
+                    }
+                );
             },
 
             toggleBookmarksListView: function () {

lms/static/js/spec/bookmarks/bookmark_button_view_spec.js

-define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'js/common_helpers/template_helpers',
-        'js/bookmarks/views/bookmark_button'
+define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers',
+        'common/js/spec_helpers/template_helpers', 'js/bookmarks/views/bookmark_button'
        ],
     function (Backbone, $, _, AjaxHelpers, TemplateHelpers, BookmarkButtonView) {
         'use strict';

lms/static/sass/views/_bookmarks.scss

@@ -57,7 +57,7 @@
 
 // Rules for Bookmarks Results
 .bookmarks-results-list {
-  padding-top: $baseline;
+  padding-top: ($baseline/2);
 
   .bookmarks-results-list-item {
     @include padding(($baseline/4), $baseline, ($baseline/2), $baseline);
@@ -181,3 +181,9 @@ i.bookmarked {
   @include icon-style("\f097", $black);
   @include hover-style($m-blue, $m-blue, "\f02e");
 }
+
+.paging-header {
+  .search-tools {
+    margin: 0;
+  }
+}
\ No newline at end of file

lms/templates/bookmarks/bookmarks_list.underscore → lms/templates/bookmarks/bookmarks-list.underscore

 <div id="my-bookmarks" class="sr-is-focusable" tabindex="-1"></div>
 <h2 class="bookmarks-results-header"><%= gettext("My Bookmarks") %></h2>
 
-<% if (bookmarks.length) { %>
+<% if (bookmarksCollection.length) { %>
+
+    <div class="paging-header"></div>
 
     <div class='bookmarks-results-list'>
-        <% _.each(bookmarks, function(bookmark, index) { %>
+        <% bookmarksCollection.each(function(bookmark, index) { %>
              <a class="bookmarks-results-list-item" href="<%= bookmark.blockUrl() %>" aria-labelledby="bookmark-link-<%= index %>" data-bookmark-id="<%= bookmark.get('id') %>" data-component-type="<%= bookmark.get('block_type') %>" data-usage-id="<%= bookmark.get('usage_id') %>" aria-describedby="bookmark-type-<%= index %> bookmark-date-<%= index %>">
                 <div class="list-item-content">
                     <div class="list-item-left-section">
@@ -21,6 +23,8 @@
         <% }); %>
     </div>
 
+    <div class="paging-footer"></div>
+
 <% } else {%>
 
     <div class="bookmarks-empty" tabindex="0">

lms/templates/courseware/courseware.html

@@ -53,7 +53,7 @@ ${page_title_breadcrumbs(course_name())}
   % endfor
 % endif
 
-% for template_name in ["bookmarks_list"]:
+% for template_name in ["bookmarks-list"]:
 <script type="text/template" id="${template_name}-tpl">
     <%static:include path="bookmarks/${template_name}.underscore" />
 </script>