Added pagination component
diff --git a/views/ngXosLib/karma.conf.js b/views/ngXosLib/karma.conf.js
index e3c1cbb..b602d66 100644
--- a/views/ngXosLib/karma.conf.js
+++ b/views/ngXosLib/karma.conf.js
@@ -13,7 +13,7 @@
var files = bowerComponents.concat([
'api/**/*.js',
- 'xosHelpers/src/*.module.js',
+ 'xosHelpers/src/**/*.module.js',
'xosHelpers/src/**/*.js',
'xosHelpers/spec/**/*.test.js'
]);
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/table/pagination.component.js b/views/ngXosLib/xosHelpers/src/ui_components/table/pagination.component.js
new file mode 100644
index 0000000..0f7099b
--- /dev/null
+++ b/views/ngXosLib/xosHelpers/src/ui_components/table/pagination.component.js
@@ -0,0 +1,88 @@
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
+ * Created by teone on 4/15/16.
+ */
+
+(function () {
+ 'use strict';
+
+ angular.module('xos.uiComponents')
+ .directive('xosPagination', function(){
+ return {
+ restrict: 'E',
+ scope: {
+ pageSize: '=',
+ totalElements: '=',
+ change: '='
+ },
+ template: `
+ <div class="row">
+ <div class="col-xs-12 text-center">
+ <ul class="pagination">
+ <li
+ ng-click="vm.goToPage(vm.currentPage - 1)"
+ ng-class="{disabled: vm.currentPage == 0}">
+ <a href="" aria-label="Previous">
+ <span aria-hidden="true">«</span>
+ </a>
+ </li>
+ <li ng-repeat="i in vm.pageList" ng-class="{active: i === vm.currentPage}">
+ <a href="" ng-click="vm.goToPage(i)">{{i + 1}}</a>
+ </li>
+ <li
+ ng-click="vm.goToPage(vm.currentPage + 1)"
+ ng-class="{disabled: vm.currentPage == vm.pages - 1}">
+ <a href="" aria-label="Next">
+ <span aria-hidden="true">»</span>
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ `,
+ bindToController: true,
+ controllerAs: 'vm',
+ controller: function($scope){
+
+ this.currentPage = 0;
+
+ this.goToPage = (n) => {
+ if(n < 0 || n === this.pages){
+ return;
+ }
+ this.currentPage = n;
+ this.change(n);
+ }
+
+ this.createPages = (pages) => {
+ let arr = [];
+ for(var i = 0; i < pages; i++){
+ arr.push(i);
+ }
+ return arr;
+ }
+
+ // watch for data changes
+ $scope.$watch(() => this.totalElements, () => {
+ if(this.totalElements){
+ this.pages = Math.round(this.totalElements / this.pageSize);
+ this.pageList = this.createPages(this.pages);
+ }
+ // scope.getPages();
+ });
+ }
+ }
+ })
+ .filter('pagination', function(){
+ return function(input, start) {
+ if(!input || !angular.isArray(input)){
+ return input;
+ }
+ start = parseInt(start, 10);
+ return input.slice(start);
+ };
+ });
+})();
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js b/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js
index 3a75464..f5c77ed 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js
@@ -15,7 +15,7 @@
* @description A table component
**/
- angular.module('xos.uiComponents.table', [])
+ angular.module('xos.uiComponents')
/**
* @ngdoc directive
@@ -186,7 +186,7 @@
</tr>
</tbody>
<tbody>
- <tr ng-repeat="item in vm.data | filter:vm.query | orderBy:vm.orderBy:vm.reverse">
+ <tr ng-repeat="item in vm.data | filter:vm.query | orderBy:vm.orderBy:vm.reverse | pagination:vm.currentPage * vm.config.pagination.pageSize | limitTo: vm.config.pagination.pageSize track by $index">
<td ng-repeat="col in vm.columns">{{item[col.prop]}}</td>
<td ng-if="vm.config.actions">
<a href=""
@@ -201,6 +201,12 @@
</tr>
</tbody>
</table>
+ <xos-pagination
+ ng-if="vm.config.pagination"
+ page-size="vm.config.pagination.pageSize"
+ total-elements="vm.data.length"
+ change="vm.goToPage">
+ </xos-pagination>
`,
bindToController: true,
controllerAs: 'vm',
@@ -218,7 +224,13 @@
this.classes = this.config.classes || 'table table-striped table-bordered';
if(this.config.actions){
-
+ // TODO validate action format
+ }
+ if(this.config.pagination){
+ this.currentPage = 0;
+ this.goToPage = (n) => {
+ this.currentPage = n;
+ };
}
}
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js b/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
index fd08421..9cfab06 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
@@ -17,6 +17,5 @@
**/
angular.module('xos.uiComponents', [
- 'xos.uiComponents.table'
])
})();
diff --git a/views/ngXosViews/sampleView/src/js/main.js b/views/ngXosViews/sampleView/src/js/main.js
index 90374ab..e2e367d 100644
--- a/views/ngXosViews/sampleView/src/js/main.js
+++ b/views/ngXosViews/sampleView/src/js/main.js
@@ -53,13 +53,16 @@
}
],
filter: 'field',
- order: true
+ order: true,
+ pagination: {
+ pageSize: 3
+ }
};
// retrieving user list
Users.query().$promise
.then((users) => {
- this.users = users;
+ this.users = users.concat(users, users, users);
})
.catch((e) => {
throw new Error(e);