Added test for pagination and addad info to table if no data are passed in
diff --git a/views/ngXosLib/xosHelpers/spec/ui/table.test.js b/views/ngXosLib/xosHelpers/spec/ui/table.test.js
index 0b7fffb..50a5d72 100644
--- a/views/ngXosLib/xosHelpers/spec/ui/table.test.js
+++ b/views/ngXosLib/xosHelpers/spec/ui/table.test.js
@@ -78,6 +78,19 @@
expect(tr.length).toEqual(3);
});
+ describe('when no data are provided', () => {
+ beforeEach(() => {
+ isolatedScope.data = [];
+ scope.$digest();
+ });
+ it('should render an alert', () => {
+ let alert = element[0].getElementsByClassName('alert');
+ let table = element[0].getElementsByTagName('table');
+ expect(alert.length).toEqual(1);
+ expect(table.length).toEqual(1);
+ });
+ });
+
describe('when actions are passed', () => {
let cb = jasmine.createSpy('callback')
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/table/pagination.component.js b/views/ngXosLib/xosHelpers/src/ui_components/table/pagination.component.js
index bcf56ea..6266303 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/table/pagination.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/table/pagination.component.js
@@ -10,6 +10,41 @@
'use strict';
angular.module('xos.uiComponents')
+
+ /**
+ * @ngdoc directive
+ * @name xos.uiComponents.directive:xosPagination
+ * @restrict E
+ * @description The xos-table directive
+ * @param {Number} pageSize Number of elements per page
+ * @param {Number} totalElements Number of total elements in the collection
+ * @param {Function} change The callback to be triggered on page change.
+ * * @element ANY
+ * @scope
+ * @example
+ <example module="samplePagination">
+ <file name="index.html">
+ <div ng-controller="SampleCtrl1 as vm">
+ <xos-pagination
+ page-size="vm.pageSize"
+ total-elements="vm.totalElements"
+ change="vm.change">
+ </xos-pagination>
+ </div>
+ </file>
+ <file name="script.js">
+ angular.module('samplePagination', ['xos.uiComponents'])
+ .controller('SampleCtrl1', function(){
+ this.pageSize = 10;
+ this.totalElements = 35;
+ this.change = (pageNumber) => {
+ console.log(pageNumber);
+ }
+ });
+ </file>
+ </example>
+ **/
+
.directive('xosPagination', function(){
return {
restrict: 'E',
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 f5c77ed..daca484 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js
@@ -9,17 +9,11 @@
(function () {
'use strict';
- /**
- * @ngdoc overview
- * @name xos.uiComponents.table
- * @description A table component
- **/
-
angular.module('xos.uiComponents')
/**
* @ngdoc directive
- * @name xos.uiComponents.table.directive:xosTable
+ * @name xos.uiComponents.directive:xosTable
* @restrict E
* @description The xos-table directive
* @param {Object} config The configuration for the component.
@@ -51,14 +45,14 @@
* @scope
* @example
- <example module="sampleModule1">
+ <example module="sampleTable1">
<file name="index.html">
<div ng-controller="SampleCtrl1 as vm">
<xos-table data="vm.data" config="vm.config"></xos-table>
</div>
</file>
<file name="script.js">
- angular.module('sampleModule1', ['xos.uiComponents.table'])
+ angular.module('sampleTable1', ['xos.uiComponents'])
.controller('SampleCtrl1', function(){
this.config = {
columns: [
@@ -87,14 +81,14 @@
</file>
</example>
- <example module="sampleModule2">
+ <example module="sampleTable2">
<file name="index.html">
<div ng-controller="SampleCtrl2 as vm">
<xos-table data="vm.data" config="vm.config"></xos-table>
</div>
</file>
<file name="script.js">
- angular.module('sampleModule2', ['xos.uiComponents.table'])
+ angular.module('sampleTable2', ['xos.uiComponents'])
.controller('SampleCtrl2', function(){
this.config = {
columns: [
@@ -136,6 +130,52 @@
</file>
</example>
+ <example module="sampleTable3">
+ <file name="index.html">
+ <div ng-controller="SampleCtrl3 as vm">
+ <xos-table data="vm.data" config="vm.config"></xos-table>
+ </div>
+ </file>
+ <file name="script.js">
+ angular.module('sampleTable3', ['xos.uiComponents'])
+ .controller('SampleCtrl3', function(){
+ this.config = {
+ columns: [
+ {
+ label: 'First Name', // column title
+ prop: 'name' // property to read in the data array
+ },
+ {
+ label: 'Last Name',
+ prop: 'lastname'
+ }
+ ],
+ pagination: {
+ pageSize: 2
+ }
+ };
+
+ this.data = [
+ {
+ name: 'John',
+ lastname: 'Doe'
+ },
+ {
+ name: 'Gili',
+ lastname: 'Fereydoun'
+ },
+ {
+ name: 'Lucky',
+ lastname: 'Clarkson'
+ },
+ {
+ name: 'Tate',
+ lastname: 'Spalding'
+ }
+ ]
+ });
+ </file>
+ </example>
**/
.directive('xosTable', function(){
@@ -146,67 +186,73 @@
config: '='
},
template: `
- <!-- <pre>{{vm.data | json}}</pre> -->
- <div class="row" ng-if="vm.config.filter == 'fulltext'">
- <div class="col-xs-12">
- <input
- class="form-control"
- placeholder="Type to search.."
- type="text"
- ng-model="vm.query"/>
+ <div ng-show="vm.data.length > 0">
+ <div class="row" ng-if="vm.config.filter == 'fulltext'">
+ <div class="col-xs-12">
+ <input
+ class="form-control"
+ placeholder="Type to search.."
+ type="text"
+ ng-model="vm.query"/>
+ </div>
+ </div>
+ <table ng-class="vm.classes" ng-show="vm.data.length > 0">
+ <thead>
+ <tr>
+ <th ng-repeat="col in vm.columns">
+ {{col.label}}
+ <span ng-if="vm.config.order">
+ <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = false">
+ <i class="glyphicon glyphicon-chevron-up"></i>
+ </a>
+ <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = true">
+ <i class="glyphicon glyphicon-chevron-down"></i>
+ </a>
+ </span>
+ </th>
+ <th ng-if="vm.config.actions">Actions</th>
+ </tr>
+ </thead>
+ <tbody ng-if="vm.config.filter == 'field'">
+ <tr>
+ <td ng-repeat="col in vm.columns">
+ <input
+ class="form-control"
+ placeholder="Type to search by {{col.label}}"
+ type="text"
+ ng-model="vm.query[col.prop]"/>
+ </td>
+ <td ng-if="vm.config.actions"></td>
+ </tr>
+ </tbody>
+ <tbody>
+ <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 || vm.data.length) track by $index">
+ <td ng-repeat="col in vm.columns">{{item[col.prop]}}</td>
+ <td ng-if="vm.config.actions">
+ <a href=""
+ ng-repeat="action in vm.config.actions"
+ ng-click="action.cb(item)"
+ title="{{action.label}}">
+ <i
+ class="glyphicon glyphicon-{{action.icon}}"
+ style="color: {{action.color}};"></i>
+ </a>
+ </td>
+ </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>
+ </div>
+ <div ng-show="vm.data.length == 0 || !vm.data">
+ <div class="alert alert-info">
+ No data to show.
</div>
</div>
- <table ng-class="vm.classes" ng-show="vm.data.length > 0">
- <thead>
- <tr>
- <th ng-repeat="col in vm.columns">
- {{col.label}}
- <span ng-if="vm.config.order">
- <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = false">
- <i class="glyphicon glyphicon-chevron-up"></i>
- </a>
- <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = true">
- <i class="glyphicon glyphicon-chevron-down"></i>
- </a>
- </span>
- </th>
- <th ng-if="vm.config.actions">Actions</th>
- </tr>
- </thead>
- <tbody ng-if="vm.config.filter == 'field'">
- <tr>
- <td ng-repeat="col in vm.columns">
- <input
- class="form-control"
- placeholder="Type to search by {{col.label}}"
- type="text"
- ng-model="vm.query[col.prop]"/>
- </td>
- <td ng-if="vm.config.actions"></td>
- </tr>
- </tbody>
- <tbody>
- <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=""
- ng-repeat="action in vm.config.actions"
- ng-click="action.cb(item)"
- title="{{action.label}}">
- <i
- class="glyphicon glyphicon-{{action.icon}}"
- style="color: {{action.color}};"></i>
- </a>
- </td>
- </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',
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 9cfab06..bd07908 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
@@ -13,7 +13,6 @@
* @ngdoc overview
* @name xos.uiComponents
* @description A collection of UI components useful for Dashboard development
- * @requires xos.uiComponents.table
**/
angular.module('xos.uiComponents', [
diff --git a/views/ngXosViews/sampleView/src/js/main.js b/views/ngXosViews/sampleView/src/js/main.js
index 222882b..798cb0e 100644
--- a/views/ngXosViews/sampleView/src/js/main.js
+++ b/views/ngXosViews/sampleView/src/js/main.js
@@ -54,15 +54,15 @@
],
filter: 'field',
order: true,
- pagination: {
- pageSize: 6
- }
+ // pagination: {
+ // pageSize: 6
+ // }
};
// retrieving user list
Users.query().$promise
.then((users) => {
- this.users = users.concat(users, users, users);
+ this.users = users;
})
.catch((e) => {
throw new Error(e);