Skip to content

E
edx-platform
Commit 9cb660a7 by Ehtesham Kafeel
Options

Merge pull request #12410 from edx/fedx/upgrade-paging-collection 

Upgrade edx-platform's paging collection with new edx-ui-toolkit's paging collection
parents 4f71e263 b31ba9d0
Showing with 808 additions and 554 deletions
cms/static/cms/js/require-config.js
......@@ -56,7 +56,7 @@
"backbone": "common/js/vendor/backbone",
"backbone-relational" : "js/vendor/backbone-relational.min",
"backbone.associations": "js/vendor/backbone-associations-min",
"backbone.paginator": "js/vendor/backbone.paginator.min",
"backbone.paginator": "common/js/vendor/backbone.paginator",
"tinymce": "js/vendor/tinymce/js/tinymce/tinymce.full.min",
"jquery.tinymce": "js/vendor/tinymce/js/tinymce/jquery.tinymce.min",
"xmodule": "/xmodule/xmodule",
......@@ -188,7 +188,7 @@
},
"backbone.paginator": {
deps: ["backbone"],
exports: "Backbone.Paginator"
exports: "Backbone.PageableCollection"
},
"youtube": {
exports: "YT"
......
cms/static/coffee/spec/main.coffee
......@@ -32,7 +32,7 @@ requirejs.config({
"underscore.string": "common/js/vendor/underscore.string",
"backbone": "common/js/vendor/backbone",
"backbone.associations": "xmodule_js/common_static/js/vendor/backbone-associations-min",
"backbone.paginator": "xmodule_js/common_static/js/vendor/backbone.paginator.min",
"backbone.paginator": "common/js/vendor/backbone.paginator",
"backbone-relational": "xmodule_js/common_static/js/vendor/backbone-relational.min",
"tinymce": "xmodule_js/common_static/js/vendor/tinymce/js/tinymce/tinymce.full.min",
"jquery.tinymce": "xmodule_js/common_static/js/vendor/tinymce/js/tinymce/jquery.tinymce",
......@@ -141,7 +141,7 @@ requirejs.config({
},
"backbone.paginator": {
deps: ["backbone"],
exports: "Backbone.Paginator"
exports: "Backbone.PageableCollection"
},
"backbone-relational": {
deps: ["backbone"],
......
cms/static/coffee/spec/main_squire.coffee
......@@ -29,7 +29,7 @@ requirejs.config({
"underscore.string": "common/js/vendor/underscore.string",
"backbone": "common/js/vendor/backbone",
"backbone.associations": "xmodule_js/common_static/js/vendor/backbone-associations-min",
"backbone.paginator": "xmodule_js/common_static/js/vendor/backbone.paginator.min",
"backbone.paginator": "common/js/vendor/backbone.paginator",
"tinymce": "xmodule_js/common_static/js/vendor/tinymce/js/tinymce/tinymce.full.min",
"jquery.tinymce": "xmodule_js/common_static/js/vendor/tinymce/js/tinymce/jquery.tinymce",
"xmodule": "xmodule_js/src/xmodule",
......@@ -124,7 +124,7 @@ requirejs.config({
},
"backbone.paginator": {
deps: ["backbone"],
exports: "Backbone.Paginator"
exports: "Backbone.PageableCollection"
},
"youtube": {
exports: "YT"
......
cms/static/coffee/spec/views/assets_spec.coffee
......@@ -230,7 +230,7 @@ define ["jquery", "common/js/spec_helpers/ajax_helpers", "squire"],
describe "Basic", ->
# Separate setup method to work-around mis-parenting of beforeEach methods
setup = (requests) ->
@view.pagingView.setPage(0)
@view.pagingView.setPage(1)
AjaxHelpers.respondWithJson(requests, @mockAssetsResponse)
$.fn.fileupload = ->
......@@ -274,7 +274,7 @@ define ["jquery", "common/js/spec_helpers/ajax_helpers", "squire"],
{view: @view, requests: requests} = @createAssetsView(this)
appendSetFixtures('<div class="ui-loading"/>')
expect($('.ui-loading').is(':visible')).toBe(true)
@view.pagingView.setPage(0)
@view.pagingView.setPage(1)
AjaxHelpers.respondWithError(requests)
expect($('.ui-loading').is(':visible')).toBe(false)
......@@ -323,7 +323,7 @@ define ["jquery", "common/js/spec_helpers/ajax_helpers", "squire"],
describe "Sorting", ->
# Separate setup method to work-around mis-parenting of beforeEach methods
setup = (requests) ->
@view.pagingView.setPage(0)
@view.pagingView.setPage(1)
AjaxHelpers.respondWithJson(requests, @mockAssetsResponse)
it "should have the correct default sort order", ->
......
cms/static/js/collections/asset.js
define(["backbone.paginator", "js/models/asset"], function(BackbonePaginator, AssetModel) {
var AssetCollection = BackbonePaginator.requestPager.extend({
define([
"underscore",
"edx-ui-toolkit/js/pagination/paging-collection",
"js/models/asset"
], function(_, PagingCollection, AssetModel) {
'use strict';
var AssetCollection = PagingCollection.extend({
assetType: '',
model : AssetModel,
paginator_core: {
type: 'GET',
accepts: 'application/json',
dataType: 'json',
url: function() { return this.url; }
},
paginator_ui: {
firstPage: 0,
currentPage: 0,
perPage: 50
},
server_api: {
'page': function() { return this.currentPage; },
'page_size': function() { return this.perPage; },
'sort': function() { return this.sortField; },
'direction': function() { return this.sortDirection; },
'asset_type': function() { return this.assetType; },
'format': 'json'
},
parse: function(response) {
var totalCount = response.totalCount,
start = response.start,
currentPage = response.page,
pageSize = response.pageSize,
totalPages = Math.ceil(totalCount / pageSize);
this.totalCount = totalCount;
this.totalPages = Math.max(totalPages, 1); // Treat an empty collection as having 1 page...
this.currentPage = currentPage;
this.start = start;
return response.assets;
},
setPage: function (page) {
var oldPage = this.currentPage,
self = this;
this.goTo(page - 1, {
reset: true,
success: function () {
self.trigger('page_changed');
},
error: function () {
self.currentPage = oldPage;
}
});
},
nextPage: function () {
if (this.currentPage < this.totalPages - 1) {
this.setPage(this.getPage() + 1);
}
},
previousPage: function () {
if (this.currentPage > 0) {
this.setPage(this.getPage() - 1);
}
state: {
firstPage: 0,
pageSize: 50,
sortKey: 'sort',
order: null,
currentPage: null,
totalRecords: null,
totalCount: null
},
getPage: function () {
return this.currentPage + 1;
queryParams: {
currentPage: 'page',
pageSize: 'page_size',
sortKey: 'sort',
order: 'direction',
directions: {
asc: 'asc',
desc: 'desc'
},
asset_type: function() { return this.assetType; }
},
hasPreviousPage: function () {
return this.currentPage > 0;
parse: function(response, options) {
response.results = response.assets;
delete response.assets;
return PagingCollection.prototype.parse.call(this, response, options);
},
hasNextPage: function () {
return this.currentPage < this.totalPages - 1;
/* jshint unused:false */
parseState: function (response, queryParams, state, options) {
return {
totalRecords: response[0].totalCount,
totalPages: Math.ceil(response[0].totalCount / response[0].pageSize)
};
}
});
return AssetCollection;
});
cms/static/js/spec/views/assets_spec.js
......@@ -18,7 +18,13 @@ define([ "jquery", "common/js/spec_helpers/ajax_helpers", "URI", "js/views/asset
spyOn($.fn, "fileupload").and.returnValue("");
var collection = new AssetCollection();
var TestAssetsCollection = AssetCollection.extend({
state: {
firstPage: 0,
pageSize: 2
}
});
var collection = new TestAssetsCollection();
collection.url = "assets-url";
assetsView = new AssetsView({
collection: collection,
......@@ -43,7 +49,7 @@ define([ "jquery", "common/js/spec_helpers/ajax_helpers", "URI", "js/views/asset
start: 0,
end: 0,
page: 0,
pageSize: 5,
pageSize: 2,
totalCount: 0
};
......@@ -134,11 +140,10 @@ define([ "jquery", "common/js/spec_helpers/ajax_helpers", "URI", "js/views/asset
var setup;
setup = function(responseData) {
var requests = AjaxHelpers.requests(this);
assetsView.pagingView.setPage(0);
assetsView.pagingView.setPage(1);
if (!responseData){
AjaxHelpers.respondWithJson(requests, mockEmptyAssetsResponse);
}
else{
} else {
AjaxHelpers.respondWithJson(requests, responseData);
}
return requests;
......@@ -184,7 +189,7 @@ define([ "jquery", "common/js/spec_helpers/ajax_helpers", "URI", "js/views/asset
spyOn(assetsView, "addAsset").and.callFake(function () {
assetsView.collection.add(mockAssetUploadResponse.asset);
assetsView.pagingView.renderPageItems();
assetsView.pagingView.setPage(0);
assetsView.pagingView.setPage(1);
});
$('a:contains("Upload your first asset")').click();
......@@ -269,7 +274,7 @@ define([ "jquery", "common/js/spec_helpers/ajax_helpers", "URI", "js/views/asset
var requests = AjaxHelpers.requests(this);
$.each(assetsView.pagingView.filterableColumns, function(columnID, columnData){
var $typeColumn = $('#' + columnID);
assetsView.pagingView.setPage(0);
assetsView.pagingView.setPage(1);
respondWithMockAssets(requests);
var assetsNumber = assetsView.collection.length;
assetsView._toggleFilterColumn('Images', 'Images');
......@@ -302,7 +307,7 @@ define([ "jquery", "common/js/spec_helpers/ajax_helpers", "URI", "js/views/asset
assetsView.pagingView.registerSortableColumn('name-col', 'Name Column', 'nameField', 'asc');
assetsView.pagingView.registerFilterableColumn('js-asset-type-col', gettext('Type'), 'asset_type');
assetsView.pagingView.setInitialSortColumn('name-col');
assetsView.pagingView.setPage(0);
assetsView.pagingView.setPage(1);
respondWithMockAssets(requests);
var sortInfo = assetsView.pagingView.sortableColumnInfo('name-col');
expect(sortInfo.defaultSortDirection).toBe('asc');
......@@ -318,7 +323,7 @@ define([ "jquery", "common/js/spec_helpers/ajax_helpers", "URI", "js/views/asset
expect(assetsView).toBeDefined();
var requests = AjaxHelpers.requests(this);
$.each(assetsView.pagingView.filterableColumns, function(columnID, columnData) {
assetsView.pagingView.setPage(0);
assetsView.pagingView.setPage(1);
respondWithMockAssets(requests);
var $typeColumn = $('#' + columnID);
expect($typeColumn).toBeVisible();
......@@ -410,7 +415,7 @@ define([ "jquery", "common/js/spec_helpers/ajax_helpers", "URI", "js/views/asset
it('can move forward a page using the next page button', function () {
var requests = AjaxHelpers.requests(this);
assetsView.pagingView.setPage(0);
assetsView.pagingView.setPage(1);
AjaxHelpers.respondWithJson(requests, firstPageAssets);
expect(assetsView.pagingView.pagingFooter).toBeDefined();
expect(assetsView.pagingView.pagingFooter.$('button.next-page-link'))
......@@ -423,7 +428,7 @@ define([ "jquery", "common/js/spec_helpers/ajax_helpers", "URI", "js/views/asset
it('can move back a page using the previous page button', function () {
var requests = AjaxHelpers.requests(this);
assetsView.pagingView.setPage(1);
assetsView.pagingView.setPage(2);
AjaxHelpers.respondWithJson(requests, secondPageAssets);
expect(assetsView.pagingView.pagingFooter).toBeDefined();
expect(assetsView.pagingView.pagingFooter.$('button.previous-page-link'))
......@@ -436,12 +441,12 @@ define([ "jquery", "common/js/spec_helpers/ajax_helpers", "URI", "js/views/asset
it('can set the current page using the page number input', function () {
var requests = AjaxHelpers.requests(this);
assetsView.pagingView.setPage(0);
assetsView.pagingView.setPage(1);
AjaxHelpers.respondWithJson(requests, firstPageAssets);
assetsView.pagingView.pagingFooter.$('#page-number-input').val('2');
assetsView.pagingView.pagingFooter.$('#page-number-input').trigger('change');
AjaxHelpers.respondWithJson(requests, secondPageAssets);
expect(assetsView.collection.currentPage).toBe(1);
expect(assetsView.collection.getPageNumber()).toBe(2);
expect(assetsView.pagingView.pagingFooter.$('button.previous-page-link'))
.not.toHaveClass('is-disabled');
});
......
cms/static/js/spec/views/paged_container_spec.js
......@@ -81,7 +81,7 @@ define(["jquery", "underscore", "common/js/spec_helpers/ajax_helpers", "URI", "j
});
describe("Container", function () {
describe("rendering", function(){
describe("rendering", function() {
it('should set show_previews', function() {
var requests = AjaxHelpers.requests(this);
......
cms/static/js/spec/views/paging_spec.js
define([
"jquery",
"common/js/spec_helpers/ajax_helpers",
"URI",
"common/js/spec_helpers/ajax_helpers",
"edx-ui-toolkit/js/pagination/paging-collection",
"js/views/paging",
"js/views/paging_header",
"common/js/components/collections/paging_collection"
], function ($, AjaxHelpers, URI, PagingView, PagingHeader, PagingCollection) {
"js/views/paging_header"
], function ($, URI, AjaxHelpers, PagingCollection, PagingView, PagingHeader) {
var createPageableItem = function(index) {
var id = 'item_' + index;
......@@ -24,7 +24,6 @@ define([
],
num_pages: 2,
page_size: 3,
current_page: 0,
count: 4,
page: 0,
start: 0
......@@ -35,16 +34,14 @@ define([
],
num_pages: 2,
page_size: 3,
current_page: 1,
count: 4,
page: 1,
count: 4,
start: 3
};
var mockEmptyPage = {
results: [],
num_pages: 1,
page_size: 3,
current_page: 0,
count: 0,
page: 0,
start: 0
......@@ -69,11 +66,18 @@ define([
});
describe("Paging", function() {
var pagingView;
var pagingView,
TestPagingCollection = PagingCollection.extend({
state: {
firstPage: 0,
currentPage: null,
pageSize: 3
}
});
beforeEach(function () {
var collection = new PagingCollection();
collection.isZeroIndexed = true;
var collection = new TestPagingCollection();
collection.url = '/dummy/';
pagingView = new MockPagingView({collection: collection});
});
......@@ -83,10 +87,10 @@ define([
var requests = AjaxHelpers.requests(this);
pagingView.setPage(1);
respondWithMockItems(requests);
expect(pagingView.collection.currentPage).toBe(0);
expect(pagingView.collection.getPageNumber()).toBe(1);
pagingView.setPage(2);
respondWithMockItems(requests);
expect(pagingView.collection.currentPage).toBe(1);
expect(pagingView.collection.getPageNumber()).toBe(2);
});
it('should not change page after a server error', function () {
......@@ -95,7 +99,9 @@ define([
respondWithMockItems(requests);
pagingView.setPage(2);
requests[1].respond(500);
expect(pagingView.collection.currentPage).toBe(0);
/* PagingCollection sets the currentPage to the old page in case of failure */
expect(pagingView.collection.getPageNumber()).toBe(1);
});
});
......@@ -106,7 +112,7 @@ define([
respondWithMockItems(requests);
pagingView.nextPage();
requests[1].respond(500);
expect(pagingView.collection.currentPage).toBe(0);
expect(pagingView.collection.getPageNumber()).toBe(1);
});
it('can move to the next page', function () {
......@@ -115,7 +121,9 @@ define([
respondWithMockItems(requests);
pagingView.nextPage();
respondWithMockItems(requests);
expect(pagingView.collection.currentPage).toBe(1);
/* PagingCollection now returns the normalized page number; adds one if zero indexed */
expect(pagingView.collection.getPageNumber()).toBe(2);
});
it('can not move forward from the final page', function () {
......@@ -128,14 +136,13 @@ define([
});
describe("previousPage", function () {
it('can move back a page', function () {
var requests = AjaxHelpers.requests(this);
pagingView.setPage(2);
respondWithMockItems(requests);
pagingView.previousPage();
respondWithMockItems(requests);
expect(pagingView.collection.currentPage).toBe(0);
expect(pagingView.collection.getPageNumber()).toBe(1);
});
it('can not move back from the first page', function () {
......@@ -152,12 +159,11 @@ define([
respondWithMockItems(requests);
pagingView.previousPage();
requests[1].respond(500);
expect(pagingView.collection.currentPage).toBe(1);
expect(pagingView.collection.getPageNumber()).toBe(2);
});
});
describe("toggleSortOrder", function () {
it('can toggle direction of the current sort', function () {
var requests = AjaxHelpers.requests(this);
expect(pagingView.collection.sortDirection).toBe('desc');
......@@ -220,7 +226,8 @@ define([
respondWithMockItems(requests);
pagingHeader.$('.next-page-link').click();
requests[1].respond(500);
expect(pagingView.collection.currentPage).toBe(0);
expect(pagingView.collection.state.currentPage).toBe(0);
expect(pagingView.collection.getPageNumber()).toBe(1);
});
it('can move to the next page', function () {
......@@ -229,7 +236,7 @@ define([
respondWithMockItems(requests);
pagingHeader.$('.next-page-link').click();
respondWithMockItems(requests);
expect(pagingView.collection.currentPage).toBe(1);
expect(pagingView.collection.getPageNumber()).toBe(2);
});
it('should be enabled when there is at least one more page', function () {
......@@ -248,7 +255,7 @@ define([
it('should be disabled on an empty page', function () {
var requests = AjaxHelpers.requests(this);
pagingView.setPage(0);
pagingView.setPage(1);
AjaxHelpers.respondWithJson(requests, mockEmptyPage);
expect(pagingHeader.$('.next-page-link')).toHaveClass('is-disabled');
});
......@@ -267,7 +274,7 @@ define([
respondWithMockItems(requests);
pagingHeader.$('.previous-page-link').click();
requests[1].respond(500);
expect(pagingView.collection.currentPage).toBe(1);
expect(pagingView.collection.getPageNumber()).toBe(2);
});
it('can go back a page', function () {
......@@ -276,7 +283,7 @@ define([
respondWithMockItems(requests);
pagingHeader.$('.previous-page-link').click();
respondWithMockItems(requests);
expect(pagingView.collection.currentPage).toBe(0);
expect(pagingView.collection.getPageNumber()).toBe(1);
});
it('should be disabled on the first page', function () {
......
cms/static/js/views/assets.js
define(["jquery", "underscore", "gettext", "js/views/baseview", "js/models/asset", "js/views/paging",
"js/views/asset", "js/views/paging_header", "common/js/components/views/paging_footer",
"js/utils/modal", "common/js/components/utils/view_utils", "common/js/components/views/feedback_notification",
define([
"jquery",
"underscore",
"gettext",
"edx-ui-toolkit/js/utils/html-utils",
"js/views/baseview",
"js/models/asset",
"js/views/paging",
"js/views/asset",
"js/views/paging_header",
"common/js/components/views/paging_footer",
"js/utils/modal",
"common/js/components/utils/view_utils",
"common/js/components/views/feedback_notification",
"text!templates/asset-library.underscore",
"jquery.fileupload-process", "jquery.fileupload-validate"],
function($, _, gettext, BaseView, AssetModel, PagingView, AssetView, PagingHeader, PagingFooter,
"jquery.fileupload-process",
"jquery.fileupload-validate"
],
function($, _, gettext, HtmlUtils, BaseView, AssetModel, PagingView, AssetView, PagingHeader, PagingFooter,
ModalUtils, ViewUtils, NotificationView, asset_library_template) {
var CONVERSION_FACTOR_MBS_TO_BYTES = 1000 * 1000;
......@@ -67,7 +80,10 @@ define(["jquery", "underscore", "gettext", "js/views/baseview", "js/models/asset
ViewUtils.hideLoadingIndicator();
// Create the table
this.$el.html(_.template(asset_library_template)({typeData: this.typeData}));
HtmlUtils.setHtml(
this.$el,
HtmlUtils.template(asset_library_template)({typeData: this.typeData})
);
tableBody = this.$('#asset-table-body');
this.tableBody = tableBody;
this.pagingHeader = new PagingHeader({view: this, el: $('#asset-paging-header')});
......@@ -97,7 +113,7 @@ define(["jquery", "underscore", "gettext", "js/views/baseview", "js/models/asset
pagingView.registerFilterableColumn('js-asset-type-col', gettext('Type'), 'asset_type');
pagingView.setInitialSortColumn('js-asset-date-col');
pagingView.setInitialFilterColumn('js-asset-type-col');
pagingView.setPage(0);
pagingView.setPage(1);
return pagingView;
},
......@@ -106,7 +122,7 @@ define(["jquery", "underscore", "gettext", "js/views/baseview", "js/models/asset
return this;
},
afterRender: function(){
afterRender: function() {
// Bind events with html elements
$('li a.upload-button').on('click', _.bind(this.showUploadModal, this));
$('.upload-modal .close-button').on('click', _.bind(this.hideModal, this));
......@@ -127,7 +143,7 @@ define(["jquery", "underscore", "gettext", "js/views/baseview", "js/models/asset
// so that the new asset is shown at the top of the page.
this.pagingView.setInitialSortColumn('js-asset-date-col');
this.pagingView.setInitialFilterColumn('js-asset-type-col');
this.pagingView.setPage(0);
this.pagingView.setPage(1);
analytics.track('Uploaded a File', {
'course': course_location_analytics,
......@@ -217,9 +233,10 @@ define(["jquery", "underscore", "gettext", "js/views/baseview", "js/models/asset
startUpload: function (event) {
var file = event.target.value;
if (!this.largeFileErrorMsg) {
$('.upload-modal h1').text(gettext('Uploading'));
$('.upload-modal .file-name').html(file.substring(file.lastIndexOf("\\") + 1));
$('.upload-modal .file-name').text(file.substring(file.lastIndexOf('\\') + 1));
$('.upload-modal .choose-file-button').hide();
$('.upload-modal .progress-bar').removeClass('loaded').show();
}
......@@ -228,13 +245,16 @@ define(["jquery", "underscore", "gettext", "js/views/baseview", "js/models/asset
resetUploadModal: function () {
// Reset modal so it no longer displays information about previously
// completed uploads.
var percentVal = '0%';
$('.upload-modal .progress-fill').width(percentVal);
$('.upload-modal .progress-fill').html(percentVal);
var percentVal = '0%',
$progressFill = $('.upload-modal .progress-fill'),
$fileName = $('.upload-modal .file-name');
$progressFill.width(percentVal);
$progressFill.text(percentVal);
$('.upload-modal .progress-bar').hide();
$('.upload-modal .file-name').show();
$('.upload-modal .file-name').html('');
$fileName.show();
$fileName.text('');
$('.upload-modal .choose-file-button').text(gettext('Choose File'));
$('.upload-modal .embeddable-xml-input').val('');
$('.upload-modal .embeddable').hide();
......@@ -243,9 +263,11 @@ define(["jquery", "underscore", "gettext", "js/views/baseview", "js/models/asset
},
showUploadFeedback: function (event, percentComplete) {
var percentVal = percentComplete + '%';
$('.upload-modal .progress-fill').width(percentVal);
$('.upload-modal .progress-fill').html(percentVal);
var percentVal = percentComplete + '%',
$progressFill = $('.upload-modal .progress-fill');
$progressFill.width(percentVal);
$progressFill.text(percentVal);
},
openFilterColumn: function($this) {
......@@ -285,12 +307,12 @@ define(["jquery", "underscore", "gettext", "js/views/baseview", "js/models/asset
var filterColumn = this.$el.find('.filterable-column');
var resetFilter = filterColumn.find('.reset-filter');
var title = filterColumn.find('.title');
if(assettype === this.allLabel) {
if (assettype === this.allLabel) {
collection.assetType = '';
resetFilter.hide();
title.removeClass('column-selected-link');
}
else {
} else {
collection.assetType = assettype;
resetFilter.show();
title.addClass('column-selected-link');
......@@ -302,35 +324,38 @@ define(["jquery", "underscore", "gettext", "js/views/baseview", "js/models/asset
'.column-filter-link[data-assetfilter="' + assettype + '"]'));
},
closeFilterPopup: function(element){
closeFilterPopup: function(element) {
var $menu = element.parents('.nav-dd > .nav-item');
this.toggleFilterColumnState($menu, element);
},
displayFinishedUpload: function (resp) {
var asset = resp.asset;
var asset = resp.asset,
$progressFill = $('.upload-modal .progress-fill');
$('.upload-modal h1').text(gettext('Upload New File'));
$('.upload-modal .embeddable-xml-input').val(asset.portable_url).show();
$('.upload-modal .embeddable').show();
$('.upload-modal .file-name').hide();
$('.upload-modal .progress-fill').html(resp.msg);
$progressFill.text(resp.msg);
$('.upload-modal .choose-file-button').text(gettext('Load Another File')).show();
$('.upload-modal .progress-fill').width('100%');
$progressFill.width('100%');
this.addAsset(new AssetModel(asset));
},
displayFailedUpload: function (resp) {
var $progressFill = $('.upload-modal .progress-fill');
$('.upload-modal h1').text(gettext('Upload New File'));
$('.upload-modal .embeddable-xml-input').hide();
$('.upload-modal .embeddable').hide();
$('.upload-modal .file-name').hide();
$('.upload-modal .progress-fill').html(resp.msg);
$progressFill.text(resp.msg);
$('.upload-modal .choose-file-button').text(gettext('Load Another File')).show();
$('.upload-modal .progress-fill').width('0%');
$progressFill.width('0%');
}
});
return AssetsView;
}); // end define();
});
cms/static/js/views/paged_container.js
......@@ -2,7 +2,8 @@ define(["jquery", "underscore", "common/js/components/utils/view_utils", "js/vie
"common/js/components/views/feedback_notification", "js/views/paging_header", "common/js/components/views/paging_footer"],
function ($, _, ViewUtils, ContainerView, ModuleUtils, gettext, NotificationView, PagingHeader, PagingFooter) {
var PagedContainerView = ContainerView.extend({
initialize: function(options){
initialize: function(options) {
var self = this;
ContainerView.prototype.initialize.call(this);
this.page_size = this.options.page_size;
......@@ -52,6 +53,22 @@ define(["jquery", "underscore", "common/js/components/utils/view_utils", "js/vie
hasNextPage: function () {
return self.collection.currentPage < self.collection.totalPages - 1;
},
getTotalPages: function () {
return this.totalPages;
},
getPageNumber: function () {
return this.getPage();
},
getTotalRecords: function () {
return this.totalCount;
},
getPageSize: function () {
return self.page_size;
}
};
},
......@@ -66,11 +83,12 @@ define(["jquery", "underscore", "common/js/components/utils/view_utils", "js/vie
return this.renderPage(options);
},
renderPage: function(options){
renderPage: function(options) {
var self = this,
view = this.view,
xblockInfo = this.model,
xblockUrl = xblockInfo.url();
return $.ajax({
url: decodeURIComponent(xblockUrl) + "/" + view,
type: 'GET',
......@@ -101,8 +119,10 @@ define(["jquery", "underscore", "common/js/components/utils/view_utils", "js/vie
};
},
getPageCount: function(total_count){
if (total_count===0) return 1;
getPageCount: function(total_count) {
if (total_count === 0) {
return 1;
}
return Math.ceil(total_count / this.page_size);
},
......
cms/static/js/views/paging.js
......@@ -116,12 +116,15 @@
sortInfo = this.sortableColumnInfo(sortColumn),
sortField = sortInfo.fieldName,
defaultSortDirection = sortInfo.defaultSortDirection;
if (collection.sortField === sortField) {
collection.sortDirection = collection.sortDirection === 'asc' ? 'desc' : 'asc';
} else {
collection.sortField = sortField;
collection.sortDirection = defaultSortDirection;
}
collection.setSorting(sortField, collection.sortDirection);
this.sortColumn = sortColumn;
this.collection.setPage(1);
},
......@@ -129,8 +132,8 @@
selectFilter: function(filterColumn) {
var collection = this.collection,
filterInfo = this.filterableColumnInfo(filterColumn),
filterField = filterInfo.fieldName,
defaultFilterKey = false;
filterField = filterInfo.fieldName;
if (collection.filterField !== filterField) {
collection.filterField = filterField;
}
......
cms/static/js/views/paging_header.js
define(["underscore", "backbone", "gettext", "text!templates/paging-header.underscore"],
function(_, Backbone, gettext, paging_header_template) {
define([
'underscore',
'backbone',
'gettext',
'edx-ui-toolkit/js/utils/html-utils',
'edx-ui-toolkit/js/utils/string-utils',
'text!templates/paging-header.underscore'
], function(_, Backbone, gettext, HtmlUtils, StringUtils, pagingHeaderTemplate) {
'use strict';
/* jshint maxlen:false */
var PagingHeader = Backbone.View.extend({
events : {
"click .next-page-link": "nextPage",
"click .previous-page-link": "previousPage"
'click .next-page-link': 'nextPage',
'click .previous-page-link': 'previousPage'
},
initialize: function(options) {
......@@ -19,83 +26,99 @@ define(["underscore", "backbone", "gettext", "text!templates/paging-header.under
render: function() {
var view = this.view,
collection = view.collection,
currentPage = collection.currentPage,
lastPage = collection.totalPages - 1,
messageHtml = this.messageHtml();
this.$el.html(_.template(paging_header_template)({ messageHtml: messageHtml}));
this.$(".previous-page-link").toggleClass("is-disabled", currentPage === 0).attr('aria-disabled', currentPage === 0);
this.$(".next-page-link").toggleClass("is-disabled", currentPage === lastPage).attr('aria-disabled', currentPage === lastPage);
currentPage = collection.getPageNumber(),
lastPage = collection.getTotalPages(),
messageHtml = this.messageHtml(),
isNextDisabled = lastPage === 0 || currentPage === lastPage;
HtmlUtils.setHtml(this.$el, HtmlUtils.template(pagingHeaderTemplate)({messageHtml: messageHtml}));
this.$('.previous-page-link')
.toggleClass('is-disabled', currentPage === 1)
.attr('aria-disabled', currentPage === 1);
this.$('.next-page-link')
.toggleClass('is-disabled', isNextDisabled)
.attr('aria-disabled', isNextDisabled);
return this;
},
messageHtml: function() {
var message = '';
var asset_type = false;
var message = '',
assetType = false;
if (this.view.collection.assetType) {
if (this.view.collection.sortDirection === 'asc') {
// Translators: sample result:
// "Showing 0-9 out of 25 total, filtered by Images, sorted by Date Added ascending"
message = gettext('Showing %(current_item_range)s out of %(total_items_count)s, filtered by %(asset_type)s, sorted by %(sort_name)s ascending');
message = gettext('Showing {currentItemRange} out of {totalItemsCount}, filtered by {assetType}, sorted by {sortName} ascending');
} else {
// Translators: sample result:
// "Showing 0-9 out of 25 total, filtered by Images, sorted by Date Added descending"
message = gettext('Showing %(current_item_range)s out of %(total_items_count)s, filtered by %(asset_type)s, sorted by %(sort_name)s descending');
message = gettext('Showing {currentItemRange} out of {totalItemsCount}, filtered by {assetType}, sorted by {sortName} descending');
}
asset_type = this.filterNameLabel();
}
else {
assetType = this.filterNameLabel();
} else {
if (this.view.collection.sortDirection === 'asc') {
// Translators: sample result:
// "Showing 0-9 out of 25 total, sorted by Date Added ascending"
message = gettext('Showing %(current_item_range)s out of %(total_items_count)s, sorted by %(sort_name)s ascending');
message = gettext('Showing {currentItemRange} out of {totalItemsCount}, sorted by {sortName} ascending');
} else {
// Translators: sample result:
// "Showing 0-9 out of 25 total, sorted by Date Added descending"
message = gettext('Showing %(current_item_range)s out of %(total_items_count)s, sorted by %(sort_name)s descending');
message = gettext('Showing {currentItemRange} out of {totalItemsCount}, sorted by {sortName} descending');
}
}
return '<p>' + interpolate(message, {
current_item_range: this.currentItemRangeLabel(),
total_items_count: this.totalItemsCountLabel(),
asset_type: asset_type,
sort_name: this.sortNameLabel()
}, true) + "</p>";
return HtmlUtils.interpolateHtml(message, {
currentItemRange: this.currentItemRangeLabel(),
totalItemsCount: this.totalItemsCountLabel(),
assetType: assetType,
sortName: this.sortNameLabel()
});
},
currentItemRangeLabel: function() {
var view = this.view,
collection = view.collection,
start = collection.start,
start = (collection.getPageNumber() - 1) * collection.getPageSize(),
count = collection.size(),
end = start + count;
return interpolate('<span class="count-current-shown">%(start)s-%(end)s</span>', {
end = start + count,
htmlMessage = HtmlUtils.HTML('<span class="count-current-shown">{start}-{end}</span>');
return HtmlUtils.interpolateHtml(htmlMessage, {
start: Math.min(start + 1, end),
end: end
}, true);
});
},
totalItemsCountLabel: function() {
var totalItemsLabel;
var totalItemsLabel,
htmlMessage = HtmlUtils.HTML('<span class="count-total">{totalItemsLabel}</span>');
// Translators: turns into "25 total" to be used in other sentences, e.g. "Showing 0-9 out of 25 total".
totalItemsLabel = interpolate(gettext('%(total_items)s total'), {
total_items: this.view.collection.totalCount
}, true);
return interpolate('<span class="count-total">%(total_items_label)s</span>', {
total_items_label: totalItemsLabel
}, true);
totalItemsLabel = StringUtils.interpolate(gettext('{totalItems} total'), {
totalItems: this.view.collection.getTotalRecords()
});
return HtmlUtils.interpolateHtml(htmlMessage, {
totalItemsLabel: totalItemsLabel
});
},
sortNameLabel: function() {
return interpolate('<span class="sort-order">%(sort_name)s</span>', {
sort_name: this.view.sortDisplayName()
}, true);
var htmlMessage = HtmlUtils.HTML('<span class="sort-order">{sortName}</span>');
return HtmlUtils.interpolateHtml(htmlMessage, {
sortName: this.view.sortDisplayName()
});
},
filterNameLabel: function() {
return interpolate('<span class="filter-column">%(filter_name)s</span>', {
filter_name: this.view.filterDisplayName()
}, true);
var htmlMessage = HtmlUtils.HTML('<span class="filter-column">{filterName}</span>');
return HtmlUtils.interpolateHtml(htmlMessage, {
filterName: this.view.filterDisplayName()
});
},
nextPage: function() {
......@@ -108,4 +131,4 @@ define(["underscore", "backbone", "gettext", "text!templates/paging-header.under
});
return PagingHeader;
}); // end define();
});
cms/templates/js/paging-header.underscore
<div class="meta-wrap">
<div class="meta">
<%= messageHtml %>
<p><%= HtmlUtils.ensureHtml(messageHtml) %></p>
</div>
<nav class="pagination pagination-compact top" aria-label="Compact Pagination">
<ol>
......
common/static/common/js/components/views/paginated_view.js
......@@ -19,11 +19,12 @@
define([
'backbone',
'underscore',
'edx-ui-toolkit/js/utils/html-utils',
'common/js/components/views/paging_header',
'common/js/components/views/paging_footer',
'common/js/components/views/list',
'text!common/templates/components/paginated-view.underscore'
], function (Backbone, _, PagingHeader, PagingFooter, ListView, paginatedViewTemplate) {
], function (Backbone, _, HtmlUtils, PagingHeader, PagingFooter, ListView, paginatedViewTemplate) {
var PaginatedView = Backbone.View.extend({
initialize: function () {
var ItemListView = this.listViewClass.extend({
......@@ -51,13 +52,14 @@
createFooterView: function() {
return new PagingFooter({
collection: this.collection, hideWhenOnePage: true,
collection: this.collection,
hideWhenOnePage: true,
paginationLabel: this.paginationLabel
});
},
render: function () {
this.$el.html(_.template(this.viewTemplate)({type: this.type}));
HtmlUtils.setHtml(this.$el, HtmlUtils.template(this.viewTemplate)({type: this.type}));
this.assign(this.listView, '.' + this.type + '-list');
if (this.headerView) {
this.assign(this.headerView, '.' + this.type + '-paging-header');
......
common/static/common/js/components/views/paging_footer.js
;(function (define) {
'use strict';
define(["underscore", "gettext", "backbone", "text!common/templates/components/paging-footer.underscore"],
function(_, gettext, Backbone, paging_footer_template) {
define([
"underscore",
"gettext",
"backbone",
"edx-ui-toolkit/js/utils/html-utils",
"text!common/templates/components/paging-footer.underscore"
],
function(_, gettext, Backbone, HtmlUtils, pagingFooterTemplate) {
var PagingFooter = Backbone.View.extend({
events : {
......@@ -17,25 +23,27 @@
this.collection.bind('add', _.bind(this.render, this));
this.collection.bind('remove', _.bind(this.render, this));
this.collection.bind('reset', _.bind(this.render, this));
this.render();
},
render: function() {
var onFirstPage = !this.collection.hasPreviousPage(),
onLastPage = !this.collection.hasNextPage();
if (this.hideWhenOnePage) {
if (_.isUndefined(this.collection.totalPages)
|| this.collection.totalPages <= 1) {
if (this.collection.getTotalPages() <= 1) {
this.$el.addClass('hidden');
} else if (this.$el.hasClass('hidden')) {
this.$el.removeClass('hidden');
}
}
this.$el.html(_.template(paging_footer_template)({
current_page: this.collection.getPage(),
total_pages: this.collection.totalPages,
paginationLabel: this.paginationLabel
}));
HtmlUtils.setHtml(
this.$el,
HtmlUtils.template(pagingFooterTemplate)({
current_page: this.collection.getPageNumber(),
total_pages: this.collection.getTotalPages(),
paginationLabel: this.paginationLabel
})
);
this.$(".previous-page-link").toggleClass("is-disabled", onFirstPage).attr('aria-disabled', onFirstPage);
this.$(".next-page-link").toggleClass("is-disabled", onLastPage).attr('aria-disabled', onLastPage);
return this;
......@@ -43,11 +51,11 @@
changePage: function() {
var collection = this.collection,
currentPage = collection.getPage(),
currentPage = collection.getPageNumber(),
pageInput = this.$("#page-number-input"),
pageNumber = parseInt(pageInput.val(), 10),
validInput = true;
if (!pageNumber || pageNumber > collection.totalPages || pageNumber < 1) {
if (!pageNumber || pageNumber > collection.getTotalPages() || pageNumber < 1) {
validInput = false;
}
// If we still have a page number by this point,
......
common/static/common/js/components/views/paging_header.js
......@@ -4,8 +4,10 @@
'backbone',
'underscore',
'gettext',
'edx-ui-toolkit/js/utils/html-utils',
'edx-ui-toolkit/js/utils/string-utils',
'text!common/templates/components/paging-header.underscore'
], function (Backbone, _, gettext, headerTemplate) {
], function (Backbone, _, gettext, HtmlUtils, StringUtils, headerTemplate) {
var PagingHeader = Backbone.View.extend({
initialize: function (options) {
this.srInfo = options.srInfo;
......@@ -21,25 +23,37 @@
render: function () {
var message,
start = _.isUndefined(this.collection.start) ? 0 : this.collection.start,
end = start + this.collection.length,
num_items = _.isUndefined(this.collection.totalCount) ? 0 : this.collection.totalCount,
context = {first_index: Math.min(start + 1, end), last_index: end, num_items: num_items};
start = (this.collection.getPageNumber() - 1) * this.collection.getPageSize(),
end = start + this.collection.size(),
numItems = this.collection.getTotalRecords(),
context = {
firstIndex: Math.min(start + 1, end),
lastIndex: end,
numItems: numItems
};
if (end <= 1) {
message = interpolate(gettext('Showing %(first_index)s out of %(num_items)s total'), context, true);
message = StringUtils.interpolate(
gettext('Showing {firstIndex} out of {numItems} total'),
context
);
} else {
message = interpolate(
gettext('Showing %(first_index)s-%(last_index)s out of %(num_items)s total'),
context, true
message = StringUtils.interpolate(
gettext('Showing {firstIndex}-{lastIndex} out of {numItems} total'),
context
);
}
this.$el.html(_.template(headerTemplate)({
message: message,
srInfo: this.srInfo,
sortableFields: this.collection.sortableFields,
sortOrder: this.sortOrder,
showSortControls: this.showSortControls
}));
HtmlUtils.setHtml(
this.$el,
HtmlUtils.template(headerTemplate)({
message: message,
srInfo: this.srInfo,
sortableFields: this.collection.sortableFields,
sortOrder: this.sortOrder,
showSortControls: this.showSortControls
})
);
return this;
},
......
common/static/common/js/components/views/search_field.js
......@@ -6,8 +6,14 @@
;(function (define) {
'use strict';
define(['backbone', 'jquery', 'underscore', 'text!common/templates/components/search-field.underscore'],
function (Backbone, $, _, searchFieldTemplate) {
define([
'backbone',
'jquery',
'underscore',
'edx-ui-toolkit/js/utils/html-utils',
'text!common/templates/components/search-field.underscore'
],
function (Backbone, $, _, HtmlUtils, searchFieldTemplate) {
return Backbone.View.extend({
events: {
......@@ -16,7 +22,7 @@
'keyup .search-field': 'refreshState',
'click .action-clear': 'clearSearch',
'mouseover .action-clear': 'setMouseOverState',
'mouseout .action-clear': 'setMouseOutState',
'mouseout .action-clear': 'setMouseOutState'
},
initialize: function(options) {
......@@ -29,6 +35,7 @@
var searchField = this.$('.search-field'),
clearButton = this.$('.action-clear'),
searchString = $.trim(searchField.val());
if (searchString) {
clearButton.removeClass('is-hidden');
} else {
......@@ -37,11 +44,14 @@
},
render: function() {
this.$el.html(_.template(searchFieldTemplate)({
type: this.type,
searchString: this.collection.searchString,
searchLabel: this.label
}));
HtmlUtils.setHtml(
this.$el,
HtmlUtils.template(searchFieldTemplate)({
type: this.type,
searchString: this.collection.searchString,
searchLabel: this.label
})
);
this.refreshState();
return this;
},
......
common/static/common/js/spec/components/paginated_view_spec.js
......@@ -2,10 +2,10 @@ define([
'jquery',
'backbone',
'underscore',
'edx-ui-toolkit/js/pagination/paging-collection',
'common/js/spec_helpers/ajax_helpers',
'common/js/components/views/paginated_view',
'common/js/components/collections/paging_collection'
], function ($, Backbone, _, AjaxHelpers, PaginatedView, PagingCollection) {
'common/js/components/views/paginated_view'
], function ($, Backbone, _, PagingCollection, AjaxHelpers, PaginatedView) {
'use strict';
describe('PaginatedView', function () {
var TestItemView = Backbone.View.extend({
......@@ -36,11 +36,18 @@ define([
beforeEach(function () {
setFixtures('<div class="test-container"></div>');
initialItems = generateItems(5);
testCollection = new PagingCollection({
var TestPagingCollection = PagingCollection.extend({
state: {
pageSize: 5
}
});
testCollection = new TestPagingCollection();
testCollection.url = '/dummy/url';
testCollection.set({
count: 6,
num_pages: 2,
current_page: 1,
start: 0,
page: 1,
results: initialItems
}, {parse: true});
testView = new TestPaginatedView({el: '.test-container', collection: testCollection}).render();
......@@ -76,7 +83,7 @@ define([
function expectFooter(options) {
var footerEl = testView.$('.test-paging-footer');
expect(footerEl.text())
.toMatch(new RegExp(options.currentPage + '\\s+out of\\s+\/\\s+' + testCollection.totalPages));
.toMatch(new RegExp(options.currentPage + '\\s+out of\\s+\/\\s+' + options.totalPages));
expect(footerEl.hasClass('hidden')).toBe(options.isHidden);
}
......@@ -90,11 +97,11 @@ define([
initialItems = generateItems(1);
testCollection.set(
{
"count": 1,
"num_pages": 1,
"current_page": 1,
"start": 0,
"results": initialItems
count: 1,
num_pages: 1,
page: 1,
start: 0,
results: initialItems
},
{parse: true}
);
......@@ -112,11 +119,10 @@ define([
AjaxHelpers.expectNoRequests(requests);
testView.$(nextPageButtonCss).click();
AjaxHelpers.respondWithJson(requests, {
"count": 6,
"num_pages": 2,
"current_page": 2,
"start": 5,
"results": newItems
count: 6,
num_pages: 2,
page: 2,
results: newItems
});
expectHeader('Showing 6-6 out of 6 total');
expectItems(newItems);
......@@ -129,11 +135,10 @@ define([
initialItems = generateItems(1);
testCollection.set(
{
"count": 6,
"num_pages": 2,
"current_page": 2,
"start": 5,
"results": initialItems
count: 6,
num_pages: 2,
page: 2,
results: initialItems
},
{parse: true}
);
......@@ -143,11 +148,10 @@ define([
testView.$(previousPageButtonCss).click();
previousPageItems = generateItems(5);
AjaxHelpers.respondWithJson(requests, {
"count": 6,
"num_pages": 2,
"current_page": 1,
"start": 0,
"results": previousPageItems
count: 6,
num_pages: 2,
page: 1,
results: previousPageItems
});
expectHeader('Showing 1-5 out of 6 total');
expectItems(previousPageItems);
......@@ -159,11 +163,10 @@ define([
spyOn($.fn, 'focus');
testView.$(nextPageButtonCss).click();
AjaxHelpers.respondWithJson(requests, {
"count": 6,
"num_pages": 2,
"current_page": 2,
"start": 5,
"results": generateItems(1)
count: 6,
num_pages: 2,
page: 2,
results: generateItems(1)
});
expect(testView.$('.sr-is-focusable').focus).toHaveBeenCalled();
});
......
common/static/common/js/spec/components/paging_footer_spec.js
......@@ -2,10 +2,10 @@ define([
'jquery',
'URI',
'underscore',
'edx-ui-toolkit/js/pagination/paging-collection',
'common/js/spec_helpers/ajax_helpers',
'common/js/components/views/paging_footer',
'common/js/components/collections/paging_collection'
], function ($, URI, _, AjaxHelpers, PagingFooter, PagingCollection) {
'common/js/components/views/paging_footer'
], function ($, URI, _, PagingCollection, AjaxHelpers, PagingFooter) {
'use strict';
describe("PagingFooter", function () {
var pagingFooter,
......@@ -15,10 +15,10 @@ define([
}
return {
count: null,
current_page: currentPage,
page: currentPage,
num_pages: numPages,
start: null,
results: _.map(_.range(collectionLength), function() { return {}; }) // need to have non-empty collection to render
// need to have non-empty collection to render
results: _.map(_.range(collectionLength), function() { return {}; })
};
},
nextPageCss = '.next-page-link',
......@@ -29,9 +29,12 @@ define([
beforeEach(function () {
setFixtures('<div class="paging-footer"></div>');
var collection = new PagingCollection(mockPage(1, 2), {parse: true});
collection.url = '/test/url/';
pagingFooter = new PagingFooter({
el: $('.paging-footer'),
collection: new PagingCollection(mockPage(1, 2), {parse: true})
collection: collection
}).render();
});
......@@ -75,7 +78,7 @@ define([
var requests = AjaxHelpers.requests(this);
pagingFooter.$(nextPageCss).click();
AjaxHelpers.respondWithJson(requests, mockPage(2, 2));
expect(pagingFooter.collection.currentPage).toBe(2);
expect(pagingFooter.collection.getPageNumber()).toBe(2);
});
it('should be enabled when there is at least one more page', function () {
......@@ -91,7 +94,7 @@ define([
});
});
describe("Previous page button", function () {
describe('Previous page button', function () {
it('does not move back if a server error occurs', function () {
var requests = AjaxHelpers.requests(this);
pagingFooter.collection.reset(mockPage(2, 2), {parse: true});
......
common/static/common/js/spec/components/paging_header_spec.js
define([
'underscore',
'common/js/components/views/paging_header',
'common/js/components/collections/paging_collection'
], function (_, PagingHeader, PagingCollection) {
'edx-ui-toolkit/js/pagination/paging-collection',
'common/js/components/views/paging_header'
], function (_, PagingCollection, PagingHeader) {
'use strict';
describe('PagingHeader', function () {
var pagingHeader,
......
common/static/common/js/spec/components/search_field_spec.js
define([
'underscore',
'URI',
'edx-ui-toolkit/js/pagination/paging-collection',
'common/js/components/views/search_field',
'common/js/components/collections/paging_collection',
'common/js/spec_helpers/ajax_helpers'
], function (_, SearchFieldView, PagingCollection, AjaxHelpers) {
], function (_, URI, PagingCollection, SearchFieldView, AjaxHelpers) {
'use strict';
describe('SearchFieldView', function () {
var searchFieldView,
mockUrl = '/api/mock_collection';
var newCollection = function (size, perPage) {
var pageSize = 5,
results = _.map(_.range(size), function (i) { return {foo: i}; });
var collection = new PagingCollection(
[],
{
url: mockUrl,
count: results.length,
num_pages: results.length / pageSize,
current_page: 1,
start: 0,
results: _.first(results, perPage)
var results = _.map(_.range(size), function (i) { return {foo: i}; });
var TestPagingCollection = PagingCollection.extend({
state: {
pageSize: 5
}
);
collection.start = 0;
collection.totalCount = results.length;
});
var collection = new TestPagingCollection({
count: results.length,
num_pages: Math.ceil(results.length / perPage),
page: 1,
results: _.first(results, perPage)
}, {parse: true});
collection.url = mockUrl;
return collection;
};
......@@ -40,6 +41,18 @@ define([
return new SearchFieldView(options);
};
var assertQueryParams = function (request, expectedParameters) {
var urlParams = new URI(request.url).query(true);
_.each(expectedParameters, function (value, key) {
expect(urlParams[key]).toBe(value);
});
};
var assertNotInQueryParams = function (request, param) {
var urlParams = new URI(request.url).query(true);
return !urlParams.hasOwnProperty(param);
};
beforeEach(function() {
setFixtures('<section class="test-search"></section>');
});
......@@ -62,17 +75,16 @@ define([
searchFieldView = createSearchFieldView().render();
searchFieldView.$('.search-field').val('foo');
searchFieldView.$('.action-search').click();
AjaxHelpers.expectRequestURL(requests, mockUrl, {
assertQueryParams(requests[0], {
page: '1',
page_size: '10',
sort_order: '',
page_size: '5',
text_search: 'foo'
});
AjaxHelpers.respondWithJson(requests, {
count: 10,
current_page: 1,
page: 1,
num_pages: 1,
start: 0,
results: []
});
expect(searchFieldView.$('.search-field').val(), 'foo');
......@@ -84,17 +96,12 @@ define([
searchString: 'foo'
}).render();
searchFieldView.$('.action-clear').click();
AjaxHelpers.expectRequestURL(requests, mockUrl, {
page: '1',
page_size: '10',
sort_order: '',
text_search: ''
});
assertNotInQueryParams('text_search');
AjaxHelpers.respondWithJson(requests, {
count: 10,
current_page: 1,
page: 1,
num_pages: 1,
start: 0,
results: []
});
expect(searchFieldView.$('.search-field').val(), '');
......
common/static/common/js/spec/main_requirejs.js
......@@ -30,7 +30,7 @@
'underscore.string': 'common/js/vendor/underscore.string',
'backbone': 'common/js/vendor/backbone',
'backbone.associations': 'js/vendor/backbone-associations-min',
'backbone.paginator': 'js/vendor/backbone.paginator.min',
'backbone.paginator': 'common/js/vendor/backbone.paginator',
'backbone-super': 'js/vendor/backbone-super',
'jasmine-imagediff': 'js/vendor/jasmine-imagediff',
'URI': 'js/vendor/URI.min',
......@@ -131,7 +131,7 @@
},
'backbone.paginator': {
deps: ['backbone'],
exports: 'Backbone.Paginator'
exports: 'Backbone.PageableCollection'
},
"backbone-super": {
deps: ["backbone"]
......@@ -166,7 +166,6 @@
'common/js/spec/components/feedback_spec.js',
'common/js/spec/components/list_spec.js',
'common/js/spec/components/paginated_view_spec.js',
'common/js/spec/components/paging_collection_spec.js',
'common/js/spec/components/paging_header_spec.js',
'common/js/spec/components/paging_footer_spec.js',
'common/js/spec/components/search_field_spec.js',
......
common/static/common/templates/components/paging-header.underscore
<% if (!_.isUndefined(srInfo)) { %>
<h2 class="sr" id="<%= srInfo.id %>"><%- srInfo.text %></h2>
<h2 class="sr" id="<%- srInfo.id %>"><%- srInfo.text %></h2>
<% } %>
<div class="search-tools listing-tools">
<span class="search-count listing-count">
<%= message %>
<%- message %>
</span>
<% if (showSortControls) { %>
|
......@@ -11,7 +11,7 @@
<label class="field-label" for="paging-header-select"><%- gettext("Sorted by") %></label>
<select id="paging-header-select" name="paging-header-select" class="field-input input-select listing-sort-select">
<% _.each(sortableFields, function (option, key) { %>
<option value="<%= key %>" <% if (key === sortOrder) { %> selected="true" <% } %>>
<option value="<%- key %>" <% if (key === sortOrder) { %> selected="true" <% } %>>
<%- option.displayName %>
</option>
<% }) %>
......
common/static/common/templates/components/search-field.underscore
<div class="page-header-search wrapper-search-<%= type %>">
<div class="page-header-search wrapper-search-<%- type %>">
<form class="search-form">
<div class="wrapper-search-input">
<label for="search-<%= type %>" class="search-label"><%- searchLabel %></label>
<input id="search-<%= type %>" class="search-field" type="text" value="<%- searchString %>" placeholder="<%- searchLabel %>" />
<button type="button" class="action action-clear <%= searchLabel ? '' : 'is-hidden' %>" aria-label="<%- gettext('Clear search') %>">
<label for="search-<%- type %>" class="search-label"><%- searchLabel %></label>
<input id="search-<%- type %>" class="search-field" type="text" value="<%- searchString %>" placeholder="<%- searchLabel %>" />
<button type="button" class="action action-clear <%- searchLabel ? '' : 'is-hidden' %>" aria-label="<%- gettext('Clear search') %>">
<i class="icon fa fa-times-circle" aria-hidden="true"></i><span class="sr"><%- gettext('Search') %></span>
</button>
</div>
......
lms/djangoapps/teams/static/teams/js/collections/base.js
;(function (define) {
'use strict';
define(['common/js/components/collections/paging_collection'],
define(['edx-ui-toolkit/js/pagination/paging-collection'],
function(PagingCollection) {
var BaseCollection = PagingCollection.extend({
initialize: function(options) {
constructor: function (models, options) {
this.options = options;
this.url = options.url;
PagingCollection.prototype.initialize.call(this);
this.state.perPage = options.per_page;
this.course_id = options.course_id;
this.perPage = options.per_page;
this.teamEvents = options.teamEvents;
this.teamEvents.bind('teams:update', this.onUpdate, this);
this.queryParams = _.extend({}, BaseCollection.prototype.queryParams, this.queryParams);
PagingCollection.prototype.constructor.call(this, models, options);
},
parse: function (response, options) {
if (!response) {
response = {};
}
if (!response.results) {
response.results = [];
}
return PagingCollection.prototype.parse.call(this, response, options);
},
onUpdate: function(event) {
// Mark the collection as stale so that it knows to refresh when needed.
this.isStale = true;
},
sync: function (method, model, options) {
// do not send total pages and total records in request
if (method === 'read') {
var params = _.values(_.pick(this.queryParams, ['totalPages', 'totalRecords']));
_.each(params, function (param) {
delete options.data[param];
});
}
return PagingCollection.prototype.sync(method, model, options);
}
});
return BaseCollection;
......
lms/djangoapps/teams/static/teams/js/collections/my_teams.js
......@@ -2,13 +2,20 @@
'use strict';
define(['teams/js/collections/team'], function (TeamCollection) {
var MyTeamsCollection = TeamCollection.extend({
initialize: function (teams, options) {
this.url = options.url;
TeamCollection.prototype.initialize.call(this, teams, options);
delete this.server_api.topic_id;
this.server_api = _.extend(this.server_api, {
username: options.username
});
queryParams: {
username: function () {
return this.options.username;
},
text_search: function () {
return this.searchString || '';
},
totalPages: null,
totalRecords: null
},
constructor: function (teams, options) {
TeamCollection.prototype.constructor.call(this, teams, options);
delete this.queryParams.topic_id;
}
});
return MyTeamsCollection;
......
lms/djangoapps/teams/static/teams/js/collections/team.js
......@@ -3,29 +3,46 @@
define(['teams/js/collections/base', 'teams/js/models/team', 'gettext'],
function(BaseCollection, TeamModel, gettext) {
var TeamCollection = BaseCollection.extend({
sortField: 'last_activity_at',
model: TeamModel,
state: {
sortKey: 'last_activity_at',
order: null
},
initialize: function(teams, options) {
this.url = options.url;
var self = this;
BaseCollection.prototype.initialize.call(this, options);
queryParams: {
topic_id: function () {
return this.options.topic_id;
},
expand: 'user',
course_id: function () {
return this.options.course_id;
},
order_by: function () {
return this.getSearchString() ? '' : this.state.sortKey;
},
text_search: function () {
return this.getSearchString() || '';
}
},
this.server_api = _.extend(
this.server_api,
{
topic_id: this.topic_id = options.topic_id,
expand: 'user',
course_id: function () { return encodeURIComponent(self.course_id); },
order_by: function () { return self.searchString ? '' : this.sortField; }
}
);
delete this.server_api.sort_order; // Sort order is not specified for the Team API
constructor: function(teams, options) {
this.state = _.extend({}, TeamCollection.prototype.state, this.state);
this.queryParams = _.extend({}, TeamCollection.prototype.queryParams, this.queryParams);
this.topic_id = options.topic_id;
BaseCollection.prototype.constructor.call(this, teams, options);
this.registerSortableField('last_activity_at', gettext('last activity'));
this.registerSortableField('open_slots', gettext('open slots'));
},
model: TeamModel
setFilterField: function (fieldName, value) {
BaseCollection.prototype.setFilterField.call(this, fieldName, value);
this.queryParams[fieldName] = function () {
return value;
};
}
});
return TeamCollection;
});
......
lms/djangoapps/teams/static/teams/js/collections/topic.js
......@@ -3,23 +3,25 @@
define(['underscore', 'gettext', 'teams/js/collections/base', 'teams/js/models/topic'],
function(_, gettext, BaseCollection, TopicModel) {
var TopicCollection = BaseCollection.extend({
initialize: function(topics, options) {
model: TopicModel,
var self = this;
BaseCollection.prototype.initialize.call(this, options);
state: {
perPage: null,
sortKey: 'name'
},
this.perPage = topics.results.length;
queryParams: {
course_id: function () { return this.course_id; },
text_search: function () { return this.searchString || ''; }
},
this.server_api = _.extend(
this.server_api,
{
course_id: function () { return encodeURIComponent(self.course_id); },
order_by: function () { return this.sortField; }
}
);
delete this.server_api['sort_order']; // Sort order is not specified for the Team API
constructor: function(topics, options) {
BaseCollection.prototype.constructor.call(this, topics, options);
this.state.pageSize = topics.results.length;
if (topics.sort_order) {
this.state.sortKey = topics.sort_order;
}
this.registerSortableField('name', gettext('name'));
// Translators: This refers to the number of teams (a count of how many teams there are)
this.registerSortableField('team_count', gettext('team count'));
......@@ -29,9 +31,7 @@
if (_.contains(['create', 'delete'], event.action)) {
this.isStale = true;
}
},
model: TopicModel
}
});
return TopicCollection;
});
......
lms/djangoapps/teams/static/teams/js/spec/collections/topic_collection_spec.js
......@@ -21,7 +21,7 @@ define(['backbone', 'URI', 'underscore', 'common/js/spec_helpers/ajax_helpers',
};
it('sets its perPage based on initial page size', function () {
expect(topicCollection.perPage).toBe(5);
expect(topicCollection.getPageSize()).toBe(5);
});
it('sorts by name', function () {
......
lms/djangoapps/teams/static/teams/js/spec/views/my_teams_spec.js
......@@ -43,7 +43,6 @@ define([
teams = TeamSpecHelpers.createMockTeams({
results: []
}, {
per_page: 2,
url: TeamSpecHelpers.testContext.myTeamsUrl,
username: TeamSpecHelpers.testContext.userInfo.username
}, MyTeamsCollection),
......@@ -60,7 +59,7 @@ define([
username : TeamSpecHelpers.testContext.userInfo.username,
course_id : TeamSpecHelpers.testContext.courseID,
page : '1',
page_size : '2',
page_size : '5',
text_search: '',
order_by: 'last_activity_at'
}
......
lms/djangoapps/teams/static/teams/js/spec/views/teams_tab_spec.js
......@@ -263,9 +263,9 @@ define([
// Clear the search and submit it again
teamsTabView.$('.search-field').val('');
teamsTabView.$('.action-search').click();
verifyTeamsRequest({
order_by: 'last_activity_at',
text_search: ''
order_by: 'last_activity_at'
});
AjaxHelpers.respondWithJson(requests, {});
expect(teamsTabView.$('.page-title').text()).toBe('Test Topic 1');
......
lms/djangoapps/teams/static/teams/js/spec_helpers/team_spec_helpers.js
......@@ -63,9 +63,11 @@ define([
return new collectionType(
createMockTeamsResponse(responseOptions),
_.extend({
state: {
pageSize: 5
},
teamEvents: teamEvents,
course_id: testCourseID,
per_page: 2,
parse: true
}, options)
);
......@@ -287,6 +289,9 @@ define([
sort_order: 'name'
},
{
state: {
pageSize: 5
},
teamEvents: teamEvents,
course_id: testCourseID,
parse: true,
......
lms/djangoapps/teams/static/teams/js/views/team_profile.js
......@@ -3,12 +3,19 @@
*/
;(function (define) {
'use strict';
define(['backbone', 'underscore', 'gettext', 'teams/js/views/team_discussion',
define([
'backbone',
'underscore',
'gettext',
'edx-ui-toolkit/js/utils/html-utils',
'teams/js/views/team_discussion',
'common/js/components/utils/view_utils',
'teams/js/views/team_utils',
'text!teams/templates/team-profile.underscore',
'text!teams/templates/team-member.underscore'],
function (Backbone, _, gettext, TeamDiscussionView, ViewUtils, TeamUtils, teamTemplate, teamMemberTemplate) {
'text!teams/templates/team-member.underscore'
],
function (Backbone, _, gettext, HtmlUtils, TeamDiscussionView, ViewUtils, TeamUtils,
teamTemplate, teamMemberTemplate) {
var TeamProfileView = Backbone.View.extend({
errorMessage: gettext("An error occurred. Try again."),
......@@ -16,6 +23,7 @@
events: {
'click .leave-team-link': 'leaveTeam'
},
initialize: function (options) {
this.teamEvents = options.teamEvents;
this.context = options.context;
......@@ -31,17 +39,21 @@
var memberships = this.model.get('membership'),
discussionTopicID = this.model.get('discussion_topic_id'),
isMember = TeamUtils.isUserMemberOfTeam(memberships, this.context.userInfo.username);
this.$el.html(_.template(teamTemplate)({
courseID: this.context.courseID,
discussionTopicID: discussionTopicID,
readOnly: !(this.context.userInfo.privileged || isMember),
country: this.countries[this.model.get('country')],
language: this.languages[this.model.get('language')],
membershipText: TeamUtils.teamCapacityText(memberships.length, this.context.maxTeamSize),
isMember: isMember,
hasCapacity: memberships.length < this.context.maxTeamSize,
hasMembers: memberships.length >= 1
}));
HtmlUtils.setHtml(
this.$el,
HtmlUtils.template(teamTemplate)({
courseID: this.context.courseID,
discussionTopicID: discussionTopicID,
readOnly: !(this.context.userInfo.privileged || isMember),
country: this.countries[this.model.get('country')],
language: this.languages[this.model.get('language')],
membershipText: TeamUtils.teamCapacityText(memberships.length, this.context.maxTeamSize),
isMember: isMember,
hasCapacity: memberships.length < this.context.maxTeamSize,
hasMembers: memberships.length >= 1
})
);
this.discussionView = new TeamDiscussionView({
el: this.$('.discussion-module')
});
......@@ -56,11 +68,14 @@
renderTeamMembers: function() {
var view = this;
_.each(this.model.get('membership'), function(membership) {
view.$('.members-info').append(_.template(teamMemberTemplate)({
imageUrl: membership.user.profile_image.image_url_medium,
username: membership.user.username,
memberProfileUrl: '/u/' + membership.user.username
}));
HtmlUtils.append(
view.$('.members-info'),
HtmlUtils.template(teamMemberTemplate)({
imageUrl: membership.user.profile_image.image_url_medium,
username: membership.user.username,
memberProfileUrl: '/u/' + membership.user.username
})
);
});
},
......
lms/djangoapps/teams/static/teams/js/views/teams.js
......@@ -11,7 +11,7 @@
type: 'teams',
srInfo: {
id: "heading-browse-teams",
id: 'heading-browse-teams',
text: gettext('All teams')
},
......
lms/djangoapps/teams/static/teams/js/views/teams_tab.js
......@@ -5,6 +5,8 @@
'jquery',
'underscore',
'gettext',
'edx-ui-toolkit/js/utils/html-utils',
'edx-ui-toolkit/js/utils/string-utils',
'common/js/components/views/search_field',
'js/components/header/views/header',
'js/components/header/models/header',
......@@ -25,7 +27,7 @@
'teams/js/views/team_utils',
'teams/js/views/instructor_tools',
'text!teams/templates/teams_tab.underscore'],
function (Backbone, $, _, gettext, SearchFieldView, HeaderView, HeaderModel,
function (Backbone, $, _, gettext, HtmlUtils, StringUtils, SearchFieldView, HeaderView, HeaderModel,
TopicModel, TopicCollection, TeamModel, TeamCollection, MyTeamsCollection, TeamAnalytics,
TeamsTabbedView, TopicsView, TeamProfileView, MyTeamsView, TopicTeamsView, TeamEditView,
TeamMembersEditView, TeamProfileHeaderActionsView, TeamUtils, InstructorToolsView, teamsTemplate) {
......@@ -44,7 +46,7 @@
},
render: function () {
this.$el.html(_.template(teamsTemplate));
HtmlUtils.setHtml(this.$el, HtmlUtils.template(teamsTemplate)({}));
this.$('p.error').hide();
this.header.setElement(this.$('.teams-header')).render();
if (this.instructorTools) {
......@@ -121,7 +123,7 @@
course_id: this.context.courseID,
parse: true
}
).bootstrap();
);
this.topicsView = new TopicsView({
router: this.router,
......@@ -138,12 +140,15 @@
url: 'my-teams',
view: this.myTeamsView
}, {
title: interpolate(
title: HtmlUtils.interpolateHtml(
// Translators: sr_start and sr_end surround text meant only for screen readers.
// The whole string will be shown to users as "Browse teams" if they are using a
// screenreader, and "Browse" otherwise.
gettext("Browse %(sr_start)s teams %(sr_end)s"),
{"sr_start": '<span class="sr">', "sr_end": '</span>'}, true
gettext('Browse {sr_start} teams {sr_end}'),
{
sr_start: HtmlUtils.HTML('<span class="sr">'),
sr_end: HtmlUtils.HTML('</span>')
}
),
url: 'browse',
view: this.topicsView
......@@ -219,10 +224,9 @@
collection: view.teamsCollection,
breadcrumbs: view.createBreadcrumbs(topic),
title: gettext('Team Search'),
description: interpolate(
gettext('Showing results for "%(searchString)s"'),
{ searchString: view.teamsCollection.searchString },
true
description: StringUtils.interpolate(
gettext('Showing results for "{searchString}"'),
{searchString: view.teamsCollection.getSearchString()}
),
showSortControls: false
});
......@@ -336,16 +340,15 @@
per_page: 10
});
view.teamsCollection = collection;
collection.goTo(1)
.done(function() {
var teamsView = view.createTeamsListView({
topic: topic,
collection: collection,
breadcrumbs: view.createBreadcrumbs(),
showSortControls: true
collection.getPage(1).then(function () {
var teamsView = view.createTeamsListView({
topic: topic,
collection: collection,
breadcrumbs: view.createBreadcrumbs(),
showSortControls: true
});
deferred.resolve(teamsView);
});
deferred.resolve(teamsView);
});
});
}
return deferred.promise();
......@@ -354,7 +357,6 @@
createTeamsListView: function(options) {
var topic = options.topic,
collection = options.collection,
self = this,
teamsView = new TopicTeamsView({
router: this.router,
context: this.context,
......@@ -389,7 +391,7 @@
// that the collection doesn't unnecessarily get refreshed again.
collection.isStale = false;
if (collection.searchString) {
if (collection.getSearchString()) {
Backbone.history.navigate(searchUrl, {trigger: true});
} else if (Backbone.history.getFragment() === searchUrl) {
Backbone.history.navigate('topics/' + topic.get('id'), {trigger: true});
......@@ -591,30 +593,27 @@
routeNotFound: function (route) {
this.notFoundError(
interpolate(
gettext('The page "%(route)s" could not be found.'),
{route: route},
true
StringUtils.interpolate(
gettext('The page "{route}" could not be found.'),
{route: route}
)
);
},
topicNotFound: function (topicID) {
this.notFoundError(
interpolate(
gettext('The topic "%(topic)s" could not be found.'),
{topic: topicID},
true
StringUtils.interpolate(
gettext('The topic "{topic}" could not be found.'),
{topic: topicID}
)
);
},
teamNotFound: function (teamID) {
this.notFoundError(
interpolate(
gettext('The team "%(team)s" could not be found.'),
{team: teamID},
true
StringUtils.interpolate(
gettext('The team "{team}" could not be found.'),
{team: teamID}
)
);
},
......
lms/djangoapps/teams/static/teams/js/views/topics.js
......@@ -11,8 +11,8 @@
type: 'topics',
srInfo: {
id: "heading-browse-topics",
text: gettext("All topics")
id: 'heading-browse-topics',
text: gettext('All topics')
},
initialize: function (options) {
......
lms/djangoapps/teams/static/teams/templates/team-profile.underscore
<div class="team-profile">
<div class="page-content-main">
<div class="discussion-module" data-course-id="<%= courseID %>" data-discussion-id="<%= discussionTopicID %>"
data-read-only="<%= readOnly %>"
data-user-create-comment="<%= !readOnly %>"
data-user-create-subcomment="<%= !readOnly %>">
<% if ( !readOnly) { %>
<div class="discussion-module" data-course-id="<%- courseID %>" data-discussion-id="<%- discussionTopicID %>"
data-read-only="<%- readOnly %>"
data-user-create-comment="<%- !readOnly %>"
data-user-create-subcomment="<%- !readOnly %>">
<% if (!readOnly) { %>
<button type="button" class="btn new-post-btn"><i class="icon fa fa-edit new-post-icon" aria-hidden="true"></i><%- gettext("New Post") %></button>
<% } %>
</div>
......
lms/static/js/bookmarks/collections/bookmarks.js
;(function (define) {
'use strict';
define(['backbone', 'common/js/components/collections/paging_collection', 'js/bookmarks/models/bookmark'],
function (Backbone, PagingCollection, BookmarkModel) {
define([
'backbone',
'edx-ui-toolkit/js/pagination/paging-collection',
'js/bookmarks/models/bookmark'
], function (Backbone, PagingCollection, BookmarkModel) {
return PagingCollection.extend({
initialize: function(options) {
PagingCollection.prototype.initialize.call(this);
model: BookmarkModel,
this.url = options.url;
this.server_api = _.extend(
{
course_id: function () { return encodeURIComponent(options.course_id); },
fields : function () { return encodeURIComponent('display_name,path'); }
},
this.server_api
);
delete this.server_api.sort_order; // Sort order is not specified for the Bookmark API
queryParams: {
course_id: function () { return this.options.course_id; },
fields : function () { return 'display_name,path'; }
},
model: BookmarkModel,
url: function() {
return this.url;
},
constructor: function (models, options) {
this.options = options;
this.url = options.url;
PagingCollection.prototype.constructor.call(this, models, options);
}
});
});
......
lms/static/js/bookmarks/views/bookmarks_list.js
;(function (define, undefined) {
'use strict';
define(['gettext', 'jquery', 'underscore', 'backbone', 'logger', 'moment',
define(['gettext', 'jquery', 'underscore', 'backbone', 'logger', 'moment', 'edx-ui-toolkit/js/utils/html-utils',
'common/js/components/views/paging_header', 'common/js/components/views/paging_footer',
'text!templates/bookmarks/bookmarks-list.underscore'
],
function (gettext, $, _, Backbone, Logger, _moment,
function (gettext, $, _, Backbone, Logger, _moment, HtmlUtils,
PagingHeaderView, PagingFooterView, BookmarksListTemplate) {
var moment = _moment || window.moment;
......@@ -28,7 +28,7 @@
},
initialize: function (options) {
this.template = _.template(BookmarksListTemplate);
this.template = HtmlUtils.template(BookmarksListTemplate);
this.loadingMessageView = options.loadingMessageView;
this.errorMessageView = options.errorMessageView;
this.langCode = $(this.el).data('langCode');
......@@ -43,7 +43,8 @@
bookmarksCollection: this.collection,
humanFriendlyDate: this.humanFriendlyDate
};
this.$el.html(this.template(data));
HtmlUtils.setHtml(this.$el, this.template(data));
this.pagingHeaderView.setElement(this.$('.paging-header')).render();
this.pagingFooterView.setElement(this.$('.paging-footer')).render();
this.delegateEvents();
......@@ -56,7 +57,7 @@
this.hideErrorMessage();
this.showBookmarksContainer();
this.collection.goTo(this.defaultPage).done(function () {
this.collection.getPage(this.defaultPage).done(function () {
view.render();
view.focusBookmarksElement();
}).fail(function () {
......
lms/static/js/bookmarks/views/bookmarks_list_button.js
......@@ -16,13 +16,12 @@
},
initialize: function () {
var bookmarksCollection = new BookmarksCollection(
var bookmarksCollection = new BookmarksCollection([],
{
course_id: $('.courseware-results').data('courseId'),
url: $(".courseware-bookmarks-button").data('bookmarksApiUrl')
url: $('.courseware-bookmarks-button').data('bookmarksApiUrl')
}
);
bookmarksCollection.bootstrap();
this.bookmarksListView = new BookmarksListView(
{
collection: bookmarksCollection,
......
lms/static/js/edxnotes/collections/notes.js
;(function (define) {
'use strict';
define([
'underscore', 'common/js/components/collections/paging_collection', 'js/edxnotes/models/note'
'underscore', 'edx-ui-toolkit/js/pagination/paging-collection', 'js/edxnotes/models/note'
], function (_, PagingCollection, NoteModel) {
return PagingCollection.extend({
model: NoteModel,
initialize: function(models, options) {
PagingCollection.prototype.initialize.call(this);
state: {
pageSize: 10
},
queryParams: {},
constructor: function (models, options) {
this.url = options.url;
this.perPage = options.perPage;
this.server_api = _.pick(this.server_api, "page", "page_size");
this.state.pageSize = options.perPage;
if (options.text) {
this.server_api.text = options.text;
this.queryParams.text = options.text;
}
PagingCollection.prototype.constructor.call(this, models, options);
},
/**
......
lms/static/js/edxnotes/views/search_box.js
;(function (define, undefined) {
'use strict';
define([
'jquery', 'underscore', 'backbone', 'gettext', 'js/edxnotes/utils/logger',
'jquery',
'underscore',
'backbone',
'gettext',
'edx-ui-toolkit/js/utils/html-utils',
'js/edxnotes/utils/logger',
'js/edxnotes/collections/notes'
], function ($, _, Backbone, gettext, NotesLogger, NotesCollection) {
], function ($, _, Backbone, gettext, HtmlUtils, NotesLogger, NotesCollection) {
var SearchBoxView = Backbone.View.extend({
events: {
'submit': 'submitHandler'
},
errorMessage: gettext('An error has occurred. Make sure that you are connected to the Internet, and then try refreshing the page.'),
emptyFieldMessage: (function () {
var message = gettext('Please enter a term in the %(anchor_start)s search field%(anchor_end)s.');
return interpolate(message, {
'anchor_start': '<a href="#search-notes-input">',
'anchor_end': '</a>'
}, true);
} ()),
emptyFieldMessageHtml: (function () {
var message = gettext('Please enter a term in the {anchorStart} search field{anchorEnd}.');
return HtmlUtils.interpolateHtml(message, {
anchorStart: HtmlUtils.HTML('<a href="#search-notes-input">'),
anchorEnd: HtmlUtils.HTML('</a>')
});
}()),
initialize: function (options) {
_.bindAll(this, 'onSuccess', 'onError', 'onComplete');
......@@ -91,7 +97,7 @@ define([
validateField: function (searchQuery) {
if (!($.trim(searchQuery))) {
this.options.error(this.emptyFieldMessage, searchQuery);
this.options.error(this.emptyFieldMessageHtml, searchQuery);
return false;
}
return true;
......@@ -102,7 +108,7 @@ define([
if (args) {
this.options.search.apply(this, args);
this.logger.emit('edx.course.student_notes.searched', {
'number_of_results': args[0].totalCount,
'number_of_results': args[0].getTotalRecords(),
'search_string': args[1]
});
} else {
......@@ -147,15 +153,13 @@ define([
* @return {jQuery.Deferred}
*/
sendRequest: function (text) {
this.collection = new NotesCollection(
[],
{
text: text,
perPage: this.options.perPage,
url: this.el.action
}
);
return this.collection.goTo(1);
this.collection = new NotesCollection([], {
text: text,
perPage: this.options.perPage,
url: this.el.action
});
return this.collection.getPage(1);
}
});
......
lms/static/js/edxnotes/views/tab_view.js
;(function (define, undefined) {
'use strict';
define([
'jquery', 'underscore', 'backbone', 'js/edxnotes/models/tab'
], function ($, _, Backbone, TabModel) {
'jquery',
'underscore',
'backbone',
'edx-ui-toolkit/js/utils/html-utils',
'js/edxnotes/models/tab'
], function ($, _, Backbone, HtmlUtils, TabModel) {
var TabView = Backbone.View.extend({
PanelConstructor: null,
......@@ -121,11 +125,11 @@ define([
/**
* Shows error message.
*/
showErrorMessage: function (message) {
this.$('.wrapper-msg')
.removeClass('is-hidden')
.find('.msg-content .copy').html(message);
showErrorMessageHtml: function (htmlMessage) {
var $wrapper = this.$('.wrapper-msg');
$wrapper.removeClass('is-hidden');
HtmlUtils.setHtml($wrapper.find('.msg-content .copy'), htmlMessage);
return this;
},
......
lms/static/js/edxnotes/views/tabs/search_results.js
......@@ -142,7 +142,7 @@ define([
},
onSearchError: function (errorMessage) {
this.showErrorMessage(errorMessage);
this.showErrorMessageHtml(errorMessage);
if (this.searchDeferred) {
this.searchDeferred.reject();
}
......
lms/static/js/spec/courseware/bookmarks_list_view_spec.js
......@@ -186,7 +186,12 @@ define(['backbone',
it("calls bookmarks list render on page_changed event", function () {
var renderSpy = spyOn(BookmarksListView.prototype, 'render');
var listView = new BookmarksListView({collection: new BookmarksCollection({course_id: 'abc'})});
var listView = new BookmarksListView({
collection: new BookmarksCollection([], {
course_id: 'abc',
url: '/test-bookmarks/url/'
})
});
listView.collection.trigger('page_changed');
expect(renderSpy).toHaveBeenCalled();
});
......
lms/static/js/spec/edxnotes/views/search_box_spec.js
define([
'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'js/edxnotes/views/search_box',
'js/edxnotes/collections/notes', 'js/spec/edxnotes/helpers'
], function($, _, AjaxHelpers, SearchBoxView, NotesCollection, Helpers) {
'jquery',
'underscore',
'common/js/spec_helpers/ajax_helpers',
'edx-ui-toolkit/js/utils/html-utils',
'js/edxnotes/views/search_box',
'js/edxnotes/collections/notes',
'js/spec/edxnotes/helpers'
], function($, _, AjaxHelpers, HtmlUtils, SearchBoxView, NotesCollection, Helpers) {
'use strict';
describe('EdxNotes SearchBoxView', function() {
var getSearchBox, submitForm, assertBoxIsEnabled, assertBoxIsDisabled, searchResponse;
......@@ -159,7 +164,7 @@ define([
expect(requests).toHaveLength(0);
assertBoxIsEnabled(this.searchBox);
expect(this.searchBox.options.error).toHaveBeenCalledWith(
'Please enter a term in the <a href="#search-notes-input"> search field</a>.',
HtmlUtils.HTML('Please enter a term in the <a href="#search-notes-input"> search field</a>.'),
' '
);
});
......
lms/static/js/spec/edxnotes/views/tab_view_spec.js
define([
'jquery', 'backbone', 'common/js/spec_helpers/template_helpers', 'js/edxnotes/collections/tabs',
'js/edxnotes/views/tabs_list', 'js/edxnotes/views/tab_view'
], function(
$, Backbone, TemplateHelpers, TabsCollection, TabsListView, TabView
) {
'jquery',
'backbone',
'edx-ui-toolkit/js/utils/html-utils',
'common/js/spec_helpers/template_helpers',
'js/edxnotes/collections/tabs',
'js/edxnotes/views/tabs_list',
'js/edxnotes/views/tab_view'
], function ($, Backbone, HtmlUtils, TemplateHelpers, TabsCollection, TabsListView, TabView) {
'use strict';
describe('EdxNotes TabView', function() {
var TestSubView = Backbone.View.extend({
......@@ -94,7 +97,8 @@ define([
it('can show/hide error messages', function () {
var view = getView(this.tabsCollection),
errorHolder = view.$('.wrapper-msg');
view.showErrorMessage('<p>error message is here</p>');
view.showErrorMessageHtml(HtmlUtils.HTML('<p>error message is here</p>'));
expect(errorHolder).not.toHaveClass('is-hidden');
expect(errorHolder.find('.copy')).toContainHtml('<p>error message is here</p>');
......@@ -106,7 +110,7 @@ define([
it('should hide error messages before rendering', function () {
var view = getView(this.tabsCollection),
errorHolder = view.$('.wrapper-msg');
view.showErrorMessage('<p>error message is here</p>');
view.showErrorMessageHtml('<p>error message is here</p>');
view.render();
expect(errorHolder).toHaveClass('is-hidden');
expect(errorHolder.find('.copy')).toBeEmpty();
......
lms/static/js/spec/edxnotes/views/tabs/recent_activity_spec.js
......@@ -70,6 +70,7 @@ define([
]);
this.collection = new NotesCollection(notes, {perPage: 10, parse: true});
this.collection.url = '/test/notes/';
this.tabsCollection = new TabsCollection();
});
......@@ -79,7 +80,7 @@ define([
Helpers.verifyPageData(view, this.tabsCollection, tabInfo, recentActivityTabId, notes);
});
it("will not render header and footer if there are no notes", function () {
it('will not render header and footer if there are no notes', function () {
var notes = {
'count': 0,
'current_page': 1,
......@@ -95,7 +96,7 @@ define([
expect(view.$('.pagination.pagination-full.bottom')).toHaveLength(0);
});
it("can go to a page number", function () {
it('can go to a page number', function () {
var requests = AjaxHelpers.requests(this);
var notes = Helpers.createNotesData(
{
......@@ -108,6 +109,7 @@ define([
);
var collection = new NotesCollection(notes, {perPage: 10, parse: true});
collection.url = '/test/notes/';
var view = getView(collection, this.tabsCollection);
Helpers.verifyPaginationInfo(view, "Showing 1-10 out of 12 total", false, 1, 2);
......@@ -134,7 +136,7 @@ define([
Helpers.verifyPageData(view, this.tabsCollection, tabInfo, recentActivityTabId, notes);
});
it("can navigate forward and backward", function () {
it('can navigate forward and backward', function () {
var requests = AjaxHelpers.requests(this);
var page1Notes = Helpers.createNotesData(
{
......@@ -146,6 +148,7 @@ define([
}
);
var collection = new NotesCollection(page1Notes, {perPage: 10, parse: true});
collection.url = '/test/notes/';
var view = getView(collection, this.tabsCollection);
Helpers.verifyPaginationInfo(view, "Showing 1-10 out of 15 total", false, 1, 2);
......@@ -180,7 +183,7 @@ define([
Helpers.verifyPageData(view, this.tabsCollection, tabInfo, recentActivityTabId, page1Notes);
});
it("sends correct page size value", function () {
it('sends correct page size value', function () {
var requests = AjaxHelpers.requests(this);
var notes = Helpers.createNotesData(
{
......@@ -192,6 +195,7 @@ define([
}
);
var collection = new NotesCollection(notes, {perPage: 5, parse: true});
collection.url = '/test/notes/';
var view = getView(collection, this.tabsCollection);
view.$('.pagination .next-page-link').click();
......
lms/static/js/spec/main.js
......@@ -39,7 +39,7 @@
'underscore.string': 'common/js/vendor/underscore.string',
'backbone': 'common/js/vendor/backbone',
'backbone.associations': 'xmodule_js/common_static/js/vendor/backbone-associations-min',
'backbone.paginator': 'xmodule_js/common_static/js/vendor/backbone.paginator.min',
'backbone.paginator': 'common/js/vendor/backbone.paginator',
'backbone-super': 'js/vendor/backbone-super',
'URI': 'xmodule_js/common_static/js/vendor/URI.min',
'tinymce': 'xmodule_js/common_static/js/vendor/tinymce/js/tinymce/tinymce.full.min',
......@@ -202,11 +202,14 @@
},
'backbone.paginator': {
deps: ['backbone'],
exports: 'Backbone.Paginator'
exports: 'Backbone.PageableCollection'
},
"backbone-super": {
deps: ["backbone"]
},
'paging-collection': {
deps: ['jquery', 'underscore', 'backbone.paginator']
},
'youtube': {
exports: 'YT'
},
......
lms/static/js/spec/student_profile/badge_list_container_spec.js
define(['backbone', 'jquery', 'underscore', 'URI', 'common/js/spec_helpers/ajax_helpers',
define([
'backbone',
'jquery',
'underscore',
'URI',
'edx-ui-toolkit/js/pagination/paging-collection',
'common/js/spec_helpers/ajax_helpers',
'js/spec/student_profile/helpers',
'js/student_profile/views/badge_list_container',
'common/js/components/collections/paging_collection'
'js/student_profile/views/badge_list_container'
],
function (Backbone, $, _, URI, AjaxHelpers, LearnerProfileHelpers, BadgeListContainer, PagingCollection) {
function (Backbone, $, _, URI, PagingCollection, AjaxHelpers, LearnerProfileHelpers, BadgeListContainer) {
'use strict';
describe('edx.user.BadgeListContainer', function () {
var view, requests;
var createView = function (requests, badge_list_object) {
var badgeCollection = new PagingCollection();
var createView = function (requests, pageNum, badge_list_object) {
var BadgeCollection = PagingCollection.extend({
queryParams: {
currentPage: 'current_page'
}
});
var badgeCollection = new BadgeCollection();
badgeCollection.url = '/api/badges/v1/assertions/user/staff/';
var models = [];
_.each(_.range(badge_list_object.count), function (idx) {
models.push(LearnerProfileHelpers.makeBadge(idx));
});
badge_list_object.results = models;
badgeCollection.fetch();
badgeCollection.setPage(pageNum);
var request = AjaxHelpers.currentRequest(requests);
var path = new URI(request.url).path();
expect(path).toBe('/api/badges/v1/assertions/user/staff/');
AjaxHelpers.respondWithJson(requests, badge_list_object);
var badge_list_container = new BadgeListContainer({
var badgeListContainer = new BadgeListContainer({
'collection': badgeCollection
});
badge_list_container.render();
return badge_list_container;
badgeListContainer.render();
return badgeListContainer;
};
afterEach(function () {
......@@ -36,7 +46,7 @@ define(['backbone', 'jquery', 'underscore', 'URI', 'common/js/spec_helpers/ajax_
it('displays all badges', function () {
requests = AjaxHelpers.requests(this);
view = createView(requests, {
view = createView(requests, 1, {
count: 30,
previous: '/arbitrary/url',
num_pages: 3,
......@@ -51,7 +61,7 @@ define(['backbone', 'jquery', 'underscore', 'URI', 'common/js/spec_helpers/ajax_
it('displays placeholder on last page', function () {
requests = AjaxHelpers.requests(this);
view = createView(requests, {
view = createView(requests, 3, {
count: 30,
previous: '/arbitrary/url',
num_pages: 3,
......@@ -66,7 +76,7 @@ define(['backbone', 'jquery', 'underscore', 'URI', 'common/js/spec_helpers/ajax_
it('does not display placeholder on first page', function () {
requests = AjaxHelpers.requests(this);
view = createView(requests, {
view = createView(requests, 1, {
count: 30,
previous: '/arbitrary/url',
num_pages: 3,
......
lms/static/js/spec/student_profile/badge_list_view_spec.js
define(['backbone', 'jquery', 'underscore',
define([
'backbone',
'jquery',
'underscore',
'edx-ui-toolkit/js/pagination/paging-collection',
'js/spec/student_profile/helpers',
'js/student_profile/views/badge_list_view',
'common/js/components/collections/paging_collection'
'js/student_profile/views/badge_list_view'
],
function (Backbone, $, _, LearnerProfileHelpers, BadgeListView, PagingCollection) {
function (Backbone, $, _, PagingCollection, LearnerProfileHelpers, BadgeListView) {
"use strict";
describe("edx.user.BadgeListView", function () {
......
lms/static/js/spec/student_profile/learner_profile_factory_spec.js
......@@ -49,7 +49,6 @@ define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers
};
it("renders the full profile for a user", function() {
requests = AjaxHelpers.requests(this);
var context = createProfilePage(true),
......
lms/static/js/spec/student_profile/learner_profile_view_spec.js
define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'common/js/spec_helpers/template_helpers',
define(['backbone',
'jquery',
'underscore',
'edx-ui-toolkit/js/pagination/paging-collection',
'common/js/spec_helpers/ajax_helpers',
'common/js/spec_helpers/template_helpers',
'js/spec/student_account/helpers',
'js/spec/student_profile/helpers',
'js/views/fields',
......@@ -8,12 +13,11 @@ define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers
'js/student_profile/views/learner_profile_view',
'js/student_profile/views/badge_list_container',
'js/student_account/views/account_settings_fields',
'common/js/components/collections/paging_collection',
'js/views/message_banner'
],
function (Backbone, $, _, AjaxHelpers, TemplateHelpers, Helpers, LearnerProfileHelpers, FieldViews,
UserAccountModel, AccountPreferencesModel, LearnerProfileFields, LearnerProfileView,
BadgeListContainer, AccountSettingsFieldViews, PagingCollection, MessageBannerView) {
],
function (Backbone, $, _, PagingCollection, AjaxHelpers, TemplateHelpers, Helpers, LearnerProfileHelpers,
FieldViews, UserAccountModel, AccountPreferencesModel, LearnerProfileFields, LearnerProfileView,
BadgeListContainer, AccountSettingsFieldViews, MessageBannerView) {
'use strict';
describe("edx.user.LearnerProfileView", function () {
......
lms/static/js/student_profile/views/badge_list_container.js
......@@ -6,18 +6,24 @@
'text!templates/student_profile/badge_list.underscore'],
function (gettext, $, _, PaginatedView, BadgeView, BadgeListView, BadgeListTemplate) {
var BadgeListContainer = PaginatedView.extend({
initialize: function (options) {
BadgeListContainer.__super__.initialize.call(this, options);
this.listView.find_courses_url = options.find_courses_url;
this.listView.badgeMeta = options.badgeMeta;
this.listView.ownProfile = options.ownProfile;
},
type: 'badge',
itemViewClass: BadgeView,
listViewClass: BadgeListView,
viewTemplate: BadgeListTemplate,
isZeroIndexed: true,
paginationLabel: gettext("Accomplishments Pagination")
paginationLabel: gettext('Accomplishments Pagination'),
initialize: function (options) {
BadgeListContainer.__super__.initialize.call(this, options);
this.listView.find_courses_url = options.find_courses_url;
this.listView.badgeMeta = options.badgeMeta;
this.listView.ownProfile = options.ownProfile;
}
});
return BadgeListContainer;
......
lms/static/js/student_profile/views/badge_list_view.js
;(function (define, undefined) {
'use strict';
define([
'gettext', 'jquery', 'underscore', 'common/js/components/views/list', 'js/student_profile/views/badge_view',
'text!templates/student_profile/badge_placeholder.underscore'],
function (gettext, $, _, ListView, BadgeView, badgePlaceholder) {
'gettext',
'jquery',
'underscore',
'edx-ui-toolkit/js/utils/html-utils',
'common/js/components/views/list',
'js/student_profile/views/badge_view',
'text!templates/student_profile/badge_placeholder.underscore'
],
function (gettext, $, _, HtmlUtils, ListView, BadgeView, badgePlaceholder) {
var BadgeListView = ListView.extend({
tagName: 'div',
template: _.template(badgePlaceholder),
template: HtmlUtils.template(badgePlaceholder),
renderCollection: function () {
var self = this,
$row;
this.$el.empty();
var self = this;
var row;
// Split into two columns.
this.collection.each(function (badge, index) {
if (index % 2 === 0) {
row = $('<div class="row">');
this.$el.append(row);
$row = $('<div class="row">');
this.$el.append($row);
}
var item = new BadgeView({
var $item = new BadgeView({
model: badge,
badgeMeta: this.badgeMeta,
ownProfile: this.ownProfile
}).render().el;
row.append(item);
this.itemViews.push(item);
if ($row) {
$row.append($item);
}
this.itemViews.push($item);
}, this);
// Placeholder must always be at the end, and may need a new row.
if (!this.collection.hasNextPage()) {
// find_courses_url set by BadgeListContainer during initialization.
var placeholder = this.template({find_courses_url: self.find_courses_url});
if (this.collection.length % 2 === 0) {
row = $('<div class="row">');
this.$el.append(row);
$row = $('<div class="row">');
this.$el.append($row);
}
if ($row) {
HtmlUtils.append(
$row,
this.template({find_courses_url: self.find_courses_url})
);
}
row.append(placeholder);
}
return this;
}
......
lms/static/js/student_profile/views/learner_profile_factory.js
;(function (define, undefined) {
'use strict';
define([
'gettext', 'jquery', 'underscore', 'backbone', 'logger',
'gettext',
'jquery',
'underscore',
'backbone',
'logger',
'edx-ui-toolkit/js/pagination/paging-collection',
'js/student_account/models/user_account_model',
'js/student_account/models/user_preferences_model',
'js/views/fields',
'js/student_profile/views/learner_profile_fields',
'js/student_profile/views/learner_profile_view',
'js/student_profile/models/badges_model',
'common/js/components/collections/paging_collection',
'js/student_profile/views/badge_list_container',
'js/student_account/views/account_settings_fields',
'js/views/message_banner',
'string_utils'
], function (gettext, $, _, Backbone, Logger, AccountSettingsModel, AccountPreferencesModel, FieldsView,
LearnerProfileFieldsView, LearnerProfileView, BadgeModel, PagingCollection, BadgeListContainer,
], function (gettext, $, _, Backbone, Logger, PagingCollection, AccountSettingsModel, AccountPreferencesModel,
FieldsView, LearnerProfileFieldsView, LearnerProfileView, BadgeModel, BadgeListContainer,
AccountSettingsFieldViews, MessageBannerView) {
return function (options) {
......@@ -64,7 +68,7 @@
var profileImageFieldView = new LearnerProfileFieldsView.ProfileImageFieldView({
model: accountSettingsModel,
valueAttribute: "profile_image",
valueAttribute: 'profile_image',
editable: editable === 'toggle',
messageView: messageView,
imageMaxBytes: options['profile_image_max_bytes'],
......@@ -125,7 +129,12 @@
})
];
var badgeCollection = new PagingCollection();
var BadgeCollection = PagingCollection.extend({
queryParams: {
currentPage: 'current_page'
}
});
var badgeCollection = new BadgeCollection();
badgeCollection.url = options.badges_api_url;
var badgeListContainer = new BadgeListContainer({
......
lms/static/lms/js/require-config.js
......@@ -62,7 +62,7 @@
"logger": "js/src/logger",
"backbone": "common/js/vendor/backbone",
"backbone-super": "js/vendor/backbone-super",
"backbone.paginator": "js/vendor/backbone.paginator.min",
"backbone.paginator": "common/js/vendor/backbone.paginator",
"underscore": "common/js/vendor/underscore",
"underscore.string": "common/js/vendor/underscore.string",
// The jquery-migrate library was added in upgrading from
......@@ -144,7 +144,7 @@
},
"backbone.paginator": {
deps: ["backbone"],
exports: "Backbone.Paginator"
exports: "Backbone.PageableCollection"
},
"backbone-super": {
deps: ["backbone"]
......
package.json
......@@ -5,7 +5,7 @@
"backbone": "~1.3.2",
"coffee-script": "1.6.1",
"edx-pattern-library": "~0.12.4",
"edx-ui-toolkit": "~0.9.1",
"edx-ui-toolkit": "~1.1.0",
"jquery": "~2.2.0",
"jquery-migrate": "^1.4.1",
"jquery.scrollto": "~2.1.2",
......
pavelib/assets.py
......@@ -52,6 +52,7 @@ NPM_INSTALLED_LIBRARIES = [
'underscore.string/dist/underscore.string.js',
'picturefill/dist/picturefill.js',
'backbone/backbone.js',
'edx-ui-toolkit/node_modules/backbone.paginator/lib/backbone.paginator.js',
]
# Directory to install static vendor files
......
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