Merge pull request #2013 from w33ble/page-table
Paginated table directive
This commit is contained in:
Lukas Olson
commit
c6a3313f67
|
|
@ -1,33 +1,8 @@
|
|||
<paginate
|
||||
<paginated-table
|
||||
ng-if="formattedRows.length"
|
||||
|
||||
list="formattedRows"
|
||||
per-page-prop="perPage"
|
||||
|
||||
class="agg-table">
|
||||
<div class="agg-table-paginated">
|
||||
<table class="table table-condensed">
|
||||
<thead>
|
||||
<tr bindonce>
|
||||
<th
|
||||
ng-repeat="col in table.columns"
|
||||
ng-click="aggTable.cycleSort(col)"
|
||||
ng-class="aggTable.getColumnClass(col, $first, $last)">
|
||||
<span bo-text="col.title"></span>
|
||||
<i
|
||||
class="fa"
|
||||
ng-class="{
|
||||
'fa-sort-asc': aggTable.sort.col === col && aggTable.sort.asc,
|
||||
'fa-sort-desc': aggTable.sort.col === col && !aggTable.sort.asc,
|
||||
'fa-sort': !aggTable.sort || aggTable.sort.col !== col
|
||||
}">
|
||||
</i>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody kbn-rows="page" kbn-rows-min="perPage"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
rows="formattedRows"
|
||||
columns="formattedColumns"
|
||||
per-page="perPage">
|
||||
|
||||
<div class="agg-table-controls">
|
||||
<a class="small" ng-click="aggTable.exportAsCsv()">
|
||||
|
|
@ -35,4 +10,4 @@
|
|||
</a>
|
||||
<paginate-controls></paginate-controls>
|
||||
</div>
|
||||
</paginate>
|
||||
</paginated-table>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
define(function (require) {
|
||||
require('components/paginated_table/paginated_table');
|
||||
require('services/compile_recursive_directive');
|
||||
require('css!components/agg_table/agg_table.css');
|
||||
|
||||
|
|
@ -7,7 +8,6 @@ define(function (require) {
|
|||
.directive('kbnAggTable', function ($filter, config, Private, compileRecursiveDirective) {
|
||||
var _ = require('lodash');
|
||||
|
||||
var tabifyAggResponse = Private(require('components/agg_response/tabify/tabify'));
|
||||
var orderBy = $filter('orderBy');
|
||||
|
||||
return {
|
||||
|
|
@ -33,42 +33,6 @@ define(function (require) {
|
|||
quoteValues: config.get('csv:quoteValues')
|
||||
};
|
||||
|
||||
self.getColumnClass = function (col, $first, $last) {
|
||||
var cls = [];
|
||||
var agg = $scope.table.aggConfig(col);
|
||||
|
||||
if ($last || (agg.schema.group === 'metrics')) {
|
||||
cls.push('visualize-table-right');
|
||||
}
|
||||
|
||||
if (!self.sort || self.sort.field !== col) {
|
||||
cls.push('no-sort');
|
||||
}
|
||||
|
||||
return cls.join(' ');
|
||||
};
|
||||
|
||||
self.cycleSort = function (col) {
|
||||
if (!self.sort || self.sort.col !== col) {
|
||||
self.sort = {
|
||||
col: col,
|
||||
asc: true
|
||||
};
|
||||
} else if (self.sort.asc) {
|
||||
self.sort.asc = false;
|
||||
} else {
|
||||
self.sort = null;
|
||||
}
|
||||
|
||||
if (self.sort && !self.sort.getter) {
|
||||
var colI = $scope.table.columns.indexOf(self.sort.col);
|
||||
self.sort.getter = function (row) {
|
||||
return row[colI];
|
||||
};
|
||||
if (colI === -1) self.sort = null;
|
||||
}
|
||||
};
|
||||
|
||||
self.exportAsCsv = function () {
|
||||
var csv = new Blob([self.toCsv()], { type: 'text/plain' });
|
||||
self._saveAs(csv, self.csv.filename);
|
||||
|
|
@ -104,31 +68,43 @@ define(function (require) {
|
|||
}).join('');
|
||||
};
|
||||
|
||||
$scope.$watchMulti([
|
||||
'table',
|
||||
'aggTable.sort.asc',
|
||||
'aggTable.sort.col'
|
||||
], function () {
|
||||
$scope.$watch('table', function () {
|
||||
var table = $scope.table;
|
||||
|
||||
if (!table) {
|
||||
$scope.formattedRows = null;
|
||||
$scope.formattedColumns = null;
|
||||
return;
|
||||
}
|
||||
|
||||
setFormattedRows(table);
|
||||
setFormattedColumns(table);
|
||||
});
|
||||
|
||||
function setFormattedColumns(table) {
|
||||
$scope.formattedColumns = table.columns.map(function (col, i) {
|
||||
var formattedColumn = {
|
||||
title: col.title
|
||||
};
|
||||
|
||||
var agg = $scope.table.aggConfig(col);
|
||||
var last = i === (table.columns.length - 1);
|
||||
|
||||
if (last || (agg.schema.group === 'metrics')) {
|
||||
formattedColumn.class = 'visualize-table-right';
|
||||
}
|
||||
|
||||
return formattedColumn;
|
||||
});
|
||||
}
|
||||
|
||||
function setFormattedRows(table) {
|
||||
var formatters = table.columns.map(function (col) {
|
||||
return table.fieldFormatter(col);
|
||||
});
|
||||
|
||||
// sort the row values, not formatted
|
||||
if (self.sort) {
|
||||
$scope.formattedRows = orderBy(table.rows, self.sort.getter, !self.sort.asc);
|
||||
} else {
|
||||
$scope.formattedRows = null;
|
||||
}
|
||||
|
||||
// format all row values
|
||||
$scope.formattedRows = ($scope.formattedRows || table.rows).map(function (row) {
|
||||
$scope.formattedRows = (table.rows).map(function (row) {
|
||||
return row.map(function (cell, i) {
|
||||
return formatters[i](cell);
|
||||
});
|
||||
|
|
@ -136,7 +112,7 @@ define(function (require) {
|
|||
|
||||
// update the csv file's title
|
||||
self.csv.filename = (table.title() || 'table') + '.csv';
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
|
|||
34
src/kibana/components/paginated_table/paginated_table.html
Normal file
34
src/kibana/components/paginated_table/paginated_table.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<paginate
|
||||
ng-if="sortedRows.length"
|
||||
list="sortedRows"
|
||||
per-page-prop="perPage"
|
||||
class="agg-table">
|
||||
<div class="agg-table-paginated">
|
||||
<table class="table table-condensed">
|
||||
<thead>
|
||||
<tr bindonce>
|
||||
<th
|
||||
ng-repeat="col in columns"
|
||||
ng-click="paginatedTable.sortColumn(col)"
|
||||
class="{{ col.class }}">
|
||||
<span bo-text="col.title"></span>
|
||||
<i
|
||||
class="fa"
|
||||
ng-class="{
|
||||
'fa-sort-asc': paginatedTable.sort.columnName === col.title && paginatedTable.sort.direction === 'asc',
|
||||
'fa-sort-desc': paginatedTable.sort.columnName === col.title && paginatedTable.sort.direction === 'desc',
|
||||
'fa-sort': paginatedTable.sort.direction === null || paginatedTable.sort.columnName !== col.title
|
||||
}">
|
||||
</i>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody kbn-rows="page" kbn-rows-min="perPage"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- auto-inserted by the paginate directive... -->
|
||||
<!-- <paginate-controls></paginate-controls> -->
|
||||
<div class="pagination-container" ng-transclude></div>
|
||||
|
||||
</paginate>
|
||||
77
src/kibana/components/paginated_table/paginated_table.js
Normal file
77
src/kibana/components/paginated_table/paginated_table.js
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
define(function (require) {
|
||||
require('modules')
|
||||
.get('kibana')
|
||||
.directive('paginatedTable', function ($filter, config, Private) {
|
||||
var _ = require('lodash');
|
||||
var orderBy = $filter('orderBy');
|
||||
|
||||
return {
|
||||
restrict: 'E',
|
||||
template: require('text!components/paginated_table/paginated_table.html'),
|
||||
transclude: true,
|
||||
scope: {
|
||||
rows: '=',
|
||||
columns: '=',
|
||||
perPage: '=?',
|
||||
sortHandler: '=?',
|
||||
showSelector: '=?'
|
||||
},
|
||||
controllerAs: 'paginatedTable',
|
||||
controller: function ($scope) {
|
||||
var self = this;
|
||||
self.sort = {
|
||||
columnName: null,
|
||||
direction: null
|
||||
};
|
||||
|
||||
self.sortColumn = function (col) {
|
||||
var sortDirection;
|
||||
var cols = _.pluck($scope.columns, 'title');
|
||||
var index = cols.indexOf(col.title);
|
||||
|
||||
if (index === -1) return;
|
||||
|
||||
if (self.sort.columnName !== col.title) {
|
||||
sortDirection = 'asc';
|
||||
} else {
|
||||
var directions = {
|
||||
null: 'asc',
|
||||
'asc': 'desc',
|
||||
'desc': null
|
||||
};
|
||||
sortDirection = directions[self.sort.direction];
|
||||
}
|
||||
|
||||
self.sort.columnName = col.title;
|
||||
self.sort.direction = sortDirection;
|
||||
self._setSortGetter(index);
|
||||
};
|
||||
|
||||
self._setSortGetter = function (index) {
|
||||
if (_.isFunction($scope.sortHandler)) {
|
||||
// use custom sort handler
|
||||
self.sort.getter = $scope.sortHandler(index);
|
||||
} else {
|
||||
// use generic sort handler
|
||||
self.sort.getter = function (row) {
|
||||
return row[index];
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// update the sordedRows result
|
||||
$scope.$watchMulti([
|
||||
'paginatedTable.sort.direction',
|
||||
'rows'
|
||||
], function () {
|
||||
if (self.sort.direction == null) {
|
||||
$scope.sortedRows = $scope.rows.slice(0);
|
||||
return;
|
||||
}
|
||||
|
||||
$scope.sortedRows = orderBy($scope.rows, self.sort.getter, self.sort.direction === 'desc');
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
});
|
||||
|
|
@ -17,7 +17,6 @@ define(function (require) {
|
|||
link: function ($scope, $el) {
|
||||
var $container = $el.find('.visualize-spy-container');
|
||||
var fullPageSpy = false;
|
||||
// $scope.spyMode = null; // inherited from the parent
|
||||
$scope.modes = modes;
|
||||
|
||||
$scope.toggleDisplay = function () {
|
||||
|
|
@ -36,38 +35,33 @@ define(function (require) {
|
|||
var current = $scope.spyMode;
|
||||
var change = false;
|
||||
|
||||
function set() {
|
||||
// no change
|
||||
if (current && newMode && newMode.name === current.name) return;
|
||||
|
||||
// clear the current value
|
||||
if (current) {
|
||||
current.$container.remove();
|
||||
current.$scope.$destroy();
|
||||
delete $scope.spyMode;
|
||||
current = null;
|
||||
change = true;
|
||||
}
|
||||
|
||||
// no further changes
|
||||
if (!newMode) return;
|
||||
// no change
|
||||
if (current && newMode && newMode.name === current.name) return;
|
||||
|
||||
// clear the current value
|
||||
if (current) {
|
||||
current.$container.remove();
|
||||
current.$scope.$destroy();
|
||||
delete $scope.spyMode;
|
||||
current = null;
|
||||
change = true;
|
||||
current = $scope.spyMode = {
|
||||
// copy a couple values over
|
||||
name: newMode.name,
|
||||
display: newMode.display,
|
||||
fill: fullPageSpy,
|
||||
$scope: $scope.$new(),
|
||||
$container: $('<div class="visualize-spy-content">').appendTo($container)
|
||||
};
|
||||
|
||||
current.$container.append($compile(newMode.template)(current.$scope));
|
||||
newMode.link && newMode.link(current.$scope, current.$container);
|
||||
}
|
||||
|
||||
// wrapped in fn to enable early return
|
||||
set();
|
||||
// no further changes
|
||||
if (!newMode) return;
|
||||
|
||||
change = true;
|
||||
current = $scope.spyMode = {
|
||||
// copy a couple values over
|
||||
name: newMode.name,
|
||||
display: newMode.display,
|
||||
fill: fullPageSpy,
|
||||
$scope: $scope.$new(),
|
||||
$container: $('<div class="visualize-spy-content">').appendTo($container)
|
||||
};
|
||||
|
||||
current.$container.append($compile(newMode.template)(current.$scope));
|
||||
newMode.link && newMode.link(current.$scope, current.$container);
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ define(function (require) {
|
|||
}
|
||||
|
||||
self.perPage = _.parseInt(self.perPage) || $scope[self.perPageProp];
|
||||
if (!self.perPage) {
|
||||
if (self.perPage == null) {
|
||||
self.perPage = ALL;
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -103,158 +103,6 @@ define(function (require) {
|
|||
});
|
||||
});
|
||||
|
||||
describe('aggTable.cycleSort()', function () {
|
||||
var vis;
|
||||
beforeEach(function () {
|
||||
vis = new Vis(indexPattern, {
|
||||
type: 'table',
|
||||
aggs: [
|
||||
{ type: 'count', schema: 'metric' },
|
||||
{
|
||||
type: 'range',
|
||||
schema: 'bucket',
|
||||
params: {
|
||||
field: 'bytes',
|
||||
ranges: [
|
||||
{ from: 0, to: 1000 },
|
||||
{ from: 1000, to: 2000 }
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
vis.aggs.forEach(function (agg, i) {
|
||||
agg.id = 'agg_' + (i + 1);
|
||||
});
|
||||
});
|
||||
|
||||
function checkAgainst(aggTable, $el, selector) {
|
||||
return function (asc, firstCol) {
|
||||
switch (asc) {
|
||||
case null:
|
||||
expect(aggTable.sort == null).to.be(true);
|
||||
break;
|
||||
case true:
|
||||
case false:
|
||||
expect(aggTable.sort).to.have.property('asc', asc);
|
||||
break;
|
||||
}
|
||||
|
||||
var $leftCol = $el.find(selector || 'tr td:first-child');
|
||||
firstCol.forEach(function (val, i) {
|
||||
expect($leftCol.eq(i).text().trim()).to.be(val);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
it('sorts by the column passed in', function () {
|
||||
$scope.table = tabifyAggResponse(vis, fixtures.oneRangeBucket, { canSplit: false });
|
||||
var $el = $compile('<kbn-agg-table table="table">')($scope);
|
||||
$scope.$digest();
|
||||
|
||||
var sortCol = $scope.table.columns[0];
|
||||
var $tableScope = $el.isolateScope();
|
||||
var aggTable = $tableScope.aggTable;
|
||||
var check = checkAgainst(aggTable, $el);
|
||||
|
||||
// default state
|
||||
check(null, [
|
||||
'0.0-1000.0',
|
||||
'1000.0-2000.0'
|
||||
]);
|
||||
|
||||
// enable accending
|
||||
aggTable.cycleSort(sortCol);
|
||||
$scope.$digest();
|
||||
check(true, [
|
||||
'0.0-1000.0',
|
||||
'1000.0-2000.0'
|
||||
]);
|
||||
|
||||
// enable descending
|
||||
aggTable.cycleSort(sortCol);
|
||||
$scope.$digest();
|
||||
check(false, [
|
||||
'1000.0-2000.0',
|
||||
'0.0-1000.0'
|
||||
]);
|
||||
|
||||
// disable sort
|
||||
aggTable.cycleSort(sortCol);
|
||||
$scope.$digest();
|
||||
check(null, [
|
||||
'0.0-1000.0',
|
||||
'1000.0-2000.0'
|
||||
]);
|
||||
});
|
||||
|
||||
it('sorts new tables by the previous sort rule', function () {
|
||||
$scope.table = tabifyAggResponse(vis, fixtures.oneRangeBucket, { canSplit: false });
|
||||
var $el = $compile('<kbn-agg-table table="table">')($scope);
|
||||
$scope.$digest();
|
||||
|
||||
var sortCol = $scope.table.columns[0];
|
||||
var $tableScope = $el.isolateScope();
|
||||
var aggTable = $tableScope.aggTable;
|
||||
var check = checkAgainst(aggTable, $el);
|
||||
|
||||
// enable accending, then descending
|
||||
aggTable.cycleSort(sortCol);
|
||||
aggTable.cycleSort(sortCol);
|
||||
$scope.$digest();
|
||||
check(false, [
|
||||
'1000.0-2000.0',
|
||||
'0.0-1000.0'
|
||||
]);
|
||||
|
||||
var prevFormattedRows = $tableScope.formattedRows;
|
||||
|
||||
// change the table and trigger the watchers
|
||||
$scope.table = tabifyAggResponse(vis, fixtures.oneRangeBucket, { canSplit: false });
|
||||
$scope.$digest();
|
||||
|
||||
// prove that the rows were recreated
|
||||
expect($tableScope.formattedRows).to.not.be(prevFormattedRows);
|
||||
|
||||
// check that the order is right
|
||||
check(false, [
|
||||
'1000.0-2000.0',
|
||||
'0.0-1000.0'
|
||||
]);
|
||||
});
|
||||
|
||||
it('sorts ascending when switching from another column', function () {
|
||||
$scope.table = tabifyAggResponse(vis, fixtures.oneRangeBucket, { canSplit: false });
|
||||
var $el = $compile('<kbn-agg-table table="table">')($scope);
|
||||
$scope.$digest();
|
||||
|
||||
var $tableScope = $el.isolateScope();
|
||||
var aggTable = $tableScope.aggTable;
|
||||
|
||||
var rangeCol = $scope.table.columns[0];
|
||||
var countCol = $scope.table.columns[1];
|
||||
var checkRange = checkAgainst(aggTable, $el, 'tr td:first-child');
|
||||
var checkCount = checkAgainst(aggTable, $el, 'tr td:last-child');
|
||||
|
||||
// sort count accending
|
||||
aggTable.cycleSort(countCol);
|
||||
$scope.$digest();
|
||||
checkCount(true, [
|
||||
'298',
|
||||
'606'
|
||||
]);
|
||||
|
||||
// switch to sorting range ascending
|
||||
aggTable.cycleSort(rangeCol);
|
||||
$scope.$digest();
|
||||
checkRange(true, [
|
||||
'0.0-1000.0',
|
||||
'1000.0-2000.0'
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('aggTable.toCsv()', function () {
|
||||
it('escapes and formats the rows and columns properly', function () {
|
||||
var $el = $compile('<kbn-agg-table table="table">')($scope);
|
||||
|
|
|
|||
185
test/unit/specs/components/paginated_table/index.js
Normal file
185
test/unit/specs/components/paginated_table/index.js
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
define(function (require) {
|
||||
require('components/paginated_table/paginated_table');
|
||||
var _ = require('lodash');
|
||||
var faker = require('faker');
|
||||
var sinon = require('sinon/sinon');
|
||||
|
||||
describe('paginated table', function () {
|
||||
var $el;
|
||||
var $rootScope;
|
||||
var $compile;
|
||||
var $scope;
|
||||
var $elScope;
|
||||
var $orderBy;
|
||||
var defaultPerPage = 10;
|
||||
|
||||
var makeData = function (colCount, rowCount) {
|
||||
var cols = faker.Lorem.words(colCount).map(function (word) {
|
||||
return { title: word };
|
||||
});
|
||||
var rows = [];
|
||||
_.times(rowCount, function () {
|
||||
rows.push(faker.Lorem.words(colCount));
|
||||
});
|
||||
|
||||
return {
|
||||
columns: cols,
|
||||
rows: rows
|
||||
};
|
||||
};
|
||||
|
||||
var renderTable = function (cols, rows, perPage) {
|
||||
$scope.cols = cols || [];
|
||||
$scope.rows = rows || [];
|
||||
$scope.perPage = perPage || defaultPerPage;
|
||||
|
||||
$el = $compile('<paginated-table columns="cols" rows="rows" per-page="perPage">')($scope);
|
||||
|
||||
$scope.$digest();
|
||||
};
|
||||
|
||||
beforeEach(function () {
|
||||
module('kibana');
|
||||
|
||||
inject(function (_$rootScope_, _$compile_, $filter) {
|
||||
$rootScope = _$rootScope_;
|
||||
$compile = _$compile_;
|
||||
$orderBy = $filter('orderBy');
|
||||
});
|
||||
|
||||
$scope = $rootScope.$new();
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
$scope.$destroy();
|
||||
});
|
||||
|
||||
describe('rendering', function () {
|
||||
it('should not display without rows', function () {
|
||||
var cols = [{
|
||||
title: 'test1'
|
||||
}];
|
||||
var rows = [];
|
||||
|
||||
renderTable(cols, rows);
|
||||
expect($el.children().size()).to.be(0);
|
||||
});
|
||||
|
||||
it('should render columns and rows', function () {
|
||||
var data = makeData(2, 2);
|
||||
var cols = data.columns;
|
||||
var rows = data.rows;
|
||||
|
||||
renderTable(cols, rows);
|
||||
expect($el.children().size()).to.be(1);
|
||||
var tableRows = $el.find('tbody tr');
|
||||
// should pad rows
|
||||
expect(tableRows.size()).to.be(defaultPerPage);
|
||||
// should contain the row data
|
||||
expect(tableRows.eq(0).find('td').eq(0).text()).to.be(rows[0][0]);
|
||||
expect(tableRows.eq(0).find('td').eq(1).text()).to.be(rows[0][1]);
|
||||
expect(tableRows.eq(1).find('td').eq(0).text()).to.be(rows[1][0]);
|
||||
expect(tableRows.eq(1).find('td').eq(1).text()).to.be(rows[1][1]);
|
||||
});
|
||||
|
||||
it('should paginate rows', function () {
|
||||
// note: paginate truncates pages, so don't make too many
|
||||
var rowCount = _.random(16, 24);
|
||||
var perPageCount = _.random(5, 8);
|
||||
var data = makeData(3, rowCount);
|
||||
var pageCount = Math.ceil(rowCount / perPageCount);
|
||||
|
||||
renderTable(data.columns, data.rows, perPageCount);
|
||||
var tableRows = $el.find('tbody tr');
|
||||
expect(tableRows.size()).to.be(perPageCount);
|
||||
// add 2 for the first and last page links
|
||||
expect($el.find('paginate-controls a').size()).to.be(pageCount + 2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('sorting', function () {
|
||||
var data;
|
||||
var lastRowIndex;
|
||||
var paginatedTable;
|
||||
|
||||
beforeEach(function () {
|
||||
data = makeData(3, 3);
|
||||
data.rows.push(['zzzz', 'zzzz', 'zzzz']);
|
||||
data.rows.push(['aaaa', 'aaaa', 'aaaa']);
|
||||
|
||||
lastRowIndex = data.rows.length - 1;
|
||||
renderTable(data.columns, data.rows);
|
||||
paginatedTable = $el.isolateScope().paginatedTable;
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
$scope.$destroy();
|
||||
});
|
||||
|
||||
it('should not sort by default', function () {
|
||||
var tableRows = $el.find('tbody tr');
|
||||
expect(tableRows.eq(0).find('td').eq(0).text()).to.be(data.rows[0][0]);
|
||||
expect(tableRows.eq(lastRowIndex).find('td').eq(0).text()).to.be('aaaa');
|
||||
});
|
||||
|
||||
it('should sort ascending on first invocation', function () {
|
||||
// sortColumn
|
||||
paginatedTable.sortColumn(data.columns[0]);
|
||||
$scope.$digest();
|
||||
var tableRows = $el.find('tbody tr');
|
||||
expect(tableRows.eq(0).find('td').eq(0).text()).to.be('aaaa');
|
||||
expect(tableRows.eq(lastRowIndex).find('td').eq(0).text()).to.be('zzzz');
|
||||
});
|
||||
|
||||
it('should sort desciending on second invocation', function () {
|
||||
// sortColumn
|
||||
paginatedTable.sortColumn(data.columns[0]);
|
||||
paginatedTable.sortColumn(data.columns[0]);
|
||||
$scope.$digest();
|
||||
var tableRows = $el.find('tbody tr');
|
||||
expect(tableRows.eq(0).find('td').eq(0).text()).to.be('zzzz');
|
||||
expect(tableRows.eq(lastRowIndex).find('td').eq(0).text()).to.be('aaaa');
|
||||
});
|
||||
|
||||
it('should clear sorting on third invocation', function () {
|
||||
// sortColumn
|
||||
paginatedTable.sortColumn(data.columns[0]);
|
||||
paginatedTable.sortColumn(data.columns[0]);
|
||||
paginatedTable.sortColumn(data.columns[0]);
|
||||
$scope.$digest();
|
||||
var tableRows = $el.find('tbody tr');
|
||||
expect(tableRows.eq(0).find('td').eq(0).text()).to.be(data.rows[0][0]);
|
||||
expect(tableRows.eq(lastRowIndex).find('td').eq(0).text()).to.be('aaaa');
|
||||
});
|
||||
});
|
||||
|
||||
describe('custom sorting', function () {
|
||||
var data;
|
||||
var paginatedTable;
|
||||
var sortHandler;
|
||||
|
||||
beforeEach(function () {
|
||||
sortHandler = sinon.spy();
|
||||
data = makeData(3, 3);
|
||||
$scope.cols = data.columns;
|
||||
$scope.rows = data.rows;
|
||||
$scope.perPage = defaultPerPage;
|
||||
$scope.sortHandler = sortHandler;
|
||||
|
||||
$el = $compile('<paginated-table columns="cols" rows="rows" per-page="perPage"' +
|
||||
'sort-handler="sortHandler">')($scope);
|
||||
|
||||
$scope.$digest();
|
||||
paginatedTable = $el.isolateScope().paginatedTable;
|
||||
});
|
||||
|
||||
it('should allow custom sorting handler', function () {
|
||||
var columnIndex = 1;
|
||||
paginatedTable.sortColumn(data.columns[columnIndex]);
|
||||
$scope.$digest();
|
||||
expect(sortHandler.callCount).to.be(1);
|
||||
expect(sortHandler.getCall(0).args[0]).to.be(columnIndex);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Reference in a new issue