Merge pull request #258 from edx/clintonb/course-list-speedup

Updated Course List View

bower.json

@@ -21,7 +21,6 @@
     "fontawesome": "~4.3.0",
     "edx-ux-pattern-library": "https://github.com/edx/ux-pattern-library.git#82fa1c823bc322ba8b0742f0c546a89b0c69e952",
     "text": "~2.0.14",
-    "backbone.paginator": "~2.0.2",
     "moment": "~2.10.3",
     "underscore.string": "~3.1.1",
     "backbone-super": "~1.0.4",

ecommerce/static/js/collections/course_collection.js

 define([
+        'backbone',
         'underscore',
-        'collections/drf_pageable_collection',
         'models/course_model'
     ],
-    function (_,
-              DrfPageableCollection,
+    function (Backbone,
+              _,
               CourseModel) {
         'use strict';
 
-        return DrfPageableCollection.extend({
+        return Backbone.Collection.extend({
             model: CourseModel,
-            url: '/api/v2/courses/'
+            url: '/api/v2/courses/',
+
+            parse: function (response) {
+                // Continue retrieving the remaining data
+                if (response.next) {
+                    this.url = response.next;
+                    this.fetch({remove: false});
+                }
+
+                return response.results;
+            }
         });
     }
 );

ecommerce/static/js/collections/drf_pageable_collection.js

-define([
-        'backbone',
-        'underscore',
-        'backbone.paginator'
-    ],
-    function (Backbone, _) {
-        'use strict';
-
-        return Backbone.PageableCollection.extend({
-            queryParams: {
-                pageSize: 'page_size'
-            },
-
-            state: {
-                // TODO Replace this collection with something that works properly with our API.
-                pageSize: 10000
-            },
-
-            parseRecords: function (resp, options) {
-                return resp.results;
-            },
-
-
-            parseState: function (resp, queryParams, state, options) {
-                return {
-                    totalRecords: resp.count
-                };
-            },
-
-            parseLinks: function (resp, options) {
-                return {
-                    first: null,
-                    next: resp.next,
-                    prev: resp.previous
-                };
-            }
-        });
-    }
-);

ecommerce/static/js/collections/product_collection.js

 define([
-        'collections/drf_pageable_collection',
+        'backbone',
         'models/product_model',
         'models/course_seats/course_seat',
         'utils/course_utils'
     ],
-    function (DrfPageableCollection,
+    function (Backbone,
               Product,
               CourseSeat,
               CourseUtils) {
         'use strict';
 
-        return DrfPageableCollection.extend({
-            mode: 'client',
-
+        return Backbone.Collection.extend({
             model: function (attrs, options) {
                 var modelClass = Product;
                 if (attrs.product_class === 'Seat') {

ecommerce/static/js/config.js

@@ -2,7 +2,6 @@ require.config({
     baseUrl: '/static/',
     paths: {
         'backbone': 'bower_components/backbone/backbone',
-        'backbone.paginator': 'bower_components/backbone.paginator/lib/backbone.paginator',
         'backbone.relational': 'bower_components/backbone-relational/backbone-relational',
         'backbone.route-filter': 'bower_components/backbone-route-filter/backbone-route-filter',
         'backbone.stickit': 'bower_components/backbone.stickit/backbone.stickit',

ecommerce/static/js/pages/course_list_page.js

@@ -14,8 +14,8 @@ define([
             initialize: function () {
                 this.collection = new CourseCollection();
                 this.view = new CourseListView({collection: this.collection});
-                this.listenTo(this.collection, 'reset', this.render);
-                this.collection.fetch({reset: true});
+                this.render();
+                this.collection.fetch({remove: false, data: {page_size: 50}});
             }
         });
     }

ecommerce/static/js/views/course_form_view.js

@@ -277,11 +277,8 @@ define([
 
                         if (viewClass) {
                             view = new viewClass({model: model});
-
-                            // TODO Listen to the views (specifically professional education) to determine if
-                            // the verification deadline field needs to be toggled.
-
                             view.render();
+
                             this.courseSeatViews[seatType] = view;
                             $courseSeatsContainer.append(view.el);
                         } else {

ecommerce/static/js/views/course_list_view.js

@@ -22,31 +22,25 @@ define([
             template: _.template(courseListViewTemplate),
 
             initialize: function () {
-                this.listenTo(this.collection, 'add remove change', this.render);
+                this.listenTo(this.collection, 'update', this.refreshTableData);
             },
 
-            renderCourseTable: function () {
+            getRowData: function (course) {
+                return {
+                    id: course.get('id'),
+                    type: course.get('type'),
+                    name: course.get('name'),
+                    last_edited: moment(course.get('last_edited')).format('MMMM DD, YYYY, h:mm A')
+                };
+            },
 
-                var tableData = [],
-                    filterPlaceholder = gettext('Search...'),
+            renderCourseTable: function () {
+                var filterPlaceholder = gettext('Search...'),
                     $emptyLabel = '<label class="sr">' + filterPlaceholder + '</label>';
 
-                this.collection.each(function (value) {
-                    tableData.push(
-                        {
-                            id: value.get('id'),
-                            type: value.get('type'),
-                            name: value.get('name'),
-                            last_edited: moment(value.get('last_edited')).format('MMMM DD, YYYY, h:mm A')
-                        }
-                    );
-                });
-
                 if (!$.fn.dataTable.isDataTable('#courseTable')) {
-
                     this.$el.find('#courseTable').DataTable({
                         autoWidth: false,
-                        data: tableData,
                         info: true,
                         paging: true,
                         oLanguage: {
@@ -105,13 +99,23 @@ define([
             },
 
             render: function () {
-
                 this.$el.html(this.template);
                 this.renderCourseTable();
+                this.refreshTableData();
 
                 return this;
-            }
+            },
+
+            /**
+             * Refresh the data table with the collection's current information.
+             */
+            refreshTableData: function () {
+                var data = this.collection.map(this.getRowData, this),
+                    $table = this.$el.find('#courseTable').DataTable();
 
+                $table.clear().rows.add(data).draw();
+                return this;
+            }
         });
     }
 );