Skip to content

Instantly share code, notes, and snippets.

@geraldhumphries
Last active July 3, 2017 07:15
Show Gist options
  • Save geraldhumphries/e1adec511d9fc43ad665 to your computer and use it in GitHub Desktop.
Save geraldhumphries/e1adec511d9fc43ad665 to your computer and use it in GitHub Desktop.
Query param pagination with resolve
<form name="searchForm" class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" ng-model="searchQuery" id="searchQuery" placeholder="query">
<span class="input-group-btn">
<button class="btn btn-info" ng-click="search(searchQuery)">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
<span class="input-group-btn">
<button class="btn btn-info" ng-click="clear()" ng-show="currentSearch">
<span class="glyphicon glyphicon-trash"></span>
</button>
</span>
</div>
</div>
</form>
...
<tr jh-sort="predicate" ascending="reverse" callback="transition()">
...
<uib-pagination class="pagination-sm" total-items="totalItems" ng-model="page" ng-change="transition()"></uib-pagination>
'use strict';
angular.module('testApp')
.controller('EntityController', function ($scope, $state, Entity, EntitySearch, ParseLinks, pagingParams, AlertService, response) {
$scope.predicate = pagingParams.predicate;
$scope.reverse = pagingParams.ascending;
$scope.links = ParseLinks.parse(response.headers('link'));
$scope.totalItems = response.headers('X-Total-Count');
$scope.entitys = response.data;
$scope.page = pagingParams.page + 1;
$scope.searchQuery = pagingParams.search;
$scope.currentSearch = pagingParams.search;
// should move these to PaginationUtil
$scope.search = function (searchQuery) {
$scope.page = 1;
$scope.predicate = 'id';
$scope.reverse = true;
$scope.currentSearch = searchQuery;
$scope.transition();
};
$scope.clear = function () {
$scope.page = 1;
$scope.predicate = 'id';
$scope.reverse = true;
$scope.currentSearch = null;
$scope.transition();
};
$scope.transition = function () {
$state.transitionTo($state.$current, {
page: $scope.page - 1,
sort: $scope.predicate + ',' + ($scope.reverse ? 'asc' : 'desc'),
search: $scope.currentSearch
});
};
});
.state('entity', {
parent: 'entity',
url: '/entitys?page&sort&search',
data: {
authorities: ['ROLE_USER'],
pageTitle: 'testApp.entity.home.title'
},
views: {
'content@': {
templateUrl: 'scripts/app/entities/entity/entitys.html',
controller: 'EntityController'
}
},
params: {
page: {
value: '0',
squash: true
},
sort: {
value: 'id,asc',
squash: true
},
search: null
},
resolve: {
response: ['$stateParams', 'Entity', 'EntitySearch', 'PaginationUtil', 'ParseLinks',
function ($stateParams, Entity, EntitySearch, PaginationUtil, ParseLinks) {
if ($stateParams.search) {
return EntitySearch.query({
query: $stateParams.search,
page: PaginationUtil.parsePage($stateParams.page),
size: 20,
sort: [$stateParams.sort, 'id']
}).$promise;
} else {
return Entity.query({
page: PaginationUtil.parsePage($stateParams.page),
size: 20,
sort: [$stateParams.sort, 'id']
}).$promise;
}
}],
pagingParams: ['$stateParams', 'PaginationUtil', function ($stateParams, PaginationUtil) {
return {
page: PaginationUtil.parsePage($stateParams.page),
sort: $stateParams.sort,
predicate: PaginationUtil.parsePredicate($stateParams.sort),
ascending: PaginationUtil.parseAscending($stateParams.sort)
}
}],
translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) {
$translatePartialLoader.addPart('entity');
$translatePartialLoader.addPart('global');
return $translate.refresh();
}]
}
})
'use strict';
angular.module('testApp')
.factory('EntitySearch', function ($resource) {
return $resource('api/_search/entitys/:query', {}, {
'query': {
method: 'GET',
transformResponse: function (data, headers, httpStatus) {
data = angular.fromJson(data);
if (httpStatus < 400) {
// on success, the handler in the controller will only have the data. we need to add the headers here
// so the controller can have `totalItems` and `links`
var response = {};
response.headers = headers;
response.data = data;
return response;
} else {
// on error, the handler in the controller will have the whole response, so no need to add the headers
return data;
}
}
}
});
});
'use strict';
angular.module('testApp')
.factory('Entity', function ($resource, DateUtils) {
return $resource('api/entitys/:id', {}, {
'query': {
method: 'GET',
// transformResponse is being used because the promise only returns the data, and not the headers
transformResponse: function (data, headers, httpStatus) {
data = angular.fromJson(data);
if (httpStatus < 400) {
// on success, the handler in the controller will only have the data. we need to add the headers here
// so the controller can have `totalItems` and `links`
var response = {};
response.headers = headers;
response.data = data;
return response;
} else {
// on error, the handler in the controller will have the whole response, so no need to add the headers
return data;
}
},
},
'get': {
method: 'GET',
transformResponse: function (data, headers, httpStatus) {
data = angular.fromJson(data);
if (httpStatus < 400) {
// on success, the handler in the controller will only have the data. we need to add the headers here
// so the controller can have `totalItems` and `links`
var response = {};
response.headers = headers;
response.data = data;
return response;
} else {
// on error, the handler in the controller will have the whole response, so no need to add the headers
return data;
}
},
},
'update': { method:'PUT' }
});
});
'use strict';
angular.module('testApp')
.service('PaginationUtil', function () {
// util for parsing to sort and page parameter. Spring expects sort in the format "id,asc" so I've used that
// for the state. it might be better to separate predicate and direction, so it doesn't need to be parsed.
this.parsePredicate = function (sort) {
var sortArray = sort.split(',');
if (sortArray.length > 1){
sortArray.pop();
}
return sortArray.join(',');
};
this.parseAscending = function (sort) {
var sortArray = sort.split(',');
if (sortArray.length > 1){
return sort.split(',').slice(-1)[0] == 'asc';
} else {
// default to true if no sort defined
return true;
}
};
// query params are strings, and need to be parsed
this.parsePage = function (page) {
return parseInt(page);
};
});
@Tahseem-Ahmad
Copy link

Error: [$injector:unpr] Unknown provider: pagingParamsProvider <- pagingParams <- ResultAnalysisDetailController

I have injected pagingParams in my own controller and it is giving above errror

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment