Course list view now populates using API over AJAX

ecommerce/static/js/collections/course_collection.js

+define([
+  'underscore',
+  'collections/drf_pageable_collection',
+  'models/course_model'
+], function (_, DrfPageableCollection, CourseModel) {
+
+  return DrfPageableCollection.extend({
+    model: CourseModel,
+    url: '/api/v2/courses/',
+  });
+
+});

ecommerce/static/js/models/course-model.js

-define(['backbone'], function(Backbone) {
-    'use strict';
-
-    /**
-     * Stores our course id information.
-     */
-    return Backbone.Model.extend({
-        
-    });
-});

ecommerce/static/js/pages/course_list_page.js

 require([
+        'collections/course_collection',
         'views/course_list_view'
     ],
-    function (CourseListView) {
+    function (CourseCollection, CourseListView) {
 
-        return new CourseListView();
+        return new CourseListView({
+            collection: new CourseCollection()
+        });
 
     }
 );

ecommerce/static/js/pages/credit_checkout.js

@@ -3,7 +3,7 @@ require([
         'backbone',
         'js/models/user-model',
         'js/models/tracking-model',
-        'js/models/course-model',
+        'js/models/course_model',
         'js/views/clickable-view',
         'js/views/analytics_view',
         'js/views/payment_button_view',

ecommerce/static/js/views/course_list_view.js

 define([
         'jquery',
         'underscore',
+        'underscore.string',
         'backbone',
+        'moment',
+        'text!templates/course_list.html',
         'dataTablesBootstrap'
       ],
-      function ($, _, Backbone) {
+      function ($, _, _s, Backbone, moment, courseListViewTemplate) {
 
         'use strict';
 
@@ -12,23 +15,59 @@ define([
 
             el: '#course-list-view',
 
-            initialize: function () {
-                this.render();
+            template: _.template(courseListViewTemplate),
+
+            initialize: function (options) {
+                this.listenTo(this.collection, 'add remove change', this.render);
+                this.collection.fetch();
             },
 
-            render: function () {
+            renderCourseTable: function () {
 
-                var filterPlaceholder = gettext('Filter by org or course ID'),
+                var tableData = [],
+                    filterPlaceholder = gettext('Filter by org or course ID'),
                     $emptyLabel = '<label class="sr">' + filterPlaceholder + '</label>';
 
+                this.collection.each(function (value) {
+                    tableData.push(
+                        {
+                            id: value.get('id'),
+                            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: false,
                         paging: false,
                         oLanguage: {
                             sSearch: ''
+                        },
+                        columns: [
+                            {
+                                title: gettext('ID'),
+                                data: 'id',
+                                fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
+                                    $(nTd).html(_s.sprintf('<a href=\'/courses/%s\'>%s</a>', oData.id, oData.id));
+                                }
+                            },
+                            {
+                                title: gettext('Name'),
+                                data: 'name'
+                            },
+                            {
+                                title: gettext('Last Edited'),
+                                data: 'last_edited'
                             }
+                        ]
                     });
 
+                    // NOTE: #courseTable_filter is generated by dataTables
                     this.$el.find('#courseTable_filter label').prepend($emptyLabel);
 
                     this.$el.find('#courseTable_filter input')
@@ -36,6 +75,14 @@ define([
                         .addClass('field-input input-text')
                         .removeClass('form-control input-sm');
 
+                }
+            },
+
+            render: function () {
+
+                this.$el.html(this.template);
+                this.renderCourseTable();
+
                 return this;
             }
 

ecommerce/static/templates/course_list.html

+<div class="page-header">
+    <h1 class="hd-1 emphasized">
+      <%- gettext('Courses') %>
+        <button class="btn btn-primary btn-small"><%- gettext('Add New Course') %></button>
+    </h1>
+</div>
+
+<table id="courseTable" class="copy copy-base table table-striped table-bordered" cellspacing="0">
+    <caption class="sr-only">Current Courses</caption>
+</table>

ecommerce/templates/courses/course_list.html

@@ -5,37 +5,7 @@
 {% block title %}{% trans "Courses" %}{% endblock %}
 
 {% block content %}
-    <div class="container" id="course-list-view">
-        <div class="page-header">
-            <h1 class="hd-1 emphasized">
-              {% trans "Courses" %}
-                <button class="btn btn-primary btn-small">{% trans "Add New Course" %}</button>
-            </h1>
-        </div>
-
-        <table id="courseTable" class="copy copy-base table table-striped table-bordered" cellspacing="0">
-            <caption class="sr-only">Current Courses</caption>
-            <thead>
-            <tr>
-                <th>{% trans "ID" %}</th>
-                <th>{% trans "Name" %}</th>
-                <th>{% trans "Last Edited" %}</th>
-            </tr>
-            </thead>
-
-            <tbody>
-            {% for course in courses %}
-                <tr>
-                    <td><a href="{% url 'courses:detail' course.id %}">{{ course.id }}</a></td>
-                    <td>{{ course.name }}</td>
-                    <td data-sort="{{ course.history.latest.history_date|date:'U' }}">
-                      {{ course.history.latest.history_date }}
-                    </td>
-                </tr>
-            {% endfor %}
-            </tbody>
-        </table>
-    </div>
+    <div class="container" id="course-list-view"></div>
 {% endblock %}
 
 {% block javascript %}