pagination

This commit is contained in:
Michele Artini 2024-11-25 16:21:10 +01:00
parent 797caa1200
commit 124482d4bc
6 changed files with 63 additions and 51 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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()">&laquo; Previous</a>
</li>
<li class="page-item" ng-class="{'disabled' : orgs.last }">
<a class="page-link" href="javascript:void(0)" ng-click="nextFunction()">Next &raquo;</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 }">&laquo; 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 &raquo;</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>

View File

@ -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>

View File

@ -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);
}
});