Skip to content
This repository has been archived by the owner on Jan 7, 2022. It is now read-only.

Added internal paging #51

Merged
merged 7 commits into from
Jan 10, 2017
Merged

Added internal paging #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
76d91e0
Added internal paging
Jan 9, 2017
981e286
Fixed formatting on paging.html
Jan 9, 2017
184d0da
Unit testing for internal paging, sorting
Jan 10, 2017
a6139a1
Merge branch 'master' into internal-paging
bensgroi Jan 10, 2017
4696caf
Fixed broken DataTableController unit tests
Jan 10, 2017
e75443b
tweaks to fit eslint
Jan 10, 2017
6204a5b
One more eslint tweak
Jan 10, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 17 additions & 31 deletions demos/paging.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!doctype html>
<html lang="en">

<head>
<meta charset=" utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Expand Down Expand Up @@ -38,65 +39,50 @@
.dt-row-even{
background:#f6f7f8;
}

</style>
<link href="../dist/dataTable.css" media="all" rel="stylesheet" />
<link href="../dist/themes/material.css" media="all" rel="stylesheet" />
<link href="../dist/themes/icons.css" rel="stylesheet">
</head>
<body ng-app="app" ng-controller="HomeController">

<body ng-app="app" ng-controller="HomeController">

<dtable options="optionz" rows="data" class="material" on-page="paging(offset, size)"></dtable>
<dtable options="options" rows="data" class="material"></dtable>

<script src="../jspm_packages/system.js"></script>
<script src="../config.js"></script>

<script>

System.import('dataTable').then(function(dt){
var module = angular.module('app', [ dt.default.name ]);
System.import('dataTable').then(function (dt) {
var module = angular.module('app', [dt.default.name]);

module.controller('HomeController', function($scope, $http){
$scope.data = []
module.controller('HomeController', function ($scope, $http) {
$scope.data = [];

$scope.optionz = {
$scope.options = {
rowHeight: 50,
headerHeight: 50,
footerHeight: 50,
scrollbarV: false,
sortType: 'single',
columns: [
{ name: "Name", prop: "name" },
{ name: "Gender", prop: "gender" },
{ name: "Company", prop: "company" }
{ name: 'Name', prop: 'name' },
{ name: 'Gender', prop: 'gender' },
{ name: 'Company', prop: 'company' }
],
columnMode: 'force',
paging: {
externalPaging: true,
size: 10
}
};

$scope.paging = function(offset, size){
setTimeout(function(){
$http.get('/demos/data/100.json').success(function(d) {

$scope.optionz.paging.count = d.length;

var set = d.splice(offset, size);
// only insert items i don't already have
set.forEach(function(r, i){
var idx = i + (offset * size);
$scope.data[idx] = r;
});

console.log('paging!', offset, size)
});
}, 200)
};
$http.get('/demos/data/100.json').success(function (d) {
$scope.data = d;
});
});
});
</script>

</body>
</html>

</html>
6 changes: 3 additions & 3 deletions demos/virtual-paging.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,9 @@
headerHeight: 50,
footerHeight: 50,
columns: [
{ name: "Name", prop: "name" },
{ name: "Gender", prop: "gender" },
{ name: "Company", prop: "company" }
{ name: "Name", prop: "name", sortable: false },
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like we could use a global 'sortable'!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

True. Added issue #53

{ name: "Gender", prop: "gender", sortable: false },
{ name: "Company", prop: "company", sortable: false }
],
columnMode: 'force',
paging: {
Expand Down
13 changes: 10 additions & 3 deletions src/components/DataTableController.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,9 @@ export default class DataTableController {
* Sorts the values of the grid for client side sorting.
*/
onSorted() {
if (!this.rows) return;
if (!this.rows) {
return;
}

// return all sorted column, in the same order in which they were sorted
const sorts = this.options.columns
Expand All @@ -175,12 +177,15 @@ export default class DataTableController {
});

if (sorts.length) {
this.onSort({ sorts });
if (this.onSort) {
this.onSort({ sorts });
}

if (this.options.onSort) {
this.options.onSort(sorts);
}


const clientSorts = [];

for (let i = 0, len = sorts.length; i < len; i += 1) {
Expand All @@ -204,7 +209,9 @@ export default class DataTableController {
}
}

this.options.internal.setYOffset(0);
if (this.options.internal && this.options.internal.setYOffset) {
this.options.internal.setYOffset(0);
}
}

/**
Expand Down
74 changes: 62 additions & 12 deletions src/components/DataTableController.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,69 @@
import DataTableController from './DataTableController';
import TableDefaults from '../defaults';

describe('DataTableController', () => {
// let $controller = null;
//
// beforeEach(
// inject((_$controller_) => {
// $controller = _$controller_;
// }),
// );

it('should export a function', () => {
expect(DataTableController).toEqual(jasmine.any(Function));
});
let ctrl = null;
let scope = null;
let setController = null;

beforeEach(inject(($rootScope, $filter) => {
scope = $rootScope.$new();

setController = (bindings) => {
bindings.options = Object.assign({}, TableDefaults, bindings.options);
bindings.data = bindings.rows;

ctrl = new DataTableController(scope, $filter);

Object.assign(ctrl, bindings);
};
}));

describe('sorting', () => {

beforeEach(() => {
let options = {
columns: [
{ prop: 'name', sort: 'asc' },
{ prop: 'age'}
]
};
let rows = [
{ name: 'Walter', age: 49 },
{ name: 'Dude', age: 45 },
{ name: 'Donnie', age: 46 },
{ name: 'Maude', age: 48 }
];

setController({
options: options,
rows: rows
});

ctrl.$onInit();
});

it('should be sorted', () => {
ctrl.onSorted();

let sortOrder = ctrl.rows[0].name < ctrl.rows[1].name;

expect(sortOrder).toBe(true);
});

it('should re-sort', () => {
ctrl.onSorted();

let sortedAscending = ctrl.rows[0].name < ctrl.rows[1].name;

expect(sortedAscending).toBe(true);

ctrl.options.columns[0].sort = 'desc';
ctrl.onSorted();

describe('', () => {
sortedAscending = ctrl.rows[0].name < ctrl.rows[1].name;

expect(sortedAscending).toBe(false);
});
});
});
38 changes: 32 additions & 6 deletions src/components/body/BodyController.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,19 @@ export default class BodyController {
}
}

/**
* @description Constructs the rows for the page, assuming we're using internal paging.
*/
buildInternalPage() {
let i;

this.tempRows.splice(0, this.tempRows.length);

for (i = 0; i < this.options.paging.size; i += 1) {
this.tempRows[i] = this.rows[(this.options.paging.offset * this.options.paging.size) + i];
}
}

setConditionalWatches() {
for (let i = this.watchListeners.length - 1; i >= 0; i -= 1) {
this.watchListeners[i]();
Expand All @@ -82,7 +95,7 @@ export default class BodyController {
(this.options.scrollbarV ||
(!this.options.scrollbarV &&
this.options.paging &&
this.options.paging.externalPaging))) {
this.options.paging.size))) {
let sized = false;

this.watchListeners.push(this.$scope.$watch('body.options.paging.size', (newVal, oldVal) => {
Expand All @@ -99,10 +112,16 @@ export default class BodyController {

this.watchListeners.push(this.$scope.$watch('body.options.paging.offset', (newVal) => {
if (this.options.paging.size) {
this.onPage({
offset: newVal,
size: this.options.paging.size,
});
if (!this.options.paging.externalPaging) {
this.buildInternalPage();
}

if (this.onPage) {
this.onPage({
offset: newVal,
size: this.options.paging.size,
});
}
}
}));
}
Expand Down Expand Up @@ -137,14 +156,19 @@ export default class BodyController {
}

if (this.options.paging.externalPaging) {
// We're using external paging
const idxs = this.getFirstLastIndexes();
let idx = idxs.first;

this.tempRows.splice(0, this.tempRows.length);
while (idx < idxs.last) {
this.tempRows.push(rows[idx += 1]);
}
} else if (this.options.paging.size) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like this is nested in a this.options.paging.size already, which would prevent the next else statement from ever firing. Looks safe to remove the if condition and the else below it, but you may know more about this area than me now :)

That being said - do we know the relation of the externalPaging logic to all of that paging that happens in virtual paging?

// We're using internal paging
this.buildInternalPage();
} else {
// No paging
this.tempRows.splice(0, this.tempRows.length);
this.tempRows.push(...rows);
}
Expand Down Expand Up @@ -439,7 +463,9 @@ export default class BodyController {
rowIndex += 1;
}

this.options.internal.styleTranslator.update(this.tempRows);
if (this.options.internal && this.options.internal.styleTranslator) {
this.options.internal.styleTranslator.update(this.tempRows);
}

return this.tempRows;
}
Expand Down
50 changes: 50 additions & 0 deletions src/components/body/BodyController.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,56 @@ describe('BodyController', () => {

expect(ctrl.data).not.toEqual(0);
});

it('should have the correct number of rows', () => {
let options = {
columns: [
{ name: 'Name', prop: 'name' },
{ name: 'Company', prop: 'company' }
],
paging: {
offset: 0,
size: 3
}
};

setController({
options: options,
rows: olympicRows
});

ctrl.$onInit();
scope.$digest();

expect(ctrl.tempRows.length).toBe(3);
});

it('should increment page', () => {
let options = {
columns: [
{ name: 'Name', prop: 'name' },
{ name: 'Company', prop: 'company' }
],
paging: {
offset: 0,
size: 3
}
};

setController({
options: options,
rows: olympicRows
});

ctrl.$onInit();
scope.$digest();

let name = ctrl.tempRows[0].name;
ctrl.options.paging.offset = 1;
scope.$digest();

expect(ctrl.tempRows[0].name).not.toBe(name);
});
});

describe('when setting tree and group columns', () => {
Expand Down
Loading