Skip to content

Commit

Permalink
feat(ngTableController): automatically reload table when settings dat…
Browse files Browse the repository at this point in the history 
…a array changes
  • Loading branch information
@ccrowhurstram
ccrowhurstram committed Aug 2, 2015
1 parent 56ac7a6 commit 4817c20
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 31 deletions.
21 changes: 5 additions & 16 deletions examples/demo14.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@ <h1>Table with external control of data</h1>

<h2>Dataset: <select ng-model="dataset" ng-options="ds for ds in datasets"></select></h2>

<table ng-table="tableParams" class="table">
<table ng-table="tableParams" class="table" show-filter="true">
<tr ng-repeat="user in $data">
<td data-title="'Name'" sortable="'name'">
<td data-title="'Name'" sortable="'name'" filter="{name: 'text'}">
{{user.name}}
</td>
<td data-title="'Age'" sortable="'age'">
<td data-title="'Age'" sortable="'age'" filter="{age: 'text'}">
{{user.age}}
</td>
</tr>
Expand Down Expand Up @@ -79,7 +79,7 @@ <h2>Dataset: <select ng-model="dataset" ng-options="ds for ds in datasets"></sel
{name: "Enos", age: 34}];

$scope.$watch("dataset", function () {
$scope.tableParams.reload();
$scope.tableParams.settings({ data: self["data" + $scope.dataset]});
});

$scope.tableParams = new NgTableParams({
Expand All @@ -89,18 +89,7 @@ <h2>Dataset: <select ng-model="dataset" ng-options="ds for ds in datasets"></sel
name: 'asc' // initial sorting
}
}, {
total: 0, // we should calc it inside getData because data length is dynamic
getData: function($defer, params) {

var data = self["data" + $scope.dataset];

var filteredData = data;
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy()) :
filteredData;
params.total(self["data" + $scope.dataset].length);
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
data: self["data" + $scope.dataset]
});
})
</script>
Expand Down
1 change: 0 additions & 1 deletion examples/demo28.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,6 @@ <h1>Custom external pagination element</h1>
page: 1, // show first page
count: 3 // count per page
}, {
total: 100,
data: data
});
})
Expand Down
47 changes: 37 additions & 10 deletions src/scripts/04-controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,7 @@ function($scope, NgTableParams, $timeout, $parse, $compile, $attrs, $element, ng
};
})();

function resetPage() {
$scope.params.$params.page = 1;
}
var pendingReload;

function onParamsChange (newParams, oldParams) {

Expand All @@ -62,31 +60,59 @@ function($scope, NgTableParams, $timeout, $parse, $compile, $attrs, $element, ng
return;
}

$scope.params['$$paramsFirstTimeLoad'] = !$scope.params.hasOwnProperty('$$paramsFirstTimeLoad');
$scope.params.settings().$scope = $scope;

var currentParams = $scope.params;

var doReloadNow;
if (currentParams.$$paramsBootstrapping){
doReloadNow = function(){
currentParams.$$paramsBootstrapping = false;
currentParams.reload();
}
} else {
doReloadNow = currentParams.reload.bind(currentParams);
}

if (!angular.equals(newParams.filter, oldParams.filter)) {
var maybeResetPage = $scope.params['$$paramsFirstTimeLoad'] ? angular.noop : resetPage;
var maybeResetPage;
if (currentParams.$$paramsBootstrapping) {
maybeResetPage = angular.noop;
} else {
var maybeResetPage = function resetPage() {
currentParams.$params.page = 1;
};
}
var applyFilter = function () {
pendingReload = false;
maybeResetPage();
$scope.params.reload();
doReloadNow();
};
if ($scope.params.settings().filterDelay && !$scope.params['$$paramsFirstTimeLoad']) {
delayFilter(applyFilter, $scope.params.settings().filterDelay);
if (currentParams.settings().filterDelay && !currentParams.$$paramsBootstrapping) {
pendingReload = true;
delayFilter(applyFilter, currentParams.settings().filterDelay);
} else {
applyFilter();
}
} else {
$scope.params.reload();
doReloadNow();
}

}

// watch for changes to $params values (eg when a filter or page changes)
$scope.$watch('params.$params', onParamsChange, true);
// watch for changes to $params reference (eg when a new NgTableParams is bound to the scope)
$scope.$watch('params.$params', onParamsChange, false);

$scope.$watch('params.settings().data', function(newData, oldData){
if (newData === oldData || $scope.params.settings().$loading || pendingReload) {
return;
}

$scope.params.page(1);
$scope.params.reload();
});

this.compileDirectiveTemplates = function () {
if (!$element.hasClass('ng-table')) {
$scope.templates = {
Expand Down Expand Up @@ -186,6 +212,7 @@ function($scope, NgTableParams, $timeout, $parse, $compile, $attrs, $element, ng
}
$scope.paramsModel = tableParamsGetter;
$scope.params = params;
$scope.params.$$paramsBootstrapping = true;
}), false);

if ($attrs.showFilter) {
Expand Down
75 changes: 71 additions & 4 deletions test/tableSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -658,10 +658,12 @@ describe('ng-table', function() {
describe('internals', function(){

var elm,
NgTableParams;
NgTableParams,
$timeout;

beforeEach(inject(function($compile, _NgTableParams_) {
beforeEach(inject(function($compile, _NgTableParams_, _$timeout_) {
NgTableParams = _NgTableParams_;
$timeout = _$timeout_;
elm = angular.element(
'<table ng-table="tableParams">' +
'<tr ng-repeat="user in $data">' +
Expand All @@ -673,12 +675,12 @@ describe('ng-table', function() {
scope.$digest();
}));

function getData ($defer, params) {
function getData (params) {
if (!params.hasOwnProperty('getDataCallCount')){
params.getDataCallCount = 0;
}
params.getDataCallCount++;
$defer.resolve([]);
return [];
}

it('should reload when binding a new tableParams to scope', function(){
Expand All @@ -689,6 +691,14 @@ describe('ng-table', function() {
expect(tableParams.getDataCallCount).toBe(1);
});

it('should reload once when binding a new tableParams that has an initial settings data field', function(){
var tableParams = new NgTableParams({}, { getData: getData, data: [1,2,3] });
scope.tableParams = tableParams;
scope.$digest();

expect(tableParams.getDataCallCount).toBe(1);
});

it('should reload when binding a new tableParams to scope multiple times', function(){
var tableParams1 = new NgTableParams({}, { getData: getData });
scope.tableParams = tableParams1;
Expand All @@ -703,6 +713,45 @@ describe('ng-table', function() {
expect(tableParams2.getDataCallCount).toBe(1);
});

it('should reload once when binding a new settings data value and changing the filter', function(){
var settings = {filterDelay: 100, getData: getData, data: [{age: 1}, {age: 2}]};
var tableParams = new NgTableParams({}, settings);
scope.tableParams = tableParams;
scope.$digest();
tableParams.getDataCallCount = 0; // reset

// when
tableParams.filter({ age: 1 });
tableParams.settings({ data: [{ age: 1 }, { age: 11 }, { age: 22 }]});
scope.$digest();
$timeout.flush(); // trigger the delayed reload

expect(tableParams.getDataCallCount).toBe(1);
});


it('should reload once with page reset to 1 when binding a new settings data value and changing the filter', function(){
var settings = {
counts: [1],
getData: getData,
data: [{age: 1}, {age: 2}]
};
var tableParams = new NgTableParams({ count: 1, page: 2 }, settings);
scope.tableParams = tableParams;
scope.$digest();
expect(tableParams.page()).toBe(2); // checking assumptions
tableParams.getDataCallCount = 0; // reset

// when
tableParams.filter({ age: 1 });
tableParams.settings({ data: [{ age: 1 }, { age: 11 }, { age: 22 }]});
scope.$digest();
$timeout.flush(); // trigger the delayed reload

expect(tableParams.getDataCallCount).toBe(1);
expect(tableParams.page()).toBe(1);
});

it('should not reload when filter value is assigned the same value', function(){
// given
var tableParams = new NgTableParams({ filter: {age: 10} }, { filterDelay: 0, getData: getData });
Expand Down Expand Up @@ -730,5 +779,23 @@ describe('ng-table', function() {

expect(tableParams.getDataCallCount).toBe(1);
});

it('should reload when new dataset supplied', function(){
// given
var initialDataset = [
{age: 1},
{age: 2}
];
var tableParams = new NgTableParams(null, { getData: getData });
scope.tableParams = tableParams;
scope.$digest();
tableParams.getDataCallCount = 0; //reset

// when
tableParams.settings({ data: [{ age: 10}, { age: 11}, { age: 12}]});
scope.$digest();

expect(tableParams.getDataCallCount).toBe(1);
});
});
});

0 comments on commit 4817c20

Please sign in to comment.