blob: b7b17019697af985f86809f44cc4a774e2d5909f [file] [log] [blame]
Matteo Scandolocc6954e2016-04-15 12:20:14 -07001/**
2 * © OpenCORD
3 *
4 * Visit http://guide.xosproject.org/devguide/addview/ for more information
5 *
6 * Created by teone on 4/15/16.
7 */
8
9(function () {
10 'use strict';
11
12 angular.module('xos.uiComponents')
Matteo Scandoloe15a8202016-04-15 14:27:54 -070013
14 /**
15 * @ngdoc directive
16 * @name xos.uiComponents.directive:xosPagination
17 * @restrict E
18 * @description The xos-table directive
19 * @param {Number} pageSize Number of elements per page
20 * @param {Number} totalElements Number of total elements in the collection
21 * @param {Function} change The callback to be triggered on page change.
22 * * @element ANY
23 * @scope
24 * @example
25 <example module="samplePagination">
26 <file name="index.html">
27 <div ng-controller="SampleCtrl1 as vm">
28 <xos-pagination
29 page-size="vm.pageSize"
30 total-elements="vm.totalElements"
31 change="vm.change">
32 </xos-pagination>
33 </div>
34 </file>
35 <file name="script.js">
36 angular.module('samplePagination', ['xos.uiComponents'])
37 .controller('SampleCtrl1', function(){
38 this.pageSize = 10;
39 this.totalElements = 35;
40 this.change = (pageNumber) => {
41 console.log(pageNumber);
42 }
43 });
44 </file>
45 </example>
46 **/
47
Matteo Scandolocc6954e2016-04-15 12:20:14 -070048 .directive('xosPagination', function(){
49 return {
50 restrict: 'E',
51 scope: {
52 pageSize: '=',
53 totalElements: '=',
54 change: '='
55 },
56 template: `
Matteo Scandolod72d4902016-04-15 13:00:01 -070057 <div class="row" ng-if="vm.pageList.length > 1">
Matteo Scandolocc6954e2016-04-15 12:20:14 -070058 <div class="col-xs-12 text-center">
59 <ul class="pagination">
60 <li
61 ng-click="vm.goToPage(vm.currentPage - 1)"
62 ng-class="{disabled: vm.currentPage == 0}">
63 <a href="" aria-label="Previous">
64 <span aria-hidden="true">&laquo;</span>
65 </a>
66 </li>
67 <li ng-repeat="i in vm.pageList" ng-class="{active: i === vm.currentPage}">
68 <a href="" ng-click="vm.goToPage(i)">{{i + 1}}</a>
69 </li>
70 <li
71 ng-click="vm.goToPage(vm.currentPage + 1)"
72 ng-class="{disabled: vm.currentPage == vm.pages - 1}">
73 <a href="" aria-label="Next">
74 <span aria-hidden="true">&raquo;</span>
75 </a>
76 </li>
77 </ul>
78 </div>
79 </div>
80 `,
81 bindToController: true,
82 controllerAs: 'vm',
83 controller: function($scope){
84
85 this.currentPage = 0;
86
87 this.goToPage = (n) => {
88 if(n < 0 || n === this.pages){
89 return;
90 }
91 this.currentPage = n;
92 this.change(n);
93 }
94
95 this.createPages = (pages) => {
96 let arr = [];
97 for(var i = 0; i < pages; i++){
98 arr.push(i);
99 }
100 return arr;
101 }
102
103 // watch for data changes
104 $scope.$watch(() => this.totalElements, () => {
105 if(this.totalElements){
Matteo Scandolod72d4902016-04-15 13:00:01 -0700106 this.pages = Math.ceil(this.totalElements / this.pageSize);
Matteo Scandolocc6954e2016-04-15 12:20:14 -0700107 this.pageList = this.createPages(this.pages);
108 }
Matteo Scandolocc6954e2016-04-15 12:20:14 -0700109 });
110 }
111 }
112 })
113 .filter('pagination', function(){
114 return function(input, start) {
115 if(!input || !angular.isArray(input)){
116 return input;
117 }
118 start = parseInt(start, 10);
119 return input.slice(start);
120 };
121 });
122})();