Added proof of concept for pagination and search

public_html/js/Presenters/PagedCollectionPresenter.js

@@ -0,0 +1,114 @@
+var App = App || {};
+App.Presenters = App.Presenters || {};
+
+App.Presenters.PagedCollectionPresenter = function(api, util) {
+
+	var searchOrder;
+	var searchQuery;
+	var pageNumber;
+	var baseUri;
+	var backendUri;
+	var renderCallback;
+
+	var template;
+	var pageSize;
+	var totalRecords;
+
+	function init(args) {
+		parseSearchArgs(args.searchArgs);
+		baseUri = args.baseUri;
+		backendUri = args.backendUri;
+		renderCallback = args.renderCallback;
+
+		util.loadTemplate('pager').then(function(html) {
+			template = _.template(html);
+			//renderCallback({entities: [], totalRecords: 0});
+
+			changePage(pageNumber);
+		});
+	}
+
+	function changePage(newPageNumber) {
+		pageNumber = newPageNumber;
+
+		api.get(backendUri, {
+			order: searchOrder,
+			query: searchQuery,
+			page: pageNumber
+		}).then(function(response) {
+			totalRecords = response.json.totalRecords;
+			pageSize = response.json.pageSize;
+			renderCallback({
+				entities: response.json.data,
+				totalRecords: response.json.totalRecords});
+		}).catch(function(response) {
+			console.log(Error(response.json && response.json.error || response));
+		});
+	}
+
+	function render($target) {
+		var totalPages = Math.ceil(totalRecords / pageSize);
+		var pages = [1, totalPages];
+		var pagesAroundCurrent = 2;
+		for (var i = -pagesAroundCurrent; i <= pagesAroundCurrent; i ++)
+			if (pageNumber + i >= 1 && pageNumber + i <= totalPages)
+				pages.push(pageNumber + i);
+		if (pageNumber - pagesAroundCurrent - 1 == 2)
+			pages.push(2);
+		if (pageNumber + pagesAroundCurrent + 1 == totalPages - 1)
+			pages.push(totalPages - 1);
+
+		pages = pages.sort(function(a, b) { return a - b; }).filter(function(item, pos) {
+			return !pos || item != pages[pos - 1];
+		});
+
+		$target.html(template({
+			pages: pages,
+			pageNumber: pageNumber,
+			link: getPageChangeLink,
+		}));
+	}
+
+	function getSearchQueryChangeLink(newSearchQuery) {
+		return util.compileComplexRouteArgs(baseUri, {
+				page: 1,
+				order: searchOrder,
+				query: newSearchQuery,
+			});
+	}
+
+	function getSearchOrderChangeLink(newSearchOrder) {
+		return util.compileComplexRouteArgs(baseUri, {
+				page: 1,
+				order: newSearchOrder,
+				query: searchQuery,
+			});
+	}
+
+	function getPageChangeLink(newPageNumber) {
+		return util.compileComplexRouteArgs(baseUri, {
+				page: newPageNumber,
+				order: searchOrder,
+				query: searchQuery,
+			});
+	}
+
+	function parseSearchArgs(searchArgs) {
+		var args = util.parseComplexRouteArgs(searchArgs);
+		pageNumber = parseInt(args.page) || 1;
+		searchOrder = args.order;
+		searchQuery = args.query;
+	}
+
+	return {
+		init: init,
+		render: render,
+		changePage: changePage,
+		getSearchQueryChangeLink: getSearchQueryChangeLink,
+		getSearchOrderChangeLink: getSearchOrderChangeLink,
+		getPageChangeLink: getPageChangeLink
+	};
+
+};
+
+App.DI.register('pagedCollectionPresenter', App.Presenters.PagedCollectionPresenter);

public_html/js/Presenters/UserListPresenter.js

@@ -1,19 +1,56 @@
 var App = App || {};
 App.Presenters = App.Presenters || {};
 
-App.Presenters.UserListPresenter = function(jQuery, topNavigationPresenter, appState) {
+App.Presenters.UserListPresenter = function(
+	jQuery,
+	util,
+	router,
+	pagedCollectionPresenter,
+	topNavigationPresenter) {
 
 	var $el = jQuery('#content');
+	var template;
+	var userList = [];
+	var activeSearchOrder;
 
-	function init() {
+	function init(args) {
 		topNavigationPresenter.select('users');
-		render();
+		activeSearchOrder = util.parseComplexRouteArgs(args.searchArgs).order;
+
+		util.loadTemplate('user-list').then(function(html) {
+			template = _.template(html);
+
+			pagedCollectionPresenter.init({
+				searchArgs: args.searchArgs,
+				baseUri: '#/users',
+				backendUri: '/users',
+				renderCallback: function updateCollection(data) {
+					userList = data.entities;
+					render();
+				}});
+		});
 	}
 
 	function render() {
-		$el.html('Logged in: ' + appState.get('loggedIn'));
+		$el.html(template({
+			userList: userList,
+		}));
+		$el.find('.order a').click(orderLinkClicked);
+		$el.find('.order [data-order="' + activeSearchOrder + '"]').parent('li').addClass('active');
+		console.log(activeSearchOrder);
+
+		var $pager = $el.find('.pager');
+		pagedCollectionPresenter.render($pager);
 	};
 
+	function orderLinkClicked(e)
+	{
+		e.preventDefault();
+		var $orderLink = jQuery(this);
+		activeSearchOrder = $orderLink.attr('data-order');
+		router.navigate(pagedCollectionPresenter.getSearchOrderChangeLink(activeSearchOrder));
+	}
+
 	return {
 		init: init,
 		render: render

public_html/js/Router.js

@@ -23,7 +23,8 @@ App.Router = function(jQuery, util) {
 		inject('#/logout', function() { return App.DI.get('logoutPresenter'); });
 		inject('#/register', function() { return App.DI.get('registrationPresenter'); });
 		inject('#/users', function() { return App.DI.get('userListPresenter'); });
-		inject('#/users/:userName', function() { return App.DI.get('userPresenter'); });
+		inject('#/users/:searchArgs', function() { return App.DI.get('userListPresenter'); });
+		inject('#/user/:userName', function() { return App.DI.get('userPresenter'); });
 		setRoot('#/users');
 	};
 

public_html/js/Util.js

@@ -4,6 +4,30 @@ App.Util = (function(jQuery) {
 
 	var templateCache = {};
 
+	function parseComplexRouteArgs(args) {
+		var result = {};
+		args = (args || '').split(/;/);
+		for (var i = 0; i < args.length; i ++) {
+			var arg = args[i];
+			if (!arg)
+				continue;
+			kv = arg.split(/=/);
+			result[kv[0]] = kv[1];
+		}
+		return result;
+	}
+
+	function compileComplexRouteArgs(baseUri, args) {
+		var result = baseUri + '/';
+		_.each(args, function(v, k) {
+			if (typeof(v) == 'undefined')
+				return;
+			result += k + '=' + v + ';'
+		});
+		result = result.slice(0, -1);
+		return result;
+	}
+
 	function loadTemplate(templateName) {
 		return loadTemplateFromCache(templateName)
 			|| loadTemplateFromDOM(templateName)
@@ -62,6 +86,8 @@ App.Util = (function(jQuery) {
 		loadTemplate: loadTemplate,
 		initPresenter : initPresenter,
 		initContentPresenter: initContentPresenter,
+		parseComplexRouteArgs: parseComplexRouteArgs,
+		compileComplexRouteArgs: compileComplexRouteArgs,
 	};
 });