pagination
This commit is contained in:
parent
797caa1200
commit
124482d4bc
|
@ -1,6 +1,5 @@
|
|||
<org-results-page search-message="Searching for country: {{fieldValue}}"
|
||||
orgs="orgs"
|
||||
prev-function="prev()"
|
||||
next-function="next()"
|
||||
page-function="pageByCountry()"
|
||||
show-status="1"
|
||||
show-n-dups="1"></org-results-page>
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
<org-results-page search-message="Searching for type: {{fieldValue}}"
|
||||
orgs="orgs"
|
||||
prev-function="prev()"
|
||||
next-function="next()"
|
||||
page-function="pageByType(page, size)"
|
||||
show-status="1"
|
||||
show-n-dups="1"></org-results-page>
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
<org-results-page search-message="Searching for: {{searchText}}"
|
||||
orgs="orgs"
|
||||
prev-function="prev()"
|
||||
next-function="next()"
|
||||
page-function="pageSearch()"
|
||||
show-status="1"
|
||||
show-n-dups="1"></org-results-page>
|
||||
|
|
|
@ -1,16 +1,13 @@
|
|||
<p ng-if="mode != 'select-modal'">
|
||||
<span ng-if="orgs.totalElements > 0">
|
||||
Page: {{orgs.number + 1}} / {{orgs.totalPages}}<br />
|
||||
Total elements: {{orgs.totalElements}}<br />
|
||||
{{searchMessage}}
|
||||
</span>
|
||||
<span ng-if="orgs.totalElements == 0">
|
||||
Page: -<br />
|
||||
Total elements: 0<br />
|
||||
{{searchMessage}}
|
||||
</span>
|
||||
<span ng-if="!(orgs.totalElements || orgs.totalElements === 0)">
|
||||
Page:<br />
|
||||
Total elements:<br />
|
||||
{{searchMessage}}
|
||||
</span>
|
||||
|
@ -25,16 +22,26 @@
|
|||
|
||||
<div ng-if="orgs.totalElements > 0">
|
||||
|
||||
<nav>
|
||||
<ul class="pagination justify-content-center">
|
||||
<li class="page-item" ng-class="{'disabled' : orgs.first }">
|
||||
<a class="page-link" href="javascript:void(0)" ng-click="prevFunction()">« Previous</a>
|
||||
</li>
|
||||
<li class="page-item" ng-class="{'disabled' : orgs.last }">
|
||||
<a class="page-link" href="javascript:void(0)" ng-click="nextFunction()">Next »</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="mb-4 text-center">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-sm btn-outline-primary" ng-click="gotoPage(orgs.number - 1, orgs.size)" ng-class="{'disabled' : orgs.first }">« Previous</button>
|
||||
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown">Page {{orgs.number + 1}} of {{orgs.totalPages}}</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:void(0)" ng-click="gotoPage(i, orgs.size)" ng-repeat="i in availablePages()">Page {{i + 1}}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <li>
|
||||
<input type="text" class="form-control" ng-model="orgs.number" />
|
||||
</li>
|
||||
-->
|
||||
|
||||
<button class="btn btn-sm btn-outline-primary" ng-click="gotoPage(orgs.number + 1, orgs.size)" ng-class="{'disabled' : orgs.last }">Next »</button>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p ng-if="mode == 'select-modal'">Click the <b>organization name</b> to add the organization (multiple selection is allowed)</p>
|
||||
|
||||
|
|
|
@ -10,14 +10,13 @@
|
|||
<div class="input-group input-group-sm">
|
||||
<input type="text" class="form-control" ng-model="searchText" />
|
||||
<div class="input-group-append">
|
||||
<button type="submit" class="btn btn-outline-primary" ng-click="search(searchText, 0, 25)">Search</button>
|
||||
<button type="submit" class="btn btn-outline-primary" ng-click="search(searchText)">Search</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div ng-show="searchValue">
|
||||
<org-results-page orgs="searchOrgs"
|
||||
prev-function="search(searchValue, searchOrgs.number - 1, searchOrgs.size)"
|
||||
next-function="search(searchValue, searchOrgs.number + 1, searchOrgs.size)"
|
||||
page-function="searchPage()"
|
||||
on-select="selectOrg()"
|
||||
selected-org="selectedOrg"
|
||||
mode="select-modal"></org-results-page>
|
||||
|
|
|
@ -38,7 +38,7 @@ orgsModule.controller('menuCtrl', function ($scope, suggestionInfo) {
|
|||
suggestionInfo.updateInfo(null);
|
||||
});
|
||||
|
||||
orgsModule.directive('selectOrgModal', function($http, $timeout) {
|
||||
orgsModule.directive('selectOrgModal', function($http) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
|
@ -52,15 +52,19 @@ orgsModule.directive('selectOrgModal', function($http, $timeout) {
|
|||
scope.searchOrgs = {};
|
||||
scope.searchText = '';
|
||||
scope.searchValue = '';
|
||||
|
||||
scope.search = function(text, page, size) {
|
||||
|
||||
scope.search = function(text) {
|
||||
scope.searchOrgs = {};
|
||||
|
||||
call_http_get($http, 'api/organizations/search/' + page + '/' + size + '?status='+ scope.filterStatus + '&q=' + text, function(res) {
|
||||
|
||||
call_http_get($http, 'api/organizations/search/0/25?status='+ scope.filterStatus + '&q=' + text, function(res) {
|
||||
scope.searchValue = text;
|
||||
scope.searchOrgs = res.data;
|
||||
});
|
||||
}
|
||||
|
||||
scope.searchPage = function() {
|
||||
return 'api/organizations/search/__PAGE__/__SIZE__?status='+ scope.filterStatus + '&q=' + scope.searchValue;
|
||||
}
|
||||
|
||||
scope.selectOrg = function() {
|
||||
if (scope.onSelect) {
|
||||
|
@ -207,8 +211,7 @@ orgsModule.directive('orgResultsPage', function($http, $location, $route) {
|
|||
scope: {
|
||||
'searchMessage' : '@',
|
||||
'orgs' : '=',
|
||||
'nextFunction' : '&',
|
||||
'prevFunction' : '&',
|
||||
'pageFunction' : '&',
|
||||
'onSelect' : '&',
|
||||
'selectedOrg' : '=',
|
||||
'mode' : '@',
|
||||
|
@ -234,7 +237,27 @@ orgsModule.directive('orgResultsPage', function($http, $location, $route) {
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
scope.availablePages = function() {
|
||||
var input = [];
|
||||
for (var i = 0; i < scope.orgs.totalPages; i++) input.push(i);
|
||||
return input;
|
||||
}
|
||||
|
||||
scope.gotoPage = function(page, pageSize) {
|
||||
var url = scope.pageFunction().replace(/__PAGE__/, page).replace(/__SIZE__/, pageSize);
|
||||
|
||||
if (scope.mode == 'select-modal') {
|
||||
scope.orgs = {};
|
||||
call_http_get($http, url, function(res) {
|
||||
scope.orgs = res.data;
|
||||
});
|
||||
} else {
|
||||
$location.url(url);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -448,21 +471,14 @@ orgsModule.controller('searchResultsCtrl', function ($scope, $http, $routeParams
|
|||
|
||||
call_http_get($http, 'api/organizations/search/' + $routeParams.page + '/' + $routeParams.size + '?q=' + $scope.searchText, function(res) { $scope.orgs = res.data; });
|
||||
|
||||
$scope.prev = function() {
|
||||
$scope.pageSearch = function() {
|
||||
if ($scope.searchText) {
|
||||
$location.url('/searchResults/' + ($scope.orgs.number - 1) + '/' + $scope.orgs.size + '/' + encodeURIComponent($scope.searchText));
|
||||
return '/searchResults/__PAGE__/__SIZE__/' + encodeURIComponent($scope.searchText);
|
||||
} else {
|
||||
$location.url('/searchResults/' + ($scope.orgs.number - 1) + '/' + $scope.orgs.size + '/_');
|
||||
return '/searchResults/__PAGE__/__SIZE__/_';
|
||||
}
|
||||
}
|
||||
|
||||
$scope.next = function() {
|
||||
if ($scope.searchText) {
|
||||
$location.url('/searchResults/' + ($scope.orgs.number + 1) + '/' + $scope.orgs.size + '/' + encodeURIComponent($scope.searchText));
|
||||
} else {
|
||||
$location.url('/searchResults/' + ($scope.orgs.number + 1) + '/' + $scope.orgs.size + '/_');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
orgsModule.controller('countriesCtrl', function ($scope, $http, $routeParams) {
|
||||
|
@ -483,12 +499,8 @@ orgsModule.controller('byCountryCtrl', function ($scope, $http, $routeParams, $l
|
|||
|
||||
call_http_get($http, 'api/organizations/byCountry/' + $routeParams.status + '/' + $routeParams.code + '/' + $routeParams.page + '/' + $routeParams.size, function(res) { $scope.orgs = res.data; });
|
||||
|
||||
$scope.prev = function() {
|
||||
$location.url('/byCountry/' + ($scope.orgs.number - 1) + '/' + $scope.orgs.size + '/' + $routeParams.status + '/' + encodeURIComponent($scope.fieldValue));
|
||||
}
|
||||
|
||||
$scope.next = function() {
|
||||
$location.url('/byCountry/' + ($scope.orgs.number + 1) + '/' + $scope.orgs.size + '/' + $routeParams.status + '/' + encodeURIComponent($scope.fieldValue));
|
||||
$scope.pageByCountry = function() {
|
||||
return '/byCountry/__PAGE__/__SIZE__/' + $routeParams.status + '/' + encodeURIComponent($scope.fieldValue);
|
||||
}
|
||||
|
||||
});
|
||||
|
@ -511,13 +523,10 @@ orgsModule.controller('byTypeCtrl', function ($scope, $http, $routeParams, $loca
|
|||
|
||||
call_http_get($http, 'api/organizations/byType/' + $routeParams.status + '/' + $routeParams.type + '/' + $routeParams.page + '/' + $routeParams.size, function(res) { $scope.orgs = res.data; });
|
||||
|
||||
$scope.prev = function() {
|
||||
$location.url('/byType/' + ($scope.orgs.number - 1) + '/' + $scope.orgs.size + '/' + $routeParams.status + '/' + encodeURIComponent($scope.fieldValue));
|
||||
}
|
||||
|
||||
$scope.next = function() {
|
||||
$location.url('/byType/' + ($scope.orgs.number + 1) + '/' + $scope.orgs.size + '/' + $routeParams.status + '/' + encodeURIComponent($scope.fieldValue));
|
||||
$scope.pageByType = function() {
|
||||
return '/byType/__PAGE__/__SIZE__/' + $routeParams.status + '/' + encodeURIComponent($scope.fieldValue);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue