libre.sh/keycloak-scim
4
0
Fork 0
Code Issues 15 Pull requests Releases 1 Activity Actions

Merge pull request #3321 from ssilvert/pagination

Browse source 
KEYCLOAK-3507: Pagination for clients and roles in admin console
This commit is contained in:
Stan Silvert 2016-10-17 07:26:04 -04:00 committed by GitHub
commit a9ce6b9f81
6 changed files with 200 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
themes/src/main/resources/theme/base/admin/resources/js/app.js
View file

@ -2802,3 +2802,81 @@ module.directive('kcOnReadFile', function ($parse) {
} }
}; };
}); });
module.controller('PagingCtrl', function ($scope) {
$scope.currentPageInput = 1;
$scope.firstPage = function() {
if (!$scope.hasPrevious()) return;
$scope.currentPage = 1;
$scope.currentPageInput = 1;
};
$scope.lastPage = function() {
if (!$scope.hasNext()) return;
$scope.currentPage = $scope.numberOfPages;
$scope.currentPageInput = $scope.numberOfPages;
};
$scope.previousPage = function() {
if (!$scope.hasPrevious()) return;
$scope.currentPage--;
$scope.currentPageInput = $scope.currentPage;
};
$scope.nextPage = function() {
if (!$scope.hasNext()) return;
$scope.currentPage++;
$scope.currentPageInput = $scope.currentPage;
};
$scope.hasNext = function() {
return $scope.currentPage < $scope.numberOfPages;
};
$scope.hasPrevious = function() {
return $scope.currentPage > 1;
};
});
module.directive('kcPaging', function () {
return {
scope: {
currentPage: '=',
currentPageInput: '=',
numberOfPages: '='
},
restrict: 'E',
replace: true,
controller: 'PagingCtrl',
templateUrl: resourceUrl + '/templates/kc-paging.html'
}
});
// Tests the page number input from currentPageInput to see
// if it represents a valid page. If so, the current page is changed.
module.directive('kcValidPage', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
ctrl.$validators.inRange = function(modelValue, viewValue) {
if (viewValue >= 1 && viewValue <= scope.numberOfPages) {
scope.currentPage = viewValue;
}
return true;
}
}
}
});
// filter used for paged tables
module.filter('startFrom', function () {
return function (input, start) {
if (input) {
start = +start;
return input.slice(start);
}
return [];
};
});

14
themes/src/main/resources/theme/base/admin/resources/js/controllers/clients.js
View file

@ -731,9 +731,21 @@ module.controller('ClientImportCtrl', function($scope, $location, $upload, realm
}); });
module.controller('ClientListCtrl', function($scope, realm, clients, Client, serverInfo, $route, Dialog, Notifications) { module.controller('ClientListCtrl', function($scope, realm, clients, Client, serverInfo, $route, Dialog, Notifications, filterFilter) {
$scope.realm = realm; $scope.realm = realm;
$scope.clients = clients; $scope.clients = clients;
$scope.currentPage = 1;
$scope.currentPageInput = 1;
$scope.pageSize = 20;
$scope.numberOfPages = Math.ceil($scope.clients.length/$scope.pageSize);
$scope.$watch('search', function (newVal, oldVal) {
$scope.filtered = filterFilter($scope.clients, newVal);
$scope.totalItems = $scope.filtered.length;
$scope.numberOfPages = Math.ceil($scope.totalItems/$scope.pageSize);
$scope.currentPage = 1;
$scope.currentPageInput = 1;
}, true);
$scope.removeClient = function(client) { $scope.removeClient = function(client) {
Dialog.confirmDelete(client.clientId, 'client', function() { Dialog.confirmDelete(client.clientId, 'client', function() {

14
themes/src/main/resources/theme/base/admin/resources/js/controllers/realm.js
View file

@ -1291,9 +1291,21 @@ module.controller('RealmRevocationCtrl', function($scope, Realm, RealmPushRevoca
}); });
module.controller('RoleListCtrl', function($scope, $route, Dialog, Notifications, realm, roles, RoleById) { module.controller('RoleListCtrl', function($scope, $route, Dialog, Notifications, realm, roles, RoleById, filterFilter) {
$scope.realm = realm; $scope.realm = realm;
$scope.roles = roles; $scope.roles = roles;
$scope.currentPage = 1;
$scope.currentPageInput = 1;
$scope.pageSize = 20;
$scope.numberOfPages = Math.ceil($scope.roles.length/$scope.pageSize);
$scope.$watch('searchQuery', function (newVal, oldVal) {
$scope.filtered = filterFilter($scope.roles, {name: newVal});
$scope.totalItems = $scope.filtered.length;
$scope.numberOfPages = Math.ceil($scope.totalItems/$scope.pageSize);
$scope.currentPage = 1;
$scope.currentPageInput = 1;
}, true);
$scope.removeRole = function (role) { $scope.removeRole = function (role) {
Dialog.confirmDelete(role.name, 'role', function () { Dialog.confirmDelete(role.name, 'role', function () {

75
themes/src/main/resources/theme/base/admin/resources/partials/client-list.html
View file

@ -4,52 +4,53 @@
<kc-tooltip>{{:: 'clients.tooltip' | translate}}</kc-tooltip> <kc-tooltip>{{:: 'clients.tooltip' | translate}}</kc-tooltip>
</h1> </h1>
<table class="table table-striped table-bordered"> <table class="datatable table table-striped table-bordered dataTable no-footer">
<thead> <thead>
<tr> <tr>
<th class="kc-table-actions" colspan="6"> <th class="kc-table-actions" colspan="6">
<div class="form-inline"> <div class="form-inline">
<div class="form-group"> <div class="form-group">
<div class="input-group"> <div class="input-group">
<input type="text" placeholder="{{:: 'search.placeholder' | translate}}" data-ng-model="search.clientId" class="form-control search" onkeyup="if(event.keyCode == 13){$(this).next('I').click();}"> <input type="text" placeholder="{{:: 'search.placeholder' | translate}}" data-ng-model="search.clientId" class="form-control search" onkeyup="if(event.keyCode === 13){$(this).next('I').click();}">
<div class="input-group-addon"> <div class="input-group-addon">
<i class="fa fa-search" type="submit"></i> <i class="fa fa-search" type="submit"></i>
</div>
</div> </div>
</div> </div>
</div>
<div class="pull-right" data-ng-show="access.manageClients"> <div class="pull-right" data-ng-show="access.manageClients">
<a id="createClient" class="btn btn-default" href="#/create/client/{{realm.realm}}">{{:: 'create' | translate}}</a> <a id="createClient" class="btn btn-default" href="#/create/client/{{realm.realm}}">{{:: 'create' | translate}}</a>
<a id="importClient" class="btn btn-default" href="#/import/client/{{realm.realm}}" data-ng-show="importButton">{{:: 'import' | translate}}</a> <a id="importClient" class="btn btn-default" href="#/import/client/{{realm.realm}}" data-ng-show="importButton">{{:: 'import' | translate}}</a>
</div>
</div> </div>
</div> </th>
</th> </tr>
</tr> <tr data-ng-hide="clients.length == 0">
<tr data-ng-hide="clients.length == 0"> <th>{{:: 'client-id' | translate}}</th>
<th>{{:: 'client-id' | translate}}</th> <th>{{:: 'enabled' | translate}}</th>
<th>{{:: 'enabled' | translate}}</th> <th>{{:: 'base-url' | translate}}</th>
<th>{{:: 'base-url' | translate}}</th> <th colspan="3">{{:: 'actions' | translate}}</th>
<th colspan="3">{{:: 'actions' | translate}}</th> </tr>
</tr>
</thead> </thead>
<tbody> <tbody>
<tr ng-repeat="client in clients | filter:search | orderBy:'clientId'"> <tr ng-repeat="client in clients| filter:search | orderBy:'clientId' | startFrom:(currentPage - 1) * pageSize | limitTo:pageSize">
<td><a href="#/realms/{{realm.realm}}/clients/{{client.id}}">{{client.clientId}}</a></td> <td><a href="#/realms/{{realm.realm}}/clients/{{client.id}}">{{client.clientId}}</a></td>
<td translate="{{client.enabled}}"></td> <td translate="{{client.enabled}}"></td>
<td ng-class="{'text-muted': !client.baseUrl}"> <td ng-class="{'text-muted': !client.baseUrl}">
<a href="{{client.rootUrl}}{{client.baseUrl}}" target="_blank" data-ng-show="client.baseUrl">{{client.rootUrl}}{{client.baseUrl}}</a> <a href="{{client.rootUrl}}{{client.baseUrl}}" target="_blank" data-ng-show="client.baseUrl">{{client.rootUrl}}{{client.baseUrl}}</a>
<span data-ng-hide="client.baseUrl">{{:: 'not-defined' | translate}}</span> <span data-ng-hide="client.baseUrl">{{:: 'not-defined' | translate}}</span>
</td> </td>
<td class="kc-action-cell" kc-open="/realms/{{realm.realm}}/clients/{{client.id}}">{{:: 'edit' | translate}}</td> <td class="kc-action-cell" kc-open="/realms/{{realm.realm}}/clients/{{client.id}}">{{:: 'edit' | translate}}</td>
<td class="kc-action-cell" data-ng-click="exportClient(client)">{{:: 'export' | translate}}</td> <td class="kc-action-cell" data-ng-click="exportClient(client)">{{:: 'export' | translate}}</td>
<td class="kc-action-cell" data-ng-show="access.manageClients" data-ng-click="removeClient(client)">{{:: 'delete' | translate}}</td> <td class="kc-action-cell" data-ng-show="access.manageClients" data-ng-click="removeClient(client)">{{:: 'delete' | translate}}</td>
</tr> </tr>
<tr data-ng-show="(clients | filter:search).length == 0"> <tr data-ng-show="(clients | filter:search).length == 0">
<td class="text-muted" colspan="3" data-ng-show="search.clientId">{{:: 'no-results' | translate}}</td> <td class="text-muted" colspan="4" data-ng-show="search.clientId">{{:: 'no-results' | translate}}</td>
<td class="text-muted" colspan="3" data-ng-hide="search.clientId">{{:: 'no-clients-available' | translate}}</td> <td class="text-muted" colspan="4" data-ng-hide="search.clientId">{{:: 'no-clients-available' | translate}}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<kc-paging current-page='currentPage' number-of-pages='numberOfPages' current-page-input='currentPageInput'></kc-paging>
</div> </div>
<kc-menu></kc-menu> <kc-menu></kc-menu>

65
themes/src/main/resources/theme/base/admin/resources/partials/role-list.html
View file

@ -6,47 +6,48 @@
<li><a href="#/realms/{{realm.realm}}/default-roles">{{:: 'default-roles' | translate}}</a></li> <li><a href="#/realms/{{realm.realm}}/default-roles">{{:: 'default-roles' | translate}}</a></li>
</ul> </ul>
<table class="table table-striped table-bordered"> <table class="datatable table table-striped table-bordered dataTable no-footer">
<thead> <thead>
<tr> <tr>
<th class="kc-table-actions" colspan="5"> <th class="kc-table-actions" colspan="5">
<div class="form-inline"> <div class="form-inline">
<div class="form-group"> <div class="form-group">
<div class="input-group"> <div class="input-group">
<input type="text" placeholder="{{:: 'search.placeholder' | translate}}" data-ng-model="searchQuery" class="form-control search" onkeyup="if(event.keyCode == 13){$(this).next('I').click();}"> <input type="text" placeholder="{{:: 'search.placeholder' | translate}}" data-ng-model="searchQuery" class="form-control search" onkeyup="if (event.keyCode === 13){$(this).next('I').click(); }">
<div class="input-group-addon"> <div class="input-group-addon">
<i class="fa fa-search" type="submit"></i> <i class="fa fa-search" type="submit"></i>
</div>
</div> </div>
</div> </div>
</div>
<div class="pull-right" data-ng-show="access.manageRealm"> <div class="pull-right" data-ng-show="access.manageRealm">
<a id="createRole" class="btn btn-default" href="#/create/role/{{realm.realm}}">{{:: 'add-role' | translate}}</a> <a id="createRole" class="btn btn-default" href="#/create/role/{{realm.realm}}">{{:: 'add-role' | translate}}</a>
</div>
</div> </div>
</div> </th>
</th> </tr>
</tr> <tr data-ng-show="roles && roles.length > 0">
<tr data-ng-show="roles && roles.length > 0"> <th>{{:: 'role-name' | translate}}</th>
<th>{{:: 'role-name' | translate}}</th> <th>{{:: 'composite' | translate}}</th>
<th>{{:: 'composite' | translate}}</th> <th>{{:: 'description' | translate}}</th>
<th>{{:: 'description' | translate}}</th> <th colspan="2">{{:: 'actions' | translate}}</th>
<th colspan="2">{{:: 'actions' | translate}}</th> </tr>
</tr>
</thead> </thead>
<tbody> <tbody>
<tr ng-repeat="role in roles | orderBy:'name' | filter:{name: searchQuery}"> <tr ng-repeat="role in roles| filter:{name: searchQuery} | orderBy:'name'| startFrom:(currentPage - 1) * pageSize | limitTo:pageSize">
<td><a href="#/realms/{{realm.realm}}/roles/{{role.id}}">{{role.name}}</a></td> <td><a href="#/realms/{{realm.realm}}/roles/{{role.id}}">{{role.name}}</a></td>
<td translate="{{role.composite}}"></td> <td translate="{{role.composite}}"></td>
<td>{{role.description}}</td> <td>{{role.description}}</td>
<td class="kc-action-cell" kc-open="/realms/{{realm.realm}}/roles/{{role.id}}">{{:: 'edit' | translate}}</td> <td class="kc-action-cell" kc-open="/realms/{{realm.realm}}/roles/{{role.id}}">{{:: 'edit' | translate}}</td>
<td class="kc-action-cell" data-ng-click="removeRole(role)">{{:: 'delete' | translate}}</td> <td class="kc-action-cell" data-ng-click="removeRole(role)">{{:: 'delete' | translate}}</td>
</tr> </tr>
<tr data-ng-show="(roles | filter:{name: searchQuery}).length == 0"> <tr data-ng-show="(roles | filter:{name: searchQuery}).length == 0">
<td class="text-muted" colspan="3" data-ng-show="searchQuery">{{:: 'no-results' | translate}}</td> <td class="text-muted" colspan="4" data-ng-show="searchQuery">{{:: 'no-results' | translate}}</td>
<td class="text-muted" colspan="3" data-ng-hide="searchQuery">{{:: 'no-realm-roles-available' | translate}}</td> <td class="text-muted" colspan="4" data-ng-hide="searchQuery">{{:: 'no-realm-roles-available' | translate}}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<kc-paging current-page='currentPage' number-of-pages='numberOfPages' current-page-input='currentPageInput'></kc-paging>
</div> </div>
<kc-menu></kc-menu> <kc-menu></kc-menu>

25
themes/src/main/resources/theme/base/admin/resources/templates/kc-paging.html Normal file
View file

@ -0,0 +1,25 @@
<div ng-hide="numberOfPages < 2" class="dataTables_footer">
<div class="dataTables_paginate paging_bootstrap_input">
<ul class="pagination">
<li class="first" ng-class="{disabled: !hasPrevious()}" ng-click="firstPage()">
<span class="i fa fa-angle-double-left"></span>
</li>
<li class="prev" ng-class="{disabled: !hasPrevious()}" ng-click="previousPage()">
<span class="i fa fa-angle-left"></span>
</li>
</ul>
<div class="pagination-input">
<input ng-model="currentPageInput" kc-valid-page class="paginate_input" type="text">
<span class="paginate_of">of <b>{{numberOfPages}}</b></span>
</div>
<ul class="pagination">
<li class="next" ng-class="{disabled: !hasNext()}" ng-click="nextPage()">
<span class="i fa fa-angle-right"></span>
</li>
<li class="last" ng-class="{disabled: !hasNext()}" ng-click="lastPage()">
<span class="i fa fa-angle-double-right">
</span>
</li>
</ul>
</div>
</div>