Skip to content

Commit

Permalink
Fix #4: Finalise pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
@Wtower
Wtower committed Dec 18, 2016
1 parent 0ce5a7a commit 736b5b5
Show file tree
Hide file tree
Showing 4 changed files with 139 additions and 37 deletions.
9 changes: 6 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ Easily create an administration interface using Angular components
that are based on the markup by [Gentelella](https://github.com/puikinsh/gentelella)
bootstrap template.

![Gentelella Bootstrap Admin Template](https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/gentelella-admin-template-preview.jpg "Gentelella Theme Browser Preview")

Features and limitations
------------------------

Expand Down Expand Up @@ -104,10 +106,11 @@ css and js files.

Otherwise, include the `node_modules/ng-gentelella/gentelella` js files in your html or build system (eg gulp).
It is recommended that you include the templates path `node_modules/*ng-gentelella/gentelella/**/*.html` using
[some html2js module]
(http://stackoverflow.com/questions/21103724/angular-directive-templateurl-relative-to-js-file/41140644#41140644).
[some html2js module](http://stackoverflow.com/questions/21103724/angular-directive-templateurl-relative-to-js-file/41140644#41140644).
[Example gulpfile](https://github.com/Wtower/generator-makrina/blob/master/generators/app/templates/gulpfile.js).

Alternatively you can expose the template files as `/ng-gentelella` with
`app.use('/ng-gentelella', express.static(path.join(__dirname, 'node_modules', 'ng-gentelella')));`.
`app.use('/ng-gentelella', express.static(path.join(__dirname, 'node_modules', 'ng-gentelella')));`.

### Develop

Expand Down
102 changes: 83 additions & 19 deletions gentelella/ga-paginate/ga-paginate.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,39 +7,103 @@ angular
.component('gaPaginate', {
templateUrl: 'ng-gentelella/gentelella/ga-paginate/ga-paginate.template.html',
bindings: {
paginateList: '<',
paginateLimit: '=',
paginateSkip: '=',
paginateId: '@'
paginateId: '@', // a unique html id
paginatePage: '=', // current page number
paginateSize: '=', // current page size
paginateInitialSize: '<', // initial page size
paginateSizes: '<', // an array of page sizes
paginateCount: '<', // total number of records
paginateEllipsis: '@', // number of pages to show if too many
onPaginate: '&' // call on page change to fetch data
},
transclude: true,
controller: [
/**
* Paginate controller
*/
function GaPaginateController() {
var self = this;
self.items = '2';

self.range = function (max) {
/**
* Return an array of `len` items used for html ng-repeat range
* @param len
* @returns {Array}
*/
self.range = function (len) {
var range = [];
for (var i = 0; i < max; i++) range.push(i);
for (var i = 0; i < len; i++) range.push(i);
return range;
};

self.paginate = function (page) {
self.page = page || self.page || 1;
self.pages = Math.ceil(self.paginateList.length / self.items);
if (self.page < 1) self.page = 1;
if (self.page > self.pages) self.page = self.pages;
self.to = Math.min(self.page * self.items, self.paginateList.length);
self.from = (self.page * self.items) - self.items;
self.paginateLimit = self.items;
self.paginateSkip = self.from;
/**
* Initialize controller default values
*/
self.$onInit = function () {
// distinguish because initial may need to be provided in parent by a third variable
self.paginateSize = self.paginateInitialSize;
self.paginateSizes = self.paginateSizes || [10, 25, 50, 100];
self.paginatePage = self.paginatePage || 1;
self.itemIdx = 0;
self.paginateEllipsis = self.paginateEllipsis || 5;
};

self.paginate();

/**
* Re-calculate pagination on size or value change
*/
self.rePaginate = function () {
self.paginate(Math.ceil(self.from / self.items));
self.pages = Math.ceil(self.paginateCount / self.paginateSize);
self.paginate(Math.ceil(self.itemIdx / self.paginateSize), true);
};

/**
* Because initialization happens before data is fetched and angular fails to detect the changes
* Keep a previous value to skip calculations if no change
*/
self.$doCheck = function () {
if (self.previousCount != self.paginateCount) {
self.previousCount = self.paginateCount;
self.paginateEllipsis = parseInt(self.paginateEllipsis);
self.rePaginate();
}
};

/**
* Go to page
* @param page
* @param dataRefresh
*/
self.paginate = function (page, dataRefresh) {
if (page < 1) page = 1;
if (page > self.pages) page = self.pages;
self.itemIdx = (page - 1) * self.paginateSize;
if (!dataRefresh && page == self.paginatePage) return;
self.paginatePage = page;
self.focus('reset');
self.onPaginate({
paginator: {
page: self.paginatePage,
page_size: self.paginateSize
}
});
};

/**
* Set low and high page numbers to show around current page with an ellipsis
* @param direction
*/
self.focus = function (direction) {
if (direction == 'reset') {
self.lowEllipsis = Math.max(self.paginatePage - Math.floor(self.paginateEllipsis / 2), 1);
self.lowEllipsis = Math.min(self.lowEllipsis, Math.max(self.pages - self.paginateEllipsis, 1));
}
else if (direction == 'left') {
self.lowEllipsis = Math.max(self.lowEllipsis - self.paginateEllipsis, 1);
}
else if (direction == 'right') {
self.lowEllipsis = Math.min(self.lowEllipsis + self.paginateEllipsis, self.pages - self.paginateEllipsis);
}
}

}
]
});
64 changes: 49 additions & 15 deletions gentelella/ga-paginate/ga-paginate.template.html
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,48 @@
<div class="row" xng-hide="$ctrl.paginateList.length < $ctrl.items">
<div class="row" ng-hide="$ctrl.paginateSize > $ctrl.paginateCount">
<div class="pull-left">
<div class="dataTables_info" role="status" aria-live="polite">
<label for="paginate-{{ $ctrl.paginateId }}">
Showing {{ $ctrl.from + 1 }} to {{ $ctrl.to }} of {{ $ctrl.paginateList.length }} entries | show
{{ $ctrl.itemIdx + 1 }} to {{ $ctrl.itemIdx + $ctrl.paginateSize }} of {{ $ctrl.paginateCount }} |&nbsp;
</label>
<select id="paginate-{{ $ctrl.paginateId }}"
aria-controls="datatable"
class="input-xs"
ng-change="$ctrl.rePaginate()"
ng-model="$ctrl.items">
<option value="2">2</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
ng-model="$ctrl.paginateSize"
ng-options="item for item in $ctrl.paginateSizes">
</select>&nbsp;
<span ng-transclude></span>
</div>
</div>
<div class="pull-right">
<div class="dataTables_paginate paging_simple_numbers">
<ul class="pagination">
<li class="paginate_button previous" ng-class="{disabled: $ctrl.page == 1}">
<a href="" aria-controls="datatable" data-dt-idx="0" tabindex="0" ng-click="$ctrl.paginate($ctrl.page - 1)">Previous</a>
<li class="paginate_button previous" ng-class="{disabled: $ctrl.paginatePage == 1}">
<a href=""
aria-controls="datatable"
data-dt-idx="0"
tabindex="0"
ng-click="$ctrl.paginate(1)">First</a>
</li>
<li class="paginate_button" ng-class="{disabled: $ctrl.paginatePage == 1}">
<a href=""
aria-controls="datatable"
data-dt-idx="0"
tabindex="0"
ng-click="$ctrl.paginate($ctrl.paginatePage - 1)">Previous</a>
</li>
<li class="paginate_button">
<a href=""
aria-controls="datatable"
data-dt-idx="0"
tabindex="0"
ng-show="$ctrl.lowEllipsis > 1"
ng-click="$ctrl.focus('left')">...</a>
</li>
<li class="paginate_button"
ng-repeat="page in $ctrl.range($ctrl.pages)"
ng-class="{active: $ctrl.page == $index + 1}">
ng-show="$ctrl.lowEllipsis <= $index + 1 && $index + 1 < $ctrl.lowEllipsis + $ctrl.paginateEllipsis"
ng-class="{active: $ctrl.paginatePage == $index + 1}">
<a href=""
aria-controls="datatable"
ng-click="$ctrl.paginate($index + 1)"
Expand All @@ -36,8 +51,27 @@
{{ $index + 1 }}
</a>
</li>
<li class="paginate_button next" ng-class="{disabled: $ctrl.page == $ctrl.pages}">
<a href="" aria-controls="datatable" data-dt-idx="{{ $ctrl.pages + 1 }}" tabindex="{{ $ctrl.pages + 1 }}" ng-click="$ctrl.paginate($ctrl.page + 1)">Next</a>
<li class="paginate_button">
<a href=""
aria-controls="datatable"
data-dt-idx="0"
tabindex="0"
ng-show="$ctrl.lowEllipsis < $ctrl.pages - $ctrl.paginateEllipsis"
ng-click="$ctrl.focus('right')">...</a>
</li>
<li class="paginate_button" ng-class="{disabled: $ctrl.paginatePage == $ctrl.pages}">
<a href=""
aria-controls="datatable"
data-dt-idx="{{ $ctrl.pages + 1 }}"
tabindex="{{ $ctrl.pages + 1 }}"
ng-click="$ctrl.paginate($ctrl.paginatePage + 1)">Next</a>
</li>
<li class="paginate_button next" ng-class="{disabled: $ctrl.paginatePage == $ctrl.pages}">
<a href=""
aria-controls="datatable"
data-dt-idx="{{ $ctrl.pages + 1 }}"
tabindex="{{ $ctrl.pages + 1 }}"
ng-click="$ctrl.paginate($ctrl.paginateCount)">Last</a>
</li>
</ul>
</div>
Expand Down
1 change: 1 addition & 0 deletions gentelella/ga-resource/ga-resource.service.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ angular
return resource.get(options.getId, function(data) {
if (options.callbacks) options.callbacks.next();
}, function(error) {
console.log(error);
$location.path(options.url);
new PNotify({
title: options.error404.title,
Expand Down

0 comments on commit 736b5b5

Please sign in to comment.