D-Net
/
dnet-applications
16
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/dnet-orgs-database-application/src/main/resources/static/resources/html/pages/search/resultsByCountry.html
View File

@ -1,6 +1,5 @@
<org-results-page search-message="Searching for country: {{fieldValue}}" <org-results-page search-message="Searching for country: {{fieldValue}}"
orgs="orgs" orgs="orgs"
prev-function="prev()" page-function="pageByCountry()"
next-function="next()"
show-status="1" show-status="1"
show-n-dups="1"></org-results-page> show-n-dups="1"></org-results-page>

3
apps/dnet-orgs-database-application/src/main/resources/static/resources/html/pages/search/resultsByType.html
View File

@ -1,6 +1,5 @@
<org-results-page search-message="Searching for type: {{fieldValue}}" <org-results-page search-message="Searching for type: {{fieldValue}}"
orgs="orgs" orgs="orgs"
prev-function="prev()" page-function="pageByType(page, size)"
next-function="next()"
show-status="1" show-status="1"
show-n-dups="1"></org-results-page> show-n-dups="1"></org-results-page>

3
apps/dnet-orgs-database-application/src/main/resources/static/resources/html/pages/search/searchResults.html
View File

@ -1,6 +1,5 @@
<org-results-page search-message="Searching for: {{searchText}}" <org-results-page search-message="Searching for: {{searchText}}"
orgs="orgs" orgs="orgs"
prev-function="prev()" page-function="pageSearch()"
next-function="next()"
show-status="1" show-status="1"
show-n-dups="1"></org-results-page> show-n-dups="1"></org-results-page>

29
apps/dnet-orgs-database-application/src/main/resources/static/resources/html/parts/org_results_page.html
View File

@ -1,16 +1,13 @@
<p ng-if="mode != 'select-modal'"> <p ng-if="mode != 'select-modal'">
<span ng-if="orgs.totalElements > 0"> <span ng-if="orgs.totalElements > 0">
Page: {{orgs.number + 1}} / {{orgs.totalPages}}<br />
Total elements: {{orgs.totalElements}}<br /> Total elements: {{orgs.totalElements}}<br />
{{searchMessage}} {{searchMessage}}
</span> </span>
<span ng-if="orgs.totalElements == 0"> <span ng-if="orgs.totalElements == 0">
Page: -<br />
Total elements: 0<br /> Total elements: 0<br />
{{searchMessage}} {{searchMessage}}
</span> </span>
<span ng-if="!(orgs.totalElements || orgs.totalElements === 0)"> <span ng-if="!(orgs.totalElements || orgs.totalElements === 0)">
Page:<br />
Total elements:<br /> Total elements:<br />
{{searchMessage}} {{searchMessage}}
</span> </span>
@ -25,16 +22,26 @@
<div ng-if="orgs.totalElements > 0"> <div ng-if="orgs.totalElements > 0">
<nav> <div class="mb-4 text-center">
<ul class="pagination justify-content-center"> <div class="btn-group">
<li class="page-item" ng-class="{'disabled' : orgs.first }"> <button class="btn btn-sm btn-outline-primary" ng-click="gotoPage(orgs.number - 1, orgs.size)" ng-class="{'disabled' : orgs.first }">&laquo; Previous</button>
<a class="page-link" href="javascript:void(0)" ng-click="prevFunction()">&laquo; Previous</a>
</li> <div class="dropdown">
<li class="page-item" ng-class="{'disabled' : orgs.last }"> <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown">Page {{orgs.number + 1}} of {{orgs.totalPages}}</button>
<a class="page-link" href="javascript:void(0)" ng-click="nextFunction()">Next &raquo;</a> <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> </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> </ul>
</nav> </div>
</div>
<p ng-if="mode == 'select-modal'">Click the <b>organization name</b> to add the organization (multiple selection is allowed)</p> <p ng-if="mode == 'select-modal'">Click the <b>organization name</b> to add the organization (multiple selection is allowed)</p>

5
apps/dnet-orgs-database-application/src/main/resources/static/resources/html/parts/select_org.modal.html
View File

@ -10,14 +10,13 @@
<div class="input-group input-group-sm"> <div class="input-group input-group-sm">
<input type="text" class="form-control" ng-model="searchText" /> <input type="text" class="form-control" ng-model="searchText" />
<div class="input-group-append"> <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>
</div> </div>
</form> </form>
<div ng-show="searchValue"> <div ng-show="searchValue">
<org-results-page orgs="searchOrgs" <org-results-page orgs="searchOrgs"
prev-function="search(searchValue, searchOrgs.number - 1, searchOrgs.size)" page-function="searchPage()"
next-function="search(searchValue, searchOrgs.number + 1, searchOrgs.size)"
on-select="selectOrg()" on-select="selectOrg()"
selected-org="selectedOrg" selected-org="selectedOrg"
mode="select-modal"></org-results-page> mode="select-modal"></org-results-page>

61
apps/dnet-orgs-database-application/src/main/resources/static/resources/js/organizations.js
View File

@ -38,7 +38,7 @@ orgsModule.controller('menuCtrl', function ($scope, suggestionInfo) {
suggestionInfo.updateInfo(null); suggestionInfo.updateInfo(null);
}); });
orgsModule.directive('selectOrgModal', function($http, $timeout) { orgsModule.directive('selectOrgModal', function($http) {
return { return {
restrict: 'E', restrict: 'E',
scope: { scope: {
@ -53,15 +53,19 @@ orgsModule.directive('selectOrgModal', function($http, $timeout) {
scope.searchText = ''; scope.searchText = '';
scope.searchValue = ''; scope.searchValue = '';
scope.search = function(text, page, size) { scope.search = function(text) {
scope.searchOrgs = {}; 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.searchValue = text;
scope.searchOrgs = res.data; scope.searchOrgs = res.data;
}); });
} }
scope.searchPage = function() {
return 'api/organizations/search/__PAGE__/__SIZE__?status='+ scope.filterStatus + '&q=' + scope.searchValue;
}
scope.selectOrg = function() { scope.selectOrg = function() {
if (scope.onSelect) { if (scope.onSelect) {
scope.onSelect(); scope.onSelect();
@ -207,8 +211,7 @@ orgsModule.directive('orgResultsPage', function($http, $location, $route) {
scope: { scope: {
'searchMessage' : '@', 'searchMessage' : '@',
'orgs' : '=', 'orgs' : '=',
'nextFunction' : '&', 'pageFunction' : '&',
'prevFunction' : '&',
'onSelect' : '&', 'onSelect' : '&',
'selectedOrg' : '=', 'selectedOrg' : '=',
'mode' : '@', '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; }); 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) { if ($scope.searchText) {
$location.url('/searchResults/' + ($scope.orgs.number - 1) + '/' + $scope.orgs.size + '/' + encodeURIComponent($scope.searchText)); return '/searchResults/__PAGE__/__SIZE__/' + encodeURIComponent($scope.searchText);
} else { } 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) { 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; }); call_http_get($http, 'api/organizations/byCountry/' + $routeParams.status + '/' + $routeParams.code + '/' + $routeParams.page + '/' + $routeParams.size, function(res) { $scope.orgs = res.data; });
$scope.prev = function() { $scope.pageByCountry = function() {
$location.url('/byCountry/' + ($scope.orgs.number - 1) + '/' + $scope.orgs.size + '/' + $routeParams.status + '/' + encodeURIComponent($scope.fieldValue)); return '/byCountry/__PAGE__/__SIZE__/' + $routeParams.status + '/' + encodeURIComponent($scope.fieldValue);
}
$scope.next = function() {
$location.url('/byCountry/' + ($scope.orgs.number + 1) + '/' + $scope.orgs.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; }); call_http_get($http, 'api/organizations/byType/' + $routeParams.status + '/' + $routeParams.type + '/' + $routeParams.page + '/' + $routeParams.size, function(res) { $scope.orgs = res.data; });
$scope.prev = function() { $scope.pageByType = function() {
$location.url('/byType/' + ($scope.orgs.number - 1) + '/' + $scope.orgs.size + '/' + $routeParams.status + '/' + encodeURIComponent($scope.fieldValue)); return '/byType/__PAGE__/__SIZE__/' + $routeParams.status + '/' + encodeURIComponent($scope.fieldValue);
} }
$scope.next = function() {
$location.url('/byType/' + ($scope.orgs.number + 1) + '/' + $scope.orgs.size + '/' + $routeParams.status + '/' + encodeURIComponent($scope.fieldValue));
}
}); });