Last active
July 3, 2017 07:15
-
-
Save geraldhumphries/e1adec511d9fc43ad665 to your computer and use it in GitHub Desktop.
Query param pagination with resolve
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'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 | |
}); | |
}; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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(); | |
}] | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'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; | |
} | |
} | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'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' } | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'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); | |
}; | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Error: [$injector:unpr] Unknown provider: pagingParamsProvider <- pagingParams <- ResultAnalysisDetailController
I have injected pagingParams in my own controller and it is giving above errror