Skip to content

E
ecommerce
Commit 9e1f904c by Tyler Nickerson
Options

Merge pull request #230 from edx/nickersoft/cat-api-list 

Course list view now populates using API over AJAX using Backbone
parents 94647fd5 86efd275
Showing with 92 additions and 60 deletions
ecommerce/static/js/collections/course_collection.js 0 → 100644
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 deleted 100644 → 0
define(['backbone'], function(Backbone) {
'use strict';
/**
* Stores our course id information.
*/
return Backbone.Model.extend({
});
});
ecommerce/static/js/pages/course_list_page.js
require([ require([
'collections/course_collection',
'views/course_list_view' '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([ ...@@ -3,7 +3,7 @@ require([
'backbone', 'backbone',
'js/models/user-model', 'js/models/user-model',
'js/models/tracking-model', 'js/models/tracking-model',
'js/models/course-model', 'js/models/course_model',
'js/views/clickable-view', 'js/views/clickable-view',
'js/views/analytics_view', 'js/views/analytics_view',
'js/views/payment_button_view', 'js/views/payment_button_view',
......
ecommerce/static/js/views/course_list_view.js
define([ define([
'jquery', 'jquery',
'underscore', 'underscore',
'underscore.string',
'backbone', 'backbone',
'moment',
'text!templates/course_list.html',
'dataTablesBootstrap' 'dataTablesBootstrap'
], ],
function ($, _, Backbone) { function ($, _, _s, Backbone, moment, courseListViewTemplate) {
'use strict'; 'use strict';
...@@ -12,29 +15,73 @@ define([ ...@@ -12,29 +15,73 @@ define([
el: '#course-list-view', el: '#course-list-view',
initialize: function () { template: _.template(courseListViewTemplate),
this.render();
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>'; $emptyLabel = '<label class="sr">' + filterPlaceholder + '</label>';
this.$el.find('#courseTable').DataTable({ this.collection.each(function (value) {
info: false, tableData.push(
paging: false, {
oLanguage: { id: value.get('id'),
sSearch: '' name: value.get('name'),
} last_edited: moment(value.get('last_edited')).format('MMMM DD, YYYY, h:mm A')
}
);
}); });
this.$el.find('#courseTable_filter label').prepend($emptyLabel); 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')
.attr('placeholder', filterPlaceholder)
.addClass('field-input input-text')
.removeClass('form-control input-sm');
}
},
render: function () {
this.$el.find('#courseTable_filter input') this.$el.html(this.template);
.attr('placeholder', filterPlaceholder) this.renderCourseTable();
.addClass('field-input input-text')
.removeClass('form-control input-sm');
return this; return this;
} }
......
ecommerce/static/templates/course_list.html 0 → 100644
<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 @@ ...@@ -5,37 +5,7 @@
{% block title %}{% trans "Courses" %}{% endblock %} {% block title %}{% trans "Courses" %}{% endblock %}
{% block content %} {% block content %}
<div class="container" id="course-list-view"> <div class="container" id="course-list-view"></div>
<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>
{% endblock %} {% endblock %}
{% block javascript %} {% block javascript %}
......
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