Adds pagination module.
Project: http://git-wip-us.apache.org/repos/asf/rave/repo Commit: http://git-wip-us.apache.org/repos/asf/rave/commit/ad6b1d84 Tree: http://git-wip-us.apache.org/repos/asf/rave/tree/ad6b1d84 Diff: http://git-wip-us.apache.org/repos/asf/rave/diff/ad6b1d84 Branch: refs/heads/angular Commit: ad6b1d84530724c15e03350dad6583b87d7e4c6f Parents: b5e81f4 Author: Jmeas <[email protected]> Authored: Fri Aug 8 15:20:49 2014 -0400 Committer: Jmeas <[email protected]> Committed: Fri Aug 8 15:43:29 2014 -0400 ---------------------------------------------------------------------- .jshintrc-dev | 2 - rave-portal-ng/src/index.html | 3 + rave-portal-ng/src/less/brand/brand.less | 39 -------- rave-portal-ng/src/less/core/core.less | 21 ----- .../src/providers/pagination/pagination.js | 94 +++++++++++++++++++ rave-portal-ng/src/subapps/admin/admin.html | 4 +- rave-portal-ng/src/subapps/admin/admin.js | 14 ++- .../subapps/admin/users/controllers/users.js | 31 +++++++ .../src/subapps/admin/users/routes.js | 29 +----- .../src/subapps/admin/users/users.html | 98 +++++++++++--------- 10 files changed, 198 insertions(+), 137 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/rave/blob/ad6b1d84/.jshintrc-dev ---------------------------------------------------------------------- diff --git a/.jshintrc-dev b/.jshintrc-dev index 21cca91..fd37322 100644 --- a/.jshintrc-dev +++ b/.jshintrc-dev @@ -30,8 +30,6 @@ "trailing" : true, "maxparams" : 7, "maxdepth" : 2, - "maxstatements" : 30, - "maxcomplexity" : 6, "maxlen" : 120, "asi" : false, http://git-wip-us.apache.org/repos/asf/rave/blob/ad6b1d84/rave-portal-ng/src/index.html ---------------------------------------------------------------------- diff --git a/rave-portal-ng/src/index.html b/rave-portal-ng/src/index.html index d8df572..5c415c1 100644 --- a/rave-portal-ng/src/index.html +++ b/rave-portal-ng/src/index.html @@ -46,6 +46,9 @@ id: 34, authLevel: "admin" }, + preferences: { + pageSize: 10 + }, nav: [ { state: 'portal.home', http://git-wip-us.apache.org/repos/asf/rave/blob/ad6b1d84/rave-portal-ng/src/less/brand/brand.less ---------------------------------------------------------------------- diff --git a/rave-portal-ng/src/less/brand/brand.less b/rave-portal-ng/src/less/brand/brand.less index d735679..56386e6 100644 --- a/rave-portal-ng/src/less/brand/brand.less +++ b/rave-portal-ng/src/less/brand/brand.less @@ -153,45 +153,6 @@ a{ color: @redLight; } padding: 0px 15px 15px; } - -/* Pagination -----------------------------------------------------*/ -.pagination-header{ - h2{ - text-transform: uppercase; - color: @black; - font-size: 16px; - border-bottom: 1px solid @lighterGray; - } -} -.pagination{ - height: 24px; - margin: 12px 0 18px; - position: relative; - z-index: 1000; - - a, - li:first-child a, - li:last-child a{ - border: none; - line-height: 14px; - background: @black; - .border-radius(0); - margin-right: 3px; - padding: .4em .65em; - color: @white; - - - &:hover{ - background: @redDark; - } - } - li.active a, - li.active a:hover{ - background: @gray; - color: @white; - } -} /* Tabs ----------------------------------------------------*/ http://git-wip-us.apache.org/repos/asf/rave/blob/ad6b1d84/rave-portal-ng/src/less/core/core.less ---------------------------------------------------------------------- diff --git a/rave-portal-ng/src/less/core/core.less b/rave-portal-ng/src/less/core/core.less index 78421bf..a513985 100644 --- a/rave-portal-ng/src/less/core/core.less +++ b/rave-portal-ng/src/less/core/core.less @@ -968,27 +968,6 @@ span.error, label.error { width: 300px } -.searchHeading.paginationHeading{ - .pagination{ - float: left; - } - .search-form{ - float: right; - margin-top: 8px; - margin-bottom: 0; - text-align: right; - } - p{ - margin:9px 0 0; - } - #searchFilters{ - - select{ - margin: 3px 0 15px; - } - } -} - /* user profile */ .profile-submenu ul { height: 2.5em; http://git-wip-us.apache.org/repos/asf/rave/blob/ad6b1d84/rave-portal-ng/src/providers/pagination/pagination.js ---------------------------------------------------------------------- diff --git a/rave-portal-ng/src/providers/pagination/pagination.js b/rave-portal-ng/src/providers/pagination/pagination.js new file mode 100644 index 0000000..6f4ba7d --- /dev/null +++ b/rave-portal-ng/src/providers/pagination/pagination.js @@ -0,0 +1,94 @@ +/* + * pagination + * ---------- + * Gives you an array of the values that represent the + * values to display in a pagination menu. + * To use it, pass your currentPage and the pageCount. + * + * + */ + +define(function(require) { + var ng = require('angular'); + + var pagination = ng.module('pagination', []); + + pagination.factory('pagination', function() { + return { + paginationPages: function(currentPage, pageCount) { + // The total number of page links. It must be an odd number. + var rangeSize = 11; + + // An array that represents each page in the page links. + var pages = []; + + // The page numbers our pagination starts and ends at + var start, end; + + // The earliest possible page we could navigate to + var earliestPage = 1; + + // The maximum possible page we could navigate to + var maxPage = pageCount; + + // The maximum number of page links that could appear + // to the right and left of the current page + var maxLeft = (rangeSize - 1) / 2; + var maxRight = (rangeSize - 1) / 2; + + // Naive start and ends that don't take into account + // our limitations. + var potentialEnd = currentPage + maxRight; + var potentialStart = currentPage - maxLeft; + + // How far our naive bounds overshot our limitations. + // Positive values here mean that we've overshot it. + var leftOvershoot = earliestPage - potentialStart; + var rightOvershoot = potentialEnd - maxPage; + + // Booleans representing whether we've overshot or not. + var overshotLeft = leftOvershoot >= 0; + var overshotRight = rightOvershoot >= 0; + + // If we're not bound on either side, then it's easy. Our start + // and end are just the maximum we can go in that direction + if (!overshotLeft && !overshotRight) { + start = potentialStart; + end = potentialEnd; + } + + // The other easy case. If both have overshot, then our range is just + // the min and max page. + else if (overshotLeft && overshotRight) { + start = earliestPage; + end = maxPage; + } + + // If we're bound to the right, then our end is just the maximum page. + // We then calculate our start, adding on the extra items. + else if (!overshotLeft && overshotRight) { + end = maxPage; + start = currentPage - maxLeft - rightOvershoot; + } + + // In the same way, if we overshot the left, + // then we set our earliest page and calculate our end. + else if (overshotLeft && !overshotRight) { + start = earliestPage; + end = currentPage + maxRight + leftOvershoot; + } + + // Loop from start to end, adding more pages. + // We ignore values that are too large or small. + for (start; start <= end; start++) { + if (start >= earliestPage && start <= maxPage) { + pages.push(start); + } + } + return pages; + } + }; + }); + + return pagination; +}); http://git-wip-us.apache.org/repos/asf/rave/blob/ad6b1d84/rave-portal-ng/src/subapps/admin/admin.html ---------------------------------------------------------------------- diff --git a/rave-portal-ng/src/subapps/admin/admin.html b/rave-portal-ng/src/subapps/admin/admin.html index 32fda87..ab35e20 100644 --- a/rave-portal-ng/src/subapps/admin/admin.html +++ b/rave-portal-ng/src/subapps/admin/admin.html @@ -9,12 +9,12 @@ </a> </li> <li ng-class="{ active: $state.includes('portal.admin.users') }"> - <a ui-sref="portal.admin.users"> + <a ui-sref="portal.admin.users({page:1})"> Users </a> </li> <li ng-class="{ active: $state.includes('portal.admin.widgets') }"> - <a ui-sref="portal.admin.widgets"> + <a ui-sref="portal.admin.widgets({page:1})"> Widgets </a> </li> http://git-wip-us.apache.org/repos/asf/rave/blob/ad6b1d84/rave-portal-ng/src/subapps/admin/admin.js ---------------------------------------------------------------------- diff --git a/rave-portal-ng/src/subapps/admin/admin.js b/rave-portal-ng/src/subapps/admin/admin.js index 0cc1ebe..473d349 100644 --- a/rave-portal-ng/src/subapps/admin/admin.js +++ b/rave-portal-ng/src/subapps/admin/admin.js @@ -1,7 +1,13 @@ define(function(require) { - var angular = require('angular'); + var ng = require('angular'); + require('../../providers/pagination/pagination'); - var admin = angular.module('admin', ['ngResource']); + var adminDependencies = [ + 'ngResource', + 'pagination' + ]; + + var admin = ng.module('admin', adminDependencies); // Categories var categoriesResource = require('./categories/resources/categories'); @@ -23,5 +29,9 @@ define(function(require) { var preferencesCtrl = require('./preferences/controllers/preferences'); admin.controller('preferencesCtrl', preferencesCtrl); + // Users + var usersCtrl = require('./users/controllers/users'); + admin.controller('usersCtrl', usersCtrl); + return admin; }); http://git-wip-us.apache.org/repos/asf/rave/blob/ad6b1d84/rave-portal-ng/src/subapps/admin/users/controllers/users.js ---------------------------------------------------------------------- diff --git a/rave-portal-ng/src/subapps/admin/users/controllers/users.js b/rave-portal-ng/src/subapps/admin/users/controllers/users.js new file mode 100644 index 0000000..668ed14 --- /dev/null +++ b/rave-portal-ng/src/subapps/admin/users/controllers/users.js @@ -0,0 +1,31 @@ +define(function(require) { + return ['$scope', '$stateParams', 'pagination', + function($scope, $stateParams, pagination) { + + $scope.currentPage = +$stateParams.page || 0; + + // How many items to show per page + $scope.itemsPerPage = 10; + + // Some fake users for us to display. + $scope.users = []; + $scope.users.push({},{},{},{},{},{},{},{},{},{},{}); + + // Our total number of users. + $scope.totalUsers = 1000; + + // The generated pageCount. + $scope.pageCount = Math.ceil($scope.totalUsers / $scope.itemsPerPage); + + // Our paginationPages + $scope.paginationPages = pagination.paginationPages; + + $scope.prevPageDisabled = function() { + return $scope.currentPage === 1 ? 'disabled' : ''; + }; + + $scope.nextPageDisabled = function() { + return $scope.currentPage === $scope.pageCount ? 'disabled' : ''; + }; + }]; +}); http://git-wip-us.apache.org/repos/asf/rave/blob/ad6b1d84/rave-portal-ng/src/subapps/admin/users/routes.js ---------------------------------------------------------------------- diff --git a/rave-portal-ng/src/subapps/admin/users/routes.js b/rave-portal-ng/src/subapps/admin/users/routes.js index 2332231..947f508 100644 --- a/rave-portal-ng/src/subapps/admin/users/routes.js +++ b/rave-portal-ng/src/subapps/admin/users/routes.js @@ -7,34 +7,9 @@ define(function(require) { function($stateProvider, $urlRouterProvider) { $stateProvider .state('portal.admin.users', { - url: '/users', + url: '/users?page', templateUrl: '/subapps/admin/users/users.html', - authenticate: true, - controller: ['$scope', function($scope) { - $scope.currentPage = 0; - $scope.listSize = 5; - $scope.firstItem = function() { - return $scope.currentPage * $scope.listSize + 1; - }; - $scope.lastItem = function() { - return $scope.firstItem() + $scope.listSize - 1; - }; - $scope.numberOfPages = function() { - return Math.ceil( $scope.users.length / $scope.listSize ); - }; - $scope.users = [ - {name:'Jmeas', id:28}, - {name:'Carl', id:29}, - {name:'M.Franklin', id:30}, - {name:'Beth', id:31}, - {name:'Greg', id:31}, - {name:'Boaz', id:31}, - {name:'Tkellen', id:31}, - {name:'Obama', id:31}, - {name:'Santa', id:31}, - {name:'The Captain', id:31} - ]; - }] + authenticate: true }) .state('portal.admin.users.detail', { url: '/users/detail-:id', http://git-wip-us.apache.org/repos/asf/rave/blob/ad6b1d84/rave-portal-ng/src/subapps/admin/users/users.html ---------------------------------------------------------------------- diff --git a/rave-portal-ng/src/subapps/admin/users/users.html b/rave-portal-ng/src/subapps/admin/users/users.html index 7454ebb..c750200 100644 --- a/rave-portal-ng/src/subapps/admin/users/users.html +++ b/rave-portal-ng/src/subapps/admin/users/users.html @@ -1,52 +1,62 @@ <article ui-view> - <h2> - Showing {{ firstItem() }} - {{ lastItem() }} of {{ users.length }} results - </h2> - <div class="searchHeading paginationHeading"> - <div class="pagination"> + <div ng-controller="usersCtrl"> + <h2> + Showing {{ firstItem() }} - {{ lastItem() }} of {{ users.length }} results + </h2> + <div class="searchHeading paginationHeading"> + <div class="pagination"> <ul> - <li class="active"><a href="#">1</a></li> - <li><a href="?offset=10&referringPageId=1">2</a></li> - <li><a href="?offset=20&referringPageId=1">3</a></li> - <li><a href="?offset=10&referringPageId=1">></a></li> + <li ng-class="prevPageDisabled()"> + <a ui-sref="portal.admin.users({page:currentPage-1})"><</a> + </li> + <li ng-repeat="n in paginationPages(currentPage, pageCount)" ng-class="{ active: n == currentPage }"> + <a ui-sref="portal.admin.users({page:n})">{{ n }}</a> + </li> + <li ng-class="nextPageDisabled()"> + <a ui-sref="portal.admin.users({page:currentPage+1})">></a> + </li> </ul> </div> - <form class="form-horizontal search-form" action="/portal/app/admin/users/search" method="get"> - <fieldset> - <div class="input-append"> - <input class="input-medium" type="search" id="searchTerm" name="searchTerm" value="" placeholder="Search Users"> - <button class="btn btn-primary" type="submit" value="Search">Search</button> - </div> - </fieldset> - </form> - </div> - <table class="table table-striped table-bordered table-condensed"> - <thead> - <tr> - <th>Username</th> - <th>Email</th> - <th>Account Enabled</th> - </tr> - </thead> - <tbody> - <tr ng-repeat="user in users | startFrom:currentPage*listSize | limitTo:listSize"> - <td> - <a ui-sref="portal.admin.users.detail({id: {{ user.id }}})"> - {{ user.name }} - </a> - </td> - <td>OpenSocial</td> - <td>published</td> - </tr> - </tbody> - </table> - <div class="pagination"> + <form class="form-horizontal search-form" action="/portal/app/admin/users/search" method="get"> + <fieldset> + <div class="input-append"> + <input class="input-medium" type="search" id="searchTerm" name="searchTerm" value="" placeholder="Search Users"> + <button class="btn btn-primary" type="submit" value="Search">Search</button> + </div> + </fieldset> + </form> + </div> + <table class="table table-striped table-bordered table-condensed"> + <thead> + <tr> + <th>Username</th> + <th>Email</th> + <th>Account Enabled</th> + </tr> + </thead> + <tbody> + <tr ng-repeat="user in users"> + <td> + <a ui-sref="portal.admin.users.detail"> + Username + </a> + </td> + <td>OpenSocial</td> + <td>published</td> + </tr> + </tbody> + </table> + <div class="pagination"> <ul> - <li class="active"><a href="#">1</a></li> - <li><a href="?offset=10&referringPageId=1">2</a></li> - <li><a href="?offset=20&referringPageId=1">3</a></li> - <li><a href="?offset=10&referringPageId=1">></a></li> + <li ng-class="prevPageDisabled()"> + <a ui-sref="portal.admin.users({page:currentPage-1})"><</a> + </li> + <li ng-repeat="n in paginationPages(currentPage, pageCount)" ng-class="{ active: n == currentPage }"> + <a ui-sref="portal.admin.users({page:n})">{{ n }}</a> + </li> + <li ng-class="nextPageDisabled()"> + <a ui-sref="portal.admin.users({page:currentPage+1})">></a> + </li> </ul> </div> - </article>
