From c4f0053dd943e5d2d0c9c870d0dd9d07e734cd9e Mon Sep 17 00:00:00 2001 From: Mohit Suman Date: Wed, 7 Sep 2016 14:54:36 +0530 Subject: [PATCH 1/3] add pagination custom css --- .../theme/keycloak/admin/resources/css/styles.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/themes/src/main/resources/theme/keycloak/admin/resources/css/styles.css b/themes/src/main/resources/theme/keycloak/admin/resources/css/styles.css index 9253c8c839..daa55f5187 100755 --- a/themes/src/main/resources/theme/keycloak/admin/resources/css/styles.css +++ b/themes/src/main/resources/theme/keycloak/admin/resources/css/styles.css @@ -379,4 +379,14 @@ h1 i { .ace_editor { height: 600px; width: 100%; +} + +.kc-pagination { + border: 1px solid #d1d1d1; + font-size: 12px; + height: 23px; + margin-right: 10px; + padding-right: 10px; + text-align: right; + width: 30px; } \ No newline at end of file From 0e33e4035f0c9a73dabbcf8d2174c9aed36a5b9f Mon Sep 17 00:00:00 2001 From: Mohit Suman Date: Wed, 7 Sep 2016 14:50:44 +0530 Subject: [PATCH 2/3] Pagination Directive for clients and roles in admin console --- .../theme/base/admin/resources/js/app.js | 41 +++++++++++++++++++ .../admin/resources/js/controllers/clients.js | 12 +++++- .../admin/resources/js/controllers/realm.js | 12 +++++- .../admin/resources/partials/client-list.html | 13 ++++-- .../admin/resources/partials/role-list.html | 13 ++++-- .../admin/resources/templates/kc-paging.html | 19 +++++++++ 6 files changed, 102 insertions(+), 8 deletions(-) create mode 100644 themes/src/main/resources/theme/base/admin/resources/templates/kc-paging.html diff --git a/themes/src/main/resources/theme/base/admin/resources/js/app.js b/themes/src/main/resources/theme/base/admin/resources/js/app.js index c3b25ecb27..eeae412e9f 100755 --- a/themes/src/main/resources/theme/base/admin/resources/js/app.js +++ b/themes/src/main/resources/theme/base/admin/resources/js/app.js @@ -2678,3 +2678,44 @@ module.directive('kcOnReadFile', function ($parse) { } }; }); + +module.controller('PagingCtrl', function ($scope) { + $scope.isLastPage = function() + { + if ($scope.currentPage === $scope.numberOfPages) { + return true; + } + return false; + }; + + $scope.isFirstPage = function() + { + if ($scope.currentPage === 1) { + return true; + } + return false; + }; +}); + +module.directive('kcPaging', function () { + return { + scope: { + currentPage: '=', + numberOfPages: '=' + }, + restrict: 'A', + replace: true, + controller: 'PagingCtrl', + templateUrl: resourceUrl + '/templates/kc-paging.html' + } +}); + +module.filter('startFrom', function () { + return function (input, start) { + if (input) { + start = +start; + return input.slice(start); + } + return []; + }; +}); \ No newline at end of file diff --git a/themes/src/main/resources/theme/base/admin/resources/js/controllers/clients.js b/themes/src/main/resources/theme/base/admin/resources/js/controllers/clients.js index 4b33b14cb6..d81882d797 100755 --- a/themes/src/main/resources/theme/base/admin/resources/js/controllers/clients.js +++ b/themes/src/main/resources/theme/base/admin/resources/js/controllers/clients.js @@ -731,9 +731,19 @@ 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.clients = clients; + $scope.currentPage = 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; + }, true); $scope.removeClient = function(client) { Dialog.confirmDelete(client.clientId, 'client', function() { diff --git a/themes/src/main/resources/theme/base/admin/resources/js/controllers/realm.js b/themes/src/main/resources/theme/base/admin/resources/js/controllers/realm.js index 1589ffdff0..a42ef3c5e4 100644 --- a/themes/src/main/resources/theme/base/admin/resources/js/controllers/realm.js +++ b/themes/src/main/resources/theme/base/admin/resources/js/controllers/realm.js @@ -1223,9 +1223,19 @@ 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.roles = roles; + $scope.currentPage = 1; + $scope.pageSize = 20; + $scope.numberOfPages = Math.ceil($scope.roles.length/$scope.pageSize); + + $scope.$watch('searchQuery', function (newVal, oldVal) { + $scope.filtered = filterFilter($scope.roles, newVal); + $scope.totalItems = $scope.filtered.length; + $scope.numberOfPages = Math.ceil($scope.totalItems/$scope.pageSize); + $scope.currentPage = 1; + }, true); $scope.removeRole = function (role) { Dialog.confirmDelete(role.name, 'role', function () { diff --git a/themes/src/main/resources/theme/base/admin/resources/partials/client-list.html b/themes/src/main/resources/theme/base/admin/resources/partials/client-list.html index 7f796e9960..50c71dcb57 100755 --- a/themes/src/main/resources/theme/base/admin/resources/partials/client-list.html +++ b/themes/src/main/resources/theme/base/admin/resources/partials/client-list.html @@ -32,8 +32,15 @@ {{:: 'actions' | translate}} + + + +
+ + + - + {{client.clientId}} @@ -45,8 +52,8 @@ {{:: 'delete' | translate}} - {{:: 'no-results' | translate}} - {{:: 'no-clients-available' | translate}} + {{:: 'no-results' | translate}} + {{:: 'no-clients-available' | translate}} diff --git a/themes/src/main/resources/theme/base/admin/resources/partials/role-list.html b/themes/src/main/resources/theme/base/admin/resources/partials/role-list.html index 8b2bd26566..ca27439622 100755 --- a/themes/src/main/resources/theme/base/admin/resources/partials/role-list.html +++ b/themes/src/main/resources/theme/base/admin/resources/partials/role-list.html @@ -33,8 +33,15 @@ {{:: 'actions' | translate}} + + + +
+ + + - + {{role.name}} {{role.description}} @@ -42,8 +49,8 @@ {{:: 'delete' | translate}} - {{:: 'no-results' | translate}} - {{:: 'no-realm-roles-available' | translate}} + {{:: 'no-results' | translate}} + {{:: 'no-realm-roles-available' | translate}} diff --git a/themes/src/main/resources/theme/base/admin/resources/templates/kc-paging.html b/themes/src/main/resources/theme/base/admin/resources/templates/kc-paging.html new file mode 100644 index 0000000000..d875c72d1c --- /dev/null +++ b/themes/src/main/resources/theme/base/admin/resources/templates/kc-paging.html @@ -0,0 +1,19 @@ +
+
    +
  • + +
    • +
  • + +
    • +
  • + of  {{numberOfPages}} +
    • +
  • + +
    • +
  • + +
    • +
+
\ No newline at end of file From 7a6324e02c55e651ea6407c09e43c84140cc45b4 Mon Sep 17 00:00:00 2001 From: Stan Silvert Date: Fri, 14 Oct 2016 08:35:46 -0400 Subject: [PATCH 3/3] KEYCLOAK-3507: Pagination for clients and roles in admin console --- .../theme/base/admin/resources/js/app.js | 65 +++++++++++---- .../admin/resources/js/controllers/clients.js | 2 + .../admin/resources/js/controllers/realm.js | 4 +- .../admin/resources/partials/client-list.html | 82 +++++++++---------- .../admin/resources/partials/role-list.html | 72 ++++++++-------- .../admin/resources/templates/kc-paging.html | 40 +++++---- .../keycloak/admin/resources/css/styles.css | 10 --- 7 files changed, 150 insertions(+), 125 deletions(-) diff --git a/themes/src/main/resources/theme/base/admin/resources/js/app.js b/themes/src/main/resources/theme/base/admin/resources/js/app.js index eeae412e9f..adb0c5ea41 100755 --- a/themes/src/main/resources/theme/base/admin/resources/js/app.js +++ b/themes/src/main/resources/theme/base/admin/resources/js/app.js @@ -2680,20 +2680,38 @@ module.directive('kcOnReadFile', function ($parse) { }); module.controller('PagingCtrl', function ($scope) { - $scope.isLastPage = function() - { - if ($scope.currentPage === $scope.numberOfPages) { - return true; - } - return false; + $scope.currentPageInput = 1; + + $scope.firstPage = function() { + if (!$scope.hasPrevious()) return; + $scope.currentPage = 1; + $scope.currentPageInput = 1; }; - - $scope.isFirstPage = function() - { - if ($scope.currentPage === 1) { - return true; - } - return false; + + $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; }; }); @@ -2701,15 +2719,34 @@ module.directive('kcPaging', function () { return { scope: { currentPage: '=', + currentPageInput: '=', numberOfPages: '=' }, - restrict: 'A', + 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) { diff --git a/themes/src/main/resources/theme/base/admin/resources/js/controllers/clients.js b/themes/src/main/resources/theme/base/admin/resources/js/controllers/clients.js index d81882d797..7d8de51ead 100755 --- a/themes/src/main/resources/theme/base/admin/resources/js/controllers/clients.js +++ b/themes/src/main/resources/theme/base/admin/resources/js/controllers/clients.js @@ -735,6 +735,7 @@ module.controller('ClientListCtrl', function($scope, realm, clients, Client, ser $scope.realm = realm; $scope.clients = clients; $scope.currentPage = 1; + $scope.currentPageInput = 1; $scope.pageSize = 20; $scope.numberOfPages = Math.ceil($scope.clients.length/$scope.pageSize); @@ -743,6 +744,7 @@ module.controller('ClientListCtrl', function($scope, realm, clients, Client, ser $scope.totalItems = $scope.filtered.length; $scope.numberOfPages = Math.ceil($scope.totalItems/$scope.pageSize); $scope.currentPage = 1; + $scope.currentPageInput = 1; }, true); $scope.removeClient = function(client) { diff --git a/themes/src/main/resources/theme/base/admin/resources/js/controllers/realm.js b/themes/src/main/resources/theme/base/admin/resources/js/controllers/realm.js index a42ef3c5e4..d7909ac509 100644 --- a/themes/src/main/resources/theme/base/admin/resources/js/controllers/realm.js +++ b/themes/src/main/resources/theme/base/admin/resources/js/controllers/realm.js @@ -1227,14 +1227,16 @@ module.controller('RoleListCtrl', function($scope, $route, Dialog, Notifications $scope.realm = realm; $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, newVal); + $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) { diff --git a/themes/src/main/resources/theme/base/admin/resources/partials/client-list.html b/themes/src/main/resources/theme/base/admin/resources/partials/client-list.html index 50c71dcb57..51aaa2009b 100755 --- a/themes/src/main/resources/theme/base/admin/resources/partials/client-list.html +++ b/themes/src/main/resources/theme/base/admin/resources/partials/client-list.html @@ -4,59 +4,53 @@ {{:: 'clients.tooltip' | translate}} - +
- - + - - - - - - - - - - - + - + + + + + + + - - - - - - - - - - - - + + + + + + + + + + + +
-
-
-
- -
- +
+
+
+
+ +
+ +
-
-
- {{:: 'create' | translate}} - {{:: 'import' | translate}} +
+ {{:: 'create' | translate}} + {{:: 'import' | translate}} +
- -
{{:: 'client-id' | translate}}{{:: 'enabled' | translate}}{{:: 'base-url' | translate}}{{:: 'actions' | translate}}
-
-
{{:: 'client-id' | translate}}{{:: 'enabled' | translate}}{{:: 'base-url' | translate}}{{:: 'actions' | translate}}
{{client.clientId}} - {{client.rootUrl}}{{client.baseUrl}} - {{:: 'not-defined' | translate}} - {{:: 'edit' | translate}}{{:: 'export' | translate}}{{:: 'delete' | translate}}
{{:: 'no-results' | translate}}{{:: 'no-clients-available' | translate}}
{{client.clientId}} + {{client.rootUrl}}{{client.baseUrl}} + {{:: 'not-defined' | translate}} + {{:: 'edit' | translate}}{{:: 'export' | translate}}{{:: 'delete' | translate}}
{{:: 'no-results' | translate}}{{:: 'no-clients-available' | translate}}
+ \ No newline at end of file diff --git a/themes/src/main/resources/theme/base/admin/resources/partials/role-list.html b/themes/src/main/resources/theme/base/admin/resources/partials/role-list.html index ca27439622..5c0d47304e 100755 --- a/themes/src/main/resources/theme/base/admin/resources/partials/role-list.html +++ b/themes/src/main/resources/theme/base/admin/resources/partials/role-list.html @@ -6,54 +6,48 @@
  • {{:: 'default-roles' | translate}}
    • - +
    - - + - - - - - - - - - - - + - + + + + + + + - - - - - - - - - - - + + + + + + + + + + +
    -
    -
    -
    - -
    - +
    +
    +
    +
    + +
    + +
    -
    -
    - {{:: 'add-role' | translate}} +
    + {{:: 'add-role' | translate}} +
    - -
    {{:: 'role-name' | translate}}{{:: 'composite' | translate}}{{:: 'description' | translate}}{{:: 'actions' | translate}}
    -
    -
    {{:: 'role-name' | translate}}{{:: 'composite' | translate}}{{:: 'description' | translate}}{{:: 'actions' | translate}}
    {{role.name}}{{role.description}}{{:: 'edit' | translate}}{{:: 'delete' | translate}}
    {{:: 'no-results' | translate}}{{:: 'no-realm-roles-available' | translate}}
    {{role.name}}{{role.description}}{{:: 'edit' | translate}}{{:: 'delete' | translate}}
    {{:: 'no-results' | translate}}{{:: 'no-realm-roles-available' | translate}}
    + \ No newline at end of file diff --git a/themes/src/main/resources/theme/base/admin/resources/templates/kc-paging.html b/themes/src/main/resources/theme/base/admin/resources/templates/kc-paging.html index d875c72d1c..653e4a58c9 100644 --- a/themes/src/main/resources/theme/base/admin/resources/templates/kc-paging.html +++ b/themes/src/main/resources/theme/base/admin/resources/templates/kc-paging.html @@ -1,19 +1,25 @@ -
    -
      -
    • - -
      • -
    • - -
      • -
    • - of  {{numberOfPages}} -
      • -
    • - -
      • -
    • - +
      +
      +
        +
      • + +
        • +
      -
      \ No newline at end of file +
      + + of {{numberOfPages}} +
      +
        + +
      • + + +
        • +
      +
      +
    \ No newline at end of file diff --git a/themes/src/main/resources/theme/keycloak/admin/resources/css/styles.css b/themes/src/main/resources/theme/keycloak/admin/resources/css/styles.css index daa55f5187..9253c8c839 100755 --- a/themes/src/main/resources/theme/keycloak/admin/resources/css/styles.css +++ b/themes/src/main/resources/theme/keycloak/admin/resources/css/styles.css @@ -379,14 +379,4 @@ h1 i { .ace_editor { height: 600px; width: 100%; -} - -.kc-pagination { - border: 1px solid #d1d1d1; - font-size: 12px; - height: 23px; - margin-right: 10px; - padding-right: 10px; - text-align: right; - width: 30px; } \ No newline at end of file